zurb-foundation 2.2.1.2 → 3.0.3

data/stylesheets/foundation/_settings.scss

@@ -0,0 +1,71 @@
+// Settings file containing Foundation defaults
+
+// Grid Settings
+
+$rowWidth: 1000px !default;
+$columnGutter: 30px !default;
+$totalColumns: 12 !default;
+$mobileTotalColumns: 4 !default;
+
+// Colors Settings
+
+$mainColor: #2ba6cb !default;
+$secondaryColor: #e9e9e9 !default;
+$alertColor: #c60f13 !default;
+$successColor: #5da423 !default;
+$txtColor: #222 !default;
+$highlightColor: #ffff99 !default;
+$black: #000 !default;
+$white: #fff !default;
+$shinyEdge: rgba(#fff, .5) !default;
+$darkEdge: rgba(#000, .2) !default;
+
+// Button Settings
+
+$buttonRadius: 3px !default;
+$btnBase: 10px !default;
+
+$tinyBtnBase: $btnBase - 5 !default;
+$smallBtnBase: $btnBase - 3 !default;
+$largeBtnBase: $btnBase + 5 !default;
+
+// Form Settings
+
+$formSpacing: 12px !default;
+
+// Tab Settings
+
+$tabHeight: 40px !default;
+
+// Nav Bar Settings
+
+$navBarHeight: 40px !default;
+$navFlyoutBaseWidth: 250px !default;
+
+// Off Canvas Width Settings
+
+$mainWidth: 80% !default;
+$complementaryWidth: 20% !default;
+
+// Modular Scale Settings
+
+$ratio: $golden !default;
+$base-size: 14px 44px !default;
+// Produced the following list of values: 14, 17, 23, 27, 37, 44, 59, 71, 95, 115;
+// http://www.modularscale.com by Tim Brown
+// https://github.com/scottkellum/modular-scale by scottkellum
+
+// Media Queries
+
+$screenSmall: 768px !default;
+$screenMedium: 1279px !default;
+$screenXlarge: 1441px !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;
+

data/stylesheets/foundation/app.scss

@@ -0,0 +1,26 @@
+/* --------------------------------------------------
+   Table of Contents
+-----------------------------------------------------
+:: Shared Styles
+:: Page Name 1
+:: Page Name 2
+*/
+
+
+/* -----------------------------------------
+   Shared Styles
+----------------------------------------- */
+
+
+
+/* -----------------------------------------
+   Page Name 1
+----------------------------------------- */
+
+
+
+
+/* -----------------------------------------
+   Page Name 2
+----------------------------------------- */
+

data/stylesheets/foundation/buttons.scss

@@ -0,0 +1,175 @@
+/* Requires
+   globals.css */
+
+  @import "base";
+
+/* Normal Buttons ---------------------- */
+
+  .button { width: auto; background: $mainColor; border: 1px solid darken(($mainColor), 15%); @include box-shadow(0 1px 0 $shinyEdge inset); color: $white; cursor: pointer; display: inline-block; @include defaultFontFamily; font-size: ms(0); font-weight: bold; line-height: 1; margin: 0; outline: none; padding: $btnBase ($btnBase * 2) ($btnBase + 1); position: relative; text-align: center; text-decoration: none; @include single-transition(background-color, .15s, ease-in-out);
+
+    /* Hovers */
+    &:hover { color: $white; background-color: darken(($mainColor), 10%); }
+    &:active  { @include box-shadow(0 1px 0 $darkEdge inset); }
+    &:focus { @include box-shadow(0 0 4px opacify($mainColor, 0.3), 0 1px 0 $shinyEdge inset); color: $white; }
+
+    /* Sizes */
+    &.large     { font-size: ms(1); padding: ($largeBtnBase) ($largeBtnBase * 2) ($largeBtnBase + 1); }
+    &.medium    { font-size: ms(0); }
+    &.small     { font-size: ms(0) - 3; padding: ($smallBtnBase) ($smallBtnBase * 2) ($smallBtnBase + 1); }
+    &.tiny      { font-size: ms(0) - 4; padding: ($tinyBtnBase) ($tinyBtnBase * 2) ($tinyBtnBase + 1); }
+    &.expand    { width: 100%; text-align: center; }
+
+    /* Colors */
+    &.primary { background-color: $mainColor; border: 1px solid darken(($mainColor), 15%);
+      &:hover { background-color: darken(($mainColor), 10%); }
+      &:focus { @include box-shadow(0 0 4px opacify($mainColor, 0.3), 0 1px 0 $shinyEdge inset); }
+    }
+    &.success { background-color: $successColor; border: 1px solid darken(($successColor), 15%);
+      &:hover { background-color: darken(($successColor), 10%); }
+      &:focus { @include box-shadow(0 0 5px opacify($successColor, 0.4), 0 1px 0 $shinyEdge inset); }
+    }
+    &.alert { background-color: $alertColor; border: 1px solid darken(($alertColor), 15%);
+      &:hover { background-color: darken(($alertColor), 10%); }
+      &:focus { @include box-shadow(0 0 4px opacify($alertColor, 0.3), 0 1px 0 $shinyEdge inset); }
+    }
+    &.secondary { background-color: $secondaryColor; color: darken(($secondaryColor), 80%); border: 1px solid darken(($secondaryColor), 15%);
+      &:hover { background-color: darken(($secondaryColor), 10%); }
+      &:focus { @include box-shadow(0 0 5px opacify($secondaryColor, 0.5), 0 1px 0 $shinyEdge inset); }
+    }
+
+    /* Radii */
+    &.radius { @include border-radius($buttonRadius); }
+    &.round { @include border-radius(1000px); }
+
+    /* Layout */
+    &.full-width { width: 100%; text-align: center; padding-left: 0 !important; padding-right: !important; }
+    &.left-align { text-align: left; text-indent: 12px; }
+
+		/* Disabled ---------- */
+    &.disabled, &[disabled] { opacity: 0.6; cursor: default; background: $mainColor; @include box-shadow(none); }
+	}
+
+  /* Don't use native buttons on iOS */
+	input[type=submit].button, button.button { -webkit-appearance: none; }
+
+	@media only screen and (max-width: $screenSmall - 1) {
+    .button { display: block; }
+    button.button, input[type="submit"].button { width: 100%; padding-left: 0; padding-right: 0; }
+  }
+
+  /* Correct FF button padding */
+  @-moz-document url-prefix() {
+    button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner { border: none; padding: 0;  }
+    input[type="submit"].tiny.button		{ padding: ($tinyBtnBase - 2) ($tinyBtnBase * 2) ($tinyBtnBase - 1); }
+    input[type="submit"].small.button		{ padding: ($smallBtnBase - 2) ($smallBtnBase * 2) ($smallBtnBase - 1); }
+    input[type="submit"].button, input[type=submit].medium.button	{ padding: ($btnBase - 2) ($btnBase * 2) ($btnBase - 1) }
+    input[type="submit"].large.button		{ padding: ($largeBtnBase - 2) ($largeBtnBase * 2) ($largeBtnBase - 1); }
+  }
+
+/* Buttons with Dropdowns ---------------------- */
+
+  .button.dropdown { position: relative; padding-right: (($btnBase + 12) * 2);
+
+    /* Sizes */
+    &.large { padding-right: ($largeBtnBase * 2) * 2; }
+    &.small { padding-right: ($smallBtnBase * 2) * 2; }
+    &.tiny { padding-right: ($tinyBtnBase * 2) * 2; }
+
+    /* Triangles */
+    &:after { @include cssTriangle(6px, #fff, top); position: absolute; top: 50%; right: $btnBase * 2; margin-top: -2px; }
+    &.large:after { @include cssTriangle(7px, #fff, top); margin-top: -3px; right: $largeBtnBase * 2; }
+    &.small:after { @include cssTriangle(5px, #fff, top); margin-top: -2px; right: $smallBtnBase * 2; }
+    &.tiny:after { @include cssTriangle(4px, #fff, top); margin-top: -1px; right: $tinyBtnBase * 2; }
+
+    /* Flyout List */
+    &>ul { @include box-sizing(content-box); display: none; position: absolute; left: -1px; background: #fff; background: rgba(#fff,0.95); list-style: none; margin: 0; padding: 0; border: 1px solid darken($white, 20%); border-top: none; min-width: 100%; z-index: 40;
+
+      li { cursor: pointer; padding: 0; min-height: 18px; line-height: 18px; margin: 0; white-space: nowrap; list-style: none;
+        a { display: block; color: #555; font-size: ms(0) - 1; font-weight: normal; padding: 6px 14px; text-align: left; }
+        &:hover { background-color: lighten($mainColor, 45%); color: #222; }
+        &.divider { min-height: 0; padding: 0; height: 1px; margin: 4px 0; background: darken($white, 7%); }
+      }
+    }
+
+    ul.no-hover.show-dropdown { display: block !important; }
+    &:hover {
+      &>ul.no-hover {
+        display: none;
+      }
+    }
+
+    /* Split Dropdown Buttons */
+    &.split { padding: 0; position: relative;
+
+      &:after { display: none; }
+      &:hover { background-color: $mainColor; }
+      &.alert:hover { background-color: $alertColor; }
+      &.success:hover { background-color: $successColor; }
+      &.secondary:hover { background-color: $secondaryColor; }
+
+      /* Sizes */
+      &>a { color: $white; display: block; padding: $btnBase (($btnBase * 2.5) * 2) ($btnBase + 1) ($btnBase * 2); @include single-transition(background-color, .15s, ease-in-out);
+        &:hover { background-color: darken($mainColor, 10%); }
+      }
+      &.large>a { padding: $largeBtnBase (($largeBtnBase * 2.5) * 2) ($largeBtnBase + 1) ($largeBtnBase * 2); }
+      &.small>a { padding: $smallBtnBase (($smallBtnBase * 2.5) * 2) ($smallBtnBase + 1) ($smallBtnBase * 2); }
+      &.tiny>a { padding: $tinyBtnBase (($tinyBtnBase * 2.5) * 2) ($tinyBtnBase + 1) ($tinyBtnBase * 2); }
+
+      /* Triangle Spans */
+      &>span { background-color: $mainColor; position: absolute; right: 0; top: 0; height: 100%; width: $btnBase * 3; border-left: 1px solid darken($mainColor, 15%); @include box-shadow(1px 1px 0 $shinyEdge inset); @include single-transition(background-color, .15s, ease-in-out);
+        &:hover { background-color: darken($mainColor, 10%); }
+        &:after { @include cssTriangle(6px, #fff, top); position: absolute; top: 50%; left: 50%; margin-left: -6px; margin-top: -2px; }
+      }
+      &.large span { width: $largeBtnBase * 3; }
+      &.small span { width: $smallBtnBase * 3; }
+      &.tiny span { width: $tinyBtnBase * 3; }
+
+      &.large span:after { @include cssTriangle(7px, #fff, top); margin-top: -3px; margin-left: -7px; }
+      &.small span:after { @include cssTriangle(4px, #fff, top); margin-top: -1px; margin-left: -4px; }
+      &.tiny span:after { @include cssTriangle(3px, #fff, top); margin-top: -1px; margin-left: -3px; }
+
+      /* Colors */
+      &.alert>span { background-color: $alertColor; border-left-color: darken($alertColor, 15%); }
+      &.success>span { background-color: $successColor; border-left-color: darken($successColor, 15%); }
+      &.secondary>span { background-color: $secondaryColor; border-left-color: darken($secondaryColor, 15%); }
+
+      &.alert>a:hover, &.alert>span:hover { background-color: darken($alertColor, 10%); }
+      &.success>a:hover, &.success>span:hover { background-color: darken($successColor, 10%); }
+      &.secondary>a:hover, &.secondary>span:hover { background-color: darken($secondaryColor, 10%); }
+    }
+  }
+
+  /* Button Groups ---------------------- */
+
+  ul.button-group { list-style: none; padding: 0; margin: 0 0 12px; overflow: hidden;
+
+    li { padding: 0; margin: 0 0 0 -1px; float: left;
+      &:first-child { margin-left: 0; }
+    }
+
+    &.radius {
+      li:first-child a.button, li:first-child a.button.radius, li:first-child a.button.rounded { @include border-radius(0px); border-top-left-radius: $buttonRadius; border-bottom-left-radius: $buttonRadius; }
+      li + li a.button, li + li a.button.radius, li + li a.button.rounded { border-radius: 0; }
+      li:last-child a.button, li:last-child a.button.radius, li:last-child a.button.rounded { @include border-radius(0px); border-top-right-radius: $buttonRadius; border-bottom-right-radius: $buttonRadius; }
+    }
+
+    &.rounded {
+      li:first-child a.button, li:first-child a.button.radius, li:first-child a.button.rounded { @include border-radius(0px); border-top-left-radius: 1000px; border-bottom-left-radius: 1000px; }
+      li + li a.button, li + li a.button.radius, li + li a.button.rounded { border-radius: 0; }
+      li:last-child a.button, li:last-child a.button.radius, li:last-child a.button.rounded { @include border-radius(0px); border-top-right-radius: 1000px; border-bottom-right-radius: 1000px; }
+    }
+
+    &.even {
+      a.button { width: 100%; }
+      &.two-up li { width: 50%; }
+      &.three-up li { width: 33.3%; }
+      &.three-up li:first-child { width: 33.4%; }
+      &.four-up li { width: 25%; }
+      &.five-up li { width: 20%; }
+    }
+  }
+
+  div.button-bar { overflow: hidden;
+    ul.button-group { float: left; margin-right: 8px; }
+    ul.button-group:last-child { margin-left: 0; }
+  }

data/stylesheets/foundation/forms.scss

@@ -0,0 +1,130 @@
+/* Requires
+   globals.css */
+
+  @import "base";
+
+/* Standard Forms ---------------------- */
+
+  form { margin: 0 0 ($formSpacing * $ratio); }
+
+  .row form .row { margin: 0 (-($formSpacing / 2));
+
+    .column, .columns { padding: 0 ($formSpacing / 2); }
+
+    &.collapse { margin: 0;
+      .column, .columns { padding: 0; }
+    }
+  }
+
+  label { font-size: ms(0); color: lighten($black, 30%); cursor: pointer; display: block; font-weight: 500; margin-bottom: 3px;
+
+    &.right { float: none; text-align: right; padding-top: ($formSpacing / 2); }
+  }
+
+  @media only screen and (max-width: $screenSmall - 1) {
+    label.right { text-align: left; }
+  }
+
+  .prefix, .postfix { display: block; position: relative; z-index: 2; text-align: center; width: 100%; padding-top: 0; padding-bottom: 0; height: 32px; line-height: 31px; }
+  a.button.prefix, a.button.postfix { padding-left: 0; padding-right: 0; text-align: center; }
+  span.prefix, span.postfix { background: darken($white, 5%); border: 1px solid darken($white, 20%); }
+
+  .prefix { left: 2px; @include border-corner-radius(top, left, 2px); @include border-corner-radius(bottom, left, 2px); }
+  .postfix { right: 2px; @include border-corner-radius(top, right, 2px); @include border-corner-radius(bottom, right, 2px); }
+
+  input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea { border: 1px solid darken($white, 20%); @include border-radius(2px); @include box-shadow(inset 0 1px 2px rgba(0,0,0,0.1)); color: rgba(0,0,0,0.75); display: block; font-size: ms(0); margin: 0 0 $formSpacing 0; padding: ($formSpacing / 2); height: (ms(0) + ($formSpacing * 1.5)); width: 100%; @include transition(all 0.15s linear);
+
+    &.oversize { @include font-size(18, true); }
+
+    &:focus { background: darken($white, 2%); outline: none !important; border-color: darken($white, 30%); }
+    &[disabled] { background-color: #ddd; }
+  }
+  
+  textarea { height: auto; }
+
+  select { width: 100%; }
+
+  /* Fieldsets */
+  fieldset { border: solid 1px #ddd; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; padding: 12px 12px 0; margin: 18px 0;
+
+    legend { font-weight: bold; background: $white; padding: 0 3px; margin: 0 0 0 -3px; }
+  }
+
+  /* Inlined Radio & Checkbox */
+  .form-field input[type=radio], div.form-field input[type=checkbox] { display: inline; width: auto; margin-bottom: 0; }
+
+  /* Errors */
+  .form-field.error input, input.input-text.alert { border-color: $alertColor; background-color: rgba(255,0,0,0.15); }
+  .form-field.error label, label.alert { color: $alertColor; }
+  .form-field.error small, small.error { padding: 6px 4px; border: solid 0 #C00000; border-width: 0 1px 1px 1px; margin-top: -10px; background: $alertColor; color: #fff; @include font-size(12); font-weight: bold; @include border-top-left-radius(2px); @include box-sizing(border-box); }
+
+  @media only screen and (max-width: $screenSmall - 1) {
+    @for $i from 1 through $totalColumns {
+      input[type="text"].#{convert-number-to-word($i)}, textarea.#{convert-number-to-word($i)} { width: 100% !important; }
+    }
+  }
+
+  /* Custom Forms ---------------------- */
+
+  form.custom {
+
+    span.custom { display: inline-block; width: 16px; height: 16px; position: relative; top: 2px; border: solid 1px #ccc; background: #fff;
+
+      &.radio { @include border-radius(100px); }
+      &.checkbox {
+        &:before { content: "\00d7"; display: block; line-height: 0.8; height: 14px; width: 14px; text-align: center; position: absolute; top: 0; left: 0; /* margin-top: -9px; margin-left: -4px; */ font-size: 14px; color: #fff; }
+      }
+      &.radio.checked {
+        &:before { content: ""; display: block; width: 8px; height: 8px; @include border-radius(100px); background: #222; position: relative; top: 3px; left: 3px; }
+      }
+      &.checkbox.checked {
+        &:before { color: #222; }
+      }
+    }
+    div.custom.dropdown { display: block; position: relative; width: auto; height: 28px; margin-bottom: 9px; margin-top: 2px;
+
+      a.current { display: block; width: auto; line-height: 26px; min-height: 28px; padding: 0 38px 0 6px; border: solid 1px #ddd; color: #141414; background-color: #fff; white-space: nowrap; }
+      a.selector { position: absolute; width: 27px; height: 28px; display: block; right: 0; top: 0; border: solid 1px #ddd;
+        &:after { content: ""; display: block; @include cssTriangle(5px, #aaa, top); position: absolute; left: 50%; top: 50%; margin-top: -2px; margin-left: -5px;  }
+      }
+      &:hover, &.open {
+        a.selector { &:after { @include cssTriangle(5px, #222, top); } }
+      }
+
+      &.open ul { display: block; z-index: 10; }
+
+      &.small { width: 134px !important; }
+      &.medium { width: 254px !important; }
+      &.large { width: 434px !important; }
+      &.expand { width: 100% !important; }
+
+      &.open.small ul { width: 134px !important; }
+      &.open.medium ul { width: 254px !important; }
+      &.open.large ul { width: 434px !important; }
+      &.open.expand ul { width: 100% !important; }
+    }
+
+    div.custom.dropdown ul { position: absolute; width: auto; display: none; margin: 0; left: 0; top: 27px; margin: 0; padding: 0; background: #fff; background: rgba(#fff,0.95); border: solid 1px darken($white, 20%);
+
+      li { color: #555; font-size: ms(0) - 1; cursor: pointer; padding: 3px 38px 3px 6px; min-height: 18px; line-height: 18px; margin: 0; white-space: nowrap; list-style: none; }
+      li.selected { background: lighten($mainColor, 40%); color: #000;
+        &:after { content: "\2013"; position: absolute; right: 10px; }
+      }
+      li:hover { background-color: lighten($mainColor, 45%); color: #222;
+        &:after { content: "\2013"; position: absolute; right: 10px; color: lighten($mainColor, 25%); }
+      }
+      li.selected:hover { background: lighten($mainColor, 40%); cursor: default; color: #000;
+        &:after { color: #000; }
+      }
+      &.show { display: block; }
+    }
+
+    /* Custom input, disabled */
+    .custom.disabled { background-color: #ddd; }
+  }
+
+  /* Correct FF custom dropdown height */
+  @-moz-document url-prefix() {
+    form.custom div.custom.dropdown a.selector { height: 30px; }
+  }
+  .lt-ie9 form.custom div.custom.dropdown a.selector { height: 30px; }

data/stylesheets/foundation/globals.scss

@@ -0,0 +1,34 @@
+/* Requires:
+   normalize.css
+   -box-sizing.htc */
+
+  @import "base";
+
+/* Global Reset & Standards ---------------------- */
+
+  * { @include box-sizing(border-box); }
+  html { font-size: 62.5%; }
+  body { background: $white; @include defaultFontFamily; @include font-size(14); line-height: 1; color: $txtColor; position: relative; -webkit-font-smoothing: antialiased; }
+
+/* Links ---------------------- */
+
+  a { color: $mainColor; text-decoration: none; line-height: inherit; }
+  a:hover { color: darken($mainColor, 5%); }
+  a:focus { color: $mainColor; outline: none; }
+  p a, p a:visited { line-height: inherit; }
+
+/* Misc ---------------------- */
+
+  .left        { float: left; }
+  .right       { float: right; }
+  .text-left   { text-align: left; }
+  .text-right  { text-align: right; }
+  .text-center { text-align: center; }
+  .hide        { display: none; }
+  .highlight   { background: $highlightColor; }
+
+  #googlemap img, object, embed { max-width: none; }
+
+  #map_canvas embed { max-width: none; }
+  #map_canvas img { max-width: none; }
+  #map_canvas object { max-width: none; }

data/stylesheets/foundation/grid.scss

@@ -0,0 +1,132 @@
+
+
+  @import "base";
+
+  /* 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: left; min-height: 1px; padding: 0 ($columnGutter/2); position: relative;
+    &.centered { float: none; margin: 0 auto; }
+  }
+
+  [class*="column"] + [class*="column"]:last-child { float: right; }
+  [class*="column"] + [class*="column"].end { float: left; }
+
+  // Creating .row-# classes
+  @for $i from 1 through $totalColumns {
+    .row {
+      .#{convert-number-to-word($i)} { width: gridCalc($i, $totalColumns); }
+    }
+  }
+
+  // Creating .row .offset-by-# classes
+  @for $i from 1 through $totalColumns - 2 {
+    .row {
+      .offset-by-#{convert-number-to-word($i)} { margin-left: gridCalc($i, $totalColumns); }
+    }
+  }
+
+  // Creating .row .push-# classes
+  @for $i from 2 through $totalColumns - 2 {
+    .push-#{convert-number-to-word($i)} { left: gridCalc($i, $totalColumns); }
+    .pull-#{convert-number-to-word($i)} { right: gridCalc($i, $totalColumns); }
+  }
+
+  img, object, embed { max-width: 100%; height: auto; }
+  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-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
+
+    .row { width: auto; min-width: 0; margin-left: 0; margin-right: 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; }
+
+    // Silent Placeholder classes for mobile grid overrides
+    .no-left-margin { margin-left: 0 !important; }
+    .left-auto { left: auto; }
+    .right-auto { right: auto; }
+
+    @for $i from 1 through $totalColumns - 2 {
+      .offset-by-#{convert-number-to-word($i)} { @extend .no-left-margin; }
+    }
+    @for $i from 2 through $totalColumns - 2 {
+      .push-#{convert-number-to-word($i)} { @extend .left-auto; }
+      .pull-#{convert-number-to-word($i)} { @extend .right-auto; }
+    }
+
+    /* Mobile 4-column Grid */
+    @for $i from 1 through $mobileTotalColumns {
+      .row {
+        .mobile-#{convert-number-to-word($i)} { width: gridCalc($i, $mobileTotalColumns) !important; float: left; padding: 0 ($columnGutter/2);
+          &:last-child { float: right; }
+        }
+        &.collapse {
+          .mobile-#{convert-number-to-word($i)} { padding: 0; }
+        }
+      }
+    }
+    @for $i from 1 through $mobileTotalColumns - 1 {
+      .push-#{convert-number-to-word($i)}-mobile { left: gridCalc($i, $mobileTotalColumns); }
+      .pull-#{convert-number-to-word($i)}-mobile { right: 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: left; }
+  }
+
+  .block-grid.two-up { margin: 0 -15px; }
+  .block-grid.two-up>li { width: 50%; padding: 0 15px 15px; }
+  /*  .block-grid.two-up>li:nth-child(2n+1) {clear: left;} */
+
+  .block-grid.three-up { margin: 0 -12px; }
+  .block-grid.three-up>li { width: 33.33%; padding: 0 12px 12px; }
+  /*  .block-grid.three-up>li:nth-child(3n+1) {clear: left;} */
+
+  .block-grid.four-up { margin: 0 -10px; }
+  .block-grid.four-up>li { width: 25%; padding: 0 10px 10px; }
+  /*  .block-grid.four-up>li:nth-child(4n+1) {clear: left;} */
+
+  .block-grid.five-up { margin: 0 -8px; }
+  .block-grid.five-up>li { width: 20%; padding: 0 8px 8px; }
+  /*  .block-grid.five-up>li:nth-child(5n+1) {clear: left;} */
+
+  /* Mobile Block Grids */
+  @media only screen and (max-width: $screenSmall - 1) {
+    .block-grid.mobile { margin-left: 0; }
+    .block-grid.mobile > li { float: none; width: 100%; margin-left: 0; }
+  }