// Grider
// by Diogo Moretti
// https://github.com/diogomoretti/grider
// Based on Semantic.gs

// ========== CONFIG ==========
// ============================

// Num of columns
grider-config-columns             = 12

// Spacing between columns - value in px
grider-config-gutter              = 5

// Max size of container
grider-config-container           = 1040px

// Padding in column - values with unit (px, em, percent...)
grider-config-padding-column      = 0

// Padding in container - values with unit (px, em, percent...)
grider-config-padding-container   = 0 1em

// Margin bottom for each column - values with unit (px, em, percent...)
grider-config-marginbottom-column = .3em

// Calc for obtain column-width (DO NOT CHANGE!)
grider-config-column-width        = grider-config-container / grider-config-columns

// ========== DEVICES =========
// ============================
grider-device-phone       = 580px
grider-device-tablet      = 880px

// ======= MEDIA QUERIES ======
// ============================
tablet       = "(min-width: " + (grider-device-phone + 1) + ") and (max-width: " + (grider-device-tablet) + ")"
phone        = "(max-width: " + (grider-device-phone) + ")"
tablet-phone = "(max-width: " + (grider-device-tablet) + ")"

// ========== HELPERS =========
// ============================
*, *:before, *:after
  box-sizing: border-box

clearfix()
 *zoom:1
  &:before,
  &:after
    content:""
    display:table
  &:after
    clear:both

hideOn(device)
  display: inherit
  @media device
    display: none !important
 
showOn(device)
  display: none
  @media device
    display: inherit !important

// ========= GRID VARS ========
// ============================
total-width = 100%
min-width   = 960
correction  = (((0.5 / min-width) * 100) * 1%)


// ======= GRIDER CORE ========
// ============================
body
  width 100%
  clearfix()

$container
  display: table
  max-width: grider-config-container
  width: 100%
  margin: 0 auto
  padding: grider-config-padding-container

column(x, grider-config-columns = grider-config-columns)
  float: left
  padding: 0 grider-config-padding-column
  width: total-width * ((((grider-config-column-width ) * x) - grider-config-gutter) / grider-config-container)
  margin: 0 total-width * ( (grider-config-gutter * 0.5) / grider-config-container)
  margin-bottom: grider-config-marginbottom-column
  *width total-width * ((((grider-config-gutter + grider-config-column-width ) * x) - grider-config-gutter) / grider-config-container) - correction
  *margin 0 total-width * ( (grider-config-gutter * 0.5) / grider-config-container) - correction

offset(offset = 1)
  margin-left total-width*(((grider-config-gutter+grider-config-column-width)*offset + (grider-config-gutter*0.5))/grider-config-container)

// ======= MAKE GRIDER ========
// ============================

for index in (1..grider-config-columns)
  $grider-{index}
    column(index)

@media tablet-phone
  for index in (1..grider-config-columns) 
    $grider-tablet-phone-{index}
      column(index)

@media tablet
  for index in (1..grider-config-columns) 
    $grider-tablet-{index}
      column(index)

@media phone
  for index in (1..grider-config-columns) 
    $grider-phone-{index}
      column(index)