Blocks

blocks.scss

// block sections, to be used within .containers
// all exist on a 12 unit grid and are relative in 
// size to the container element
$break: 50em;

@mixin width($num) {
  width: 100% * ($num / 12)
}

.block_1,
.block_2,
.block_3,
.block_4,
.block_5,
.block_6,
.block_7,
.block_8,
.block_9,
.block_10,
.block_11,
.block_12 {
  display: block;
  @media (min-width: $break) {
    float: left;
  }
  &.block_right {
    float: right;
  }
}

@media (min-width: $break) {
  .block_1 { @include width(1); }
  .block_2 { @include width(2); }
  .block_3 { @include width(3); }
  .block_4 { @include width(4); }
  .block_5 { @include width(5); }
  .block_6 { @include width(6); }
  .block_7 { @include width(7); }
  .block_8 { @include width(8); }
  .block_9 { @include width(9); }
  .block_10 { @include width(10); }
  .block_11 { @include width(11); }
  .block_12 { @include width(12); }
}