Better support for defining grid in LESS (instead of html)

Created by: barryvdh

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 (closed))

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? (Edit: same goes for responsive.less; // Make all columns even .row > [class_="span"], .row-fluid > [class_="span"] {