Trimming The Fat Off Bootstrap 4

Table of contents

• **Adding bootstrap to a project**
• **Trimming the fat with Sass**
• **Setting it all up**

Bootstrap is a very useful CSS framework in the sense that it makes designing a website easy by providing a lot out of the box.

It provides a lot from typography to Modal. Applying a style to your HTML is simply done by adding a bootstrap class to the element in question.

Adding bootstrap to a project

Content Delivery Network (CDN)

The easiest and quickest way to add bootstrap to a project is through a CDN. Which is basically loading bootstrap into your project using a URL that loads up a copy of the bootstrap CSS file, You can also load accompanying dependencies in the same way if you need any of them. Bootstrap provides a minified copy which reduces the number of bytes transferred over the network.

Local copy

You may also just make a copy of the bootstrap files and add it to your project. This is also a very straight forward approach.

Package Managers (NPM/Bower/Composer)

Popular package managers like NPM and Composer allow you to pull in bootstrap like any other dependency in your project. Now at this point, I should also mention that you can also have Bootstrap CSS in different formats other than plain old CSS i.e.: Sass or Less, Bootstrap has moved away from Less onto Sass. In the next section, I will explain why and how the Bootstrap source is managed using Sass and how that can help you shave some bytes off Bootstrap when you ship to production.

Trimming the fat with Sass

Sass [↗] as defined on the website is a CSS extension language, This means Sass is a superset of CSS so every CSS syntax is valid in Sass. Sass adds a host of things to CSS which makes writing and managing CSS source code a joy and it's likely for this reason the Bootstrap source is now in Sass. I should also mention that in the end your Sass source code is transpiled to plain old CSS to be used in the browser.

One of the features is the ability to split parts of your CSS files into components. Bootstrap is set up in this way, You have Bootstrap components such as modals, tables, grids all in different Sass files.

So you can import only the parts of bootstrap you need into your project leaving out parts you don't need. Thus if you have no need for modals you don't have to import it. This leaves you with a smaller bootstrap CSS file to add to your project,

Setting it all up

• Be sure to have NodeJs [↗] and NPM [↗] installed.
• Next, install Sass globally from the command line using $ npm install -g sass. You will find other ways to install Sass here [↗]
• $ npm install bootstrap will install the latest version of Bootstrap in the node_modules folder.
• You will need to create a file for your Bootstrap imports and any CSS you will like to add. It can be whatever name but should have the extension .scss eg: app.scss.
• In the scss file navigate and import all the bootstrap Sass files you will like to use. You can find the list of available and also required Bootstrap files you need to import here [↗].
• To get back a CSS file you can use in your project run the Sass compiler $ sass app.scss > app.css now you can call app.css in your project.

Pair this up with minification and GZIP over the network and you already improve the speed of your website.

Here is another article you might like 😊 Why Proof Of Work?