Hey, My name is Igor. I like developing for the web, but doing stuff manually can be a little overwhelming. One of my favorite css frameworks is Bootstrap, it doesn’t just help rapid prototyping, but can be used for production sites as well.

Many people misunderstand the purpose of a framework like this, they usually just embed it into their pages and have a fairly nice looking website, but one thing they are missing out on is the world beyond Bootstrap.

Whoa, whoa… Wait a minute, what do you mean there is a world beyond Bootstrap?

As I was saying, bootstraps main purpose is prototyping, it is meant for you to alter it to fit your needs.

But, that’s like 6000 lines of code, I don’t want to touch that

That is scary I agree, plus if they update the framework you loose your changes — not fun.

Let me introduce you to SASS

If you already know what sass is feel free to skip this part!

SASS stands for: Syntactically Awesome Style Sheets, and I couldn’t agree more with that sentence. SASS is love, SASS is life… Alright back to the point, SASS makes your CSS readable, easy to manage and structure. Feel free to go to their website and read more about SASS.

I personally like to use the SCSS version, but it is up to you to choose, however in this article I will be showing you SCSS.

How does this relate to Bootstrap?

Good question! If you take a look at the Bootstrap Sass Repository you will see how it is structured and divided into chunks. That is really good news for us, it will allow us to easily override and also extend the core without ever touching the original files — aka we can safely update if they release a bug fix or anything!

Overriding Bootstrap

This is where all the magic happens!

I have set up a simple project using Yeoman which is another great tool you should definitely check out! I used the Webapp Generator for this project.

It is pretty easy to get started but I will show you the steps anyways.

Disclaimer: I am using windows, and it is definitely a little tricky to set up all the tools we need, but there are a lot of great tutorials that will walk you throgh the setup process for the individual tools.

Alright the first step is to run

yo webapp

When prompted, I selected Bootstrap and Sass support, and after a few seconds my project was ready to be used.

bootstrap/
  app/
    images/
    scripts/
    styles/
    index.html
    …
  bower_components/
  node_modules/
  test/
  …

As you can see it created a bunch of files for us. If we now run

grunt serve

from our root directory, it should open up a browser and present us with a website like this

This is great, I won’t really change this layout in the scope of this article, I will just demonstrate how you can override some core bootstrap variables.

I like to structure my files so I will begin with creating a new directory in the styles directory — bootstrap/app/styles/bootstrap I named it bootstrap but it is up to you to decide how you name it. Naming my project bootstrap might have been a bad idea, as it has the same name as our newly created directory, but just don’t get confused by it☺

Next, I will create a _bootstrap.scss file and put the following in there

// Import The Bootstrap framework
@import “bootstrap-sass-official/assets/stylesheets/_bootstrap.scss”;

and then in the main.scss I will change a couple lines from:

// bower:scss
@import “bootstrap-sass-official/assets/stylesheets/_bootstrap.scss”;
// endbower

to

@import “bootstrap/bootstrap”;

Basically I will be using our “wrapper” to load bootstrap. That will enable me to override variables simply by defining them before the import of bootstrap. Take a look at this example in our custom _bootstrap.scss file:

$brand-success: #45860e !default;
$jumbotron-bg: #333333 !default;
$jumbotron-color: #fff !default;
$border-radius-base: 0px !default;
$border-radius-large: 0px !default;
$border-radius-small: 0px !default;

@import “bootstrap-sass-official/assets/stylesheets/_bootstrap.scss”;

results in:

Isn’t that cool? We changed how bootstrap looks without ever touching it’s core files!

Let me show you another example, let’s say I want to create a cyan button, but I want to keep all the original buttons that bootstrap provides. To do that I just need to do a couple things, define my colors (This is not necessary but it is recommended, at the end of the day, that’s why we are using sass — to easily change things later on). My new _bootstrapp.scss looks like this:

$brand-success: #45860e !default;
$jumbotron-bg: #333333 !default;
$jumbotron-color: #fff !default;
$border-radius-base: 0px !default;
$border-radius-large: 0px !default;
$border-radius-small: 0px !default;

$cyan: #12d1d1 !default;

$btn-cyan-color: #fff !default;
$btn-cyan-bg: $cyan !default;
$btn-cyan-border: darken($btn-cyan-bg, 5%) !default;

@import “bootstrap-sass-official/assets/stylesheets/_bootstrap.scss”;

.btn-cyan {
 @include button-variant($btn-cyan-color, $btn-cyan-bg, $btn-cyan-border);
}

And to use our new button I just use the classic bootstrap markup:

<a class=”btn btn-lg btn-cyan” href=”#”>A Cyan Button. Yay!</a>

And baam we got a sexy cyan button, how cool is that?

Now you might say, my _bootstrap.scss is getting messy and unreadable, and I would totally agree with you, I put everything there just to easily demonstrate the process, In a real use case scenarion I would extract everything to it’s own files, for example:

// Import our custom overrides
@import “overrides”;

// Import our custom variables
@import “variables”;

// Import The Bootstrap framework
@import “bootstrap-sass-official/assets/stylesheets/_bootstrap.scss”;

// Import our custom buttons
@import “buttons”;

• The _overrides.scss would contain variables that override the bootstrap ones
• The _variables.scss would contain my custom variables for example the $cyan variable
• The _buttons.scss would contain the button definition for our custom button

Once you got everything set up, you are only limited by your imagination! Now go make something beautiful! ☺

Thanks for reading, and I apologize for any gramatical errors, I’m pretty new to writing articles, but I hope you learned a thing or two and will start using these things in your upcoming projects!