ad-hockery: /ad·hok'@r·ee/, n.
Gratuitous assumptions... which lead to the appearance of semi-intelligent behavior but are in fact entirely arbitrary. Jargon File

Twitter Bootstrap & Semantics

There’s a lot to like about Twitter Bootstrap; it’s a fantastic resource for getting off the ground, particularly for getting a slick-looking admin interface up and running quickly. The recent changes to accommodate responsive layouts are really impressive. I’m particularly impressed with the way horizontal forms stack on smaller screens (failure to accommodate small screens in form design is something I’ve complained about before). However, there are some things I’m less keen on…

Looking at the markup it seems heavy and overly concerned with presentation. In this example layout links in the top navbar have no less than 4 divs between them and the top of the document. There are a lot of classes everywhere and almost all of them are concerned with presentation rather than semantics; how a div should look rather than what it represents. Classes like row-fluid, span9 even the ubiquitous btn are slightly troubling as they’re bleeding presentation details into the markup.

I get that these are to some extent practical considerations. Restyling all button elements would be disruptive for people who wanted to drop Bootstrap in to an existing site, for example. Maybe I’m being pedantic but I’ve worked on sites with severe div-itis and it makes things difficult both for maintenance and accommodating changes.

I can’t help thinking that this…


…is a code smell.

Bootstrap is built with LESS but (by default) compiles it down to CSS before any of your site’s code starts interacting with the Bootstrap framework.

LESS is great for structuring CSS better but I think its strengths go further.

I recently came across The Semantic Grid System which really leverages the power of LESS (or SASS or Stylus if you prefer) . The provides mixins that you use on the components of your pages. It’s a full-blown responsive grid system with not a column-container, row or grid-8 class anywhere in your markup. In fact, looking at the markup you wouldn’t know the content was being laid out on a grid. It’s all handled in your LESS file. Want your services and clients sections laid out as ⅔ width blocks with your about me section as a sidebar? Just declare:

section#services, section#clients {

aside#about-me {

Instead of adding a presentational class to elements in the markup you add a mixin to the element in the LESS file.

Wait a minute… Isn’t that dangerously close to the separation of semantics and presentation that the invention of CSS promised us all those years ago?

Web Statistics