HTML & CSS
Article
By Reggie Dawson

Bootstrap Sass Installation and Customization

By Reggie Dawson
Help us help you! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

Bootstrap is a popular, open source framework. Complete with pre-built components it allows web designers of all skill levels to quickly build a site.

The only drawback I can find to Bootstrap is that it is built on Less. Less is a CSS preprocessor, and although I could learn Less, I prefer Sass. Normally the fact that it is based on Less would exclude me as a user of Bootstrap, as I do no write plain CSS anymore. Fortunately Bootstrap now comes with a official Sass port of the framework, bootstrap-sass. If you are not familiar with Bootstrap implementing the Sass version can be a little tricky. In this article I will show you how to configure and customize Bootstrap with Sass.

Installation

There are multiple ways to obtain and install bootstrap-sass

Download

You can download bootstrap-sass from the Bootstrap download page. Once you have it downloaded extract the contents of the file to the folder you are going to create your project in.

Compass

If you are using Compass then you’ll have Ruby installed. With Ruby installed we can use gems, in this case the bootstrap-sass gem. To install:

gem install bootstrap-sass

If you have an existing Compass project and want to add bootstrap-sass, run this command:

compass install bootstrap -r bootstrap-sass

If you want to start a new Compass project with bootstrap-sass use:

compass create my-new-project -r bootstrap-sass --using bootstrap

Bower

We can also install it with the package manager Bower. To me this option is the best as the other options install a lot of ‘fluff’ that will confuse someone not familiar with Bootstrap. To install with Bower make sure you are in the folder where you want to create your project and run:

bower install bootstrap-sass

Configuration

Once we have installed our desired version of bootstrap-sass we need to configure our project. The type of install we performed will determine where the files we need are located.

Download

The download includes a lot of folders that we will not need if we aren’t using Rails. The only folder we need is the assets folder. We can copy the contents of this folder to the root of our project or use it as is. If you intend to use Javascript components you will have to manually download jQuery.

Compass

Using the Compass version creates a styles.scss and _bootstrap-variables.scss file. Folders for fonts, javascript, sass, and stylesheets are created. The important thing to note is that styles.scss imports Bootstrap as a whole, there is no way to pick and choose what Bootstrap components you want to use. You will also have to download jQuery.

Bower

An install from Bower includes everything you need for Bootstrap, even jQuery. All components installed are located in the bower_components directory.

--ADVERTISEMENT--

Setup

Once we have Bootstrap installed we need to setup our project to use it. The first thing we want to do is create folders for sass and stylesheets (the Compass setup has already created these). The sass folder will hold our scss files while stylesheets will be where compiled css will be stored. After that create a file named app.scss inside the sass folder. If we are using Compass this file has already been created as styles.scss

The app.scss file (or styles.scss in Compass) is used to import bootstrap components. For example:

Download

@import "bootstrap-sass-3.3.4/assets/stylesheets/bootstrap";

Compass

@import "bootstrap";

Bower

@import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap";

The next thing we want to do is navigate to the Bootstrap folder and find the stylesheets folder. Inside of stylesheets there is a bootstrap folder. Copy the _variables.scss file to your sass folder. Rename the file to _customVariables.scss. Add an import statement for _customVariables.scss to app.scss. Make sure to import _customVariables.scss first for reasons I will explain in a moment.

If you are using Compass you can skip this step as the _bootstrap-variables file serves the same purpose. The file has already been imported into styles.scss for you. If you are using Compass with Bower it is advisable to import bootstrap-compass.scss.

The last import is an optional _custom.scss file. Many people will include custom css rules directly after their import statements or in their app.scss file, but I prefer to separate any custom rules into their own partial. At any rate our app.scss should have three import statements now (or four if using Compass).

@import "customVariables";
@import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap";
@import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap-compass";
@import "custom";

Notice we import our _customVariables.scss file first. The reason being is all of Bootstrap’s variables are set to default! values,so we need to override these values by importing our variables first.

Customize

When we edit variables it is advisable to make a copy of the original and change the copy. After copying, comment out the original variable. That way we can go back to what it was previously set to in case we don’t like the result. For example lets say we wanted to change the base font size to 20px. First we will look in our _customVariable.scss file. The variables are broken down by section, we are looking for the Typography section. There we want the $font-size-base:14px !default; variable. Copy and paste and comment out the original. After that it is as simple as changing the value to 20px.

//$font-size-base:14px !default;
$font-size-base:20px !default;

As you can see I have commented out the original variable and changed the copy.

When trying to customize Bootstrap bear in mind there are a lot of variables to deal with. When looking for a variable to change it is advisable to make full use of your text editors search feature. It is also a good idea to look over the _customVariables.scss file and get familiar with the variables present.

Another effective method for finding what variables you need to change is to look at the raw scss files that make up Bootstrap before they are compiled. From there we can see what variables are used in that module. For example lets say I am not happy with the color of the .navbar-default element. Instead of me trying to figure out what variable I need to change I can look inside of the _navbar.scss file. I scroll down (or use my search function) to find a reference to a color variable.

// Default navbar
.navbar-default {
    background-color: $navbar-default-bg;
    border-color: $navbar-default-border;

.navbar-brand {
    color: $navbar-default-brand-color;
    &:hover,
    &:focus {
    color: $navbar-default-brand-hover-color;
    background-color: $navbar-default-brand-hover-bg;
    }
}

From looking at this rule I determine the variable I need to change is $navbar-default-bg. I would then go into my _customVariables.scss and copy/comment out original variable and create my own.

When using bootstrap-sass you also have the advantage of being able to use and look at the mixins included with Bootstrap. My first article for Sitepoint was about 5 useful mixins in Bootstrap, so it’s no secret I am a fan of the Bootstrap mixins. Not only will they help with understanding how Bootstrap fits together, they may actually help you build your site. For example looking at @mixin make-row:

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

From this mixin we can see what variables affect our row. We now know we can alter the $grid-gutter-width to make changes to the margins of a row. Also we see that the clearfix mixin has been included. We can also look that over to see what that affects.

Conclusion

Using Bootstrap can be complicated especially for someone that is not familiar with the framework. With the methods I demonstrated you should be able to get Bootstrap setup with Sass and customize the framework with ease. Finding the variables you need to change should be more manageable now that you know what to look for. Just remember your text editors search functions are your friend, and when in doubt looking at the mixins can help.

Login or Create Account to Comment
Login Create Account
Recommended
Sponsors
Get the most important and interesting stories in tech. Straight to your inbox, daily.Is it good?