Arbitrary grids and nesting

[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.

[cvrebert]

X-Ref: #13428, #11322.

[kapooostin]

I agree it is. I did a poor job on searching in issues obviously.

Still, I do not see the reasons why not to add more flexibility to grids. At the moment we are restricted to uniform grids and nesting is kind of a hack ("take two six-module-columns to split column in half").

[cvrebert]

Yes, as I said in #13428, I'm personally in favor of the idea, and mdo said he would entertain a PR for it.

[kapooostin]

I made a PR. Is there a more evident way to attach that PR to this issue?

[mdo]

See comments in the PR.