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.