adams.co.tt

Twitter Bootstrap, bad relationships, and alcoholism

22nd June 2013

I loved Twitter Bootstrap. I really did. It allowed me to use my very rudimentary design skills to produce layouts and presentation that looked extremely attractive.

And it was fast to develop. What used to take me days took minutes, and looked so very pretty across a bunch of browsers, including Internet Explorer.

However, the relationship turned sour. It turns out that Bootstrap wasn’t really listening when we had that chat about semantic markup. As a result, my markup looked like this:

<div class="row-fluid">
  <div class="span9">
    <div id="posts">
      ...
    </div>
  </div>
  <div class="span3">
    ...
  </div>
</div>

Clearly, there are a few things I’m doing wrong here. Some of which are my own fault, but many are because Bootstrap made me. Classes like span3 have nothing to do with the content that they encapsulate. I’m also forced to have wrapping elements with classes like row-fluid, which are used purely for positioning and have no relation to actual content.

Bootstrap is a controlling, stubborn individual. It’s not a library, it’s a framework, which you means you play by its rules, and nothing else. Those rules directly contradict what your mum and dad told you about good UI development.

So I turned to drinking

Well, more accurately I turned to neat bourbon. Bourbon is:

A simple and lightweight mixin library for Sass.

Neat builds on bourbon to provide a grid framework that accomplishes very similar goals in radically better ways. The HTML snip above now becomes:

<div id='content'>
  ...
</div>
<div id='notes'>
  ...
</div>

With the following SCSS:

#content {
  @include span-columns(9);
}

#notes {
  @include span-columns(3);
  @include omega();
}

Suddenly, the complexity of my markup fell through the floor. It was clear what each element contained and it means that when I want to take control and evolve my styles I can do so easily.

What I lost with the drink

Some aspects of my UI didn’t migrate so easily. The well known Bootstrap navigation looks pretty, but is composed with markup so abhorrent, I had to throw it out all together. I think it’s now shacked up with some musician on myspace.

I also had to part with any of the richer behaviour provided by the Bootstrap JavaScript library. I’ll miss this but ultimately it fell foul of the same problems with Bootstrap’s styling. The JavaScript bound itself to ugly, complex, non-semantic markup which just needed to go.

blog comments powered by Disqus