2015 Jun 29

If there is one thing developers from all industries can agree on it's that efficiency is key. Although there are many components that need to work together to make a developer efficient, I believe the one component we have the most control over is the tools we make use of each day.

For a long time developers have looked to Bootstrap as a way to quickly and effectively build a website from the ground up. Bootstrap has done a great job in providing an effective front-end framework, but as a web developer passionate about front end technologies I find it lacks in efficiency when trying to develop highly customized designs. Enter Bourbon:

 “a simple and lightweight mixin library for Sass”

If you’re like me, you probably already ditched vanilla CSS in favor of a preprocessor like Sass or Less long ago. Bourbon integrates seamlessly with the Sass preprocessor language to provide you with mixins that accomplish many stylesheet-based tasks. Bourbon is separated into four distinct sections: Bourbon, Neat, Bitters, and Refills. Each of these sections are designed to work together to give you the most complete set of tools to build your front-end designs.

Bourbon

Bourbon at its core is a set of mixins which allow you to easily include CSS attributes. Below are a few code examples using the base Bourbon library.


  @include linear-gradient(red, blue);
  
  /*Converts px value to em*/
  font-size: em(15);

  /*Values: Size, Color, Direction*/
  @include triangle (20px, red, up-left);

Neat

Neat is where I believe Bourbon shines the most. Neat is: 

“a lightweight semantic grid framework for Sass and Bourbon” 

Throughout all my time building grid layouts I have always been opposed to defining the grid through markup where possible. I try to develop with the mindset that all visuals should be defined through stylesheets. Even though Bootstrap is defined through stylesheets, they are not directly exposed to the developer. Instead of forcing you to muck up your html with classes to define your grid structure, Neat gives you complete control directly from your Sass declarations. In Bootstrap, in order to properly create a two column structure you would need to write your markup something like this:

<section class="row">
<aside class="col-md-4"></aside>
<article class="col-md-8"></article>
</section>

In order to change the layout at a larger breakpoint yet another class would need to be added to each column. After a while these declarations get tiring and are initially confusing. With Neat the same result can be accomplished much more easily and provides far more flexibility:

Markup

<section>
<aside></aside>
<article></article>
</section>

Styles


  section{
    @include outer-container(1200px);
    aside{
      @include span-columns(4);
    }
    article{
      @include span-columns(8);
    }
  }

I find this method far cleaner and the flexibility it grants me as a developer is invaluable. Another plus side to this grid framework is that you’re no longer limited to the default 12 column grid. If the columns are defined as I have shown above the mixin will automatically assume you are using a 12 column grid however this can be changed by declaring your columns like so:


  @include span-columns(5 of 9);

The above code snippet would calculate the width of the column based on the fraction you pass to the mixin, 5/9 in this case. Neat also provides many variables for defining values such as the gutter width, or the default grid column count. Neat allows you to do everything the Bootstrap grid framework can and more in a far more intuitive manner.

Bitters and Refills

Bitters and Refills are Bourbon's way of answering to the needs of rapid prototyping, providing for a quick initial setup of your site. Installing Bitters will provide you with a base project structure for your Sass along with default variables and element styles while maintaining full customizability.

Refills provide a library of component classes to quickly add pre-designed elements. Using Refills in conjunction with bitters will give you the power to have a completed website look/feel without the hours spent developing out a fully fleshed design.

Bourbon is the answer

Even though I am still early in my career, I have fought many hours to build out customized designs using grid frameworks and CSS libraries like Bootstrap. I wanted to find something that was intuitive with my way of developing front-end designs, and provided the modular elements that I came to love with Bootstrap.

Bourbon does this with flying colors. Bourbon makes the most out of the Sass preprocessor and allows me to do what I do best. I believe Bourbon is the answer which solves the many efficiency problems that plague front-end frameworks and encourage anyone as passionate as I am about front-end technologies to check it out for themselves at bourbon.io.