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

docs/assets/css/bootstrap.css

@@ -784,107 +784,98 @@ pre code {
   margin-left: -15px;
 }
 
-[class*="col-span-"],
-[class*="col-small-"] {
+.col {
   position: relative;
+  float: left;
+  width: 100%;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
 }
 
-[class*="col-small-"] {
-  float: left;
-}
-
-.col-small-span-12 {
+.col-sm-12 {
   width: 100%;
 }
 
-.col-small-span-11 {
+.col-sm-11 {
   width: 91.66666666666666%;
 }
 
-.col-small-span-10 {
+.col-sm-10 {
   width: 83.33333333333334%;
 }
 
-.col-small-span-9 {
+.col-sm-9 {
   width: 75%;
 }
 
-.col-small-span-8 {
+.col-sm-8 {
   width: 66.66666666666666%;
 }
 
-.col-small-span-7 {
+.col-sm-7 {
   width: 58.333333333333336%;
 }
 
-.col-small-span-6 {
+.col-sm-6 {
   width: 50%;
 }
 
-.col-small-span-5 {
+.col-sm-5 {
   width: 41.66666666666667%;
 }
 
-.col-small-span-4 {
+.col-sm-4 {
   width: 33.33333333333333%;
 }
 
-.col-small-span-3 {
+.col-sm-3 {
   width: 25%;
 }
 
-.col-small-span-2 {
+.col-sm-2 {
   width: 16.666666666666664%;
 }
 
-.col-small-span-1 {
+.col-sm-1 {
   width: 8.333333333333332%;
 }
 
 @media screen and (min-width: 768px) {
-  .container {
-    max-width: 728px;
-  }
-  [class*="col-span-"] {
-    float: left;
-  }
-  .col-span-12 {
+  .col-lg-12 {
     width: 100%;
   }
-  .col-span-11 {
+  .col-lg-11 {
     width: 91.66666666666666%;
   }
-  .col-span-10 {
+  .col-lg-10 {
     width: 83.33333333333334%;
   }
-  .col-span-9 {
+  .col-lg-9 {
     width: 75%;
   }
-  .col-span-8 {
+  .col-lg-8 {
     width: 66.66666666666666%;
   }
-  .col-span-7 {
+  .col-lg-7 {
     width: 58.333333333333336%;
   }
-  .col-span-6 {
+  .col-lg-6 {
     width: 50%;
   }
-  .col-span-5 {
+  .col-lg-5 {
     width: 41.66666666666667%;
   }
-  .col-span-4 {
+  .col-lg-4 {
     width: 33.33333333333333%;
   }
-  .col-span-3 {
+  .col-lg-3 {
     width: 25%;
   }
-  .col-span-2 {
+  .col-lg-2 {
     width: 16.666666666666664%;
   }
-  .col-span-1 {
+  .col-lg-1 {
     width: 8.333333333333332%;
   }
   .col-offset-12 {
@@ -997,6 +988,12 @@ pre code {
   }
 }
 
+@media screen and (min-width: 768px) {
+  .container {
+    max-width: 728px;
+  }
+}
+
 @media screen and (min-width: 992px) {
   .container {
     max-width: 940px;
@@ -1009,9 +1006,9 @@ pre code {
   }
 }
 
-[class*="col-span-"].pull-right {
+/*[class*="col-span-"].pull-right {
   float: right;
-}
+}*/
 
 table {
   max-width: 100%;

docs/assets/css/docs.css

@@ -124,13 +124,13 @@ section > ul li {
 .show-grid {
   margin-bottom: 15px;
 }
-.show-grid [class*="col-span-"] {
+.show-grid .col {
   padding-top: 10px;
   padding-bottom: 10px;
   background-color: #eee;
   border: 1px solid #ddd;
 }
-.show-grid [class*="col-span-"]:hover {
+.show-grid .col:hover {
   background-color: #ddd;
 }
 

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;
-}
+}*/

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