Namespacing twitter bootstrap for ease of interpolation

At work we have a dozen or so apps that share and extend a common CSS base that we have written and implemented ourselves. Over the last week or so however, I have been slowly implementing bits and pieces of the awesome Bootstrap framework into one of those apps. In general, it's gone pretty well. I have taken my time and only pulled in the bits I needed as I needed them. Mostly just buttons, icons and a few drop down menus.

We have our own version of bootstrap.less which pulls in the bootstrap code, and also defines any stuff we have overridden. Most of the @import calls have been commented out, and this is how I had been managing what was being compiled by Less.

Before I left work this afternoon however, chatting with one of the other devs, we decided we wanted to start making use of the scaffolding Bootstrap provides. To get this working (and looking good) we would need to pull in Bootstrap's scaffolding, grid, layouts and [reset][reset]. I knew this would break stuff. We needed a solution that would make this breakage containable.

During development we have Bootstrap compiled via lessphp on the fly. Looking at the less documentation we found something that looked promising, namespaces.

Putting Bootstrap into it's own namespace would allow us to easily pull in whatever we need at a document, div or element level. We would also have complete control of this right where we need it, in our actual templates.

So, how do you namespace Bootstrap easily? Simple. Open your bootstrap.less file and wrap all the @import calls within a .bootstrap {} block. eg;

.bootstrap {

// CSS Reset
@import "reset.less";

// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";

// Grid system and page structure
@import "scaffolding.less";
@import "grid.less";
@import "layouts.less";

// more less ...

}

That's it. Now, you can use Bootstrap by simply applying the bootstrap class to the element surrounding the area you wish to use Bootstrap.

Now just to covert the rest of the Bootstrap JavaScript to not rely on jQuery.