rename and refactor a smidge to add medium grid mixins

1 files changed, 77 insertions, 12 deletions

diff --git a/css.html b/css.html
index 984400bee..04843a198 100644
--- a/css.html
+++ b/css.html
@@ -421,39 +421,104 @@ base_url: "../"
   }
 }
 
-// Generate the column offsets
-.make-column-offset(@columns) {
-  @media (min-width: @grid-float-breakpoint) {
+// Generate the small columns
+.make-sm-column(@columns; @gutter: @grid-gutter-width) {
+  position: relative;
+  // Prevent columns from collapsing when empty
+  min-height: 1px;
+  // Inner gutter via padding
+  padding-left:  (@gutter / 2);
+  padding-right: (@gutter / 2);
+
+  // Calculate width based on number of columns available
+  @media (min-width: @screen-small) {
+    float: left;
+    width: percentage((@columns / @grid-columns));
+  }
+}
+
+// Generate the small column offsets
+.make-sm-column-offset(@columns) {
+  @media (min-width: @screen-small) {
     margin-left: percentage((@columns / @grid-columns));
   }
 }
-.make-column-push(@columns) {
-  @media (min-width: @grid-float-breakpoint) {
+.make-sm-column-push(@columns) {
+  @media (min-width: @screen-small) {
     left: percentage((@columns / @grid-columns));
   }
 }
-.make-column-pull(@columns) {
-  @media (min-width: @grid-float-breakpoint) {
+.make-sm-column-pull(@columns) {
+  @media (min-width: @screen-small) {
     right: percentage((@columns / @grid-columns));
   }
 }
 
-// Generate the small columns
-.make-small-column(@columns; @gutter: @grid-gutter-width) {
+// Generate the medium columns
+.make-md-column(@columns; @gutter: @grid-gutter-width) {
   position: relative;
-  float: left;
   // Prevent columns from collapsing when empty
   min-height: 1px;
   // Inner gutter via padding
   padding-left:  (@gutter / 2);
   padding-right: (@gutter / 2);
-  @max-width: (@grid-float-breakpoint - 1);
 
   // Calculate width based on number of columns available
-  @media (max-width: @max-width) {
+  @media (min-width: @screen-medium) {
+    float: left;
     width: percentage((@columns / @grid-columns));
   }
 }
+
+// Generate the large column offsets
+.make-md-column-offset(@columns) {
+  @media (min-width: @screen-medium) {
+    margin-left: percentage((@columns / @grid-columns));
+  }
+}
+.make-md-column-push(@columns) {
+  @media (min-width: @screen-medium) {
+    left: percentage((@columns / @grid-columns));
+  }
+}
+.make-md-column-pull(@columns) {
+  @media (min-width: @screen-medium) {
+    right: percentage((@columns / @grid-columns));
+  }
+}
+
+// Generate the large columns
+.make-lg-column(@columns; @gutter: @grid-gutter-width) {
+  position: relative;
+  // Prevent columns from collapsing when empty
+  min-height: 1px;
+  // Inner gutter via padding
+  padding-left:  (@gutter / 2);
+  padding-right: (@gutter / 2);
+
+  // Calculate width based on number of columns available
+  @media (min-width: @screen-large) {
+    float: left;
+    width: percentage((@columns / @grid-columns));
+  }
+}
+
+// Generate the large column offsets
+.make-lg-column-offset(@columns) {
+  @media (min-width: @screen-large) {
+    margin-left: percentage((@columns / @grid-columns));
+  }
+}
+.make-lg-column-push(@columns) {
+  @media (min-width: @screen-large) {
+    left: percentage((@columns / @grid-columns));
+  }
+}
+.make-lg-column-pull(@columns) {
+  @media (min-width: @screen-large) {
+    right: percentage((@columns / @grid-columns));
+  }
+}
 {% endhighlight %}
 
     <h4>Example usage</h4>