Adding Bourbon and Bourbon Neat with Bower

Dec 09, 2013

Table of contents:

Why Bourbon and Bourbon Neat?
Adding Bourbon and Bourbon Neat through Bower
Integrating with Sass
Bourbon Neat settings
Setting up the grid
Conclusion

I’ve been using Sass in projects for quite some time now, and honestly I don’t think I could start something new these days without it.

For a long time I’ve also used Compass in all of my Sass projects too. Compass is an additional framework that sits on top of Sass and provides lots of mixins and helpers to make writing Sass much easier. By using something like Compass, you can ensure that you are producing valid CSS rules because someone else has taken the time to ensure Compass works correctly. This allows you to just get on with writing code.

However recently I’ve started using Bourbon and Bourbon Neat. Bourbon is a lightweight mixin library for Sass and Bourbon Neat is a semantic grid framework that sits on top of Bourbon.

In this tutorial I’m going to walk you through adding Bourbon and Bourbon Neat with Bower. Little libraries like these are perfect for saving you time and ensure that you don’t have to reinvent the wheel.

Why Bourbon and Bourbon Neat?

Compass is a really good framework that provides a lot of amazing functionality right out of the box. If you look at the Compass Reference Guide you will see that Compass covers a lot of ground.

However when I have used Compass in previous projects, I always just end up using the same little bits over and over again. I’m sure if I took the time to really explore Compass I would find a lot of helpful functionality that I didn’t know about. But to be honest, I don’t think I will ever use Compass to it’s full potential.

Bourbon on the other hand is a much more slimmed down version of Compass with a tighter selection of mixins. After looking through the Bourbon documentation I realised that much of what I needed from a Sass framework was present in Bourbon. This means I don’t have to reinvent the wheel for each project, but I’m also getting the most from the third party code I have to introduce to my project.

The choice between Bourbon or Compass is really up to you. I don’t think it particularly makes that much of a difference and so it is really up to your personal preference.

Adding Bourbon and Bourbon Neat through Bower

If you have been following along with this series you will remember that a couple of weeks ago I set up Bower to handle third part libraries. Integrating Bourbon and Bourbon Neat into a project is a perfect example of why Bower is so useful.

To add Bourbon and Bourbon Neat to Bower, open up your bower.json file and add the two new dependencies. Here is my full bower.json file:

{
    "name": "Cribbb",
    "version": "0.0.1",
    "dependencies": {
        "normalize-css": "~2.1.3",
        "bourbon": "7e6e3f22d14641a787f021e985781bff4edf9627",
        "neat": "1.4.0"
    }
}

You will notice that I’ve used a specific Git hash for Bourbon, rather than the version number. This is because at the time of writing this tutorial I want to specifically pull in the latest commit. This commit hasn’t been tagged so this is the only way to do it.

Once there has been a new tagged release of Bourbon I will update this dependency to use the version number.

Once you have added Bourbon and Bourbon Neat to your bower.json file, simply run the install command from Terminal:

bower install

This will pull the files in to your components directory.

Integrating with Sass

Now that you have Bourbon and Bourbon Neat pulled into your project, you can add them to your Sass style.scss file.

@import "../bower/bourbon/dist/bourbon";
@import "../bower/neat/app/assets/stylesheets/neat";

Here I’m just doing a regular import to bring the two libraries into my Sass file. Basically all you need to do is to set the directory path to your components file and then to the specific library.

Also notice how Bourbon has a distribution folder but Neat does not? This is because at the time of writing this tutorial the distribution folder had not been added to the master branch of the repo. Hopefully this will be added soon.

Now that you have Bourbon and Bourbon Neat automatically importing into your Sass structure you don’t need to add it into your Grunt configuration.

Bourbon Neat settings

Bourbon Neat allows you to set some settings for your grid and breakpoints that you want to use for your layout. All you need to do is to make sure you import the settings before you import Neat.

Here is my import list:

@import "../bower/bourbon/dist/bourbon";
@import "settings/neat";
@import "../bower/neat/app/assets/stylesheets/neat";

In your settings Sass file you can now specify how you want your grid to work and what breakpoints you want to use:

@import "../../bower/neat/app/assets/stylesheets/neat";

$visual-grid: true;
$visual-grid-color: red;
$visual-grid-index: front;
$visual-grid-opacity: 0.5;

// Change the grid settings
$max-width: em(1024, 10);

$tablet: new-breakpoint(max-width 768px 8);
$mobile: new-breakpoint(max-width 480px 3);

Have a look at the documentation for a full list and explanation of each of the settings options.

Setting up the grid

Now to take Bourbon and Bourbon Neat for a spin, create a new div in your layout with a class of container:

<div class="container"></div>

Next create two more divs inside the container div with classes of left and right:

<div class="container">
  <div class="child left"></div>
  <div class="child right"></div>
</div>

Next create a new Sass file and copy the following:

.container {
  @include outer-container;

  .child {
    height: 200px;
  }

  .left {
    @include span-columns(6);
    background-color: yellow;
  }

  .right {
    @include span-columns(4);
    background-color: purple;
  }
}

Save you file, run Grunt and open the page in your browser. You should see your container now has an automatic red grid and the left and right children are sitting at the right number of columns.

Pretty cool huh?

Conclusion

I really love these mini-frameworks that sit on top of one another. Using something like Sass is fantastic, but having to write mixins for every project wouldn’t be much fun. Fortunately the web industry is a caring and sharing type of place and so we have these amazing open source frameworks that we can leverage.

Using something like Bourbon or Compass is a big help because projects like these have already done the hard work of figuring out the correct CSS output and writing the best possible mixin to be used in Sass. This means we can simply stand on their shoulders to be awesome at Sass without having to dig deep into the depths of Sass and CSS.

Hopefully this was also a good practical example how important Bower is going to be to the future of web design. Now that I have Bourbon installed via Bower I can simply pull in the latest updates without having to dump the files into a directory and just forget about them.

This is a series of posts on building an entire Open Source application called Cribbb. All of the tutorials will be free to web, and all of the code is available on GitHub.