Why I prefer Bourbon over Bootstrap

Posted on in frontend, sass, webdev

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:

For Bourbon is pretty similar, install Bourbon (this doesn’t add any kind of “overhead” to our app), and define the markup:

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:

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.

  • Brenton Klassen

    You didn’t talk about http://purecss.io/ . Have you tried it?

    • gosukiwi

      Yeah I wanted to keep things short, so I didn’t mention either Bootstrap nor Bourbon alternatives. I’ve tried PureCSS and love it, still, I find it easier to use Bourbon, because it helps you write more semantic code overall and it provides some nice utils if you are using SASS. It’s just a matter of preference at the end of the day.

  • Zim

    I think you may be missing an important bit about Bootstrap: as its name implies, it’s a tool to get you going. Bootstrap is aimed at developers who want to deliver websites fast.
    In my opinion these are tools for different tasks and both are good! :)

    • +1

    • gosukiwi

      You are right, Bootstrap does have it’s strenghts, I still prefer Bourbon though. At the end of the day they are just both tools and it’s the work of the artisan to choose the most appropiate one.

  • The Dan

    I am totally with you on this. I’ve been the lead on multiple large enterprise applications over the last 2 years and I’ve found that bootstrap usually introduces a pretty hefty maintenance burden. The markup gets unwieldy very quickly and new devs coming in without any boostrap experience end up feeling very lost, and worse, afraid to change any of the markup (is this class important? is this a control or something formatting related? etc etc)

    Anyway, thanks for the great read. Well said!

    • gosukiwi

      Thanks! I’m glad you liked it :)

  • Pingback: Links & Reads for 2014 Week 52 | Martin's Weekly Curations()

  • Stanislav Zaburdaev

    .latest-news { @include span(6); }
    Did you mean span-columns(6)?

    • gosukiwi

      Yes :)

  • Hi, I disagree with your example which swapped Bootstrap’s ‘col-md-6’ for ‘hot-news’ and ‘latest-news’.

    I think the better solution, which gives best of both worlds, is to use an id. Presumably, there’s only one section of content for “hot-news”. That begs an id. And, a ‘col-md-6’ encodes even more information directly into the HTML that as a developer I can use to envision how the page is structured, going to look, *and* what it represents (which is really what you’re a proponent of in this case).

    You have some valid points when comparing the two, but IMO your logic is flawed, and could actually lead to less maintainable and readable markup.

    • gosukiwi

      Well, personally I don’t want to know how something looks when reading HTML, I just want to know what the content is.

      If I wanted to change the size of the columns, I’d only have to update the CSS, which makes sense. If I had hard-coded classes on the HTML I’d have to update the HTML for a style change, which doesn’t feel right.

      Also if I were working with a frontend app, for example, an angular app, adding boilerplate classes might make the HTML harder to read, because of all of angular directives.

      As for the id, I’m not a fan of using ids for styling, nothing wrong about it but I just follow SMACSS (https://smacss.com/) overall. I only use ids for javascript hooks here and there.

  • Aleksandr Shelestov

    Actually, you able do the same things with bootstrap:

    .news { @extend .container; }
    .hot-news,
    .latest-news { @extend .col-lg-12; }

    • gosukiwi

      Yeah, it is possible, but I feel they don’t encourage you to use the library like that. For example, documentation for that is quite hard to find.

      • Aleksandr Shelestov

        Say, this is undocumented ability ))
        Anyway, I came to bourbon too.

    • mcauser

      Bootstrap sass has similar mixins container-fixed() make-grid() make-row() make-md-column() etc. You can use both @extend and @include patterns. Which ever you prefer.

      • Aleksandr Shelestov

        I didn’t know this, thanks!

  • Pingback: 17 Useful Frameworks and Tools for CSS Developers()

  • Pingback: Useful Frameworks and Tools for CSS Developers - DevsTrend()

  • Luis Larrea

    Thanks!

  • Joe Lloyd

    Really nice article, defiantly something worth thinking about. Although I do prefer cluttering up my html as opposed to cluttering up my css. We’ve all been in that situation where you spend an hour working some styling and then all of a suddenly your 500-1000 lines deep in your css and adding more to it is just not the best option. I like to write my scss with the BEM protocol in mind (very descriptive classes) so my html always has loads of classes. I will give the bourbon grid a shot though.

    • gosukiwi

      BEM is awesome. Bourbon grid is nice if you want compatibility. If you can get away with not supporting old browsers, flexbox is the way to go :) Maybe mix autoprefixer in, so you don’t have to worry about compatibility.