headway, cleanup, and tests

less/forms.less

@@ -265,42 +265,33 @@ textarea {
 .input-xlarge     { width: 270px; }
 .input-xxlarge    { width: 530px; }
 
-// Grid style input sizes
-input[class*="span"],
-select[class*="span"],
-textarea[class*="span"],
-.uneditable-input[class*="span"],
-// Redeclare since the fluid row class is more specific
-.row-fluid input[class*="span"],
-.row-fluid select[class*="span"],
-.row-fluid textarea[class*="span"],
-.row-fluid .uneditable-input[class*="span"] {
-  xfloat: none;
-  xmargin-left: 0;
-}
-// Ensure input-prepend/append never wraps
-.input-append input[class*="span"],
-.input-append .uneditable-input[class*="span"],
-.input-prepend input[class*="span"],
-.input-prepend .uneditable-input[class*="span"],
-.row-fluid input[class*="span"],
-.row-fluid select[class*="span"],
-.row-fluid textarea[class*="span"],
-.row-fluid .uneditable-input[class*="span"],
-.row-fluid .input-prepend [class*="span"],
-.row-fluid .input-append [class*="span"] {
-  display: inline-block;
-}
-
 
 
 // GRID SIZING FOR INPUTS
 // ----------------------
 
+// Grid style input sizes
+input[class*="span"],
+select[class*="span"],
+textarea[class*="span"],
+.uneditable-input[class*="span"] {
+  float: none;
+  margin-left: 0;
+  margin-right: 0;
+}
+
 .controls-row {
   #grid > .input(@gridColumnWidth, @gridGutterWidth, @gridRowWidth);
 }
 
+// Ensure input-prepend/append never wraps
+.input-append input[class*="span"],
+.input-append .uneditable-input[class*="span"],
+.input-prepend input[class*="span"],
+.input-prepend .uneditable-input[class*="span"] {
+  display: inline-block;
+}
+
 input[class*="span"],
 select[class*="span"],
 textarea[class*="span"],
@@ -427,8 +418,8 @@ select:focus:required:invalid {
   select,
   .uneditable-input {
     position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
-    margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
-    *margin-left: 0;
+    float: none; // Undo the float from grid sizing
+    margin: 0; // Prevent bottom margin from screwing up alignment in stacked forms
     font-size: @baseFontSize;
     vertical-align: top;
     .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
@@ -437,6 +428,11 @@ select:focus:required:invalid {
       z-index: 2;
     }
   }
+  input[class*="span"],
+  select[class*="span"],
+  .uneditable-input[class*="span"] {
+    margin: 0;
+  }
   .add-on {
     display: inline-block;
     width: auto;

less/mixins.less

@@ -555,92 +555,86 @@
 // The Grid
 #grid {
 
-  .core (@gridColumnWidth, @gridGutterWidth, @gridRowWidth) {
+  .core(@gridColumnWidth, @gridGutterWidth, @gridRowWidth) {
 
-    .spanX (@index) when (@index > 0) {
+    .spanX(@index) when (@index > 0) {
       (~".span@{index}") { .span(@index); }
       .spanX(@index - 1);
     }
-    .spanX (0) {}
+    .spanX(0) {}
 
-    .offsetX (@index) when (@index > 0) {
+    .offsetX(@index) when (@index > 0) {
       (~".offset@{index}") { .offset(@index); }
       .offsetX(@index - 1);
     }
-    .offsetX (0) {}
+    .offsetX(0) {}
 
-    .offset (@columns) {
+
+    // Base styles
+    .offset(@columns) {
       margin-left: percentage(@columns / @gridColumns);
     }
-
-    .span (@columns) {
+    .span(@columns) {
       width: percentage(@columns / @gridColumns);
     }
 
     .row {
+      // Negative indent the columns so text lines up
       margin-left: @gridGutterWidth / -2;
       margin-right: @gridGutterWidth / -2;
+      // Clear the floated columns
       .clearfix();
     }
 
     [class*="span"] {
-      float: left;
-      min-height: 1px; // prevent column collapsing
+      float: left; // Collapse whitespace
+      min-height: 1px; // Prevent empty columns from collapsing
       padding-left: @gridGutterWidth / 2;
       padding-right: @gridGutterWidth / 2;
+      // Proper box-model (padding doesnt' add to width)
       -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
               box-sizing: border-box;
     }
 
-    // generate .spanX and .offsetX
-    .spanX (@gridColumns);
-    .offsetX (@gridColumns);
+    // Generate .spanX and .offsetX
+    .spanX(@gridColumns);
+    .offsetX(@gridColumns);
 
   }
 
 
   .input(@gridColumnWidth, @gridGutterWidth, @gridRowWidth) {
 
-    .spanX (@index) when (@index > 0) {
-      (~"input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index}") { .span(@index); }
+    .spanX(@index) when (@index > 0) {
+      (~"input.span@{index}, textarea.span@{index}, select.span@{index}, .uneditable-input.span@{index}") { .span(@index); }
       .spanX(@index - 1);
     }
-    .spanX (0) {}
+    .spanX(0) {}
+
+    .offsetX(@index) when (@index > 0) {
+      (~"input.offset@{index}, textarea.offset@{index}, select.offset@{index}, uneditable-input.offset@{index}") { .offset(@index); }
+      .offsetX(@index - 1);
+    }
+    .offsetX(0) {}
+
 
     .span(@columns) {
-      //width: percentage(@columns / @gridColumns) - percentage(@gridGutterWidth / @gridRowWidth) + percentage(@gridGutterWidth/(@columns - 1));
-      //width: (100% - ((@columns - 1) * (@gridGutterWidth / @gridRowWidth))) / @gridColumns;
-
-
-      //width: percentage((@columns * (((@columns - 1) * (@gridGutterWidth/@gridRowWidth)))) / @gridRowWidth);
-      width: percentage((@columns * (@gridRowWidth - ( @columns - 1 ) * (@gridGutterWidth/@gridRowWidth)) / 12 ) / @gridRowWidth);
-      //( 4 * (940 - (num_col - 1 )*(20/940)) )/940
-
+      // Part 1: Since inputs require padding *and* margin, we subtract the grid gutter width, as a percent of the row, from the default column width.
+      width: percentage(@columns / @gridColumns) - percentage(@gridGutterWidth / @gridRowWidth);
+      // Part 2: That subtracted width then gets split in half and added to the left and right margins.
       margin-left: percentage((@gridGutterWidth / 2) / @gridRowWidth);
-      //margin-left:  percentage((((@columns - 1) * @gridGutterWidth)/ @gridRowWidth ) / (2 * (@columns - 1) );
-
       margin-right: percentage((@gridGutterWidth / 2) / @gridRowWidth);
-      //margin-right: percentage((((@columns - 1) * @gridGutterWidth)/ @gridRowWidth ) / (2 * (@columns - 1) );
     }
 
-    // 940*4/12 - 20/940 = .312056737
-
-    // 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;
+    .offset(@columns) {
+      // Take the normal offset margin and add an extra gutter's worth.
+      margin-left: percentage(@columns / @gridColumns) + percentage((@gridGutterWidth / 2) / @gridRowWidth);
     }
 
-
-    // generate .spanX
-    .spanX (@gridColumns);
+    // Generate .spanX and .offsetX
+    .spanX(@gridColumns);
+    .offsetX(@gridColumns);
 
   }
 

less/tests/css-tests.html

@@ -53,12 +53,119 @@
 </header>
 
 
-<div class="bs-docs-canvas">
 
   <div class="container">
 
 
 
+
+
+<div class="bs-docs-grid">
+  <div class="row show-grid">
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+  </div>
+  <div class="row show-grid">
+    <div class="span4">4</div>
+    <div class="span4">4</div>
+    <div class="span4">4</div>
+  </div>
+  <div class="row show-grid">
+    <div class="span6">6</div>
+    <div class="span6">6</div>
+  </div>
+  <div class="row show-grid">
+    <div class="span12">12</div>
+  </div>
+</div>
+
+<form class="controls-row">
+  <input class="span1" type="text" placeholder=".span1">
+  <input class="span1" type="text" placeholder=".span1">
+  <input class="span1" type="text" placeholder=".span1">
+  <input class="span1" type="text" placeholder=".span1">
+  <input class="span1" type="text" placeholder=".span1">
+  <input class="span1" type="text" placeholder=".span1">
+  <input class="span1" type="text" placeholder=".span1">
+  <input class="span1" type="text" placeholder=".span1">
+  <input class="span1" type="text" placeholder=".span1">
+  <input class="span1" type="text" placeholder=".span1">
+  <input class="span1" type="text" placeholder=".span1">
+  <input class="span1" type="text" placeholder=".span1">
+</form>
+
+<form class="controls-row">
+  <input class="span4" type="text" placeholder=".span4">
+  <input class="span4" type="text" placeholder=".span4">
+  <input class="span4" type="text" placeholder=".span4">
+</form>
+
+<form class="controls-row">
+  <input class="span6" type="text" placeholder=".span6">
+  <input class="span6" type="text" placeholder=".span6">
+</form>
+
+<form class="controls-row">
+  <input class="span12" type="text" placeholder=".span12">
+</form>
+
+<form class="clearfix">
+  <input class="span4" type="text" placeholder=".span4">
+  <input class="span4 offset4" type="text" placeholder=".span4">
+</form>
+
+
+<form class="bs-docs-example form-horizontal">
+  <legend>Horizontal form example</legend>
+  <div class="control-group">
+    <label class="control-label">Name</label>
+    <div class="controls">
+      <input type="text" class="span3" placeholder="First">
+      <input type="text" class="span3" placeholder="Last">
+    </div>
+  </div>
+  <div class="control-group">
+    <label class="control-label">Email</label>
+    <div class="controls">
+      <input type="text" class="span6" placeholder="First">
+    </div>
+  </div>
+  <div class="control-group">
+    <label class="control-label">Password</label>
+    <div class="controls">
+      <input type="password" class="span6" placeholder="Password">
+    </div>
+  </div>
+  <div class="control-group">
+    <div class="controls">
+      <label class="checkbox">
+        <input type="checkbox"> Remember me
+      </label>
+      <button type="submit" class="btn">Sign in</button>
+    </div>
+  </div>
+</form>
+
+<style>
+.container { background-color: rgba(255,0,0,.1); }
+</style>
+
+
+<br><br><br>
+
+
+
+
 <!-- Typography
 ================================================== -->
 
@@ -136,239 +243,6 @@
 
 
 
-<!-- Fluid grid
-================================================== -->
-
-<div class="page-header">
-  <h1>Fluid grids</h1>
-</div>
-
-<div class="fluid-grid">
-  <div class="row">
-    <div class="span12">12
-      <div class="row-fluid">
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-      </div>
-    </div>
-  </div>
-  <div class="row">
-    <div class="span11">11
-      <div class="row-fluid">
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-      </div>
-    </div>
-    <div class="span1">1
-      <div class="row-fluid">
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-      </div>
-    </div>
-  </div>
-  <div class="row">
-    <div class="span10">10
-      <div class="row-fluid">
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-      </div>
-    </div>
-    <div class="span2">2
-      <div class="row-fluid">
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-      </div>
-    </div>
-  </div>
-  <div class="row">
-    <div class="span9">9
-      <div class="row-fluid">
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-      </div>
-    </div>
-    <div class="span3">3
-      <div class="row-fluid">
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-      </div>
-    </div>
-  </div>
-  <div class="row">
-    <div class="span8">8
-      <div class="row-fluid">
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-      </div>
-    </div>
-    <div class="span4">4
-      <div class="row-fluid">
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-      </div>
-    </div>
-  </div>
-  <div class="row">
-    <div class="span7">7
-      <div class="row-fluid">
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-      </div>
-    </div>
-    <div class="span5">5
-      <div class="row-fluid">
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-      </div>
-    </div>
-  </div>
-  <div class="row">
-    <div class="span6">6
-      <div class="row-fluid">
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-      </div>
-    </div>
-    <div class="span6">6
-      <div class="row-fluid">
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-        <div class="span1">1</div>
-      </div>
-    </div>
-  </div>
-</div> <!-- fluid grids -->
-
-
 
 <!-- Tables
 ================================================== -->
@@ -1268,7 +1142,6 @@
       </div>
     </footer>
 
-</div>
 
 
     <!-- Le javascript