_grid.scss

//////////////////////////////////////
// Simple Semantic SASS Grid System // for SCSS: http://sass-lang.com/
//////////////////////////////////////

// Adapted from  The Semantic Grid System: http://semantic.gs

// Defaults which you can freely override
$column-width: 60px;
$gutter-width: 15px;
$columns: 12;

// Set total width to 100% for responsive layout, set max width in pixels
$total-width: 100%;
$max-width: 1140px;

// Responsive Breakpoints, feel free to override or add more
$mobile: 768px;
$desktop: 960px;

// Add container for columns
@mixin container {
  margin-left: auto;
  margin-right: auto;
  max-width: $max-width;
}

// Add alpha, omega mixins for nested grids
// Be aware that use of these classes will change the content width,
// e.g. they will not properly work on 3 column layouts
@mixin alpha {
  padding-left: 0;
}
@mixin omega {
  padding-right: 0;
}

// Utility function — you should never need to modify this
@function gridsystem-width($columns:$columns) {
  @return ($column-width * $columns) + ($gutter-width * $columns);
}

// Set $total-width to 100% for a fluid layout
$total-width: gridsystem-width($columns);

// Uncomment these two lines and the star-hack width/margin lines below to enable sub-pixel fix for IE6 & 7. See http://tylertate.com/blog/2012/01/05/subpixel-rounding.html
// $min-width: 999999;
// $correction: 0.5 / $min-width * 100;

// The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/
@mixin clearfix() {
  *zoom:1;

  &:before,
  &:after {
    content:"";
    display:table;
  }
  &:after {
    clear:both;
  }
}


//////////
// GRID //
//////////

body {
  width: 100%;
  @include clearfix();
}

@mixin column($x,$columns:$columns) {
  display: inline;
  float: left;
  width: (1/$columns)*$x*(100%);
  padding: 0 $gutter-width;
  @include box-sizing(border-box);
  
  @media screen and (max-width: $mobile) {
    width: 100%;
    left: 0;
  }

}
@mixin push($offset:1) {
  left: (1/$columns)*$offset*(100%);
  position: relative;
}
@mixin pull($offset:1) {
  left: -((1/$columns)*$offset*(100%));
  position: relative;
}