Semantic helpers for responsive website implementations using bootstrap-sass. Specifically adds responsive replacements for the makeRow() and makeColumn() mixins included in Twitter Bootstrap.

gistfile1.scss

@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));
  }
}

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

Great gist! Keep up the good work!

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?

@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.