Move grid/container styles to grid.less; update docs; add offsetting back

less/grid.less

@@ -24,6 +24,56 @@
           box-sizing: border-box;
 }
 
+// Responsive: Tablets and up
+@media screen and (min-width: 768px) {
+
+  [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%; }
+
+}
+
+// Responsive: Desktops and up
+@media screen and (min-width: 992px) {
+  .container {
+    max-width: 940px;
+  }
+}
+
+// Responsive: Large desktops and up
+@media screen and (min-width: 1200px) {
+  .container {
+    max-width: 1170px;
+  }
+  [class^="span"] {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+}
+
 // Fixed (940px)
 // #grid > .core(@grid-column-width, @grid-gutter-width, @grid-row-width);