Semantic grid system

Question

We've started to use twitter's bootstrap, specifically just all the .less files.

One thing that's bothering me, is all the extra classes in my html, for instance.. I don't want my page to look like this:

<header class="row">
</head>
<section class="row">
</secton>
<footer class="row">
</footer>

So normally with less I could just fix this, by doing:

header {

  .row;

}

or

header {

  #gridSystem > .row;

}

But this doesn't seem to work..

What would be the correct way to go about this?

Answer 1

Try use the new version of Bootstrap 2 with new grid system:

header {
    #gridSystem > .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth);
}

References:

http://twitter.github.com/bootstrap/upgrading.html

https://github.com/twitter/bootstrap/blob/master/less/grid.less

http://lesscss.org/#-namespaces