fixes #8935: add gutter width param to grid mixins

2 files changed, 60 insertions, 23 deletions

diff --git a/css.html b/css.html
index 6c760dd03..26b8f1d3f 100644
--- a/css.html
+++ b/css.html
@@ -388,26 +388,36 @@ base_url: "../"
     <p>Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.</p>
 {% highlight css %}
 // Creates a wrapper for a series of columns
-.make-row() {
-  // Negative margin the row out to align the content of columns
-  margin-left:  (@grid-gutter-width / -2);
-  margin-right: (@grid-gutter-width / -2);
+.make-row(@gutter: @grid-gutter-width) {
   // Then clear the floated columns
   .clearfix();
+
+  @media (min-width: @screen-small) {
+    margin-left:  (@gutter / -2);
+    margin-right: (@gutter / -2);
+  }
+
+  // Negative margin nested rows out to align the content of columns
+  .row {
+    margin-left:  (@gutter / -2);
+    margin-right: (@gutter / -2);
+  }
 }
 
 // Generate the columns
-.make-column(@columns) {
+.make-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: @grid-float-breakpoint) {
     float: left;
-    // Calculate width based on number of columns available
-    width: percentage(@columns / @grid-columns);
+    width: percentage((@columns / @grid-columns));
   }
-  // Prevent columns from collapsing when empty
-  min-height: 1px;
-  // Set inner padding as gutters instead of margin
-  padding-left:  (@grid-gutter-width / 2);
-  padding-right: (@grid-gutter-width / 2);
 }
 
 // Generate the column offsets
@@ -416,6 +426,33 @@ base_url: "../"
     margin-left: percentage((@columns / @grid-columns));
   }
 }
+.make-column-push(@columns) {
+  @media (min-width: @grid-float-breakpoint) {
+    left: percentage((@columns / @grid-columns));
+  }
+}
+.make-column-pull(@columns) {
+  @media (min-width: @grid-float-breakpoint) {
+    right: percentage((@columns / @grid-columns));
+  }
+}
+
+// Generate the small columns
+.make-small-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) {
+    width: percentage((@columns / @grid-columns));
+  }
+}
 {% endhighlight %}
 
     <h4>Example usage</h4>
diff --git a/less/mixins.less b/less/mixins.less
index 92426cdfa..e678563ad 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -441,30 +441,30 @@
 }
 
 // Creates a wrapper for a series of columns
-.make-row() {
+.make-row(@gutter: @grid-gutter-width) {
   // Then clear the floated columns
   .clearfix();
 
   @media (min-width: @screen-small) {
-    margin-left:  (@grid-gutter-width / -2);
-    margin-right: (@grid-gutter-width / -2);
+    margin-left:  (@gutter / -2);
+    margin-right: (@gutter / -2);
   }
 
   // Negative margin nested rows out to align the content of columns
   .row {
-    margin-left:  (@grid-gutter-width / -2);
-    margin-right: (@grid-gutter-width / -2);
+    margin-left:  (@gutter / -2);
+    margin-right: (@gutter / -2);
   }
 }
 
 // Generate the columns
-.make-column(@columns) {
+.make-column(@columns; @gutter: @grid-gutter-width) {
   position: relative;
   // 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);
+  padding-left:  (@gutter / 2);
+  padding-right: (@gutter / 2);
 
   // Calculate width based on number of columns available
   @media (min-width: @grid-float-breakpoint) {
@@ -491,14 +491,14 @@
 }
 
 // Generate the small columns
-.make-small-column(@columns) {
+.make-small-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:  (@grid-gutter-width / 2);
-  padding-right: (@grid-gutter-width / 2);
+  padding-left:  (@gutter / 2);
+  padding-right: (@gutter / 2);
   @max-width: (@grid-float-breakpoint - 1);
 
   // Calculate width based on number of columns available