Grids

_grids.sass

//------------------------------------------------------
//  Grids
//
//  Based on the following:
//  * https://github.com/necolas/suit-grid
//  * https://github.com/csswizardry/csswizardry-grids
//------------------------------------------------------

$grid-columns: 12 !default
$grid-defaults: "lap" 480px, "desk" 800px !default
$grid-gutter: 20px !default
$grid-silent: false !default

// ----- Selector Type ----- //

$grid-selector: if($grid-silent, unquote("%"), unquote("."))

// ----- Base ----- //

#{$grid-selector}grid
  display: block
  letter-spacing: -0.31em
  margin-left: -$grid-gutter / 2
  margin-right: -$grid-gutter / 2
  text-rendering: optimizespeed
  word-spacing: -0.43em

#{$grid-selector}grid-box
  -moz-box-sizing: border-box
  box-sizing: border-box
  display: inline-block
  letter-spacing: normal
  margin: 0
  padding-left: $grid-gutter / 2
  padding-right: $grid-gutter / 2
  text-rendering: auto
  vertical-align: top
  word-spacing: normal

// ----- Modifiers ----- //

#{$grid-selector}grid--center
  text-align: center

#{$grid-selector}grid-box--center
  display: block
  margin: 0 auto

// ----- Grid ----- //

=device-type($namespace: '')

  // One Part

  #{$grid-selector}grid-box--#{$namespace}1of1
    width: 100%

  // Two Parts

  #{$grid-selector}grid-box--#{$namespace}1of2
    width: 50%

  // Three Parts
  
  @if $grid-columns >= 3
    #{$grid-selector}grid-box--#{$namespace}1of3
      width: 33.333%
    #{$grid-selector}grid-box--#{$namespace}2of3
      width: 66.666%

  // Four Parts

  @if $grid-columns >= 4
    #{$grid-selector}grid-box--#{$namespace}1of4
      width: 25%
    #{$grid-selector}grid-box--#{$namespace}2of4
      @extend #{$grid-selector}grid-box--#{$namespace}1of2
    #{$grid-selector}grid-box--#{$namespace}3of4
      width: 75%

  // Five Parts

  @if $grid-columns >= 5
    #{$grid-selector}grid-box--#{$namespace}1of5
      width: 20%
    #{$grid-selector}grid-box--#{$namespace}2of5
      width: 40%
    #{$grid-selector}grid-box--#{$namespace}3of5
      width: 60%
    #{$grid-selector}grid-box--#{$namespace}4of5
      width: 80%

  // Six Parts

  @if $grid-columns >= 6
    #{$grid-selector}grid-box--#{$namespace}1of6
      width: 16.666%
    #{$grid-selector}grid-box--#{$namespace}2of6
      @extend #{$grid-selector}grid-box--#{$namespace}1of3
    #{$grid-selector}grid-box--#{$namespace}3of6
      @extend #{$grid-selector}grid-box--#{$namespace}1of2
    #{$grid-selector}grid-box--#{$namespace}4of6
      @extend #{$grid-selector}grid-box--#{$namespace}2of3
    #{$grid-selector}grid-box--#{$namespace}5of6
      width: 83.333%

  // Eight Parts

  @if $grid-columns >= 8
    #{$grid-selector}grid-box--#{$namespace}1of8
      width: 12.5%
    #{$grid-selector}grid-box--#{$namespace}2of8
      @extend #{$grid-selector}grid-box--#{$namespace}1of4
    #{$grid-selector}grid-box--#{$namespace}3of8
      width: 37.5%
    #{$grid-selector}grid-box--#{$namespace}4of8
      @extend #{$grid-selector}grid-box--#{$namespace}1of2
    #{$grid-selector}grid-box--#{$namespace}5of8
      width: 62.5%
    #{$grid-selector}grid-box--#{$namespace}6of8
      @extend #{$grid-selector}grid-box--#{$namespace}3of4
    #{$grid-selector}grid-box--#{$namespace}7of8
      width: 87.5%

  // Ten Parts

  @if $grid-columns >= 10
    #{$grid-selector}grid-box--#{$namespace}1of10
      width: 10%
    #{$grid-selector}grid-box--#{$namespace}2of10
      @extend #{$grid-selector}grid-box--#{$namespace}1of5
    #{$grid-selector}grid-box--#{$namespace}3of10
      width: 30%
    #{$grid-selector}grid-box--#{$namespace}4of10
      @extend #{$grid-selector}grid-box--#{$namespace}2of5
    #{$grid-selector}grid-box--#{$namespace}5of10
      @extend #{$grid-selector}grid-box--#{$namespace}1of2
    #{$grid-selector}grid-box--#{$namespace}6of10
      @extend #{$grid-selector}grid-box--#{$namespace}3of5
    #{$grid-selector}grid-box--#{$namespace}7of10
      width: 70%
    #{$grid-selector}grid-box--#{$namespace}8of10
      @extend #{$grid-selector}grid-box--#{$namespace}4of5
    #{$grid-selector}grid-box--#{$namespace}9of10
      width: 90%

  // Twelve Parts

  @if $grid-columns >= 12
    #{$grid-selector}grid-box--#{$namespace}1of12
      width: 8.333%
    #{$grid-selector}grid-box--#{$namespace}2of12
      @extend #{$grid-selector}grid-box--#{$namespace}1of6
    #{$grid-selector}grid-box--#{$namespace}3of12
      @extend #{$grid-selector}grid-box--#{$namespace}1of4
    #{$grid-selector}grid-box--#{$namespace}4of12
      @extend #{$grid-selector}grid-box--#{$namespace}1of3
    #{$grid-selector}grid-box--#{$namespace}5of12
      width: 41.666%
    #{$grid-selector}grid-box--#{$namespace}6of12
      @extend #{$grid-selector}grid-box--#{$namespace}1of2
    #{$grid-selector}grid-box--#{$namespace}7of12
      width: 58.333%
    #{$grid-selector}grid-box--#{$namespace}8of12
      @extend #{$grid-selector}grid-box--#{$namespace}2of3
    #{$grid-selector}grid-box--#{$namespace}9of12
      @extend #{$grid-selector}grid-box--#{$namespace}3of4
    #{$grid-selector}grid-box--#{$namespace}10of12
      @extend #{$grid-selector}grid-box--#{$namespace}5of6
    #{$grid-selector}grid-box--#{$namespace}11of12
      width: 91.666%

// ----- Create ----- //

+device-type()

@each $device in $grid-defaults
  @media screen and (min-width: nth($device, 2))
    +device-type("#{nth($device, 1)}--")