From 6e526fa30434f341a7e5c28010e98b2e9c4cdac4 Mon Sep 17 00:00:00 2001
From: Nick Pack <nick@nickpack.com>
Date: Tue, 23 Apr 2013 21:29:51 +0100
Subject: [PATCH] Dynamic grid, thanks @matthewcopeland

---
 css/skeleton.css     | 493 ++++++++++++++++---------------------------
 scss/_grid.scss      | 247 ++++++----------------
 scss/_mixins.scss    |  54 +++++
 scss/_variables.scss |   7 +
 scss/skeleton.scss   |   4 +-
 5 files changed, 312 insertions(+), 493 deletions(-)

diff --git a/css/skeleton.css b/css/skeleton.css
index ff2d9ab..fcda9fd 100644
--- a/css/skeleton.css
+++ b/css/skeleton.css
@@ -58,349 +58,201 @@ body {
   background: #fff;
   font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: #444;
-  -webkit-font-smoothing: antialiased;
-  /* Fix for webkit rendering */
   -webkit-text-size-adjust: 100%; }
 
 /* #Forms
 ================================================== */
-/* #Base 960 Grid
-================================================== */
 .container {
   position: relative;
-  width: 960px;
   margin: 0 auto;
   padding: 0; }
 
-.container .column,
-.container .columns {
+.column, .columns {
   float: left;
   display: inline;
   margin-left: 10px;
-  margin-right: 10px;
-  box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-  -o-box-sizing: border-box;
-  -khtml-box-sizing: border-box; }
+  margin-right: 10px; }
+  .column.alpha, .columns.alpha {
+    margin-left: 0; }
+  .column.omerga, .columns.omerga {
+    margin-right: 0; }
 
 .row {
   margin-bottom: 20px; }
 
-/* Nested Column Classes */
-.column.alpha, .columns.alpha {
-  margin-left: 0; }
+.container {
+  width: 960px; }
+  .container .columns.one, .container .column.one {
+    width: 40px; }
+  .container .columns.two, .container .column.two {
+    width: 100px; }
+  .container .columns.three, .container .column.three {
+    width: 160px; }
+  .container .columns.four, .container .column.four {
+    width: 220px; }
+  .container .columns.five, .container .column.five {
+    width: 280px; }
+  .container .columns.six, .container .column.six {
+    width: 340px; }
+  .container .columns.seven, .container .column.seven {
+    width: 400px; }
+  .container .columns.eight, .container .column.eight {
+    width: 460px; }
+  .container .columns.nine, .container .column.nine {
+    width: 520px; }
+  .container .columns.ten, .container .column.ten {
+    width: 580px; }
+  .container .columns.eleven, .container .column.eleven {
+    width: 640px; }
+  .container .columns.twelve, .container .column.twelve {
+    width: 700px; }
+  .container .columns.thirteen, .container .column.thirteen {
+    width: 760px; }
+  .container .columns.fourteen, .container .column.fourteen {
+    width: 820px; }
+  .container .columns.fifteen, .container .column.fifteen {
+    width: 880px; }
+  .container .columns.sixteen, .container .column.sixteen {
+    width: 940px; }
+  .container .columns.one-third, .container .column.one-third {
+    width: 300px; }
+  .container .columns.two-thirds, .container .column.two-thirds {
+    width: 620px; }
+  .container .offset-by-one {
+    padding-left: 60px; }
+  .container .offset-by-two {
+    padding-left: 120px; }
+  .container .offset-by-three {
+    padding-left: 180px; }
+  .container .offset-by-four {
+    padding-left: 240px; }
+  .container .offset-by-five {
+    padding-left: 300px; }
+  .container .offset-by-six {
+    padding-left: 360px; }
+  .container .offset-by-seven {
+    padding-left: 420px; }
+  .container .offset-by-eight {
+    padding-left: 480px; }
+  .container .offset-by-nine {
+    padding-left: 540px; }
+  .container .offset-by-ten {
+    padding-left: 600px; }
+  .container .offset-by-eleven {
+    padding-left: 660px; }
+  .container .offset-by-twelve {
+    padding-left: 720px; }
+  .container .offset-by-thirteen {
+    padding-left: 780px; }
+  .container .offset-by-fourteen {
+    padding-left: 840px; }
+  .container .offset-by-fifteen {
+    padding-left: 900px; }
 
