Engaging with Twitter Bootstrap

As Seraph said to Neo “You do not truly know someone until you fight them..

Well, I’ve just emerged only slightly bruised after a few rounds with Twitter Bootstrap on a real-world, but prototypic-style application. Enough to be sure it was Twitter Bootstrap – but I’m not convinced it’s The One.

In summary it does make it very quick to get a basic but professional looking functional UI off the ground, saving you from all those petty little details and from the seemingly mandatory integration-dependency-hell when you try to assemble more than a two JQuery plug-ins. However I did find myself very quickly running out of benefits, features and high-fives as soon as I’d got the basics up and running. I sadly realised integration-hell was going to be just delayed slightly not avoided altogether as I reached for another snack-box of JQuery plugins. I was also surprised and disappointed to find the direction of the architectural style being at a tangent to HTML5.

The scaffolding seems very good. I absolutely hate doing HTML layouts and so having a quick and reliable grid system really reduced my stress levels to tolerable. I haven’t really pushed the limits of it yet, (e.g. responsive designs or unpredictable combos of CMS-powered modules etc) which either means I’m not trying hard enough or it’s just exceedingly good.

The base CSS is fairly thorough, with some nice features in the normalisation and UI extension of form elements. A big flat index of the CSS classes would be helpful though – as you often find yourself wading through the structured documentation wondering if you’re missing something. Yes I know – I could go and look at the CSS but that’s not the point! It’s probably minified anyway (which I don’t know because, on principle, I didn’t look).

I was initially a little confused between Components and JavaScript plug-ins at first, especially due to some things appearing in both lists. However it eventually became clearer that Components are CSS/HTML only. But this is where some of the components seem unfinished and therefore somewhat pointless. What’s the point of a UI component such as a progress bar if it doesn’t have JavaScript control? And why didn’t they use an HTML5 progress tag with a suitable polyfill instead of custom-styled divs!? And what’s the point of an alert dialogue with multiple buttons when all the buttons just dismiss the dialogue and there’s only a ‘closed’ event?! Sure I can (and did) bind my own events, but it felt a strange omission – on pretty much the first thing I implemented.

But of course these are really minor complaints which are in truth only caused by the version number – v2.0.2. If it had been v0.9 I’d be more than happy with such a great work-in-progress. And of course being completely free and open-source it’s impossible to complain – unless you’ve already fixed the issues, contributed back and they ignored your pull request!

Our Senior Developer and Solutions Architect Jeremy Manoto also likes it for “start-up” work, but questions whether Deepend could actually use it as a base for a real website:

We have been using it to scaffold one development as I simply need to show “seemingly” un-styled cart process pages.  So far I think it’s great to get something quick off the ground as it has mark-up, CSS & JS structures that are ready to use. Great for app-ish type of work. The docs speak for themselves as it’s all clearly written and demonstrated.

My big question now is whether it’s possible to build on this framework towards a final website product for a client – and how much unnecessary scaffolding bloat may be left over.

I’m really interested to see it develop – especially towards more native HTML5 support. So the next branch I’m going to explore is Evan Morikawa’s Boilerstrap! The beautiful bastard child of the utilitarian Bootstrap and the more evangelical HTML5 Boilerplate.

Links:

twitter.github.com/bootstrap

github.com/emorikawa/boilerstrap

html5boilerplate.com


Leave a Comment