diff --git a/css.html b/css.html index 6c760dd039..26b8f1d3f4 100644 --- a/css.html +++ b/css.html @@ -388,26 +388,36 @@ base_url: "../"
Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.
{% highlight css %} // Creates a wrapper for a series of columns -.make-row() { - // Negative margin the row out to align the content of columns - margin-left: (@grid-gutter-width / -2); - margin-right: (@grid-gutter-width / -2); +.make-row(@gutter: @grid-gutter-width) { // Then clear the floated columns .clearfix(); + + @media (min-width: @screen-small) { + margin-left: (@gutter / -2); + margin-right: (@gutter / -2); + } + + // Negative margin nested rows out to align the content of columns + .row { + margin-left: (@gutter / -2); + margin-right: (@gutter / -2); + } } // Generate the columns -.make-column(@columns) { - @media (min-width: @grid-float-breakpoint) { - float: left; - // Calculate width based on number of columns available - width: percentage(@columns / @grid-columns); - } +.make-column(@columns; @gutter: @grid-gutter-width) { + position: relative; // Prevent columns from collapsing when empty min-height: 1px; - // Set inner padding as gutters instead of margin - padding-left: (@grid-gutter-width / 2); - padding-right: (@grid-gutter-width / 2); + // Inner gutter via padding + padding-left: (@gutter / 2); + padding-right: (@gutter / 2); + + // Calculate width based on number of columns available + @media (min-width: @grid-float-breakpoint) { + float: left; + width: percentage((@columns / @grid-columns)); + } } // Generate the column offsets @@ -416,6 +426,33 @@ base_url: "../" margin-left: percentage((@columns / @grid-columns)); } } +.make-column-push(@columns) { + @media (min-width: @grid-float-breakpoint) { + left: percentage((@columns / @grid-columns)); + } +} +.make-column-pull(@columns) { + @media (min-width: @grid-float-breakpoint) { + right: percentage((@columns / @grid-columns)); + } +} + +// Generate the small columns +.make-small-column(@columns; @gutter: @grid-gutter-width) { + position: relative; + float: left; + // Prevent columns from collapsing when empty + min-height: 1px; + // Inner gutter via padding + padding-left: (@gutter / 2); + padding-right: (@gutter / 2); + @max-width: (@grid-float-breakpoint - 1); + + // Calculate width based on number of columns available + @media (max-width: @max-width) { + width: percentage((@columns / @grid-columns)); + } +} {% endhighlight %}