grid.scss

$grid-columns: 12;
$glutter: 15px;
$max-container-width: 1170px;
$breakpoints: (
  (name: xs, min: 0,      max: 768px),
  (name: sm, min: 769px,  max: 1024px),
  (name: md, min: 1024px, max: 1170px),
  (name: lg, min: 1170px, max: 0)
);

@mixin span ($column) {
  float: left;
  width: ((100% / $grid-columns) * $column);
}

@mixin offset ($column) {
  margin-left: ((100% / $grid-columns) * $column);
}

.container, .row, [class*="col-"] {
  box-sizing: border-box;
}

.row {
  &::after, &::before {
    content: '';
    clear: both;
    display: block;
  }
}

.container {
  max-width: $max-container-width;
  margin: 0 auto;
}

[class*="col-"] {
  box-sizing: border-box;
  padding: 0 $glutter;
  float: left;
}

@each $cond in $breakpoints {
  $rule: '';
  $name: map-get($cond, name);
  $min: map-get($cond, min);
  $max: map-get($cond, max);
  
  @if $min > 0 {
    $rule: 'and (min-width: #{$min})'
  }

  @if $max > 0 {
    $rule: '#{$rule} and (max-width: #{$max})';
  }

  @media screen #{$rule} {
    .hidden-#{$name} { display: none!important; }
    .visible-#{$name}, .visible-#{$name}-block {display: block!important; }
    .visible-#{$name}-inline {display: inline!important;}
    .visible-#{$name}-inline-block {display: inline-block!important;}
    
    @for $i from 1 through $grid-columns {
      .col-#{$name}-#{$i} {
        @include span($i);
      }
      
      .col-#{$name}-offset-#{$i} {
        @include offset($i);
      }
    }
  }
}