grid.scss

@import "grid_settings";

* { 
  -webkit-box-sizing: border-box; /* Android ≤ 2.3, iOS ≤ 4 */
     -moz-box-sizing: border-box; /* Firefox 1+ */
          box-sizing: border-box; /* Chrome, IE 8+, Opera, Safari 5.1 */
  
  }

/* The Grid ---------------------- */

.row { width: $rowWidth; max-width: 100%; min-width: $screenSmall; margin: 0 auto;
  .row { width: auto; max-width: none; min-width: 0; margin: 0 (-($columnGutter/2)); }

  &.collapse {
    .column, .columns { padding: 0; }
  }
  .row { width: auto; max-width: none; min-width: 0; margin: 0 (-($columnGutter/2));
    &.collapse { margin: 0; }
  }
}

.column, .columns { float: $defaultFloat; min-height: 1px; padding: 0 ($columnGutter/2); position: relative;
  &.centered { float: none; margin: 0 auto; }
  *behavior: url(../js/boxsizing.htc); //kick shitty IE into shape
}

[class*="column"] + [class*="column"]:last-child { float: $defaultOpposite; }
[class*="column"] + [class*="column"].end { float: $defaultFloat; }

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

// Creating .row-# classes
@for $i from 1 through $totalColumns {
  .row {
    .#{convert-number-to-word($i)} { @extend .#{convert-number-to-word($i)}; }
  }
}

// Creating .row .offset-by-# classes
@for $i from 1 through $totalColumns - 2 {
  .row {
    .offset-by-#{convert-number-to-word($i)} { margin-#{$defaultFloat}: gridCalc($i, $totalColumns); }
  }
}

// Creating .row .push-# classes
@for $i from 2 through $totalColumns - 2 {
  .push-#{convert-number-to-word($i)} { #{$defaultFloat}: gridCalc($i, $totalColumns); }
  .pull-#{convert-number-to-word($i)} { #{$defaultOpposite}: gridCalc($i, $totalColumns); }
}

img, object, embed { max-width: 100%; height: auto; }
object, embed { height: 100%; }
img { -ms-interpolation-mode: bicubic; }
#map_canvas img, .map_canvas img {max-width: none!important;}

/* Nicolas Gallagher's micro clearfix */
.row { @include clearfix(); }

/* Mobile Grid and Overrides ---------------------- */

