Semantic Grid with Bootstrap + LESS Mixins ¿ HOW?

Question

Twitter bootstrap documentation talks about three mixins to generate grid systems:

.container-fixed();
#grid > .core();
#grid > .fluid();

Answer 1

In navbar.less of bootstrap you will find the following.

grid and .core are used to namespace the .span()

.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
#grid > .core > .span(@gridColumns);
}

In cases where you want to keep "span3" etc out of your html you could very well do something similar to:

header {
   #grid > .core .span(12)
}

article.right {
   #grid > .core .span(6)
}

aside.right {
   #grid > .core .span(6)
}

footer {
   #grid > .core .span(12)
}

(12) and (6) are the number of columns you'd like your header element to span. This is of course replacing