latest tweaks to grid classes for forms

less/forms.less

@@ -297,6 +297,10 @@ textarea[class*="span"],
 // GRID SIZING FOR INPUTS
 // ----------------------
 
+.controls-row {
+  #grid > .input(@gridColumnWidth, @gridGutterWidth, @gridRowWidth);
+}
+
 input[class*="span"],
 select[class*="span"],
 textarea[class*="span"],

less/mixins.less

@@ -599,4 +599,38 @@
 
   }
 
+
+  .input(@gridColumnWidth, @gridGutterWidth, @gridRowWidth) {
+
+    .spanX (@index) when (@index > 0) {
+      (~"input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index}") { .span(@index); }
+      .spanX(@index - 1);
+    }
+    .spanX (0) {}
+
+    .span(@columns) {
+      width: percentage(@columns / @gridColumns) - percentage(@gridGutterWidth / @gridRowWidth);
+      margin-left: percentage((@gridGutterWidth / 2) / @gridRowWidth);
+      margin-right: percentage((@gridGutterWidth / 2) / @gridRowWidth);
+    }
+
+    // Space grid-sized controls properly if multiple per line
+    input[class*="span"]:first-child,
+    textarea[class*="span"]:first-child,
+    .uneditable-input[class*="span"]:first-child {
+      margin-left: 0;
+    }
+    input[class*="span"]:last-child,
+    textarea[class*="span"]:last-child,
+    .uneditable-input[class*="span"]:last-child {
+      margin-right: 0;
+    }
+
+
+    // generate .spanX
+    .spanX (@gridColumns);
+
+  }
+
+
 }

less/responsive-1200px-min.less

@@ -14,6 +14,7 @@
 
   // Fixed grid
   #grid > .core(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200);
+  #grid > .input(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200);
 
   // Thumbnails
   .thumbnails {

less/tests/grid.html

@@ -16,6 +16,8 @@
         padding-top: 30px;
         padding-bottom: 30px;
       }
+
+
     </style>
 
     <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
@@ -73,19 +75,24 @@
 
 
       <h2>Inputs</h2>
+      <input type="text" class="span1" placeholder=".span1">
+      <input type="text" class="span2" placeholder=".span2">
+      <input type="text" class="span4" placeholder=".span4">
+      <input type="text" class="span5" placeholder=".span5">
 
-      <h4>No additional markup</h4>
-      <input type="text" class="span4" placeholder=".span4">
-      <input type="text" class="span4" placeholder=".span4">
-      <input type="text" class="span4" placeholder=".span4">
-
-      <h4>With .controls-row</h4>
-      <div class="controls-row">
-        <input type="text" class="span4" placeholder=".span4">
-        <input type="text" class="span4" placeholder=".span4">
+      <div class="row">
+        <input type="text" class="span1" placeholder=".span1">
+        <input type="text" class="span2" placeholder=".span2">
         <input type="text" class="span4" placeholder=".span4">
+        <input type="text" class="span5" placeholder=".span5">
       </div>
 
+      <div class="controls-row">
+        <input type="text" class="span1" placeholder=".span1">
+        <input type="text" class="span2" placeholder=".span2">
+        <input type="text" class="span4" placeholder=".span4">
+        <input type="text" class="span5" placeholder=".span5">
+      </div>
 
     </form> <!-- /container -->