Bourbon & Neat, the perfect framework for Genesis Themes

When it comes to building WordPress themes, I’m a huge advocate of the Genesis Framework. I started by creating child themes based on the Genesis Sample Theme, then moved to using Bill Erickson’s base child theme, and then developed my own starter child theme.

One thing which really appeals to me about the Genesis Framework, and helps me to work more efficiently, is that the markup it outputs is consistent. While this could be considered a constraint if you have particularly complex layout, with the benefit of experience you can quickly and easily remove the default Genesis output and hook in your own, or filter parts of the markup to meet your needs.

This consistency means that each theme I create starts from the same solid base. I know exactly the class names, hooks and filters I need to bend the theme to my will.

When it comes to styling, I think I’ve found the perfect accompaniment to the Genesis Framework, in Bourbon & Neat.

Bourbon is a lightweight library of Sass mixins, allowing me to quickly add complex CSS styling, such as for position, font-face includes, and more, with simple one line declarations. An example of it’s short syntax, where I want to position an element to the bottom right would be @include position(absolute, null 20px 20px null);, which would produce output equivalent to three lines of vanilla CSS.

The great thing about using Bourbon, is that if you don’t use any of it’s mixins, it won’t add anything to your compiled stylesheet. It isn’t like loading a large framework such as Bootstrap or Foundation, where you will be loading a 1mb file whether you use it’s contents or not. This lightweight approach means I can create custom themes which are lean and incredibly fast to load.

In the same vein, Neat is a lightweight and semantic grid system created by the authors of Bourbon. Included using Sass, the primary reason I use Neat is that it doesn’t require any additional classes or markup to be added. You can simply target existing markup, such as .content-sidebar-wrap .content and give it a width of eight columns using simple code like this:

 1.content-sidebar-wrap {
 2    @include row;
 3 
 4    .content {
 5        @include media($medium-screen-up) {
 6            @include span-columns(8);
 7        }
 8    }
 9 
10    .sidebar {
11        @include media($medium-screen-up) {
12            @include span-columns(4);
13        }
14    }
15}

Declaring column widths and making changes at different breakpoints can be achieved within your Sass files and compiled into your main style.css, rather than having to add hundreds of unsemantic presentational classes to your HTML, like in the case of using Bootstrap or Foundation.

Neat can also be fully customised through it’s settings file, or by overriding in your own Sass files. You can set custom grid widths, set the number of columns in your base grid, and use it’s built in breakpoint helpers to save key breakpoints as variables and use them throughout your code.

There are a number of ways to include Bourbon & Neat within your theme (and the documentation is excellent too).

• You can install both as Ruby Gems on your computer, and add them to your project manually.
• You can use Bower to install Bourbon & Neat as project dependencies.
• You can use the node-bourbon and node-neat npm packages within your Gulp build process.

My preferred method is using the Bourbon & Neat NPM packakes, as demonstrated within my Genesis starter theme and accompanying Gulp build tasks. This means that I don’t have to install the library files inside my theme’s /vendor/ directory.