Overhaul semantic grid mixins

- Drops all the `.make-**-column` mixins for a single set to be used
within (or outside) media queries.
- Renames `.container-fixed` to `.make-container` for consistency.
- Updates built-in grid system to use new setup.

See http://jsbin.com/qiqet/2/ for an example of it in action.

2 files changed, 12 insertions, 94 deletions

diff --git a/less/grid.less b/less/grid.less
index e100655b7..9957a44af 100644
--- a/less/grid.less
+++ b/less/grid.less
@@ -8,7 +8,7 @@
 // Set the container width, and override it for fixed navbars in media queries.
 
 .container {
-  .container-fixed();
+  .make-container();
 
   @media (min-width: @screen-sm-min) {
     width: @container-sm;
@@ -28,7 +28,7 @@
 // width for fluid, full width layouts.
 
 .container-fluid {
-  .container-fixed();
+  .make-container();
 }
 
 
diff --git a/less/mixins/grid.less b/less/mixins/grid.less
index cae5eaff9..1353a7354 100644
--- a/less/mixins/grid.less
+++ b/less/mixins/grid.less
@@ -1,9 +1,9 @@
-// Grid system
+/// Grid system
 //
 // Generate semantic grid columns with these mixins.
 
 // Centered container element
-.container-fixed(@gutter: @grid-gutter-width) {
+.make-container(@gutter: @grid-gutter-width) {
   margin-right: auto;
   margin-left: auto;
   padding-left:  (@gutter / 2);
@@ -18,105 +18,23 @@
   &:extend(.clearfix all);
 }
 
-// Generate the extra small columns
-.make-xs-column(@columns; @gutter: @grid-gutter-width) {
+.make-col(@gutter: @grid-gutter-width) {
   position: relative;
   float: left;
-  width: percentage((@columns / @grid-columns));
   min-height: 1px;
   padding-left:  (@gutter / 2);
   padding-right: (@gutter / 2);
 }
-.make-xs-column-offset(@columns) {
+
+.make-col-span(@columns) {
+  width: percentage((@columns / @grid-columns));
+}
+.make-col-offset(@columns) {
   margin-left: percentage((@columns / @grid-columns));
 }
-.make-xs-column-push(@columns) {
+.make-col-push(@columns) {
   left: percentage((@columns / @grid-columns));
 }
-.make-xs-column-pull(@columns) {
+.make-col-pull(@columns) {
   right: percentage((@columns / @grid-columns));
 }
-
-// Generate the small columns
-.make-sm-column(@columns; @gutter: @grid-gutter-width) {
-  position: relative;
-  min-height: 1px;
-  padding-left:  (@gutter / 2);
-  padding-right: (@gutter / 2);
-
-  @media (min-width: @screen-sm-min) {
-    float: left;
-    width: percentage((@columns / @grid-columns));
-  }
-}
-.make-sm-column-offset(@columns) {
-  @media (min-width: @screen-sm-min) {
-    margin-left: percentage((@columns / @grid-columns));
-  }
-}
-.make-sm-column-push(@columns) {
-  @media (min-width: @screen-sm-min) {
-    left: percentage((@columns / @grid-columns));
-  }
-}
-.make-sm-column-pull(@columns) {
-  @media (min-width: @screen-sm-min) {
-    right: percentage((@columns / @grid-columns));
-  }
-}
-
-// Generate the medium columns
-.make-md-column(@columns; @gutter: @grid-gutter-width) {
-  position: relative;
-  min-height: 1px;
-  padding-left:  (@gutter / 2);
-  padding-right: (@gutter / 2);
-
-  @media (min-width: @screen-md-min) {
-    float: left;
-    width: percentage((@columns / @grid-columns));
-  }
-}
-.make-md-column-offset(@columns) {
-  @media (min-width: @screen-md-min) {
-    margin-left: percentage((@columns / @grid-columns));
-  }
-}
-.make-md-column-push(@columns) {
-  @media (min-width: @screen-md-min) {
-    left: percentage((@columns / @grid-columns));
-  }
-}
-.make-md-column-pull(@columns) {
-  @media (min-width: @screen-md-min) {
-    right: percentage((@columns / @grid-columns));
-  }
-}
-
-// Generate the large columns
-.make-lg-column(@columns; @gutter: @grid-gutter-width) {
-  position: relative;
-  min-height: 1px;
-  padding-left:  (@gutter / 2);
-  padding-right: (@gutter / 2);
-
-  @media (min-width: @screen-lg-min) {
-    float: left;
-    width: percentage((@columns / @grid-columns));
-  }
-}
-.make-lg-column-offset(@columns) {
-  @media (min-width: @screen-lg-min) {
-    margin-left: percentage((@columns / @grid-columns));
-  }
-}
-.make-lg-column-push(@columns) {
-  @media (min-width: @screen-lg-min) {
-    left: percentage((@columns / @grid-columns));
-  }
-}
-.make-lg-column-pull(@columns) {
-  @media (min-width: @screen-lg-min) {
-    right: percentage((@columns / @grid-columns));
-  }
-}