Overhaul the grid system and its docs

* Add new grid mixins adapted from Preboot (http://github.com/mdo/preboot)
* Drop the @grid-row-width and @grid-column-width variables
* Add the @grid-float-breakpoint variable, as used in Preboot
* Add support for .push* and .pull* classes for column ordering manipulation
* Document all the things

less/grid.less

@@ -10,11 +10,10 @@
 
 // Mobile-first defaults
 .row {
-  margin-left:  (@grid-gutter-width / -2);
-  margin-right: (@grid-gutter-width / -2);
-  .clear_float();
+  .make-row();
 }
 [class^="span"] {
+  position: relative;
   min-height: 1px;
   padding-left:  (@grid-gutter-width / 2);
   padding-right: (@grid-gutter-width / 2);
@@ -26,10 +25,8 @@
     max-width: 728px;
   }
   // Generate the grid columns and offsets
-  [class^="span"] {
-    float: left;
-  }
-  #grid > .core(@grid-column-width, @grid-gutter-width);
+  [class^="span"] { float: left; }
+  .generate-grid-columns(@grid-columns);
 }
 
 // Responsive: Desktops and up
@@ -44,14 +41,6 @@
   .container {
     max-width: 1170px;
   }
-  .row {
-    margin-left: -15px;
-    margin-right: -15px;
-  }
-  [class^="span"] {
-    padding-left: 15px;
-    padding-right: 15px;
-  }
 }
 
 // Reset utility classes due to specificity

less/mixins.less

@@ -439,59 +439,96 @@
   .clear_float();
 }
 
-// Make a Grid
-// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
-// .makeRow() {
-//   margin-left: @grid-gutter-width * -1;
-//   .clearfix();
-// }
-// .makeColumn(@columns: 1, @offset: 0) {
-//   float: left;
-//   margin-left: (@grid-column-width * @offset) + (@grid-gutter-width * (@offset - 1)) + (@grid-gutter-width * 2);
-//   width: (@grid-column-width * @columns) + (@grid-gutter-width * (@columns - 1));
-// }
+// Make a grid
 
+// Creates a wrapper for a series of columns
 .make-row() {
-
+  // Negative margin the row out to align the content of columns
+  margin-left:  (@grid-gutter-width / -2);
+  margin-right: (@grid-gutter-width / -2);
+  // Then clear the floated columns
+  .clear_float();
 }
+// Generate the columns
 .make-column(@columns) {
-  float: left;
-  padding: @grid-gutter-width;
-  width: percentage(@columns / @grid-columns);
+  @media (min-width: @grid-float-breakpoint) {
+    float: left;
+    // Calculate width based on number of columns available
+    width: percentage(@columns / @grid-columns);
+  }
+  // Prevent columns from collapsing when empty
+  min-height: 1px;
+  // Set inner padding as gutters instead of margin
+  padding-left:  (@grid-gutter-width / 2);
+  padding-right: (@grid-gutter-width / 2);
 }
+// Generate the column offsets
 .make-column-offset(@columns) {
-  margin-left: percentage(@columns / @grid-columns);
+  @media (min-width: @grid-float-breakpoint) {
+    margin-left: percentage((@columns / @grid-columns));
+  }
 }
+.make-column-push(@columns) {
+  @media (min-width: @grid-float-breakpoint) {
+    left: percentage((@columns / @grid-columns));
+  }
+}
+.make-column-pull(@columns) {
+  @media (min-width: @grid-float-breakpoint) {
+    right: percentage((@columns / @grid-columns));
+  }
+}
+
 
 
 // The Grid
-#grid {
-
-  .core(@grid-column-width, @grid-gutter-width) {
-
-    .spanX (@index) when (@index > 0) {
-      .span@{index} { .span(@index); }
-      .spanX((@index - 1));
-    }
-    .spanX(0) {}
-
-    .offsetX (@index) when (@index > 0) {
-      .offset@{index} { .offset(@index); }
-      .offsetX((@index - 1));
-    }
-    .offsetX (0) {}
-
-    // Base styles
-    .offset(@columns) {
-      margin-left: percentage((@columns / @grid-columns));
-    }
-    .span(@columns) {
-      width: percentage((@columns / @grid-columns));
-    }
-
-    // Generate .spanX and .offsetX
-    .spanX(@grid-columns);
-    .offsetX(@grid-columns);
+.generate-grid-columns(@grid-columns) {
 
+  // Default columns
+  .spanX (@index) when (@index > 0) {
+    .span@{index} { .span(@index); }
+    .spanX((@index - 1));
   }
+  .spanX(0) {}
+
+  // Offsets (gaps between columns)
+  .offsetX (@index) when (@index > 0) {
+    .offset@{index} { .offset(@index); }
+    .offsetX((@index - 1));
+  }
+  .offsetX (0) {}
+
+  // Source ordering
+  .pushX (@index) when (@index > 0) {
+    .push@{index} { .push(@index); }
+    .pushX((@index - 1));
+  }
+  .pushX (0) {}
+
+  // Source ordering
+  .pullX (@index) when (@index > 0) {
+    .pull@{index} { .pull(@index); }
+    .pullX((@index - 1));
+  }
+  .pullX (0) {}
+
+  // Apply the styles
+  .span(@columns) {
+    width: percentage((@columns / @grid-columns));
+  }
+  .offset(@columns) {
+    margin-left: percentage((@columns / @grid-columns));
+  }
+  .push(@columns) {
+    left: percentage((@columns / @grid-columns));
+  }
+  .pull(@columns) {
+    right: percentage((@columns / @grid-columns));
+  }
+
+  // Generate .spanX and .offsetX
+  .spanX(@grid-columns);
+  .offsetX(@grid-columns);
+  .pushX(@grid-columns);
+  .pullX(@grid-columns);
 }

less/variables.less

@@ -308,11 +308,9 @@
 
 
 
-// GRID
+// Grid system
 // --------------------------------------------------
 
-// Default 940px grid
 @grid-columns:              12;
-@grid-column-width:         60px;
-@grid-gutter-width:         20px;
-@grid-row-width:            ((@grid-columns * @grid-column-width) + (@grid-gutter-width * (@grid-columns - 1)));
+@grid-gutter-width:         30px;
+@grid-float-breakpoint:     768px;