15 SEO Best Practices for URL Structures
March 19, 2015
Best Practices for Component Strategy Planning on an eCommerce Implementation Project: Don’t Overlook It
May 26, 2015

5 Reasons We Chose Bourbon/Neat Over Foundation or Bootstrap

In early January 2015, our User Interface Department decided to take a look at our CSS Framework to determine if we were using the right one for us. We were previously using Foundation, but grew tired of the restrictions and the fluffy HTML markup. After much debate, we decided to start using the Bourbon Neat framework stack. Below, we lay out a few different reasons why we chose this stack.[/vc_column_text][/vc_column][/vc_row]

1. Semantic HTML

First and foremost, the ability to have semantic HTML was huge for our team. In Foundation, it’s required to use “tag soup” in order to get the same results Bourbon Neat Framework Stack gives. For example, to get a simple two -column layout in Foundation, you would write code as follows:

<div class="row">
     <aside class="large-4 columns categories"></aside>
     <section class="large-8 columns products"></section>
</div>

You can get away with one <div> and still be pretty semantic, however, as you can see, there is no separation of concerns here. Your class names are related to style and we didn’t want that. We wanted to write code as follows:

<aside class="categories"></aside>
<section class="products"></section>

This allows us to achieve simple, clean coding and not have markup bloat. To obtain the same kind of styling as you would in Foundation, you would use SASS as follows:

.categories {
     @include span-columns(4);
}
.products {
     @include span-columns(8);
}

This semantic HTML allows us to do some cool things under the hood with our apps at a later date as well as allow any new developer to easily transition onto the project, know what is going on and understand the markup in half the time.

2. We Only Use What We Need

Not only are we able to gather semantic HTML out of our apps, we are able to shrink our load time significantly. When using Foundation or Bootstrap, you have to include a SASS file and a JS file for the framework, as well as, any custom SASS or JS files you are rolling on your own. These frameworks typically cause huge bloat and slow down your load times. One of the nice things about the Bourbon/Neat stack is that you include the Bourbon SASS file and the Neat SASS file and you are done. You are not required to include JS files and the resulting CSS files are tiny once compressed.

What about precoded assets you can use to prototype? The Bourbon stack has those as well. You can optionally include Bitters, which is a basic typography boilerplate intended for you to further customize. Including Bitters allows you to focus on your structure and the other priorities in the project rather than worry about typography.

The Bourbon stack has Refills you can optionally include in your code, as well. Refills are more of the prebuilt components you get from Foundation and Bourbon. The nice thing about Refills is that you can only include/install the components you want and will not receive the bloat from the components you are not using. This was a huge save for us and allows our SASS files to be tiny when compiled.

3. No Browser-Prefixes

One of the areas Foundation and Bootstrap are lacking are SASS mixins, which remove browser-prefixes. With Bourbon, you can write some awesome one-liners in your SASS files that will then be rendered out into all the browser-prefixes as before. Let’s take a simple CSS gradient for example. Without Bourbon you have to construct your CSS gradients as follows:

background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

This is a lot of code to remember. In Bourbon, we would simply write a CSS gradient like this:

@include background-image(linear-gradient(#1e5799 0%, #7db9e8 100%));

Now, that alone is enough to make anyone change their workflow and assets. This is only one of a few mixins that Bourbon defined to save you time and lines of code in your SASS. You can see more of the mixins in the Bourbon docs.

4. Easy Breakpoints

As our industry changes, we see that responsive websites are becoming a must for every client. With Foundation and Bootstrap you have to follow a few different steps to make your website responsive. First, you must edit your markup and then edit your SASS to adjust things as needed. Let’s take our code from above. If we wanted to make it responsive in Foundation, we would have to do something like this:

<div class="row">
     <aside class="small-12 medium-12 large-4 columns categories"></aside>
     <section class="small-12 medium-12 large-8 columns products"></section>
</div>

As you can see, we have to add two more classes to each element in order to achieve the responsiveness we want. With this, you have to go into all SASS files and edit elements that change on mobile or tablet such as font-sizes. However, with Bourbon/Neat you simply stay in your SASS file and make the following changes for the layout:

.categories {
     @include span-columns(4);
}
.products {
     @include span-columns(8);
}
.categories, .products {
     @include media($tablet-portrait-down) {
         @include span-columns(12);
     }
}

This code is immensely cleaner and you stay in one file. You don’t have to keep bouncing between both HTML and SASS, you can stay right in SASS and do everything you need. Another nice thing to do is give your breakpoints logical names. In Foundation, you have small-##, medium-##, and large-##. How do you know which class to use for which style? With Neat you can create your own breakpoints like so:

// Device Widths
$phone-portrait: em(320);
$phone-landscape: em(568);
$tablet-portrait: em(768);
$tablet-landscape: em(1024);
$desktop: em(1030);

// Target device and smaller screens
$phone-portrait-down: new-breakpoint(max-width $phone-portrait);
$phone-landscape-down: new-breakpoint(max-width $phone-landscape);
$tablet-portrait-down: new-breakpoint(max-width $tablet-portrait);
$tablet-landscape-down: new-breakpoint(max-width $tablet-landscape);
$desktop-down: new-breakpoint(max-width $desktop);

// Target device and bigger screens
$phone-portrait-up: new-breakpoint(min-width $phone-portrait);
$phone-landscape-up: new-breakpoint(min-width $phone-landscape);
$tablet-portrait-up: new-breakpoint(min-width $tablet-portrait);
$tablet-landscape-up: new-breakpoint(min-width $tablet-landscape);
$desktop-up: new-breakpoint(min-width $desktop);

Now, you can easily target a specific device size, bigger or smaller, and know exactly what you are targeting. This makes your SASS easily readable, learnable, and adaptable which is what we are aiming for. We want to easily be able to swap out our engineers on a project and have them be able to read SASS and get right to work.

5. Whiskey

The fifth reason is not really a reason at all. Most will argue that it is just a preference, which is absolutely correct. We love whiskey and bourbon, so there is no better reason than that alone. Also, using these frameworks allows for a pretty fun drinking game. Every time someone says the word Bourbon, that person has to take a drink. Of course, we do our hard engineering after hours, and we drink responsibly. And honestly, who doesn’t love whiskey?

We decided to adopt the Bourbon/Neat stack as our main SASS framework because it allows us to have semantic HTML, to include smaller files using only what we need, to write SASS that doesn’t have browser-prefixes in them, is easy to understand and manage breakpoints, and of course, because everyone loves a good glass of whiskey and giant robots fighting.