Using Bourbon, Neat, Bitters & Refills

So why am I contemplating using Thoughtbot products when Bootstrap is so popular and much widely used in the web community?

  • Bourbon – “A simple and lightweight mixin library for Sass.”
  • Neat – “A lightweight semantic grid framework for Sass and Bourbon.”
  • Bitters – “Scaffold styles, variables and structure for Bourbon projects.”
  • Refills – “…prepackaged patterns and components, built on top of Bourbon, Bitters, and Neat.”

The idea of using clean and semantic markup that is based entirely on Sass mixins was pretty much the key factor which attracted me to try out Bourbon, Neat, Bitters and Refills.

But don’t get me wrong, I’m not about to bash Bootstrap as I enjoy using it to flesh out projects that require quick turn-around times and I’ve also written a previous post on how to use semantic classes in Bootstrap.

As one of the co-creator’s of Neat, Reda Lemeden writes in his post Introducing Bourbon Neat, a Sass-based responsive grid framework, he states that:

We built Neat with the aim of promoting clean and semantic markup; it relies entirely on Sass mixins and does not pollute the HTML with presentation classes and extra wrapping divs. It is less explicit—as in requires fewer mixins—than most other Sass-based frameworks and comes with built-in table-cell layout support.

The main motivation behind Neat is allowing anyone to build fluid, entirely semantic grid layouts without having to wade through hundreds of lines of documentation. We also believe that giving designers the ability to override the default behavior without hassle is key.

For the simple fact that it’s lightweight in size and is based on Sass mixins was enough for me to experiment with this framework. It also means none of the bloated and unused code of the framework will weigh down the loading time of your site as only the mixins you’re using gets compiled (to get your final CSS output). This is definitely a huge plus.

However there are caveats of using Bourbon and Neat that should be kept in mind. In this post Create responsive grid layouts with Bourbon Neat, by Derek Blank, he states that “IE7+ support is possible when Bourbon is used with Selectivizr for CSS3 selectors and Respond.js for media queries.”

Experiences with Bourbon, Neat, Bitters and Refills

After watching the series on Awesome CSS with Bourbon, Neat, Bitters & Refills! by PHP Academy, I installed Bourbon, Neat and Bitters.

When I wanted to use refills (and after compiling), the following error message appeared:

"Error: $large-screen (refills) variable not defined"

In Part 6 of the series, I noticed that other people had similar issues to me when following this video tutorial.

So to overcome this error, I did the following:

  1. Doing a Google search I found a post on PHP Academy (which no longer works)

    Instead of uncommenting line #4 in bitters.scss, it’s now uncomment line #8 in the base.scss file.

  2. Then within the base folder, find grid-settings.scss and comment out:

    @import 'neat-helpers';
    

    and use:

    @import'../neat/neat-helpers';
    

    I’m making the assumption that you’re developing in a non-rails environment.

  3. And finally, the order of your @imports in your styles.scss need to be listed in this order:

    @import"bourbon/bourbon";
    @import"base/base";
    @import"neat/neat";
    

    Another assumption is that you’re using Neat.

Newbie Error

I wanted to include Normalize to my project but I made the mistake of naming: @import “normalize.css” in my main styles.scss file.

Instead I should re-name “normalize.css” to “_normalize.scss” as a partial file and therefore within my styles.scss file, the name of the normalize import should be:

@import "normalize"; 

The benefit of this is to reduce the number of http requests if you are linking directly to the normalize CSS file.

References: