From 7037c6fc7291fc66af62fa0ba7b9e8fdb78cf7f0 Mon Sep 17 00:00:00 2001 From: Donald Pipowitch Date: Tue, 28 Jan 2014 10:48:45 +0100 Subject: [PATCH] refactored and renamed grid mixins --- less/grid.less | 24 ++++-------------------- less/mixins.less | 24 ++++++++++++++++-------- 2 files changed, 20 insertions(+), 28 deletions(-) diff --git a/less/grid.less b/less/grid.less index 88957f42a5..e100655b70 100644 --- a/less/grid.less +++ b/less/grid.less @@ -53,11 +53,7 @@ // 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 @@ -66,11 +62,7 @@ // 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); } @@ -79,11 +71,7 @@ // 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); } @@ -92,9 +80,5 @@ // 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); } diff --git a/less/mixins.less b/less/mixins.less index 85a41ef508..7b4c726f09 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -796,7 +796,7 @@ .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); @@ -813,34 +813,42 @@ .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 //