Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Semantic helpers for responsive website implementations using bootstrap-sass. Specifically adds responsive replacements for the makeRow() and makeColumn() mixins included in Twitter Bootstrap.
@mixin row() {
margin-left: $gridGutterWidth * -1;
@media (max-width: 767px) { margin-left: 0; }
@media (min-width: 768px) and (max-width: 979px) { margin-left: $gridGutterWidth768 * -1; }
@media (min-width: 1200px) { margin-left: $gridGutterWidth1200 * -1; }
@include clearfix();
}
@mixin column($columns: 1, $offset: 0) {
float: left;
margin-left: ($gridColumnWidth * $offset) + ($gridGutterWidth * ($offset - 1)) + ($gridGutterWidth * 2);
width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
@media (max-width: 767px) {
float: none;
display: block;
width: 100%;
margin-left: 0;
@include box-sizing(border-box);
}
@media (min-width: 768px) and (max-width: 979px) {
margin-left: ($gridColumnWidth768 * $offset) + ($gridGutterWidth768 * ($offset - 1)) + ($gridGutterWidth768 * 2);
width: ($gridColumnWidth768 * $columns) + ($gridGutterWidth768 * ($columns - 1));
}
@media (min-width: 1200px) {
margin-left: ($gridColumnWidth1200 * $offset) + ($gridGutterWidth1200 * ($offset - 1)) + ($gridGutterWidth1200 * 2);
width: ($gridColumnWidth1200 * $columns) + ($gridGutterWidth1200 * ($columns - 1));
}
}
@weimeng
Copy link
Author

weimeng commented Jan 22, 2013

Removed the @media query helpers to keep this gist specific to the semantic class helpers.

@johannesjo
Copy link

johannesjo commented Apr 18, 2013

Great gist! Keep up the good work!

@thebarty
Copy link

thebarty commented May 11, 2013

Hi weimeng,

could you show an more detailed example on how to use this?

Is this compatible with the current twitter bootstrap 2.3.1?

@weimeng
Copy link
Author

weimeng commented Aug 21, 2013

@MikeSmith12222, it's been awhile since I've used Twitter Bootstrap, but this should be compatible with 2.3.x releases.

There isn't really much detail to be had, basically do @include column(2) for a .span2 or @include column(2,1) for a .span2.offset1. It's very similar to Bootstrap's default makeColumn and makeRow mixins, just updated to use responsive column widths.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment