#Install Bootstrap
- CD into directory
- Install Bootstrap / Jquery / Popper
cd directoryname
npm i bootstrap jquery popper.js --save
##Organise files
Directory/
├── node_modules/
├── bootstrap/
├── jquery/
├── popper.js/
├── package-lock.json
On install the files are not as I would like them, and hence a little reorganising needs to take place. The aim is to reduce the amount of http requests.
Directory/
├── assets/
├── css/
├── bootstrap/
├── custom/
├── _all.sass
├── _variables.sass
├── main.sass
├── js/
├── jquery/
├── popper.js/
├── app.js
The above takes the base files and imports them into one Sass file for CSS and one JS file for JQuery and Popper. Plus any other JS can be inserted in app.js
.
###main.sass
@charset "utf-8"
@import "custom/all"
@import "bootstrap/scss/bootstrap"
This imports all the custom sass and overides before importing the root bootstrap into our newly created main.sass
file.
IMPORTANT The order in which these files are imported is very important, override variables must come before root bootstrap. I found out the hard way.
###app.js
// @codekit-prepend 'jquery/dist/jquery.js'
// @codekit-prepend 'popper.js/dist/umd/popper.js'
// @codekit-prepend '../css/bootstrap/dist/js/bootstrap.js'
$(document).ready(function(){
// Ready for action!
});
IMPORTANT: The order of the js is important. Jquery, Popper and then Bootstrap
As with our sass file, our app.js
file imports the required js
for bootstrap to work. note, this is built with codekit and uses the @codekit-prepend
to import files.
###index.html
Now we bring it all togther in out index.html
file.
<!DOCTYPE html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<link rel="stylesheet" href="assets/css/main-min.css">
</head>
<body>
<script src="assets/js/app-min.js"></script>
</body>
</html>
##Final thoughts Using this method means you do not need to import the entire Boostrap library, instead of:
@import "bootstrap/scss/bootstrap"
in our main.sass file, we could simply have:
// Custom.scss
// Option B: Include parts of Bootstrap
// Required
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
// Optional
@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/type";
@import "node_modules/bootstrap/scss/images";
@import "node_modules/bootstrap/scss/code";
@import "node_modules/bootstrap/scss/grid";
Read more about Bootstrap theming here.