Beating the bloat – using Bootstrap and Sass

One of the greatest benefits of Sass is its modularity. Imports and mixins let us organise and reuse the declarations we need in a project without unnecessary duplication. This is especially useful when it comes to frameworks like Bootstrap, which, owing to their sprawling capability, are prone to bloat and are often brimming with rules we only use a fraction of. To make it worse we then create another custom stylesheet to override the rules in the framework’s.

(That said, if we’re serving up the Bootstrap CSS via a CDN chances are our visitor has already been to a site that hosted their Bootstrap CSS on a CDN so may have it cached.)

Downloading Sass for Bootstrap

A download of Bootstrap comes with support for the other CSS pre-processor, LESS, however a Sass port is available on GitHub. We can also use Bower to set everything up for us. In Terminal navigate to the folder we want to use as the starting point of your project using the cd command (assuming we have a subfolder called bootstrap-sass inside a Sites folder) :

cd ~/Sites/bootstrap-sass

Alternatively, we can type cd and drag the folder from Finder into Terminal.

Now type:

bower install bootstrap-sass

Back in Finder we can navigate to the the main Bootstrap SCSS file:
Bootstrap SCSS

This file looks like this:

Bootstrap SCSS

Similar to the regular CSS @import rule Sass imports a number of distinct .scss files which mostly contain rules relating to particular Bootstrap features and components (these are called partials):

Scss Files

With Sass imports the partials compile into a single CSS file rather than just referencing other files. This cuts down on HTTP requests and lets us apply mini-fication to the the file too.

Removing cruft

Don’t need the breadcrumbs, jumbotron or any of the components? Just comment them out in the main _bootstrap.scss file:

Commented out Bootstrap Components

Now already we have a leaner Bootstrap CSS file.

Compiling requires we have Sass installed. Just add a watch to _bootstrap.css. Here, I have it compiling to a folder above it (hence the ../ ):

sass --watch _bootstrap.scss:../bootstrap.css

When we compile, since we commented them out, none of the Components will appear in our stylesheet.

Variables

As well as the partials we also import ‘Core variables and mixins’:

Bootstrap SCSS

With variables we can modify the default values for Bootstrap styling. For instance, colours and font values can be changed here to make our site look less, you know, Bootstrappy:

Bootstrap Sass Variables

Mixins

The mixins file (_mixins.scss) contains a number of imports allowing us to use pre-baked declarations to create our own rules.

Sass Mixins file

This means that instead of being stuck with divs with awkward class names like <div class=”row”> we can just apply those declarations to our own elements.

Say, instead of a div with a class of row we wanted the row declarations to be applied to section elements. We can open up the _grid.scss file and hunt down the make row mixin which looks like this:

@mixin make-row($gutter: $grid-gutter-width) {
 margin-left: ($gutter / -2);
 margin-right: ($gutter / -2);
 @include clearfix;
}

Now in a custom.scss we can add:

section {
 @include make-row;
}

In the compiled custom.css this applies the row declarations to section elements (including a clearfix):

section {
 margin-left: -15px;
 margin-right: -15px; }
 section:before, section:after {
 content: " ";
 display: table; }
 section:after {
 clear: both; }

 

If we wanted to change the gutter value from the 30px default just add a value in parentheses where the $gutter value goes:

section {
 @include make-row(20);
}

which compiles as:

section {
 margin-left: -10;
 margin-right: -10; }
 section:before, section:after {
 content: " ";
 display: table; }
 section:after {
 clear: both; }

Conclusion

Bootstrap, despite its detractors isn’t going anywhere soon.

Two criticisms are that it’s bloated and designs tend to look uniform. To beat the bloat as well as making customisation even easier it’s best to look at using a pre-processor like Sass. This way you use only the parts you need and can change the parts you use rather than simply creating another large CSS file to override the defaults.

 

Leave a Reply

Your email address will not be published. Required fields are marked *