universal layout

_grid.sass

// MEASUREMENTS
$base-size: 16px !default
$line-height: 1.3em !default
$margin: 5% !default
$gutter-width: 10% !default
$gutter-height: $line-height
$module-width: respond !default
$module-height: $line-height * 3 !default
$columns: 12 !default
$wrapper-align: center !default

$body-color: #333 !default
$wrapper-color: #fff !default
$aside-color: #eee !default
$headder-color: #fff !default
$nav-color: #000 !default
$footer-color: #fff


body
  background-color: $body-color
  font-size: $base-size
  line-height: $line-height

#wrapper
  background-color: $wrapper-color

@function grid($units: 1, $axis: x)
  @if $axis == "x"
    @if $module-width == "respond"
      $module-width: (100% - ($gutter-width * ($columns - 1))) / $columns
      @return ($module-width * $units) + ($gutter-width * ($units - 1))
    @if $module-width != "respond"
      @return ($module-width * $units) + ($gutter-width * ($units - 1))
  @if $axis == "y"
    @return ($module-height * $units) + ($gutter-height * ($units - 1))

@if $module-width == "respond"
  #wrapper
    position: relative
    @if $wrapper-align == "left"
      margin-left: 0
      margin-right: $margin
    @if $wrapper-align == "center"
      margin-left: $margin
      margin-right: $margin
    @if $wrapper-align == "right"
      margin-left: $margin
      margin-right: 0
@if $module-width != "respond"
  #wrapper
    @if $wrapper-align == "center"
      margin-left: auto
      margin-right: auto
    @if $wrapper-align == "right"
      margin-left: auto
      margin-right: 0
    width: grid($columns)