-.column.omega, .columns.omega {
-  margin-right: 0; }
+@media only screen and (max-width: 959px) {
+  .container {
+    width: 768px; }
+    .container .columns.one, .container .column.one {
+      width: 28px; }
+    .container .columns.two, .container .column.two {
+      width: 76px; }
+    .container .columns.three, .container .column.three {
+      width: 124px; }
+    .container .columns.four, .container .column.four {
+      width: 172px; }
+    .container .columns.five, .container .column.five {
+      width: 220px; }
+    .container .columns.six, .container .column.six {
+      width: 268px; }
+    .container .columns.seven, .container .column.seven {
+      width: 316px; }
+    .container .columns.eight, .container .column.eight {
+      width: 364px; }
+    .container .columns.nine, .container .column.nine {
+      width: 412px; }
+    .container .columns.ten, .container .column.ten {
+      width: 460px; }
+    .container .columns.eleven, .container .column.eleven {
+      width: 508px; }
+    .container .columns.twelve, .container .column.twelve {
+      width: 556px; }
+    .container .columns.thirteen, .container .column.thirteen {
+      width: 604px; }
+    .container .columns.fourteen, .container .column.fourteen {
+      width: 652px; }
+    .container .columns.fifteen, .container .column.fifteen {
+      width: 700px; }
+    .container .columns.sixteen, .container .column.sixteen {
+      width: 748px; }
+    .container .columns.one-third, .container .column.one-third {
+      width: 236px; }
+    .container .columns.two-thirds, .container .column.two-thirds {
+      width: 492px; }
+    .container .offset-by-one {
+      padding-left: 48px; }
+    .container .offset-by-two {
+      padding-left: 96px; }
+    .container .offset-by-three {
+      padding-left: 144px; }
+    .container .offset-by-four {
+      padding-left: 192px; }
+    .container .offset-by-five {
+      padding-left: 240px; }
+    .container .offset-by-six {
+      padding-left: 288px; }
+    .container .offset-by-seven {
+      padding-left: 336px; }
+    .container .offset-by-eight {
+      padding-left: 384px; }
+    .container .offset-by-nine {
+      padding-left: 432px; }
+    .container .offset-by-ten {
+      padding-left: 480px; }
+    .container .offset-by-eleven {
+      padding-left: 528px; }
+    .container .offset-by-twelve {
+      padding-left: 576px; }
+    .container .offset-by-thirteen {
+      padding-left: 624px; }
+    .container .offset-by-fourteen {
+      padding-left: 672px; }
+    .container .offset-by-fifteen {
+      padding-left: 720px; }
 
-/* Base Grid */
-.container .one.column,
-.container .one.columns {
-  width: 40px; }
-
-.container .two.columns {
-  width: 100px; }
-
-.container .three.columns {
-  width: 160px; }
-
-.container .four.columns {
-  width: 220px; }
-
-.container .five.columns {
-  width: 280px; }
-
-.container .six.columns {
-  width: 340px; }
-
-.container .seven.columns {
-  width: 400px; }
-
-.container .eight.columns {
-  width: 460px; }
-
-.container .nine.columns {
-  width: 520px; }
-
-.container .ten.columns {
-  width: 580px; }
-
-.container .eleven.columns {
-  width: 640px; }
-
-.container .twelve.columns {
-  width: 700px; }
-
-.container .thirteen.columns {
-  width: 760px; }
-
-.container .fourteen.columns {
-  width: 820px; }
-
-.container .fifteen.columns {
-  width: 880px; }
-
-.container .sixteen.columns {
-  width: 940px; }
-
-.container .one-third.column {
-  width: 300px; }
-
-.container .two-thirds.column {
-  width: 620px; }
-
-/* Offsets */
-.container .offset-by-one {
-  padding-left: 60px; }
-
-.container .offset-by-two {
-  padding-left: 120px; }
-
-.container .offset-by-three {
-  padding-left: 180px; }
-
-.container .offset-by-four {
-  padding-left: 240px; }
-
-.container .offset-by-five {
-  padding-left: 300px; }
-
-.container .offset-by-six {
-  padding-left: 360px; }
-
-.container .offset-by-seven {
-  padding-left: 420px; }
-
-.container .offset-by-eight {
-  padding-left: 480px; }
-
-.container .offset-by-nine {
-  padding-left: 540px; }
-
-.container .offset-by-ten {
-  padding-left: 600px; }
-
-.container .offset-by-eleven {
-  padding-left: 660px; }
-
-.container .offset-by-twelve {
-  padding-left: 720px; }
-
-.container .offset-by-thirteen {
-  padding-left: 780px; }
-
-.container .offset-by-fourteen {
-  padding-left: 840px; }
-
-.container .offset-by-fifteen {
-  padding-left: 900px; }
-
-/* #Tablet (Portrait)
-================================================== */
-/* Note: Design for a width of 768px */
-@media only screen and (min-width: 768px) and (max-width: 959px) {
   .container {
     width: 768px; }
 
-  .container .column,
-  .container .columns {
-    margin-left: 10px;
-    margin-right: 10px; }
-
   .column.alpha, .columns.alpha {
-    margin-left: 0;
     margin-right: 10px; }
-
   .column.omega, .columns.omega {
-    margin-right: 0;
     margin-left: 10px; }
 
   .alpha.omega {
-    margin-left: 0;
-    margin-right: 0; }
-
-  .container .one.column,
-  .container .one.columns {
-    width: 28px; }
-
-  .container .two.columns {
-    width: 76px; }
-
-  .container .three.columns {
-    width: 124px; }
-
-  .container .four.columns {
-    width: 172px; }
-
-  .container .five.columns {
-    width: 220px; }
-
-  .container .six.columns {
-    width: 268px; }
-
-  .container .seven.columns {
-    width: 316px; }
-
-  .container .eight.columns {
-    width: 364px; }
-
-  .container .nine.columns {
-    width: 412px; }
-
-  .container .ten.columns {
-    width: 460px; }
-
-  .container .eleven.columns {
-    width: 508px; }
-
-  .container .twelve.columns {
-    width: 556px; }
-
-  .container .thirteen.columns {
-    width: 604px; }
-
-  .container .fourteen.columns {
-    width: 652px; }
-
-  .container .fifteen.columns {
-    width: 700px; }
-
-  .container .sixteen.columns {
-    width: 748px; }
-
-  .container .one-third.column {
-    width: 236px; }
-
-  .container .two-thirds.column {
-    width: 492px; }
-
-  /* Offsets */
-  .container .offset-by-one {
-    padding-left: 48px; }
-
-  .container .offset-by-two {
-    padding-left: 96px; }
-
-  .container .offset-by-three {
-    padding-left: 144px; }
-
-  .container .offset-by-four {
-    padding-left: 192px; }
-
-  .container .offset-by-five {
-    padding-left: 240px; }
-
-  .container .offset-by-six {
-    padding-left: 288px; }
-
-  .container .offset-by-seven {
-    padding-left: 336px; }
-
-  .container .offset-by-eight {
-    padding-left: 384px; }
-
-  .container .offset-by-nine {
-    padding-left: 432px; }
-
-  .container .offset-by-ten {
-    padding-left: 480px; }
-
-  .container .offset-by-eleven {
-    padding-left: 528px; }
-
-  .container .offset-by-twelve {
-    padding-left: 576px; }
-
-  .container .offset-by-thirteen {
-    padding-left: 624px; }
-
-  .container .offset-by-fourteen {
-    padding-left: 672px; }
-
-  .container .offset-by-fifteen {
-    padding-left: 720px; } }
-/*  #Mobile (Portrait)
-================================================== */
-/* Note: Design for a width of 320px */
+    margin-right: 0;
+    margin-left: 0; } }
 @media only screen and (max-width: 767px) {
   .container {
-    width: 300px; }
-
-  .container .columns,
-  .container .column {
-    margin: 0; }
-
-  .container .one.column,
-  .container .one.columns,
-  .container .two.columns,
-  .container .three.columns,
-  .container .four.columns,
-  .container .five.columns,
-  .container .six.columns,
-  .container .seven.columns,
-  .container .eight.columns,
-  .container .nine.columns,
-  .container .ten.columns,
-  .container .eleven.columns,
-  .container .twelve.columns,
-  .container .thirteen.columns,
-  .container .fourteen.columns,
-  .container .fifteen.columns,
-  .container .sixteen.columns,
-  .container .one-third.column,
-  .container .two-thirds.column {
-    width: 300px; }
-
-  /* Offsets */
-  .container .offset-by-one,
-  .container .offset-by-two,
-  .container .offset-by-three,
-  .container .offset-by-four,
-  .container .offset-by-five,
-  .container .offset-by-six,
-  .container .offset-by-seven,
-  .container .offset-by-eight,
-  .container .offset-by-nine,
-  .container .offset-by-ten,
-  .container .offset-by-eleven,
-  .container .offset-by-twelve,
-  .container .offset-by-thirteen,
-  .container .offset-by-fourteen,
-  .container .offset-by-fifteen {
-    padding-left: 0; } }
-/* #Mobile (Landscape)
-================================================== */
-/* Note: Design for a width of 480px */
-@media only screen and (min-width: 480px) and (max-width: 767px) {
-  .container {
-    width: 420px; }
-
-  .container .columns,
-  .container .column {
-    margin: 0; }
-
-  .container .one.column,
-  .container .one.columns,
-  .container .two.columns,
-  .container .three.columns,
-  .container .four.columns,
-  .container .five.columns,
-  .container .six.columns,
-  .container .seven.columns,
-  .container .eight.columns,
-  .container .nine.columns,
-  .container .ten.columns,
-  .container .eleven.columns,
-  .container .twelve.columns,
-  .container .thirteen.columns,
-  .container .fourteen.columns,
-  .container .fifteen.columns,
-  .container .sixteen.columns,
-  .container .one-third.column,
-  .container .two-thirds.column {
-    width: 420px; } }
+    width: 90%; }
+    .container .column, .container .columns {
+      margin: 0; }
+      .container .column.one, .container .column.two, .container .column.three, .container .column.four, .container .column.five, .container .column.six, .container .column.seven, .container .column.eight, .container .column.nine, .container .column.ten, .container .column.eleven, .container .column.twelve, .container .column.thirteen, .container .column.fourteen, .container .column.fifteen, .container .column.sixteen, .container .column.one-third, .container .column.two-thirds, .container .columns.one, .container .columns.two, .container .columns.three, .container .columns.four, .container .columns.five, .container .columns.six, .container .columns.seven, .container .columns.eight, .container .columns.nine, .container .columns.ten, .container .columns.eleven, .container .columns.twelve, .container .columns.thirteen, .container .columns.fourteen, .container .columns.fifteen, .container .columns.sixteen, .container .columns.one-third, .container .columns.two-thirds {
+        width: 100%; }
+    .container .offset-by-one,
+    .container .offset-by-two,
+    .container .offset-by-three,
+    .container .offset-by-four,
+    .container .offset-by-five,
+    .container .offset-by-six,
+    .container .offset-by-seven,
+    .container .offset-by-eight,
+    .container .offset-by-nine,
+    .container .offset-by-ten,
+    .container .offset-by-eleven,
+    .container .offset-by-twelve,
+    .container .offset-by-thirteen,
+    .container .offset-by-fourteen,
+    .container .offset-by-fifteen {
+      padding-left: 0; } }
 /* #Clearing
 ================================================== */
 /* Self Clearing Goodness */
