Responsive makeColumn/makeRow and use global variables

Created by: barryvdh

• Create 2 different makeColumn/makeRow mixins with guard expressions.
• Make parameters optional in the grid() mixin (default to global variables)
• Override grid variables in responsive.less, to make makeColumn work

This enables creating 1 mixin with .makeColumn and .makeRow, and have the possibility to collapse, just like the regular spans (or define columns/rows in mediaqueries)

@media (max-width: 767px) {
    // Custom grid
    @gridColumnWidth: auto;
    @gridGutterWidth: 0;

    #custom > .grid();
}

(For issue #2242 (closed) #2448 (closed) and #1636 (closed)

less/mixins.less

@@ -503,20 +503,43 @@
 
 // Make a Grid
 // Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
-.makeRow() {
+.makeRow() when(isNumber(@gridColumnWidth)) {
   margin-left: @gridGutterWidth * -1;
   .clearfix();
 }
-.makeColumn(@columns: 1) {
+ .makeRow() when(@gridColumnWidth = auto){ 
+            margin-left: 0;
+}
+.makeColumn(@columns: 1) when(isNumber(@gridColumnWidth)) {
   float: left;
   margin-left: @gridGutterWidth;
   width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
 }
 
+.makeColumn (@columns: 1) when(@gridColumnWidth = auto){ 
+    float: none;
+    display: block;
+    width: auto;
+    margin: 0;
+}
+.makeOffset (@columns: 1) {
+    margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
+}
+
+ .makeContainer() when(isNumber(@gridColumnWidth)){
+	  .container-fixed();
+	  width: (@gridColumnWidth * @gridColumns) + (@gridGutterWidth * (@gridColumns - 1));
+	}
+
+	.makeContainer() when(@gridColumnWidth = auto){
+	   .container-fixed();
+	   width: auto;
+	   padding:0 20px;
+	}
 // The Grid
 #grid {
 
-  .core (@gridColumnWidth, @gridGutterWidth) {
+  .core (@gridColumnWidth: @gridColumnWidth, @gridGutterWidth: @gridGutterWidth) {
 
     .spanX (@index) when (@index > 0) {
       (~".span@{index}") { .span(@index); }
@@ -559,7 +582,7 @@
 
   }
 
-  .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
+  .fluid (@fluidGridColumnWidth: @fluidGridColumnWidth, @fluidGridGutterWidth: @fluidGridGutterWidth) {
 
     .spanX (@index) when (@index > 0) {
       (~"> .span@{index}") { .span(@index); }
@@ -589,7 +612,7 @@
 
   }
 
-  .input(@gridColumnWidth, @gridGutterWidth) {
+  .input(@gridColumnWidth: @gridColumnWidth , @gridGutterWidth:  @gridGutterWidth) {
 
     .spanX (@index) when (@index > 0) {
       (~"input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index}") { .span(@index); }
@@ -612,4 +635,4 @@
 
   }
 
-}
+}
\ No newline at end of file

less/responsive.less

@@ -199,14 +199,22 @@
 
 @media (min-width: 768px) and (max-width: 979px) {
 
+  //Default grid
+  @gridColumnWidth:         42px;
+  @gridGutterWidth:         20px;
+
+  // Fluid grid
+  @fluidGridColumnWidth:    5.801104972%;
+  @fluidGridGutterWidth:    2.762430939%;
+
   // Fixed grid
-  #grid > .core(42px, 20px);
+  #grid > .core(@gridColumnWidth, @gridGutterWidth);
 
   // Fluid grid
-  #grid > .fluid(5.801104972%, 2.762430939%);
+  #grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth);
 
   // Input grid
-  #grid > .input(42px, 20px);
+  #grid > .input(@gridColumnWidth, @gridGutterWidth);
 
 }
 
@@ -351,21 +359,30 @@
 
 @media (min-width: 1200px) {
 
+  //Default grid
+  @gridColumnWidth:         70px;
+  @gridGutterWidth:         30px;
+
+  // Fluid grid
+  @fluidGridColumnWidth:    5.982905983%;
+  @fluidGridGutterWidth:    2.564102564%;
+
   // Fixed grid
-  #grid > .core(70px, 30px);
+  #grid > .core(@gridColumnWidth, @gridGutterWidth);
 
   // Fluid grid
-  #grid > .fluid(5.982905983%, 2.564102564%);
+  #grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth);
 
   // Input grid
-  #grid > .input(70px, 30px);
+  #grid > .input(@gridColumnWidth, @gridGutterWidth);
+
 
   // Thumbnails
   .thumbnails {
-    margin-left: -30px;
+    margin-left: -@gridGutterWidth;
   }
   .thumbnails > li {
-    margin-left: 30px;
+    margin-left: @gridGutterWidth;
   }
 
 }