Running with Twitter Bootstrap leaves me exhausted

The current look of this site is a simple responsive design template with enough design to call it my own. When starting it off I decided I would try and learn a few new tricks and make some inroads using the Twitter Bootstrap. These CSS frameworks are all the rage right? Having cobled some basic HTML together and throwing the Bootstrap CSS + JS you can immediatly see some really strong layout and design on your page. It was great, really happy with the look after an hour and no design in mind.

After a few weeks of working on other code and happily dealing with the vanilla Twitter Bootstrap look I started to add more and more custom design and CSS to the site. I also wanted to run with my own responsive changes here and there. This is where the trouble began.

The more I wanted to make changes to lower level structural styes, the more trouble I ran into. Their grid system allows for some simple partitioning of content through markup and classes (something I'm normally against but for the sake of getting the most out of Bootstrap that's how it went). You might want to have a 3 column area with some gutter between them right? Some HAML markup:

.row-fluid
    .span5 .my-column-1
        Big content goes here
    .span1.gutter
        // This is a gutter and adds some spacing
    .span3.my-column-2
        Smaller content here
    .span3.my-column-3
        Smaller content here

It's pretty simple markup and, except for the annoying gutter element, isn't too bad. It's relativly clear (if non-descriptive) in the class department too but just go with me on it.

The first major problem I came up against was the specific nature of their classes and the result in trying to overwrite their grid level elements. Some simple CSS:

.my-column-2,
.my-column-3 {
    width: 100%;
    float: none;
}

So this attempts to turn those secondary columns into full width. You might want to do this, like I did, for a mobile device that is not wide enough and we feel the content should really get some whitespace.

Unfortunately due to the way the classes are built in the Twitter Bootstrap you will not, easily, be able to overwrite this code without a horrid !important tag. Why? The spans rely on the row-fluid parent and thus are defined along the lines of

.row-fluid .span3 {
    // style here
}

To make your style specific enough to break this you are looking at .row-fluid .my-column-3 (at minimum) which is adding a coupling that means nothing and may actually confuse anyone reading the code. Big no no when thinking about CSS maintainence and modularization.

I've decided, for the time being, to use a few !important tags (much against my better judgement) as I hope the lack of coupling is a little more helpful to me at this iteration. Hell, they're only going to be needed until I go through and refactor out all the Twitter Bootstrap code.

My overall feeling about Twitter Bootstrap? The gains in the short run are lost many time over in the long.