@media only screen and (max-width: $screenSmall - 1) {
  body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; width: 100%; min-width: 0; margin-#{$defaultFloat}: 0; margin-#{$defaultOpposite}: 0; padding-#{$defaultFloat}: 0; padding-#{$defaultOpposite}: 0; }

  .row { width: auto; min-width: 0; margin-#{$defaultFloat}: 0; margin-#{$defaultOpposite}: 0; }
  .column, .columns { width: auto !important; float: none;  }
  .column:last-child, .columns:last-child { float: none; }
  [class*="column"] + [class*="column"]:last-child { float: none; }
  .column:before, .columns:before, .column:after, .columns:after { content:""; display:table; }
  .column:after, .columns:after { clear: both; }

  // Placeholder classes for mobile grid overrides
  %no-default-margin { margin-#{$defaultFloat}: 0 !important; }
  %default-auto { #{$defaultFloat}: auto; }
  %opposite-auto { #{$defaultOpposite}: auto; }

  @for $i from 1 through $totalColumns - 2 {
    .offset-by-#{convert-number-to-word($i)} { @extend %no-default-margin; }
  }
  @for $i from 2 through $totalColumns - 2 {
    .push-#{convert-number-to-word($i)} { @extend %default-auto; }
    .pull-#{convert-number-to-word($i)} { @extend %opposite-auto; }
  }

  /* Mobile 4-column Grid */
  @for $i from 1 through $mobileTotalColumns {
        .row {
          .mobile-#{convert-number-to-word($i)} { width: gridCalc($i, $mobileTotalColumns) !important; float: $defaultFloat; padding: 0 ($columnGutter/2);
          &:last-child { float: $defaultOpposite; }
          &.end { float: $defaultFloat; }
        }
        &.collapse {
            .mobile-#{convert-number-to-word($i)} { padding: 0; }
        }
      }
  }
  @for $i from 1 through $mobileTotalColumns - 1 {
    .push-#{convert-number-to-word($i)}-mobile { #{$defaultFloat}: gridCalc($i, $mobileTotalColumns); }
    .pull-#{convert-number-to-word($i)}-mobile { #{$defaultOpposite}: gridCalc($i, $mobileTotalColumns); }
  }
}

/* Block Grids ---------------------- */

/* These are 2-up, 3-up, 4-up and 5-up ULs, suited
for repeating blocks of content. Add 'mobile' to
them to switch them just like the layout grid
(one item per line) on phones

For IE7/8 compatibility block-grid items need to be
the same height. You can optionally uncomment the
lines below to support arbitrary height, but know
that IE7/8 do not support :nth-child.
-------------------------------------------------- */

.block-grid { display: block; overflow: hidden; padding: 0;

  &>li { display: block; height: auto; float: $defaultFloat; }
  &.one-up { margin: 0; 
    &>li { width: 100%; padding: 0 0 15px; }
  }

  &.two-up { margin: 0 -15px; 
    &>li { width: 50%; padding: 0 15px 15px; 
      &:nth-child(2n+1) { clear: both; }
    }
  }

  &.three-up { margin: 0 -12px; 
    &>li { width: 33.33%; padding: 0 12px 12px; 
      &:nth-child(3n+1) { clear: both; }
    }
  }

  &.four-up { margin: 0 -10px; 
    &>li { width: 25%; padding: 0 10px 10px; 
      &:nth-child(4n+1) { clear: both; }
    }
  }

  &.five-up { margin: 0 -8px; 
    &>li { width: 20%; padding: 0 8px 8px; 
      &:nth-child(5n+1) { clear: both; }
    }
  }
}

/* Mobile Block Grids */
@media only screen and (max-width: $screenSmall - 1) {
  .block-grid.mobile {
    &>li { float: none; width: 100%; margin-#{$defaultFloat}: 0; }
  }

  .block-grid {
    &>li { clear: none !important; }
    &.mobile-two-up>li { width: 50%; 
      &:nth-child(2n+1) { clear: both; }
    }

    &.mobile-three-up>li { width: 33.33%; 
      &:nth-child(3n+1) { clear: both !important; }
    }

    &.mobile-four-up>li { width: 25%;
      &:nth-child(4n+1) { clear: both; }
    }

    &.mobile-five-up>li {
      &:nth-child(5n+1) { clear: both; }
    }
  }
}




  /* Visibility Classes TODO:MOVE THIS OUT OF GRID---------------------- */

  /* Standard (large) display targeting */
  .show-for-small,
  .show-for-medium,
  .show-for-medium-down,
  .hide-for-large,
  .hide-for-large-up,
  .show-for-xlarge { display: none !important; }

  .hide-for-xlarge,
  .show-for-large,
  .show-for-large-up,
  .hide-for-small,
  .hide-for-medium,
  .hide-for-medium-down { display: block !important; }

  /* Very large display targeting */
  @media only screen and (min-width: $screenXlarge) {
    .hide-for-small,
    .hide-for-medium,
    .hide-for-medium-down,
    .hide-for-large,
    .show-for-large-up,
    .show-for-xlarge { display: block !important; }

    .show-for-small,
    .show-for-medium,
    .show-for-medium-down,
    .show-for-large,
    .hide-for-large-up,
    .hide-for-xlarge { display: none !important; }
  }

  /* Medium display targeting */
  @media only screen and (max-width: $screenMedium) and (min-width: $screenSmall) {
    .hide-for-small,
    .show-for-medium,
    .show-for-medium-down,
    .hide-for-large,
    .hide-for-large-up,
    .hide-for-xlarge { display: block !important; }

    .show-for-small,
    .hide-for-medium,
    .hide-for-medium-down,
    .show-for-large,
    .show-for-large-up,
    .show-for-xlarge { display: none !important; }
  }

  /* Small display targeting */
  @media only screen and (max-width: $screenSmall - 1) {
    .show-for-small,
    .hide-for-medium,
    .show-for-medium-down,
    .hide-for-large,
    .hide-for-large-up,
    .hide-for-xlarge { display: block !important; }

    .hide-for-small,
    .show-for-medium,
    .hide-for-medium-down,
    .show-for-large,
    .show-for-large-up,
    .show-for-xlarge { display: none !important; }
  }

  /* Orientation targeting */
  .show-for-landscape,
  .hide-for-portrait { display: block !important; }
  .hide-for-landscape,
  .show-for-portrait { display: none !important; }

  @media screen and (orientation: landscape) {
    .show-for-landscape,
    .hide-for-portrait { display: block !important; }
    .hide-for-landscape,
    .show-for-portrait { display: none !important; }
  }

  @media screen and (orientation: portrait) {
    .show-for-portrait,
    .hide-for-landscape { display: block !important; }
    .hide-for-portrait,
    .show-for-landscape { display: none !important; }
  }

  /* Touch-enabled device targeting */
  .show-for-touch { display: none !important; }
  .hide-for-touch { display: block !important; }
  .touch .show-for-touch { display: block !important; }
  .touch .hide-for-touch { display: none !important; }

  /* Specific overrides for elements that require something other than display: block */

  table.show-for-xlarge,
  table.show-for-large,
  table.hide-for-small,
  table.hide-for-medium { display: table !important; }

  @media only screen and (max-width: $screenMedium) and (min-width: $screenSmall) {
    .touch table.hide-for-xlarge,
    .touch table.hide-for-large,
    .touch table.hide-for-small,
    .touch table.show-for-medium { display: table !important; }
  }

  @media only screen and (max-width: $screenSmall - 1) {
    table.hide-for-xlarge,
    table.hide-for-large,
    table.hide-for-medium,
    table.show-for-small { display: table !important; }
  }

grid_settings.scss

// Settings file containing Foundation defaults

// Grid Settings

$rowWidth: 1170px !default;
$columnGutter: 30px !default;
$totalColumns: 24 !default;
$mobileTotalColumns: 4 !default;

// Text Direction Settings

$textDirection: ltr !default; // Controls default global text direction, 'rtl' or 'ltr'
$defaultFloat: left !default; // Change this to 'right' for right-to-left languages
$defaultOpposite: right !default; // Change this to 'left' for right-to-left languages

@if $textDirection == ltr {
  $defaultFloat: left;
  $defaultOpposite: right;
} @else {
  $defaultFloat: right;
  $defaultOpposite: left;
}


// Off Canvas Width Settings

$mainWidth: 80% !default;
$complementaryWidth: 20% !default;


// Media Queries

$screenSmall: 768px !default;
$screenMedium: 1279px !default;
$screenXlarge: 1441px !default;

// Saving for better em-based testing
// $screenSmall: 44em !default;
// $screenMedium: 77em !default;
// $screenXlarge: 104em !default;

// Saving for Sass 3.2 stable release
// $mediaSmall: "only screen and (max-width: 767px)" !default;
// $mediaMedium: "only screen and (max-width: 1279px) and (min-width: 768px)" !default;
// $mediaXlarge: "only screen and (min-width: 1441px)" !default;
// $mediaLandscape: "screen and (orientation: landscape)" !default;
// $mediaPortrait: "screen and (orientation: portrait)" !default;
// $mediaAll: "only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px)" !default;

//@import "convert-number-to-word";
@function convert-number-to-word($num) {
  $count:1;
  @each $word in one,two,three,four,five,six,seven,eight,nine,ten,eleven,
    twelve,thirteen,fourteen,fifteen,sixteen,seventeen,eighteen,nineteen,
    twenty,twentyone,twentytwo,twentythree,twentyfour{
    @if ($count == $num) { @return $word; }
    $count: $count + 1;
  }
  @return "invalid";
}

//@import "grid-calc";
// Grid Calculation for Percentages

@function gridCalc($colNumber, $totalColumns) {
  @return percentage(($colNumber / $totalColumns));
}

// The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/

@mixin clearfix() { *zoom:1;
  &:before, &:after { content: ""; display: table; }
  &:after { clear: both; }
}

@mixin mobileClearfix() {
  @include respondTo(smallScreen) { &:before, &:after { content: ""; display: table; }
    &:after { clear: both; }
    &:last-child { float: none; }
  }
}

// Mixin for Semantic Grid reponsiveness

@mixin respondTo($media) {
  @if $media == smallScreen {
    @media only screen and (max-width: $screenSmall - 1) { @content; }
  } @else if $media == mediumScreen {
    @media only screen and (max-width: $screenMedium) and (min-width: $screenSmall) { @content; }
  } @else if $media == largeScreen {
    @media only screen and (min-width: $screenXlarge) { @content; }
  }
}