Simplify and bring back the grid mixin for generating spans and offsets

less/grid.less

@@ -10,14 +10,14 @@
 
 // Mobile-first defaults
 .row {
-  margin-left: -10px;
-  margin-right: -10px;
+  margin-left:  @grid-gutter-width / -2;
+  margin-right: @grid-gutter-width / -2;
   .clear_float();
 }
 [class^="span"] {
   min-height: 1px;
-  padding-left: 10px;
-  padding-right: 10px;
+  padding-left:  @grid-gutter-width / 2;
+  padding-right: @grid-gutter-width / 2;
   // Proper box-model (padding doesn't add to width)
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
@@ -26,38 +26,14 @@
 
 // Responsive: Tablets and up
 @media screen and (min-width: 768px) {
-
   .container {
     max-width: 728px;
   }
-
+  // Generate the grid columns and offsets
   [class^="span"] {
     float: left;
   }
-  .span1 { width: 8.3333333%; }
-  .span2 { width: 16.6666667%; }
-  .span3 { width: 25%; }
-  .span4 { width: 33.3333333%; }
-  .span5 { width: 41.666666667%; }
-  .span6 { width: 50%; }
-  .span7 { width: 58.333333333%; }
-  .span8 { width: 66.666666667%; }
-  .span9 { width: 75%; }
-  .span10 { width: 83.333333333%; }
-  .span11 { width: 91.666666667%; }
-
-  .offset1 { margin-left: 8.3333333%; }
-  .offset2 { margin-left: 16.6666667%; }
-  .offset3 { margin-left: 25%; }
-  .offset4 { margin-left: 33.3333333%; }
-  .offset5 { margin-left: 41.666666667%; }
-  .offset6 { margin-left: 50%; }
-  .offset7 { margin-left: 58.333333333%; }
-  .offset8 { margin-left: 66.666666667%; }
-  .offset9 { margin-left: 75%; }
-  .offset10 { margin-left: 83.333333333%; }
-  .offset11 { margin-left: 91.666666667%; }
-
+  #grid > .core(@grid-column-width, @grid-gutter-width);
 }
 
 // Responsive: Desktops and up
@@ -78,9 +54,6 @@
   }
 }
 
-// Fixed (940px)
-// #grid > .core(@grid-column-width, @grid-gutter-width, @grid-row-width);
-
 // Reset utility classes due to specificity
 [class*="span"].pull-right {
   float: right;