Semantic markup makes me happy.

Bourbon Neat gives me a way to use a grid structure on my web page AND be happy. When we look at the most widely adopted grid systems — such as Bootstrap, Foundation, 960 Grid System, Skeleton — there is an inherent problem with the standard way it’s used.

The Problem: Presentation Classes

Each of these systems involve applying classes to elements in your markup that look something like this:

<section id=”content” class=”row”>

<article class=”small-12 medium-10 large-8 columns”>

<h1>…</h1>

<p>…</p>

</article>

<aside class=”small-12 medium-2 large-4 columns”>…</aside>

</section>

This means that if I want to adjust how the content is displayed, I have to change my markup.

Keeping things where they belong

When your HTML is describing how something looks. Something is broken.

The Content Layer:

Your content should be able to be understood independent of the rules on how it looks. This ends up being rendered as HTML, but could start in a number of different forms (JSON, XML, markdown, etc).

The Presentation Layer:

It’s hard to talk about the separation of content and presentation without going back to the CSS Zen Garden. It’s a beautiful demonstration of CSS’s role in providing a home for presentation, while the content resides in the markup.

Behavior Layer:

This is where stuff happens based on events. Generally speaking, this is JavaScript’s home.

By maintaining these lines of separation, you’re positioning yourself for a better workflow in which someone responsible for the layout or style of the content of the page only needs to work in the CSS of the project. If you were able to apply these column spans from your grid system to your elements in the project’s CSS rather the HTML, you elimate the need for these darn presentation classes.

It could look something like this:

<section id=”content”>

<article>

<h1>…</h1>

<p>…</p>

</article>

<aside>…</aside>

</section>

Ahhhh. Now doesn’t that feel nice? Our markup is semantically telling us about our content and nothing more. So, how do we get the same effect of a grid system without junking up our HTML? That’s where Bourbon Neat comes in.

What is Bourbon Neat?

Neat is a set of SASS mixins that build on top of Bourbon, which builds on top of SASS. It gives us the ability to apply those column spans in your SASS, to then be outputted into your compiled CSS. Thus, giving you the end result of a functioning grid system while keeping our HTML nice and tidy.