I wouldn’t say I’m a performance addict, but I do like to write code which is efficient, easy to read and maintain. Most of the time that can be summed up as Keep It Simple, Stupid! But sometimes what might seem simple at first ends up beeing not-so-simple in the end!
One could say Bootstrap is simple, just include the whole thing and you get everything up and running, right? Well yes, it works, but it’s not very efficient out of the box. Mostly becayse you are including a bunch of stuff you don’t know you’ll ever use — and I just hate that. Besides, Bootstrap makes you specify some style logic in your HTML which I’d rather keep as separated as possible. It also defines the way your markup must look, so writing semantic HTML can get quite ugly as elements end up with a bunch of classes.
I don’t like complex ugly things, I’d rather to keep things simple and pretty! Most of the time I use a “big” bootstrap component I end up thinking:
Yeah this is one nice widget, with a lot of features, but for my simple use case I think it’s a bit too much…
Another thing that bugs me is that I like having fine-control over my markup. I’d also rather keep the “style stuff” completely out of my markup. Separation of concerns is always good thing, and this is especially important for front-end development. Finally I like beeing efficient and only include what I need, just including the whole thing makes me sad.
To ease the pain I decided to try some new things, and I ended up with Bourbon; Together with Neat, Bitters and Refills they have nothing to envy from frameworks such as Bootstrap or Foundation.
The Bourbon ecosystem solves all the issues I named before: Makes thing simple by giving you mixins and functions so you can build your own simple and more-semantic elements; Helps you separate your concerns better by allowing you to especify all the style logic in the CSS, and allows you to easily add the functionality that you need, as you need it by using Neat, Bitters and Refills.
Bourbon itself is basically a bunch of mixins and functions which allow you to write DRY-er browser-independant code. The official website is a pretty good example. It shows a very common use of their mixins, which is easily outputting valid vendor-prefixed properties. It also features the position mixin which expands into several positioning-related properties and the golden-ratio function (which is deprecated in favour of modular-scale).
Bourbon is nice but it’s not very powerful by itself. My favourite part of the stack is Neat, which helps you write your own grids. Just by using a few mixins you can create your own more-semantic grid, as we’ll see in a minute.
Then there’s Bitters, it’s basically an skeleton for your Bourbon apps, you are encouraged to customize it as you please. It includes some variables and sane defaults for your HTML elements.
Finally comes Refills, which depend on Bitters and is basically a collection of elaborated HTML + SASS + JS components you can copy and paste into your projects right from the website.
The thing I like the most about Bourbon is that you are encouraged to only include the pieces you need. You could argue one can customize bootstrap and only use what you need, but most of the time it’s a pain to do it. You just don’t know up-front all the dependencies your app will have. You could use the LESS or SASS versions of Bootstrap but still I just feel it’s clunky and it just wasn’t designed to be used that way. In Bourbon though, it feels natural.
Let’s compare the Bourbon workflow with the one from Bootstrap. If we wanted a grid, we’d most likely install Bootstrap in our page, and create the following markup:
<div class="container">
<div class="row">
<div class="col-md-6">/* some content */</div>
<div class="col-md-6">/* some content */</div>
</div>
</div>
For Bourbon is pretty similar, install Bourbon (this doesn’t add any kind of “overhead” to our app), and define the markup:
<div class="news"> <div class="hot-news"> <div class="latest-news"> </div>
We are not done yet, but you can see that we must define our own classes, this forces us to add more meaning to our code. When you read it you know it probably displays news, and that it displays “hot news” and “latest news”. In the HTML you don’t care how they are drawn, they might be in a two-columns layout, or stacked. But just by reading it you can tell a lot from the content itself. This also applies for CSS:
.news { @include outer-container; }
.hot-news,
.latest-news { @include span(6); }
Now that’s cleaner. It’s really easy to identify the behaviour of the news component: It’s a two column grid. It makes sense to put that in the CSS doesn’t it?
This way of structuring our app gives us much more power and actually makes things simpler. “But wait, what if I want something complex, like a modal window?” — You might ask.
How would we do it in Bootstrap? Go to Bootstrap website, copy the code, customize. In Bourbon? Same! Go to Refills website, copy the code and customize. Similar process, but we keep all the advantages!
Conclusion
I feel Bourbon has the best of both worlds, it gives you the choice to just bundle everything but it encourages you to be efficient and only include what you need, as you need it. It’s also less obtrusive as you can only use Bourbon or Neat without Bitters and Refills, or just using parts of them. Overall, I think Bourbon gives you more power, and makes things simpler.