/* ==========================================================
 * grid.scss
 *
 * Sets up the grid
 * DOCS:
 * ========================================================== */


/* =============================================================================
$ Variables
================================================================================ */
$columWidth:      ($layoutWidth + $columnGutter) / $totalColumns - $columnGutter !default;
$grid-direction:  $start;

/* =============================================================================
$ Grid Classes
================================================================================ */
.columns {
  // Base styles for .row .# classes
  float: $grid-direction;
  margin: 0 ($columnGutter / 2) +px;

  // Layout modes and helper classes
  &.centered {
    margin: 0 auto;
    float: none;
  }
  &.first { margin-#{$start}: 0; }
  &.last { margin-#{$end}: 0; }

  // Creating .columns.# classes
  @for $i from 1 through $totalColumns {
    &.#{convert-number-to-word($i)} {
      width: gridCalc($i, $totalColumns);
    }
  }

  // Creating .columns.offset-by-# classes
  @for $i from 1 through $totalColumns - 1 {
    &.offset-by-#{convert-number-to-word($i)} {
      margin-#{$start}: gridCalc($i, $totalColumns) + ($columnGutter);
    }
  }
}
/* ==========================================================
 * grid.scss
 *
 * Sets up the grid
 * DOCS:
 * ========================================================== */


/* =============================================================================
$ Variables
================================================================================ */
$columWidth:      ($layoutWidth + $columnGutter) / $totalColumns - $columnGutter !default;
$grid-direction:  $start;

/* =============================================================================
$ Grid Classes
================================================================================ */
.columns {
  // Base styles for .row .# classes
  float: $grid-direction;
  margin: 0 ($columnGutter / 2) +px;

  // Layout modes and helper classes
  &.centered {
    margin: 0 auto;
    float: none;
  }
  &.first { margin-#{$start}: 0; }
  &.last { margin-#{$end}: 0; }

  // Creating .columns.# classes
  @for $i from 1 through $totalColumns {
    &.#{convert-number-to-word($i)} {
      width: gridCalc($i, $totalColumns);
    }
  }

  // Creating .columns.offset-by-# classes
  // @for $i from 1 through $totalColumns - 1 {
  //   &.offset-by-#{convert-number-to-word($i)} {
  //     margin-#{$start}: gridCalc($i, $totalColumns) + ($columnGutter);
  //   }
  // }
}
Comment offset-by classes to prevent bloated code
Comment offset-by classes to prevent bloated code