@@ -683,9 +535,18 @@ form {
 fieldset {
   margin: 0 0 20px 0; }
 
+input[type="search"],
+input[type="url"] {
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield; }
+
 input[type="text"],
 input[type="password"],
 input[type="email"],
+input[type="search"],
+input[type="url"],
+input[type="number"],
+input[type="tel"],
 textarea,
 select {
   border: 1px solid #cccccc;
@@ -708,6 +569,10 @@ select {
 input[type="text"]:focus,
 input[type="password"]:focus,
 input[type="email"]:focus,
+input[type="search"]:focus,
+input[type="url"]:focus,
+input[type="number"]:focus,
+input[type="tel"]:focus,
 textarea:focus {
   border: 1px solid #aaaaaa;
   color: #444444;
diff --git a/scss/_grid.scss b/scss/_grid.scss
index b42031d..d26101b 100644
--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@@ -1,188 +1,81 @@
-/* #Base 960 Grid
-================================================== */
-
-.container                                  { position: relative; width: 960px; margin: 0 auto; padding: 0; }
-.container .column,
-.container .columns                         { float: left; display: inline; margin-left: 10px; margin-right: 10px; @include box-sizing(border-box); }
-.row                                        { margin-bottom: 20px; }
-
-/* Nested Column Classes */
-.column.alpha, .columns.alpha               { margin-left: 0; }
-.column.omega, .columns.omega               { margin-right: 0; }
-
-/* Base Grid */
-.container .one.column,
-.container .one.columns                     { width: 40px;  }
-.container .two.columns                     { width: 100px; }
-.container .three.columns                   { width: 160px; }
-.container .four.columns                    { width: 220px; }
-.container .five.columns                    { width: 280px; }
-.container .six.columns                     { width: 340px; }
-.container .seven.columns                   { width: 400px; }
-.container .eight.columns                   { width: 460px; }
-.container .nine.columns                    { width: 520px; }
-.container .ten.columns                     { width: 580px; }
-.container .eleven.columns                  { width: 640px; }
-.container .twelve.columns                  { width: 700px; }
-.container .thirteen.columns                { width: 760px; }
-.container .fourteen.columns                { width: 820px; }
-.container .fifteen.columns                 { width: 880px; }
-.container .sixteen.columns                 { width: 940px; }
-
-.container .one-third.column                { width: 300px; }
-.container .two-thirds.column               { width: 620px; }
-
-/* Offsets */
-.container .offset-by-one                   { padding-left: 60px;  }
-.container .offset-by-two                   { padding-left: 120px; }
-.container .offset-by-three                 { padding-left: 180px; }
-.container .offset-by-four                  { padding-left: 240px; }
-.container .offset-by-five                  { padding-left: 300px; }
-.container .offset-by-six                   { padding-left: 360px; }
-.container .offset-by-seven                 { padding-left: 420px; }
-.container .offset-by-eight                 { padding-left: 480px; }
-.container .offset-by-nine                  { padding-left: 540px; }
-.container .offset-by-ten                   { padding-left: 600px; }
-.container .offset-by-eleven                { padding-left: 660px; }
-.container .offset-by-twelve                { padding-left: 720px; }
-.container .offset-by-thirteen              { padding-left: 780px; }
-.container .offset-by-fourteen              { padding-left: 840px; }
-.container .offset-by-fifteen               { padding-left: 900px; }
-
-
-
-/* #Tablet (Portrait)
-================================================== */
-
-/* Note: Design for a width of 768px */
-
-@media only screen and (min-width: 768px) and (max-width: 959px) {
-  .container                                  { width: 768px; }
-  .container .column,
-  .container .columns                         { margin-left: 10px; margin-right: 10px;  }
-  .column.alpha, .columns.alpha               { margin-left: 0; margin-right: 10px; }
-  .column.omega, .columns.omega               { margin-right: 0; margin-left: 10px; }
-  .alpha.omega                                { margin-left: 0; margin-right: 0; }
-
-  .container .one.column,
-  .container .one.columns                     { width: 28px; }
-  .container .two.columns                     { width: 76px; }
-  .container .three.columns                   { width: 124px; }
-  .container .four.columns                    { width: 172px; }
-  .container .five.columns                    { width: 220px; }
-  .container .six.columns                     { width: 268px; }
-  .container .seven.columns                   { width: 316px; }
-  .container .eight.columns                   { width: 364px; }
-  .container .nine.columns                    { width: 412px; }
-  .container .ten.columns                     { width: 460px; }
-  .container .eleven.columns                  { width: 508px; }
-  .container .twelve.columns                  { width: 556px; }
-  .container .thirteen.columns                { width: 604px; }
-  .container .fourteen.columns                { width: 652px; }
-  .container .fifteen.columns                 { width: 700px; }
-  .container .sixteen.columns                 { width: 748px; }
-
-  .container .one-third.column                { width: 236px; }
-  .container .two-thirds.column               { width: 492px; }
-
-/* Offsets */
-.container .offset-by-one                   { padding-left: 48px; }
-.container .offset-by-two                   { padding-left: 96px; }
-.container .offset-by-three                 { padding-left: 144px; }
-.container .offset-by-four                  { padding-left: 192px; }
-.container .offset-by-five                  { padding-left: 240px; }
-.container .offset-by-six                   { padding-left: 288px; }
-.container .offset-by-seven                 { padding-left: 336px; }
-.container .offset-by-eight                 { padding-left: 384px; }
-.container .offset-by-nine                  { padding-left: 432px; }
-.container .offset-by-ten                   { padding-left: 480px; }
-.container .offset-by-eleven                { padding-left: 528px; }
-.container .offset-by-twelve                { padding-left: 576px; }
-.container .offset-by-thirteen              { padding-left: 624px; }
-.container .offset-by-fourteen              { padding-left: 672px; }
-.container .offset-by-fifteen               { padding-left: 720px; }
+.container {
+  position: relative;
+  margin: 0 auto;
+  padding: 0;
 }
 
+.column, .columns {
+  float: left;
+  display: inline;
+  margin-left: $gutter/2;
+  margin-right: $gutter/2;
+  &.alpha { margin-left: 0; }
+  &.omega { margin-right: 0; }
+}
 
-/*  #Mobile (Portrait)
-================================================== */
+.row { margin-bottom: $gutter; }
 
-/* Note: Design for a width of 320px */
+@include grid($desktop-container-width, $column-count, $gutter);
 
+//-----------------------------------------------------------------------
+// #Tablet
+@media only screen and (max-width: 959px) {
+  @include grid($tablet-container-width, $column-count, $gutter);
+
+  .container { width: $tablet-container-width; }
+
+  .column, .columns {
+    &.alpha { margin-right: 10px; }
+    &.omega { margin-left: 10px; } }
+
+  .alpha.omega {
+    margin-right: 0;
+    margin-left: 0; }
+}
+//--------------------------------------------------------------------
+// #Mobile
 @media only screen and (max-width: 767px) {
-  .container { width: 300px; }
-  .container .columns,
-  .container .column { margin: 0; }
+  .container {
+    width: $mobile-container-width;
 
-  .container .one.column,
-  .container .one.columns,
-  .container .two.columns,
-  .container .three.columns,
-  .container .four.columns,
-  .container .five.columns,
-  .container .six.columns,
-  .container .seven.columns,
-  .container .eight.columns,
-  .container .nine.columns,
-  .container .ten.columns,
-  .container .eleven.columns,
-  .container .twelve.columns,
-  .container .thirteen.columns,
-  .container .fourteen.columns,
-  .container .fifteen.columns,
-  .container .sixteen.columns,
-  .container .one-third.column,
-  .container .two-thirds.column  { width: 300px; }
+    .column, .columns {
+      margin: 0;
+      &.one,
+      &.two,
+      &.three,
+      &.four,
+      &.five,
+      &.six,
+      &.seven,
+      &.eight,
+      &.nine,
+      &.ten,
+      &.eleven,
+      &.twelve,
+      &.thirteen,
+      &.fourteen,
+      &.fifteen,
+      &.sixteen,
+      &.one-third,
+      &.two-thirds { width: $mobile-column-width; }
+    }
 
-/* Offsets */
-.container .offset-by-one,
-.container .offset-by-two,
-.container .offset-by-three,
-.container .offset-by-four,
-.container .offset-by-five,
-.container .offset-by-six,
-.container .offset-by-seven,
-.container .offset-by-eight,
-.container .offset-by-nine,
-.container .offset-by-ten,
-.container .offset-by-eleven,
-.container .offset-by-twelve,
-.container .offset-by-thirteen,
-.container .offset-by-fourteen,
-.container .offset-by-fifteen { padding-left: 0; }
-
-}
-
-
-/* #Mobile (Landscape)
-================================================== */
-
-/* Note: Design for a width of 480px */
-
-@media only screen and (min-width: 480px) and (max-width: 767px) {
-  .container { width: 420px; }
-  .container .columns,
-  .container .column { margin: 0; }
-
-  .container .one.column,
-  .container .one.columns,
-  .container .two.columns,
-  .container .three.columns,
-  .container .four.columns,
-  .container .five.columns,
-  .container .six.columns,
-  .container .seven.columns,
-  .container .eight.columns,
-  .container .nine.columns,
-  .container .ten.columns,
-  .container .eleven.columns,
-  .container .twelve.columns,
-  .container .thirteen.columns,
-  .container .fourteen.columns,
-  .container .fifteen.columns,
-  .container .sixteen.columns,
-  .container .one-third.column,
-  .container .two-thirds.column { width: 420px; }
+    .offset-by-one,
+    .offset-by-two,
+    .offset-by-three,
+    .offset-by-four,
+    .offset-by-five,
+    .offset-by-six,
+    .offset-by-seven,
+    .offset-by-eight,
+    .offset-by-nine,
+    .offset-by-ten,
+    .offset-by-eleven,
+    .offset-by-twelve,
+    .offset-by-thirteen,
+    .offset-by-fourteen,
+    .offset-by-fifteen { padding-left: 0; }
+  }
 }
 
 /* #Clearing
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index d25f9a0..71e4d72 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -113,3 +113,57 @@
   -webkit-box-shadow: $a $b $c $colour;
   box-shadow:  $a $b $c $colour;
 }
+
+@mixin grid($grid-container-width, $grid-column-count:$column-count, $grid-gutter:$gutter) {
+
+  $grid-column-width: $grid-container-width/$grid-column-count;
+
+  .container {
+    width: $grid-container-width;
+    .columns, .column {
+      &.one         { width: (1*$grid-column-width - $grid-gutter); }
+      &.two         { width: (2*$grid-column-width - $grid-gutter); }
+      &.three       { width: (3*$grid-column-width - $grid-gutter); }
+      &.four        { width: (4*$grid-column-width - $grid-gutter); }
+      &.five        { width: (5*$grid-column-width - $grid-gutter); }
+      &.six         { width: (6*$grid-column-width - $grid-gutter); }
+      &.seven       { width: (7*$grid-column-width - $grid-gutter); }
+      &.eight       { width: (8*$grid-column-width - $grid-gutter); }
+      &.nine        { width: (9*$grid-column-width - $grid-gutter); }
+      &.ten         { width: (10*$grid-column-width - $grid-gutter); }
+      &.eleven      { width: (11*$grid-column-width - $grid-gutter); }
+      &.twelve      { width: (12*$grid-column-width - $grid-gutter); }
+      &.thirteen    { width: (13*$grid-column-width - $grid-gutter); }
+      &.fourteen    { width: (14*$grid-column-width - $grid-gutter); }
+      &.fifteen     { width: (15*$grid-column-width - $grid-gutter); }
+      &.sixteen     { width: (16*$grid-column-width - $grid-gutter); }
+      &.one-third    { width: ($grid-container-width/3) - $grid-gutter; }
+      &.two-thirds   { width: (($grid-container-width/3)*2) - $grid-gutter; }
+    }
+
+    .offset-by-one      { padding-left: $grid-column-width;  }
+    .offset-by-two      { padding-left: $grid-column-width*2; }
+    .offset-by-three    { padding-left: $grid-column-width*3; }
+    .offset-by-four     { padding-left: $grid-column-width*4; }
+    .offset-by-five     { padding-left: $grid-column-width*5; }
+    .offset-by-six      { padding-left: $grid-column-width*6; }
+    .offset-by-seven    { padding-left: $grid-column-width*7; }
+    .offset-by-eight    { padding-left: $grid-column-width*8; }
+    .offset-by-nine     { padding-left: $grid-column-width*9; }
+    .offset-by-ten      { padding-left: $grid-column-width*10; }
+    .offset-by-eleven   { padding-left: $grid-column-width*11; }
+    .offset-by-twelve   { padding-left: $grid-column-width*12; }
+    .offset-by-thirteen { padding-left: $grid-column-width*13; }
+    .offset-by-fourteen { padding-left: $grid-column-width*14; }
+    .offset-by-fifteen  { padding-left: $grid-column-width*15; }
+  }
+}
+
+@mixin clearfix {
+  clear: both;
+  display: block;
+  overflow: hidden;
+  visibility: hidden;
+  width: 0;
+  height: 0;
+}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 120bd73..d571074 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1,3 +1,10 @@
+$gutter: 20px;
+$column-count: 16;
+$desktop-container-width: 960px;
+$tablet-container-width: 768px;
+$mobile-container-width: 90%;
+$mobile-column-width: 100%;
+
 $form_element_font: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
 
 $form_button_border_radius: 3px;
diff --git a/scss/skeleton.scss b/scss/skeleton.scss
index 6cdbdc1..4e61289 100644
--- a/scss/skeleton.scss
+++ b/scss/skeleton.scss
@@ -1,6 +1,6 @@
 /*
-* Skeleton V1.2
-* Copyright 2011, Dave Gamache
+* Skeleton SCSS V1.0
+* Skeleton is Copyright 2011, Dave Gamache
 *
 * SCSS Conversion and Mixins by Nick Pack
 *