Created
January 8, 2015 07:59
-
-
Save xyhp915/ccb689b2a2801543ce48 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Framework grid generation | |
// | |
// Used only by Bootstrap to generate the correct number of grid classes given | |
// any value of `@grid-columns`. | |
.make-grid-columns() { | |
// Common styles for all sizes of grid columns, widths 1-12 | |
.col(@index) { // initial | |
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; | |
.col((@index + 1), @item); | |
} | |
.col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo | |
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; | |
.col((@index + 1), ~"@{list}, @{item}"); | |
} | |
.col(@index, @list) when (@index > @grid-columns) { // terminal | |
@{list} { | |
position: relative; | |
// Prevent columns from collapsing when empty | |
min-height: 1px; | |
// Inner gutter via padding | |
padding-left: (@grid-gutter-width / 2); | |
padding-right: (@grid-gutter-width / 2); | |
// Proper box-model (padding doesn't add to width) | |
.box-sizing(border-box); | |
} | |
} | |
.col(1); // kickstart it | |
} | |
.float-grid-columns(@class) { | |
.col(@index) { // initial | |
@item: ~".col-@{class}-@{index}"; | |
.col((@index + 1), @item); | |
} | |
.col(@index, @list) when (@index =< @grid-columns) { // general | |
@item: ~".col-@{class}-@{index}"; | |
.col((@index + 1), ~"@{list}, @{item}"); | |
} | |
.col(@index, @list) when (@index > @grid-columns) { // terminal | |
@{list} { | |
float: left; | |
} | |
} | |
.col(1); // kickstart it | |
} | |
.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) { | |
.col-@{class}-@{index} { | |
width: percentage((@index / @grid-columns)); | |
} | |
} | |
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) { | |
.col-@{class}-push-@{index} { | |
left: percentage((@index / @grid-columns)); | |
} | |
} | |
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) { | |
.col-@{class}-push-0 { | |
left: auto; | |
} | |
} | |
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) { | |
.col-@{class}-pull-@{index} { | |
right: percentage((@index / @grid-columns)); | |
} | |
} | |
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) { | |
.col-@{class}-pull-0 { | |
right: auto; | |
} | |
} | |
.calc-grid-column(@index, @class, @type) when (@type = offset) { | |
.col-@{class}-offset-@{index} { | |
margin-left: percentage((@index / @grid-columns)); | |
} | |
} | |
// Basic looping in LESS | |
.loop-grid-columns(@index, @class, @type) when (@index >= 0) { | |
.calc-grid-column(@index, @class, @type); | |
// next iteration | |
.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); | |
} | |
.container-fixed(@gutter: @grid-gutter-width) { | |
margin-right: auto; | |
margin-left: auto; | |
padding-left: (@gutter / 2); | |
padding-right: (@gutter / 2); | |
.clearfix(); | |
} | |
.container{ | |
.container-fixed(); | |
@media (min-width: @screen-sm-min) { | |
width: @container-sm; | |
} | |
@media (min-width: @screen-md-min) { | |
width: @container-md; | |
} | |
@media (min-width: @screen-lg-min) { | |
width: @container-lg; | |
} | |
} | |
.row{ | |
.make-row(); | |
} | |
// Columns | |
// | |
// Common styles for small and large grid columns | |
.make-grid-columns(); | |
// Extra small grid | |
// | |
// Columns, offsets, pushes, and pulls for extra small devices like | |
// smartphones. | |
.make-grid(xs); | |
// Small grid | |
// | |
// Columns, offsets, pushes, and pulls for the small device range, from phones | |
// to tablets. | |
@media (min-width: @screen-sm-min) { | |
.make-grid(sm); | |
} | |
// Medium grid | |
// | |
// Columns, offsets, pushes, and pulls for the desktop device range. | |
@media (min-width: @screen-md-min) { | |
.make-grid(md); | |
} | |
// Large grid | |
// | |
// Columns, offsets, pushes, and pulls for the large desktop device range. | |
@media (min-width: @screen-lg-min) { | |
.make-grid(lg); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment