Skip to content

Instantly share code, notes, and snippets.

@ddx32
Last active August 29, 2015 14:07
Show Gist options
  • Save ddx32/320c18e59370ee07b1ff to your computer and use it in GitHub Desktop.
Save ddx32/320c18e59370ee07b1ff to your computer and use it in GitHub Desktop.
Bootstrap's missing 480px columns mixins
/*
An extension of andyl's hack – https://gist.github.com/andyl/6360906
in a mixin version.
*/
@import 'bootstrap'; // if you haven't already
@screen-ms-min: 480px;
.make-ms-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
min-height: 1px;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
@media (min-width: @screen-ms-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
.make-ms-column-offset(@columns) {
@media (min-width: @screen-ms-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-ms-column-push(@columns) {
@media (min-width: @screen-ms-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-ms-column-pull(@columns) {
@media (min-width: @screen-ms-min) {
right: percentage((@columns / @grid-columns));
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment