Why Bootstrap is awesome and what prejudices are total nonsense


Share it: facebookTwitter | LinkedIn

Are you still loading bootstrap via CDN link?

Well, let's get rid of the most common prejudice that Bootstrap is overloaded and that there is too much unnecessary code. As long as you load the entire bootstrap CSS into your website, and possibly also via a CDN link, you will be downloading unnecessary code for sure! Are you just overwriting the Bootstrap styles with your own CSS? That makes things a little more disadvantageous to be honest.

What is the solution?

The solution is called SASS. Be honest, you've heard of SASS but haven't been able to force yourself to give it a try? If so, now is the time to take a closer look at Bootstrap in connection with Sass.

Sass Basics:https://sass-lang.com/guide

Compile bootstrap yourself and save code

Here is an example of how you can integrate Boostrap into your own SASS file and compile it. By the way, if you are not yet compiling Sass on your computer, I recommend the little tool Scout-App, for a quick start!

For the example, you should first create the folder structure below, configure your Sass compiler, and of course download the current bootstrap source code: https://getbootstrap.com/docs/4.4/getting-started/download/

Ordnerstruktur

/projektname
	/bootstrap-4.4.1/
	/scss
		/styles.scss
	/css/
		/styles.css

Integrate Bootstrap SASS

With a simple @import command you can integrate the entire bootstrap library into your own CSS. Only a single line of code is required. If you have your compiler, e.g. If you have set the Scout app correctly, you will find the complete bootstrap CSS code with all components and the typical bootstrap colors in your styles.css after compiling.

styles.scss

@import "../bootstrap-4.4.1/scss/bootstrap";

Add your own CSS classes

At this point, just a brief example of how you can easily add your own styles, which are output either before or after the bootstrap styles.

styles.scss

.style-before{
	color: blue;
}

@import "../bootstrap-4.4.1/scss/bootstrap";

.style-after{
	color: black;
}

Adjust bootstrap variables

The file "scss / _variables.scss" in the bootstrap source directory has over 1000 lines of code with setting options / variables. Colors, spacing, fonts and dynamic color or spacer arrays can be configured here. This makes Bootstrap very flexible. The variables are loaded automatically when the entire bootstrap library is integrated. In the following example I show how you can easily overwrite these variables:

styles.scss

/*
* Overwrite Bootstrap default variables
*/
$spacer: 1rem;
$primary: steelblue;
$light: #eee;
$headings-font-family: "Roboto Condensed", Arial, sans-serif;
$headings-font-weight: 700;
$headings-margin-bottom: $spacer !default;

/*
* Load entire Bootstrap library
*/
@import "../bootstrap-4.4.1/scss/bootstrap";

Load only necessary components - it's getting interesting!

So far we have only compiled Bootstrap ourselves, but have not yet achieved any real performance improvement. So let's take a closer look at how to load only the components you need to avoid unnecessary codes:

styles.scss

/*
* The first 3 files are essential!
*/
@import "../bootstrap-4.4.1/scss/functions";
@import "../bootstrap-4.4.1/scss/mixins";
@import "../bootstrap-4.4.1/scss/_variables.scss";

/*
* Here we only load those parts of Bootstrap that we really need!
*/
@import "../bootstrap-4.4.1/scss/root";
@import "../bootstrap-4.4.1/scss/reboot";
@import "../bootstrap-4.4.1/scss/type";
@import "../bootstrap-4.4.1/scss/images";
@import "../bootstrap-4.4.1/scss/grid";
@import "../bootstrap-4.4.1/scss/tables";
@import "../bootstrap-4.4.1/scss/buttons";
@import "../bootstrap-4.4.1/scss/nav";
@import "../bootstrap-4.4.1/scss/navbar";
@import "../bootstrap-4.4.1/scss/utilities";

The result is a reduced bootstrap code with a smaller file size. You can import the components as required and thus enormously improve the performance of Bootstrap.

Example: Extend breakpoints and spacers

Here is a small example of how to extend the arrays in the bootstrap variables. We create a new breakpoint and 2 more spacers. The spacer classes like "md-4, md-5" are now automatically extended by 6 and 7! The additional breakpoint can be used in the other Sass code as described here.

styles.scss

/*
* The first 3 files are essential!
*/
@import "../bootstrap-4.4.1/scss/functions";
@import "../bootstrap-4.4.1/scss/mixins";
@import "../bootstrap-4.4.1/scss/_variables.scss";

/*
* Add breakpoint
*/
$container-max-widths: (
  xxl: 2460px
) !default;

/*
* Add spacer
*/
$spacers: map-merge(
  (
    6: ($spacer * 4),
    7: ($spacer * 5)
  ),
  $spacers
);

/*
* Load entire Bootstrap library
*/
@import "../bootstrap-4.4.1/scss/bootstrap";

Now you have 2 additional spacers that you can use in all relevant classes, as well as spacers 1-5 that Bootstrap delivers by default. At this point, you should already notice that there are hundreds, if not thousands, of ways to configure Bootstrap with Sass. Just build your own Boostrap and nobody will notice that you are working with Bootstrap.

Here are a few facts and figures

Components File Size of CSS (compressed)
All 146kb
Grid 10kb
Forms 11kb
Buttons 14kb
Type 2kb

Download sample files

You can download the files here. Note that this example does not include the Bootstrap source files! If you want to use Bootstrap, you have to download it beforehand.

Finger pointing at you!

WE WANT YOU!

Your are a web design expert and you like writing articles?

JOIN US


Write comment

* These fields are required

Comments

No Comments


Share it: facebookTwitter | LinkedIn
100% anonymous web host