I like my bourbon neat

This week I started using Bourbon and it’s accompanying grid system, Neat. I really like the way they’ve been put together and think they’ll be really useful going forwards.

It’s easy to get started with bourbon and neat, and neither of them dictate the way you should structure your application. Lets go over some of the basics.

Installing bourbon and neat

Bourbon and neat are both gems, which makes them really easy to install. Just type sudo gem install bourbon neat into your command prompt and hit enter. Your now ready to harness the power of bourbon.

Setting up a project

In your command prompt, cd into the directory you want to store the bourbon and neat files, then install the dependencies as follows:

1
2
3
$ cd ~/Sites/project/scss/
$ bourbon install
$ neat install

Add the following to the top of your main .scss file:

1
2
3
@import "bourbon/bourbon";
@import "neat/neat";
// The rest of your CSS goes here

Using bourbons mixins

Bourbon comes with lots of really useful mixins and utilities. Making use of them is simple, for example a linear gradient:

1
2
3
.container {
	@include linear-gradient(#1e5799, #2989d8);
}

For more examples check out the docs.

Harnessing the power of the grid system

Many grid systems make you add presentational classes to your HTML which to a lot of us is undesirable. With neat, you don’t need to do that at all. If I wanted to create a container with a primary content area and sidebar, all I would need to do is:

1
2
3
4
5
6
7
8
9
.container {
	@include outer-container;
}
.content-pri {
	@include span-columns(9);
}
.content-sec {
	@include span-columns(3);
}

Your HTML would look something like this:

1
2
3
4
5
6
7
8
<div class="container">
	<div class="content-pri">
		<!-- Main content area -->
	</div>
	<div class="content-sec">
		<!-- Sidebar -->
	</div>
</div>

Neat also does some cool things with media queries. You can define breakpoints by declaring a variable like this:

1
$tablet: new-breakpoint(min-width 767px);

You can then call the appropriate media query like this:

1
2
3
@include media($tablet) {
	// Your code
}

Again, there are more examples in the docs.

Extending the mixins

Including these mixins is absolutely fine, but your codebase could become bloated very quickly if you find yourself calling the same mixins repeatedly. For example if you used the clearfix mixin on a lot of elements, the following code would appear in your compiled file for every one of those elements:

1
2
3
4
5
6
7
8
9
10
11
.element {
	*zoom: 1;
}
.element:after,
.element:before {
	content: " ";
	display: table;
}
.element:after {
	clear: both;
}

What I recommend is making use of the @extend rule. First you would create a silent class which includes your required mixin. This code will only be compiled if you extend it:

1
2
3
%cf {
	@include clearfix;
}

Then, anywhere you want to use that mixin, just extend your class:

1
2
3
.container {
	@extend %cf;
}

This technique can significantly reduce the amount of repetition in your codebase, which is always a good thing.

Striking the right balance

Bourbon manages to do what many other frameworks have so far failed to do, which is provide you with a collection of best practices without dictating how you structure your code.

I love the fact that my codebase is only going to include the things I need from bourbon, without lots of unused utilities, and my HTML can be as semantic as I want it to be. I strongly recommend giving bourbon a try on your next project.