Grid push and pull, tidied up css and gruntfile, addded more form variables

src/scss/_forms.scss

@@ -90,7 +90,7 @@ select {
   font: $form_input_font_size $form_element_font;
   color: $form_input_text_colour;
   width: $form_input_width;
-  max-width: 100%;
+  max-width: $form_input_max_width;
   display: block;
   margin: $form_input_margin;
   background: $form_input_background;
@@ -98,6 +98,7 @@ select {
 
 select {
   padding: $form_input_select_padding;
+  width: $form_input_select_width;
 }
 
 input[type="text"]:focus,
@@ -125,17 +126,13 @@ legend {
   font-size: $legend_font_size;
 }
 
-select {
-  width: $form_input_select_width;
-}
-
 input[type="checkbox"] {
   display: $form_input_checkbox_display;
 }
 
 label span,
 legend span {
-  font-weight: normal;
+  font-weight: $form_label_legend_font_weight;
   font-size: $form_input_font_size;
   color: $form_label_legend_colour;
 }

src/scss/_grid.scss

@@ -2,8 +2,12 @@
   position: relative;
   margin: 0 auto;
   padding: 0;
-  & .alpha { margin-left: 0; }
-  & .omega { margin-right: 0; }
+  & .alpha { 
+    margin-left: 0; 
+  }
+  & .omega { 
+    margin-right: 0; 
+  }
 }
 
 .column, .columns {
@@ -17,7 +21,9 @@
   margin-left: 0;
 }
 
-.row { margin-bottom: $gutter; }
+.row { 
+  margin-bottom: $gutter; 
+}
 
 @include grid($desktop-container-width, $column-count, $gutter);
 
@@ -28,8 +34,12 @@
 
   .container { 
     width: $tablet-container-width; 
-    & .alpha { margin-right: 10px; }
-    & .omega { margin-left: 10px; }
+    & .alpha { 
+      margin-right: 10px; 
+    }
+    & .omega { 
+      margin-left: 10px; 
+    }
   }
 }
 //--------------------------------------------------------------------
@@ -85,7 +95,13 @@
 // #Clearing
 // ==================================================
 
-.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
+.container:after { 
+  content: "\0020"; 
+  display: block; 
+  height: 0; 
+  clear: both; 
+  visibility: hidden; 
+}
 
 // Use clearfix class on parent to clear nested columns,
 // or wrap each row of columns in a <div class="row">
@@ -98,13 +114,17 @@
   overflow: hidden;
   visibility: hidden;
   width: 0;
-  height: 0; }
-  .row:after,
-  .clearfix:after {
-    clear: both; }
-    .row,
-    .clearfix {
-      zoom: 1; }
+  height: 0; 
+}
+
+.row:after,
+.clearfix:after {
+  clear: both; 
+}
+
+.row, .clearfix {
+  zoom: 1; 
+}
 
 // You can also use a <br class="clear" /> to clear columns
 .clear {

src/scss/_mixins.scss

@@ -159,6 +159,38 @@
     .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; }
