/* ---------------------------------------------- *\

  Partial: grid

  We're using Susy. Please visit http://susy.readthedocs.org/en/latest/install/

  Due to using Susy, we're going to need the Ruby gems installed. Please a see a guide here: [TBD].

  Usage
  =====

\* ---------------------------------------------- */


/* - Index
-------------------------------------------------
  - Global defaults     ............................. 1.0.
  - Grid makeup         ............................. 2.0.
*/

/* ---------------------------------------------- *\
  1.0 Global defaults
\* ---------------------------------------------- */

$susy: (
  flow: ltr,
  output: float,
  container: 1080px,
  container-position: center,
  columns: 12,
  gutters: 0.50
);

// USEAGE:
// @include respond-to(tiny) {
//   color: tomato;
// }

/* ---------------------------------------------- *\
  1.0 Grid makeup
\* ---------------------------------------------- */

$max-width: 1080px;
$grid-namespace: "contain";
$grid-column-namespace: "g-";
$grid-width: $max-width;

//some defaults to breakpoint scss
@include bkpt-set('to ems', true);
@include bkpt-set('no query fallbacks', true);

// set basics followed by customs 
$BREAKPOINTS: (
  tiny: 320px,
  480: 480px,
  640: 640px,
  700: 700px,
  768: 768px,
  768to920: (768px 920px),
  920: 920px,
  1200: 1200px,
  1250: 1250px,
  1260: 1260px,
);

.contain{
  @include container;
  padding: 0 ms(4);
  
  @include respond-to(1200) {
    padding: 0;
  }

  &--table{
    display: table;
    width: 100%;
    max-width: $max-width;
    margin: 0 auto;
  }
}

//generate our grid classes
// @for $i from 1 through map-get($susy, columns) {
//  .#{$grid-column-namespace}#{$i} {
//     @include span($i of 12);

//     @include breakpoint(map-get($breakpoints, tiny)) {
//       @include span(full);
//     }
//   }
// }