twitter/bootstrap — Issue #1636: Better support for defining grid in LESS (instead of html)
Author: Barryvdh
Created: 2012-02-02 21:15:15+00:00
State: open

Instead of using html classes like `.span4` and `.row` in your html, it was possible to set the grid in your LESS code (in 1.4) with `makeColumn(@columnSpan)` and `.row` directyly in LESS. (See Issue #824)

With the new grid system, this has become more difficult. What is the best way to approach this?
My first approach was creating custom functions for my grid, like `.makeColumn(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @gridSpan){` but than you have to do the following for every thing you want to define:

.block {
#customGridSystem > .makeColumn(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4);
}

My second approach is changing the #gridSystem mixin

[class*="span"] {
#gridSystem > .gridColumn(@gridGutterWidth);
}

to

.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
#gridSystem > .gridColumn(@gridGutterWidth);
}

Then (also in the #gridSystem > generate() mixin)
`#customGridSystem > .generate(); // Generate our grid (also in responsive..)`

For responsive, also just include this. I can then define my grid once.

#customGridSystem {
.generate() { //Generate our custom grid
header, #main, footer {
.row;
}
.block {
.span4;
}
}
}

Offcourse I could also code this directyly in the gridSystem..
Any thoughts on the best way to handle this? Any big downfalls for using 12 selectors (span1, span2 etc) instead of `[class*="span"]`, or for assigning grids like this?