+
+    .pull-by-one      { left: -$grid-column-width; }
+    .pull-by-two      { left: -$grid-column-width*2; }
+    .pull-by-three    { left: -$grid-column-width*3; }
+    .pull-by-four     { left: -$grid-column-width*4; }
+    .pull-by-five     { left: -$grid-column-width*5; }
+    .pull-by-six      { left: -$grid-column-width*6; }
+    .pull-by-seven    { left: -$grid-column-width*7; }
+    .pull-by-eight    { left: -$grid-column-width*8; }
+    .pull-by-nine     { left: -$grid-column-width*9; }
+    .pull-by-ten      { left: -$grid-column-width*10; }
+    .pull-by-eleven   { left: -$grid-column-width*11; }
+    .pull-by-twelve   { left: -$grid-column-width*12; }
+    .pull-by-thirteen { left: -$grid-column-width*13; }
+    .pull-by-fourteen { left: -$grid-column-width*14; }
+    .pull-by-fifteen  { left: -$grid-column-width*15; }
+
+    .push-by-one      { left: $grid-column-width; }
+    .push-by-two      { left: $grid-column-width*2; }
+    .push-by-three    { left: $grid-column-width*3; }
+    .push-by-four     { left: $grid-column-width*4; }
+    .push-by-five     { left: $grid-column-width*5; }
+    .push-by-six      { left: $grid-column-width*6; }
+    .push-by-seven    { left: $grid-column-width*7; }
+    .push-by-eight    { left: $grid-column-width*8; }
+    .push-by-nine     { left: $grid-column-width*9; }
+    .push-by-ten      { left: $grid-column-width*10; }
+    .push-by-eleven   { left: $grid-column-width*11; }
+    .push-by-twelve   { left: $grid-column-width*12; }
+    .push-by-thirteen { left: $grid-column-width*13; }
+    .push-by-fourteen { left: $grid-column-width*14; }
+    .push-by-fifteen  { left: $grid-column-width*15; }
   }
 }
 
@@ -170,3 +202,13 @@
   width: 0;
   height: 0;
 }
+
+@mixin visible {
+  display: block !important; 
+  visibility: visible;
+}
+
+@mixin hidden {
+  display: none !important; 
+  visibility: hidden;
+}

src/scss/_tables.scss

@@ -115,10 +115,10 @@ table {
   colgroup tbody tr:first-child td:first-child {
     @include border-top-left-radius($table_border_radius);
   }
-  caption + thead tr:first-child th:last-child,
-  caption + tbody tr:first-child td:last-child,
-  colgroup + thead tr:first-child th:last-child,
-  colgroup + tbody tr:first-child td:last-child {
+  caption thead tr:first-child th:last-child,
+  caption tbody tr:first-child td:last-child,
+  colgroup thead tr:first-child th:last-child,
+  colgroup tbody tr:first-child td:last-child {
     @include border-top-right-radius($table_border_radius);
   }
 

src/scss/_typography.scss

@@ -77,7 +77,7 @@ p img {
 }
 
 em {
-  font-style: italic;
+  font-style: $em_font_style;
 }
 
 strong {
@@ -86,7 +86,7 @@ strong {
 }
 
 small {
-  font-size: 80%;
+  font-size: $small_font_size;
 }
 
 blockquote, blockquote p {

src/scss/_variables.scss

@@ -34,6 +34,7 @@ $form_input_text_colour: #777;
 $form_input_background: #fff;
 $form_input_padding: 6px 4px;
 $form_input_width: 210px;
+$form_input_max_width: 100%;
 $form_input_select_width: 220px;
 $form_input_margin: 0 0 20px 0;
 $form_input_font_size: 13px;
@@ -52,6 +53,7 @@ $form_input_focus_box_shadow_colour: rgba(0, 0, 0, .2);
 $form_input_select_padding: 10px;
 
 $form_label_legend_colour: #444;
+$form_label_legend_font_weight: normal;
 $form_fieldset_margin: 0 0 20px 0;
 
 $legend_font_weight: bold;
@@ -101,6 +103,10 @@ $paragraph_lead_font_size: 21px;
 $paragraph_lead_line_height: $paragraph_lead_font_size * 1.5;
 $paragraph_lead_colour: #777;
 
+$em_font_style: italic;
+
+$small_font_size: 80%;
+
 $strong_colour: #333;
 
 $blockquote_colour: #777;
@@ -126,7 +132,7 @@ $list_large_line_height: 21px;
 $ul_list_style: none outside;
 $ol_list_style: decimal;
 
-$list_styled_margin: 0 0 0 30px; // ul, ol with disc, square etc.
+$list_styled_margin: 0 0 0 10px; // ul, ol with disc, square etc.
 $list_styled_position: outside;  // List item bullet position 
 
 $nested_list_margin: 4px 0 5px 30px;