Import Bootstrap Webpack example to start off
This commit is contained in:
parent
e8cc242408
commit
36c72b4ba1
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
node_modules/
|
||||
dist/
|
||||
|
||||
19
README.md
19
README.md
@ -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.
|
||||
|
||||
|
||||
4487
package-lock.json
generated
Normal file
4487
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
33
package.json
Normal file
33
package.json
Normal file
@ -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"
|
||||
}
|
||||
}
|
||||
71
src/index.html
Normal file
71
src/index.html
Normal file
@ -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>
|
||||
11
src/js/main.js
Normal file
11
src/js/main.js
Normal file
@ -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)
|
||||
})
|
||||
22
src/scss/_icon-list.scss
Normal file
22
src/scss/_icon-list.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
93
src/scss/styles.scss
Normal file
93
src/scss/styles.scss
Normal file
@ -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;
|
||||
}
|
||||
54
webpack.config.js
Normal file
54
webpack.config.js
Normal file
@ -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'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user