Skip to content

Instantly share code, notes, and snippets.

@james-jlo-long
Created August 24, 2015 10:45
Show Gist options
  • Save james-jlo-long/34b962c5d2917cf50ae7 to your computer and use it in GitHub Desktop.
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
// 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