Popular blog tags

Mobile website series: Customize Bootstrap4



Bootstrap 3

In Bootstrap 3, theming was largely driven by variable overrides in LESS, custom CSS, and a separate theme stylesheet that we included in our dist files. With some effort, one could completely redesign the look of Bootstrap 3 without touching the core files. Bootstrap 4 provides a familiar, but slightly different approach.

Bootstrap 3 custom build generator / download

Bootstrap 4

In Bootstrap 4, theming is accomplished by Sass variables, Sass maps, and custom CSS. There’s no more dedicated theme stylesheet; instead, you can enable the built-in theme to add gradients, shadows, and more.

There will not be a customizer for Bootstrap 4. This means that you'll need to set up build tools for yourself.

Bootstrap 4 custom build generator / download

https://getbootstrap.com/docs/4.0/customize/ still unavailable

online BootStrap4 Customize and download(Bootstrap 4 SASS to CSS)



What is SASS?

SASS (Syntactically Awesome Stylesheets) is a CSS pre-processor that lets you use variables, mathematical operations, mixins, loops, functions, imports, and other interesting functionalities that make writing CSS much more powerful. In some ways, you may think of SASS as a style sheet extension language because it extends the standard CSS characteristics by introducing the benefits of a basic programming language. So SASS will compile your code and generate the CSS output a browser can understand.

If you know SASS, you can customize Bootstrap 4

If you are familiar with Bootstrap, knowing SASS will give you the ability to change this web framework by simply customizing its SASS code.

Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new $enable-* Sass variables. Override a variable’s value and recompile with the included Gruntfile as needed.




Customizing Bootstrap 4

This is my workflow (in NodeJS)

Step 1:Create a new project with npm init

├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss


├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

Whenever possible, avoid modifying Bootstrap’s core files. For Sass, that means creating your own stylesheet that imports Bootstrap so you can modify and extend it. 

Step 2:Install Bootstrap with npm install bootstrap

Download the latest release:https://github.com/twbs/bootstrap/archive/v5.0.0-alpha2.zip

Step 3:Importing

In your custom.scss, you’ll import Bootstrap’s source Sass files. You can pick the parts you need.With that setup in place, you can begin to modify any of the Sass variables and maps in your custom.scss. You can also start to add parts of Bootstrap under the // Optional section as needed.

// 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";

Step 4:Install build tools.

To make this easy and only need to use one command, we'll use scss-powertools (I am the author of it). If you don't want to use it, you have to set up compiling, prefixing, minifying (and linting) yourself. Run: npm install scss-powertools --save-dev
Create the SCSS file in a scss folder (in the root of your project), like scss/name.scss
In the SCSS file import Bootstrap with @import "bootstrap/scss/bootstrap"; or import the individual components as you need them
Add a new script to package.json: "build": "scss-powertools scss/name.scss output/compiled.css"
Run npm run build, you will find your compiled CSS in output/compiled.css (or whatever you have specified as an option in the build command)