Created
August 24, 2015 10:45
-
-
Save james-jlo-long/34b962c5d2917cf50ae7 to your computer and use it in GitHub Desktop.
It can be handy to have a grid layout for very small devided (< 480). This snippit adds "xxs" columns to Bootstrap 3 which solve that purpose
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
// Generate the extra-extra small columns | |
// These go from a screen width of 0 to (@screen-xs-min - 1), existing below XS. | |
.make-xxs-column(@columns; @gutter: @grid-gutter-width) { | |
min-height: 1px; | |
padding-left: (@gutter / 2); | |
padding-right: (@gutter / 2); | |
position: relative; | |
@media (max-width: (@screen-xs-min - 1)) { | |
float: left; | |
width: percentage((@columns / @grid-columns)); | |
} | |
} | |
.make-xxs-column-offset(@columns) { | |
@media (max-width: (@screen-xs-min - 1)) { | |
margin-left: percentage((@columns / @grid-columns)); | |
} | |
} | |
.make-xxs-column-push(@columns) { | |
@media (max-width: (@screen-xs-min - 1)) { | |
left: percentage((@columns / @grid-columns)); | |
} | |
} | |
.make-xxs-column-pull(@columns) { | |
@media (max-width: (@screen-xs-min - 1)) { | |
right: percentage((@columns / @grid-columns)); | |
} | |
} | |
// Override to allow for XXS columns | |
.make-grid-columns() { | |
// Common styles for all sizes of grid columns, widths 1-12 | |
.col(@index) when (@index = 1) { // initial | |
@item: ~".col-xxs-@{index}, 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-xxs-@{index}, .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 | |
// Inner gutter via padding | |
padding-left: (@grid-gutter-width / 2); | |
padding-right: (@grid-gutter-width / 2); | |
} | |
} | |
.col(1); // kickstart it | |
} | |
@media (max-width: (@screen-xs-min - 1)) { | |
.make-grid(xxs); | |
} | |
// Override the `.media-body` width hack. | |
.col-xxs-12.media-body { | |
width: 100%; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment