How to Compile and Customise Twitter Bootstrap so you can stop worrying and get on with coding

Customising Bootstrap for Hackers

I have never produced a decent looking website - even the ones I got paid for have needed me to go and find a competent designer halfway through because my own eyeballs would refuse to look at the screen any longer, the ocular equivalent of hiding behind the sofa while the Daleks attacked.

Even the widely accepted fixes have not always helped - I have had a sort of love-hate relationship with CSS - the idea was fine in theory, but the practical reality felt more like balancing the last Ace of Spades on top of a rather worrisome house of cards, and at any moment the wind was going to pick up through that window. Probably a Dalek passing by.

So Twitter Bootstrap (or its new name “the bootstrap formerly associated with Twitter”) seemed like a godsend - except ... I always used it less like a framework and more like a template. Just take the defaults and go.

You could instantly create something like this :

but while that correctly does responsive mobile blah de blah, it is - well it’s the tutorial example.

So, my geek reflexes told me, I need to compile it, to customise and compile it so it can meet my needs. Bascially I opened a can of control-freakery and dove right in.

This is the result - a mini-series of using Bootstrap to build a small product site that does not look rubbish, is easy and simple HTML to maintain and code with, and frankly does not need a designer to help me.

  • Part 1 - Getting Bootstrap, and compiling it from the command line !!!!
  • Part 2 - Actually designing something, with colour wheels and stuff.
  • Part 3 - The bit where I need a three part series but have run out of things to say.