// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.
-.make-grid-columns-float(xs);
-.make-grid(@grid-columns, xs, width);
-.make-grid(@grid-columns, xs, pull);
-.make-grid(@grid-columns, xs, push);
-.make-grid(@grid-columns, xs, offset);
+.make-grid(xs);
// Small grid
// to tablets.
@media (min-width: @screen-sm-min) {
- .make-grid-columns-float(sm);
- .make-grid(@grid-columns, sm, width);
- .make-grid(@grid-columns, sm, pull);
- .make-grid(@grid-columns, sm, push);
- .make-grid(@grid-columns, sm, offset);
+ .make-grid(sm);
}
// Columns, offsets, pushes, and pulls for the desktop device range.
@media (min-width: @screen-md-min) {
- .make-grid-columns-float(md);
- .make-grid(@grid-columns, md, width);
- .make-grid(@grid-columns, md, pull);
- .make-grid(@grid-columns, md, push);
- .make-grid(@grid-columns, md, offset);
+ .make-grid(md);
}
// Columns, offsets, pushes, and pulls for the large desktop device range.
@media (min-width: @screen-lg-min) {
- .make-grid-columns-float(lg);
- .make-grid(@grid-columns, lg, width);
- .make-grid(@grid-columns, lg, pull);
- .make-grid(@grid-columns, lg, push);
- .make-grid(@grid-columns, lg, offset);
+ .make-grid(lg);
}
.col(1); // kickstart it
}
-.make-grid-columns-float(@class) {
+.float-grid-columns(@class) {
.col(@index) when (@index = 1) { // initial
@item: ~".col-@{class}-@{index}";
.col((@index + 1), @item);
.col(1); // kickstart it
}
-.calc-grid(@index, @class, @type) when (@type = width) and (@index > 0) {
+.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
.col-@{class}-@{index} {
width: percentage((@index / @grid-columns));
}
}
-.calc-grid(@index, @class, @type) when (@type = push) {
+.calc-grid-column(@index, @class, @type) when (@type = push) {
.col-@{class}-push-@{index} {
left: percentage((@index / @grid-columns));
}
}
-.calc-grid(@index, @class, @type) when (@type = pull) {
+.calc-grid-column(@index, @class, @type) when (@type = pull) {
.col-@{class}-pull-@{index} {
right: percentage((@index / @grid-columns));
}
}
-.calc-grid(@index, @class, @type) when (@type = offset) {
+.calc-grid-column(@index, @class, @type) when (@type = offset) {
.col-@{class}-offset-@{index} {
margin-left: percentage((@index / @grid-columns));
}
}
// Basic looping in LESS
-.make-grid(@index, @class, @type) when (@index >= 0) {
- .calc-grid(@index, @class, @type);
+.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
+ .calc-grid-column(@index, @class, @type);
// next iteration
- .make-grid((@index - 1), @class, @type);
+ .loop-grid-columns((@index - 1), @class, @type);
}
+// Create grid for specific class
+.make-grid(@class) {
+ .float-grid-columns(@class);
+ .loop-grid-columns(@grid-columns, @class, width);
+ .loop-grid-columns(@grid-columns, @class, pull);
+ .loop-grid-columns(@grid-columns, @class, push);
+ .loop-grid-columns(@grid-columns, @class, offset);
+}
// Form validation states
//