Import Bootstrap Webpack example to start off

This commit is contained in:
Dejvino 2023-05-23 09:11:23 +02:00
parent e8cc242408
commit 36c72b4ba1
9 changed files with 4792 additions and 1 deletions

3
.gitignore vendored Normal file
View File

@ -0,0 +1,3 @@
node_modules/
dist/

View File

@ -1,3 +1,20 @@
# cv
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

File diff suppressed because it is too large Load Diff

33
package.json Normal file
View 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
View 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
View 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
View 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
View 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
View 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'
}
]
}
]
}
}