Arbitrary grids and nesting

Created by: kapooostin

A feature to generate different grids on a single page.

Demo.

I modified mixins for generating columns to accept total amount of columns as an optional parameter. Here is one of the mixins:

.make-sm-column(@columns; @gutter: @grid-gutter-width; @columns-total: @grid-columns) {
  position: relative;
  min-height: 1px;
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @columns-total));
  }
}

It uses a global @grid-columns as a default amount of columns, so the framework doesn't break. In the demo above I didn't modify any of the variables and default grid classes work fine.

Check a .less file used in the demo.

I could make a PR to both LESS and SASS repositories if this feature would be useful for anyone else.