@@ -0,0 +1,3 @@ | |||
node_modules/ | |||
dist/ | |||
@@ -1,3 +1,20 @@ | |||
# cv | |||
Dejvino's Curriculum Vitae | |||
Dejvino's Curriculum Vitae | |||
## Build | |||
``` | |||
npm install | |||
# Development - served on http://localhost:8080/ | |||
npm run start | |||
# Production - output in ./dist/ | |||
npm run build | |||
``` | |||
## Info | |||
Uses Bootstrap and Webpack to compile a static HTML/CSS/JS web page that can be easily served from any webhosting. | |||
@@ -0,0 +1,33 @@ | |||
{ | |||
"name": "webpack", | |||
"description": "Include Bootstrap's source Sass and individual JavaScript plugins with Webpack.", | |||
"version": "0.0.0", | |||
"private": true, | |||
"repository": "twbs/examples", | |||
"license": "MIT", | |||
"stackblitz": { | |||
"startCommand": "npm start" | |||
}, | |||
"scripts": { | |||
"start": "webpack serve", | |||
"build": "webpack build --mode=production", | |||
"test": "npm run build" | |||
}, | |||
"dependencies": { | |||
"@popperjs/core": "^2.11.7", | |||
"bootstrap": "^5.2.3", | |||
"lodash": "^4.17.21" | |||
}, | |||
"devDependencies": { | |||
"autoprefixer": "^10.4.14", | |||
"css-loader": "^6.7.3", | |||
"html-webpack-plugin": "^5.5.1", | |||
"postcss-loader": "^7.3.0", | |||
"sass": "^1.62.1", | |||
"sass-loader": "^13.2.2", | |||
"style-loader": "^3.3.2", | |||
"webpack": "^5.83.1", | |||
"webpack-cli": "^5.1.1", | |||
"webpack-dev-server": "^4.13.3" | |||
} | |||
} |
@@ -0,0 +1,71 @@ | |||
<!doctype html> | |||
<html lang="en"> | |||
<head> | |||
<meta charset="utf-8"> | |||
<meta name="viewport" content="width=device-width, initial-scale=1"> | |||
<title>Bootstrap w/ Webpack</title> | |||
</head> | |||
<body> | |||
<div class="container py-4 px-3 mx-auto"> | |||
<header class="d-flex justify-content-between align-items-md-center pb-3 mb-5 border-bottom"> | |||
<h1 class="h4"> | |||
<a href="/" class="d-flex align-items-center text-dark text-decoration-none"> | |||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-bootstrap-fill d-inline-block me-2" viewBox="0 0 16 16"> | |||
<path d="M6.375 7.125V4.658h1.78c.973 0 1.542.457 1.542 1.237 0 .802-.604 1.23-1.764 1.23H6.375zm0 3.762h1.898c1.184 0 1.81-.48 1.81-1.377 0-.885-.65-1.348-1.886-1.348H6.375v2.725z"/> | |||
<path d="M4.002 0a4 4 0 0 0-4 4v8a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4V4a4 4 0 0 0-4-4h-8zm1.06 12V3.545h3.399c1.587 0 2.543.809 2.543 2.11 0 .884-.65 1.675-1.483 1.816v.1c1.143.117 1.904.931 1.904 2.033 0 1.488-1.084 2.396-2.888 2.396H5.062z"/> | |||
</svg> | |||
<span>Webpack</span> | |||
</a> | |||
</h1> | |||
<a href="https://github.com/twbs/examples/tree/main/webpack/" target="_blank" rel="noopener">View on GitHub</a> | |||
</header> | |||
<h1>Build Bootstrap with Webpack</h1> | |||
<div class="col-lg-8 px-0"> | |||
<p class="fs-4">You've successfully loaded the Bootstrap + Webpack example! It's loaded up with <a href="https://getbootstrap.com/">Bootstrap 5</a> and uses Webpack to compile and bundle our Sass and JavaScript. It also includes Autoprefixer.</p> | |||
<p>If this button appears blue and the link appears purple, you've done it!</p> | |||
</div> | |||
<button type="button" class="btn btn-primary me-3" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample">Toggle offcanvas</button> | |||
<a id="popoverButton" class="text-success" href="#" role="button" data-bs-toggle="popover" title="Custom popover" data-bs-content="This is a Bootstrap popover.">Example popover</a> | |||
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel"> | |||
<div class="offcanvas-header"> | |||
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5> | |||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> | |||
</div> | |||
<div class="offcanvas-body"> | |||
<div> | |||
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc. | |||
</div> | |||
<div class="dropdown mt-3"> | |||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown"> | |||
Dropdown button | |||
</button> | |||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> | |||
<li><a class="dropdown-item" href="#">Action</a></li> | |||
<li><a class="dropdown-item" href="#">Another action</a></li> | |||
<li><a class="dropdown-item" href="#">Something else here</a></li> | |||
</ul> | |||
</div> | |||
</div> | |||
</div> | |||
<hr class="col-1 my-5 mx-0"> | |||
<h2>Guides</h2> | |||
<p>Read more detailed instructions and documentation on using or contributing to Bootstrap.</p> | |||
<ul class="icon-list"> | |||
<li><a href="https://getbootstrap.com/docs/5.2/getting-started/introduction/">Bootstrap quick start guide</a></li> | |||
<li><a href="https://getbootstrap.com/docs/5.2/getting-started/webpack/">Bootstrap Webpack guide</a></li> | |||
<li><a href="https://getbootstrap.com/docs/5.2/getting-started/parcel/">Bootstrap Parcel guide</a></li> | |||
<li><a href="https://getbootstrap.com/docs/5.2/getting-started/vite/">Bootstrap Vite guide</a></li> | |||
<li><a href="https://getbootstrap.com/docs/5.2/getting-started/build-tools/">Contributing to Bootstrap</a></li> | |||
</ul> | |||
<hr class="mt-5 mb-4"> | |||
<p class="text-muted">Created and open sourced by the Bootstrap team. Licensed MIT.</p> | |||
</div> | |||
</body> | |||
</html> |
@@ -0,0 +1,11 @@ | |||
// Import our custom CSS | |||
import '../scss/styles.scss'; | |||
// Import only the Bootstrap components we need | |||
import { Popover } from 'bootstrap'; | |||
// Create an example popover | |||
document.querySelectorAll('[data-bs-toggle="popover"]') | |||
.forEach(popover => { | |||
new Popover(popover) | |||
}) |
@@ -0,0 +1,22 @@ | |||
// Example of a custom component | |||
.icon-list { | |||
padding-left: 0; | |||
list-style: none; | |||
li { | |||
display: flex; | |||
align-items: flex-start; | |||
margin-bottom: .25rem; | |||
&::before { | |||
display: block; | |||
flex-shrink: 0; | |||
width: 1.5em; | |||
height: 1.5em; | |||
margin-right: .5rem; | |||
content: ""; | |||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23212529' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z'/%3E%3C/svg%3E") no-repeat center center / 100% auto; | |||
} | |||
} | |||
} |
@@ -0,0 +1,93 @@ | |||
// Override Bootstrap's Sass default variables | |||
// | |||
// Nearly all variables in Bootstrap are written with the `!default` flag. | |||
// This allows you to override the default values of those variables before | |||
// you import Bootstrap's source Sass files. | |||
// | |||
// Overriding the default variable values is the best way to customize your | |||
// CSS without writing _new_ styles. For example, change you can either change | |||
// `$body-color` or write more CSS that override's Bootstrap's CSS like so: | |||
// `body { color: red; }`. | |||
// | |||
// Bring in Bootstrap | |||
// | |||
// Option 1 | |||
// | |||
// Import all of Bootstrap's CSS | |||
// @import "bootstrap/scss/bootstrap"; | |||
// Option 2 | |||
// | |||
// Place variable overrides first, then import just the styles you need. Note that some stylesheets are required no matter what. | |||
// Toggle global options | |||
$enable-gradients: true; | |||
$enable-shadows: true; | |||
$offcanvas-box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175); | |||
// Customize some defaults | |||
$body-color: #333; | |||
$body-bg: #fff; | |||
$border-radius: .4rem; | |||
$success: #7952b3; | |||
// Required | |||
@import "bootstrap/scss/functions"; | |||
@import "bootstrap/scss/variables"; | |||
@import "bootstrap/scss/maps"; | |||
@import "bootstrap/scss/mixins"; | |||
@import "bootstrap/scss/utilities"; | |||
@import "bootstrap/scss/root"; | |||
@import "bootstrap/scss/reboot"; | |||
@import "bootstrap/scss/type"; | |||
// @import "bootstrap/scss/images"; | |||
@import "bootstrap/scss/containers"; | |||
@import "bootstrap/scss/grid"; | |||
// @import "bootstrap/scss/tables"; | |||
// @import "bootstrap/scss/forms"; | |||
@import "bootstrap/scss/buttons"; | |||
@import "bootstrap/scss/transitions"; | |||
@import "bootstrap/scss/dropdown"; | |||
// @import "bootstrap/scss/button-group"; | |||
// @import "bootstrap/scss/nav"; | |||
// @import "bootstrap/scss/navbar"; // Requires nav | |||
// @import "bootstrap/scss/card"; | |||
// @import "bootstrap/scss/breadcrumb"; | |||
// @import "bootstrap/scss/accordion"; | |||
// @import "bootstrap/scss/pagination"; | |||
// @import "bootstrap/scss/badge"; | |||
// @import "bootstrap/scss/alert"; | |||
// @import "bootstrap/scss/progress"; | |||
// @import "bootstrap/scss/list-group"; | |||
@import "bootstrap/scss/close"; | |||
// @import "bootstrap/scss/toasts"; | |||
@import "bootstrap/scss/modal"; // Requires transitions | |||
// @import "bootstrap/scss/tooltip"; | |||
@import "bootstrap/scss/popover"; | |||
// @import "bootstrap/scss/carousel"; | |||
// @import "bootstrap/scss/spinners"; | |||
@import "bootstrap/scss/offcanvas"; // Requires transitions | |||
// @import "bootstrap/scss/placeholders"; | |||
// Helpers | |||
// @import "bootstrap/scss/helpers"; | |||
// Utilities | |||
@import "bootstrap/scss/utilities/api"; | |||
// | |||
// Custom styles | |||
// | |||
@import "icon-list"; | |||
body { | |||
padding: 1.5rem; | |||
} |
@@ -0,0 +1,54 @@ | |||
'use strict' | |||
const path = require('path') | |||
const autoprefixer = require('autoprefixer') | |||
const HtmlWebpackPlugin = require('html-webpack-plugin') | |||
module.exports = { | |||
mode: 'development', | |||
entry: './src/js/main.js', | |||
output: { | |||
filename: 'main.js', | |||
path: path.resolve(__dirname, 'dist'), | |||
}, | |||
devServer:{ | |||
static: path.resolve(__dirname, 'dist'), | |||
port: 8080, | |||
hot: true | |||
}, | |||
plugins: [ | |||
new HtmlWebpackPlugin({ template: './src/index.html' }) | |||
], | |||
module: { | |||
rules: [ | |||
{ | |||
test: /\.(scss)$/, | |||
use: [ | |||
{ | |||
// Adds CSS to the DOM by injecting a `<style>` tag | |||
loader: 'style-loader' | |||
}, | |||
{ | |||
// Interprets `@import` and `url()` like `import/require()` and will resolve them | |||
loader: 'css-loader' | |||
}, | |||
{ | |||
// Loader for webpack to process CSS with PostCSS | |||
loader: 'postcss-loader', | |||
options: { | |||
postcssOptions: { | |||
plugins: () => [ | |||
autoprefixer | |||
] | |||
} | |||
} | |||
}, | |||
{ | |||
// Loads a SASS/SCSS file and compiles it to CSS | |||
loader: 'sass-loader' | |||
} | |||
] | |||
} | |||
] | |||
} | |||
} |