Earlier this month, Twitter released an amazing UI toolkit for web developers called Bootstrap. In the creator's own words:
Bootstrap is great because it's more of a UI toolkit than similar projects. It lets you quickly create site designs from scratch, by providing all the necessary UI components, instead of just being a grid system, or just providing a library of mixins.
However, Bootstrap met with a lot of valid criticism
On looking through the CSS, it's laced with class names like '.row .span2' and '.container-fluid', which isn't semantic. When the big boys like Twitter dish this stuff out for everyone to use, they're condoning poor semantics for convenient styling and that is damaging to the industry.
I side with the guy, Ryan Taylor, who said the above. Semantic CSS is easier to maintain and Bootstrap isn't semantic. But I wonder if anyone bothered to give a thought about how easy it was to make it semantic, except one guy who ported it to sass.
It's pretty simple to write semantic CSS with Bootstrap if you have gone thru the docs for LessCSS, which Bootstrap uses. Unlike sass, which has a seperate "@mixin" syntax for mixins, LessCSS mixins are just CSS classes. When I got lazy to write my own UI using other libraries, I ported my current side-project to use Twitter Bootstrap and it was simple, other than a couple things which I needed to sort out in order to make it possible to write semantic code with it.
Here's lace.less. It's a couple CSS classes and a mixin to make your semantic life easier with Twitter's Bootstrap.
Use it like below. You should get that at first sight if you've written semantic CSS (else you wouldn't be reading this post).
I'm sure that there are some more stuff that need to be added. But for now, I have the grids working and it'll do for me. I'll add more later when required. That said, stop whining and go make something now!