Bootstrap contains many useful components and styles that makes web development faster through reusability, but do you really need everything in the library when importing it? Chances are you do not and below we will walk through on how to cut down on these imports to load what you need for faster site performance.
The Motivation
This week at work I was implementing a flex layout for an application and wanted to use Bootstrap to help due to having all the main classes written already. While cleaning up some code I noticed that Bootstrap has an entire Sass class just for their grid layout containing only the minimum amount styles needed to make it functional. This led me to notice the flex layout styles are all contained in a handy _utility.scss but there was no slimmed down package for it like the grid. Unfortunately this file also contains many other utilities not needed to implement the layout and begged the question of how to cut down to the bare minimum of imports.
Getting Started
Bootstrap provides the base Sass files that are eventually compiled into one CSS sheet that is distributed via a CDN. They separated different regions of layout code from each other making it possible to only import what is needed. In order to cut down on the size of the styles used we must compile the Sass ourselves and only take what we need for our site. This means if you want to cut down the styles you must manually process the Sass somewhere in your build process.
This approach takes the programmatic approach to cutting down on imports. You can manually edit the CSS file and remove what you do not want and distribute that. That is not recommended if you want to maintain and make changes to styles.
For this example we will assume that npm (or yarn) is available for use on your workspace.
We must first install our Sass processor which is key for generating our own style sheet with the smaller style sheet. Run the following command to install the Sass preprocessor:
npm install -g sass
Let’s also install Bootstrap so we have access to the actual Sass files Twitter uses to generate their styles:
npm install bootstrap
Now we must create a Sass file which will contain our minimal amount of imports from Bootstrap. Create a new Sass file (Ex: styles.scss) and open that in a text editor. In this file we can now pick and choose what styles we need for our site.
Minimally Viable Styles
For a hint on how to import the files we can look at the main bootstrap.scss file and see the order of how to import the files. At the top there are three imports:
@import "functions";
@import "variables";
@import "mixins";
These must be imported to use the rest of Bootstrap as they contain the core pieces Sass will use to generate files just like referencing imports in a standard programming language. Make sure to keep the order of imports given or you will have errors on processing. This is due to mixins and variables having a dependency on all imports before them. They will not be able to be processed if they are missing their references.
In your styles.scss you can import the above with the following code:
@import '../../node_modules/bootstrap/scss/functions';
@import '../../node_modules/bootstrap/scss/variables';
@import '../../node_modules/bootstrap/scss/mixins';
Your path to your node modules may be different than mine. Make sure to account for this by specifying the correct path.
Now that we have the minimum amount of imports we can continue to picked out the styles we need.
Pick and Choose
Now we just need to pick out the styles we would like to use on our site and we should be good to go! To finish off the flex layout we just need to import 3 more Sass classes and we should have a minimally viable style sheet for our site. The final classes we need are below:
@import '../../node_modules/bootstrap/scss/utility/display' // Provides display: flex;
@import '../../node_modules/bootstrap/scss/utility/spacing' // Provides padding and margin
@import '../../node_modules/bootstrap/scss/utility/flex' // Provides all flex styles
This was determined from looking at the _utility.scss file and inspecting each import for relevant styles needed. The essential ones are listed above (though spacing is optional, but highly useful).
We can now target our styles.scss file with our Sass processor and get out all the styles we need for the site. The benefit to this is any styles that we want to write in addition can go right into this file also and be processed, centralizing all your styles for you.
The Finale
By doing this we have significantly cut down on the styles the user must download to have the site function resulting in faster loads and a smaller payload over the wire. bootstrap.css come in at 180 KB whereas our slimmed down version comes in at 33KB, a reduction of 82%! In addition, most of this file was also taken up by the optional spacing import. If you remove that you get file for 14.3KB and a reduction of 91%! That is great space saving and if you do not use all of bootstrap then it is definitely worth cutting out pieces you do not need. Now as your site evolves you have a centralized point in styles.scss where you can easily add and compile more bootstrap as needed keeping the styles as lean as possible.
