Clean. Simple. I'll throw in a bigger word combo to complete the picture... "semantic-friendly". Those words encapsulate why I've come to prefer Bourbon in recent projects and haven't missed my old friend Bootstrap.
Ok, maybe I missed ol' Bootstrap at first. Let's not kid ourselves. There's comfort in the familiar. But time and a new paradigm has won me over. I finally deleted the photo gallery of Bootstrap and I's trip to Niagara Falls. Yes, we had some good times. But it was time to move on.
Setting The Scene
Some context and background is helpful as I continue this story. At GRAYBOX, we tackle many kinds of projects for our partners that span various platforms, CMS's and frameworks. As a front-end developer, one of my early challenges was tackling existing projects, inherited projects from other firms, as well as new projects. Since we work with a variety of CMS platforms, how we manage styles is a daunting but important task.
If you know your CMS's, the underlying themes all have different approaches and typically include robust templating systems. Outside of Wordpress, there are few "Bootstrap-ready" themes that I could just flip on and go. When adopting existing websites, the task of Bootstrap-izing the theme ‚ which is sometimes already a custom theme ‚ presents a monumental and often unrealistic undertaking. As a result, hello `style_custom.css`.
Taking a Step Back in Sophistication
I'm sure about 90% of front-end developers will agree with the following. Once you've used SASS (I started with LESS) for building your stylesheets, working with straight css files feels like hopping back in that blue '85 Chevy Cavalier with the mismatched red door and that weird interior odor while your shiny Tesla charges in the garage. Imaginary life is a good life...especially when the car is fully charged.
So, the dilemma was I wished I could tap into the power of Bootstrap and SASS, but on a non-Bootstrap built theme. For those that know Bootstrap, you know it has very specific markup requirements to work properly and for responsive design, the markup is the key. No markup? No responsive site behaviors.
You Must Follow the Bootstrap Recipe Carefully
As an example, say I want to create a block of content with two adjacent columns on desktop that will collapse to one column on mobile. With Bootstrap, this is as simple as cherry pie. BUT, by "simple", I mean make sure you have all the correct ingredients and add them in the right order or you'll end up with some gooey substance that requires a call to a company with "toxic" and "removal" in their name. If the recipe is followed, sweet deliciousness. If not, prepare for the worst. Here's how this would be constructed for Bootstrap.
MARKUP:
Notice the "container", "row" and "col"umns and that each slice's width is set in the markup as Bootstrap-specific classes. Since this is where all the responsive magic happens for the Bootstrap framework, you need all this markup in your template files. For smaller or more plain CMS solutions, this is doable but, I would argue, not ideal. For larger and more complex solutions like Magento with hundreds of core template files, this is a massive undertaking.
Defining Bourbon
Before we contrast that and explain why I was seduced and won over by Bourbon, it would be good to give a little explanation as to what Bourbon is and what it is not.
Let's start with what it is not. It is NOT a framework. This is in contrast to Bootstrap which is a front-end framework. A front-end framework offers libraries, pre-built templates and comes with default styles right out the box. You could draw the metaphor that Bootstrap is a color-between-the-lines coloring book. You can pick your colors but are confined to coloring within the pre-drawn lines on the page.
What is Bourbon? From their site, it is defined as "A simple and lightweight mixin library for Sass". That's it. To contrast it with a typical front-end framework like Bootstrap, Bourbon is a clean brush, a color mixing palette, and an empty canvas.
BUT that's not really all that it is. Bourbon is the starting point or gateway. The folks that brought Bourbon to the world also offer complimentary resources that work on top of Bourbon such as Neat which is defined as "a lightweight semantic grid framework built with Sass" and this is where things get really fun.
Applying Bourbon to Our Example
What about that cherry-pie example above, you ask? Is your stomach growling? I can't help you there but I can expound upon our reasons for considering Bourbon instead of Bootstrap.
The biggest difference is that while Bootstrap requires you to add markup that triggers responsive behaviors, Bourbon allows you to stick to basic (and semantic) markup and then use your stylesheets to make it responsive. In the above code example, the classes are used by Bootstrap to determine the size of the pie pieces at different viewport sizes and then display accordingly. In Bourbon, you target your markup elements in the sass file with mixins that then control the output through your stylesheet.
Here's how I would code the above with Bourbon/SASS.
MARKUP:
Slice Numero Uno
Slice Numero Duo
SASS:
section#cherry-pie {
article {
@include span-columns(6 of 12);
@include media($tablet) {
@include span-columns(12 of 12);
}
@include media($mobile) {
@include span-columns(12 of 12);
}
}
}
Now, you may be looking at that and saying, "Wait a minute, that seems like MORE code!". Well, on one hand, you would have a point. However, that "extra" code is all in the sass/style file. The markup is clean and concise.
As someone who likes control, you'll note that I'm targeting that one instance whereas the Bootstrap approach utilizes a global approach that must be applied to each markup instance. With Bootstrap, I would need to ensure all cherry-pie instances had the Bootstrap-specific classes in the markup. In Bourbon, I can use one style to style all the cherry-pie(s). Win.
Now, imagine that you have a starter template for a CMS. Which will be easier to make "responsive"? The one (Bootstrap) that requires you to update all the markup across hundreds of core template files or the one (Bourbon) that allows you to control everything from the sass/style file? I know which one I prefer and it's not the one that sounds like "Moose Trap".
In Closing
The arguments for Bootstrap are many and there are a lot of valid reasons for using it. Yes, it is robust with good documentation and support. Yes, it offers a lot of pre-built libraries and scripts that make adding certain elements and behaviors a snap.
However, Bourbon simplifies everything from the start and puts sole control in the developer's hands which is ideal for custom site development where you want to start with a blank slate. It's about simplicity and WHERE the control lies. I've found value in keeping the style out of the markup and reserving it for the sass/stylesheet where I contend it belongs.
Now I'm hungry for some real cherry pie.
REFERENCES:
Bourbon: http://bourbon.io
Neat: http://neat.bourbon.io
Refills: http://refills.bourbon.io
Bootstrap: http://getbootstrap.com
Cherry Pie: https://www.youtube.com/watch?v=dVYvlzVXs9Q