Add small grid for phones and tablets

2 files changed, 28 insertions, 2 deletions

diff --git a/less/grid.less b/less/grid.less
index 1de1b15f6..8162d9940 100644
--- a/less/grid.less
+++ b/less/grid.less
@@ -12,20 +12,28 @@
 .row {
   .make-row();
 }
-[class*="col-span-"] {
+[class*="col-span-"],
+[class*="col-small-"] {
   position: relative;
   min-height: 1px;
   padding-left:  (@grid-gutter-width / 2);
   padding-right: (@grid-gutter-width / 2);
 }
 
+[class*="col-small-"] {
+  float: left;
+}
+.generate-small-grid-columns(@grid-columns);
+
 // Responsive: Tablets and up
 @media screen and (min-width: 768px) {
   .container {
     max-width: 728px;
   }
   // Generate the grid columns and offsets
-  [class*="col-span-"] { float: left; }
+  [class*="col-span-"] {
+    float: left;
+  }
   .generate-grid-columns(@grid-columns);
 }
 
diff --git a/less/mixins.less b/less/mixins.less
index e57e83a12..76c40df2d 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -501,6 +501,24 @@
   .col-pull-X(@grid-columns);
 }
 
+// Small device grid
+.generate-small-grid-columns(@grid-columns) {
+
+  // Deterimine the classes
+  .col-small-span-X (@index) when (@index > 0) {
+    .col-small-span-@{index} { .col-small-span-(@index); }
+    .col-small-span-X((@index - 1));
+  }
+  .col-small-span-X(0) {}
+
+  // Specify widths
+  .col-small-span-(@columns) {
+    width: percentage((@columns / @grid-columns));
+  }
+
+  // Generate the CSS
+  .col-small-span-X(@grid-columns);
+}
 
 
 // Framework mixins