Back to two grid classes, .col and .col-lg-*

2 files changed, 50 insertions, 42 deletions

diff --git a/less/grid.less b/less/grid.less
index 8162d9940..61393bcb7 100644
--- a/less/grid.less
+++ b/less/grid.less
@@ -12,29 +12,35 @@
 .row {
   .make-row();
 }
-[class*="col-span-"],
-[class*="col-small-"] {
+
+
+// Common styles for small and large grid columns
+.col {
   position: relative;
+  // Float and set width: 100%; for easy stacking on mobile devices
+  float: left;
+  width: 100%;
+  // Prevent columns from collapsing when empty
   min-height: 1px;
+  // Inner gutter via padding
   padding-left:  (@grid-gutter-width / 2);
   padding-right: (@grid-gutter-width / 2);
 }
 
-[class*="col-small-"] {
-  float: left;
+// Generate small grid classes first
+.generate-grid-columns(@grid-columns);
+
+// Then generate the larger grid classes via media query
+@media screen and (min-width: 768px) {
+  .generate-large-grid-columns(@grid-columns);
 }
-.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;
-  }
-  .generate-grid-columns(@grid-columns);
 }
 
 // Responsive: Desktops and up
@@ -52,6 +58,6 @@
 }
 
 // Reset utility classes due to specificity
-[class*="col-span-"].pull-right {
+/*[class*="col-span-"].pull-right {
   float: right;
-}
+}*/
diff --git a/less/mixins.less b/less/mixins.less
index f33b1ec6b..eb8775975 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -412,13 +412,12 @@
 // Generate the columns
 .make-column(@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
+  // Inner gutter via padding
   padding-left:  (@grid-gutter-width / 2);
   padding-right: (@grid-gutter-width / 2);
 }
@@ -451,15 +450,40 @@
 
 
 
-// The Grid
+// Small grid columns
 .generate-grid-columns(@grid-columns) {
 
-  // Default columns
-  .col-span-X (@index) when (@index > 0) {
-    .col-span-@{index} { .col-span-(@index); }
-    .col-span-X((@index - 1));
+  .col-sm-X (@index) when (@index > 0) {
+    .col-sm-@{index} { .col-sm-(@index); }
+    .col-sm-X((@index - 1));
+  }
+  .col-sm-X (0) {}
+
+  // Generate columns
+  .col-sm-X(@grid-columns);
+
+  // Apply the styles
+  .col-sm-(@columns) {
+    width: percentage((@columns / @grid-columns));
+  }
+}
+
+// Large grid columns
+.generate-large-grid-columns(@grid-columns) {
+
+  .col-lg-X (@index) when (@index > 0) {
+    .col-lg-@{index} { .col-lg-(@index); }
+    .col-lg-X((@index - 1));
+  }
+  .col-lg-X (0) {}
+
+  // Generate the columns
+  .col-lg-X(@grid-columns);
+
+  // Apply the styles
+  .col-lg-(@columns) {
+    width: percentage((@columns / @grid-columns));
   }
-  .col-span-X(0) {}
 
   // Offsets (gaps between columns)
   .col-offset-X (@index) when (@index > 0) {
@@ -483,9 +507,6 @@
   .col-pull-X (0) {}
 
   // Apply the styles
-  .col-span-(@columns) {
-    width: percentage((@columns / @grid-columns));
-  }
   .col-offset-(@columns) {
     margin-left: percentage((@columns / @grid-columns));
   }
@@ -497,30 +518,11 @@
   }
 
   // Generate .spanX and .offsetX
-  .col-span-X(@grid-columns);
   .col-offset-X(@grid-columns);
   .col-push-X(@grid-columns);
   .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