$default-grid-selector: ".grid" !default
$default-cell-selector: ".cell" !default
$default-cell-gutter: 20px !default
$default-number-of-cells: 12 !default
$default-cell-width: 100% / $default-number-of-cells !default


@mixin outer-container($grid-width: "100%", $grid-margin: "0")
  width: $grid-width
  margin: $grid-margin

  &:after
    +clearfix()

@mixin create-grid($grid-selector: $default-grid-selector, $cell-selector: $default-cell-selector, $number-of-cells: $default-number-of-cells, $cell-gutter: $default-cell-gutter, $cell-width: $default-cell-width, $grid-width: "100%", $grid-margin: "0")
  #{$grid-selector}
    +outer-container($grid-width, $grid-margin)

  #{$cell-selector}
    +create-cells($grid-selector, $number-of-cells, $cell-gutter)

  // Add an opt-in paddedcell
  #{$grid-selector}.padded
    padding: $cell-gutter

// Setup a cell to be used inside the grid.  Each cell should have
// the `cell` class in addition to a `w-N` class, where N equals
// the numerator in a fraction such as `N / $number-of-cells`.
@mixin create-cells($parent, $number-of-cells: $default-number-of-cells, $cell-gutter: $default-cell-gutter, $cell-width: $default-cell-width)
  float: left
  padding-right: $cell-gutter

  // Make sure that the last `.cell` in a given `.grid` doesn't
  // include any padding.  This works like an omega mixin.
  #{$parent} &:last-of-type
    padding-right: 0

  @for $i from 1 through $number-of-cells
    &.w-#{$i}
      +create-cell-w($cell-width, $i)


@mixin create-cell-w($width, $cells)
  // Start using relative cells once you hit the size where cells
  // become useful.  This corresponds to the tablet size.
  @media screen and (min-width: 799px)
    width: $width * $cells
  // Don't use cells on a mobile, instead treat them as one big
  // cell of 100% cells.
  @media screen and (max-width: 799px)
    width: 100%
    padding-right: 0

+create-grid()
