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.

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();
 }
 
 

less/mixins/grid.less

-// 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) {
-  margin-left: percentage((@columns / @grid-columns));
-}
-.make-xs-column-push(@columns) {
-  left: percentage((@columns / @grid-columns));
-}
-.make-xs-column-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;
+.make-col-span(@columns) {
   width: percentage((@columns / @grid-columns));
-  }
 }
-.make-lg-column-offset(@columns) {
-  @media (min-width: @screen-lg-min) {
+.make-col-offset(@columns) {
   margin-left: percentage((@columns / @grid-columns));
-  }
 }
-.make-lg-column-push(@columns) {
-  @media (min-width: @screen-lg-min) {
+.make-col-push(@columns) {
   left: percentage((@columns / @grid-columns));
-  }
 }
-.make-lg-column-pull(@columns) {
-  @media (min-width: @screen-lg-min) {
+.make-col-pull(@columns) {
   right: percentage((@columns / @grid-columns));
-  }
 }