overhaul the grid CSS to make it more durable for tables and forms to use the...

overhaul the grid CSS to make it more durable for tables and forms to use the same sizing methods; need to see about improving this in the future

bootstrap.css

@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Mon Oct  3 21:43:20 PDT 2011
+ * Date: Mon Oct  3 22:00:55 PDT 2011
  */
 /* Reset.less
  * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here	that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
@@ -264,7 +264,7 @@ a:hover {
 .row:after {
   clear: both;
 }
-[class*="span"] {
+.row > [class*="span"] {
   display: inline;
   float: left;
   margin-left: 20px;
@@ -341,40 +341,40 @@ a:hover {
 .span24 {
   width: 1420px;
 }
-.offset1 {
+.row  > .offset1 {
   margin-left: 80px;
 }
-.offset2 {
+.row  > .offset2 {
   margin-left: 140px;
 }
-.offset3 {
+.row  > .offset3 {
   margin-left: 200px;
 }
-.offset4 {
+.row  > .offset4 {
   margin-left: 260px;
 }
-.offset5 {
+.row  > .offset5 {
   margin-left: 320px;
 }
-.offset6 {
+.row  > .offset6 {
   margin-left: 380px;
 }
-.offset7 {
+.row  > .offset7 {
   margin-left: 440px;
 }
-.offset8 {
+.row  > .offset8 {
   margin-left: 500px;
 }
-.offset9 {
+.row  > .offset9 {
   margin-left: 560px;
 }
-.offset10 {
+.row  > .offset10 {
   margin-left: 620px;
 }
-.offset11 {
+.row  > .offset11 {
   margin-left: 680px;
 }
-.offset12 {
+.row  > .offset12 {
   margin-left: 740px;
 }
 .span-one-third {
@@ -788,99 +788,67 @@ textarea.xxlarge {
 }
 input.span1, textarea.span1, select.span1 {
   display: inline-block;
-  float: none;
   width: 30px;
-  margin-left: 0;
 }
 input.span2, textarea.span2, select.span2 {
   display: inline-block;
-  float: none;
   width: 90px;
-  margin-left: 0;
 }
 input.span3, textarea.span3, select.span3 {
   display: inline-block;
-  float: none;
   width: 150px;
-  margin-left: 0;
 }
 input.span4, textarea.span4, select.span4 {
   display: inline-block;
-  float: none;
   width: 210px;
-  margin-left: 0;
 }
 input.span5, textarea.span5, select.span5 {
   display: inline-block;
-  float: none;
   width: 270px;
-  margin-left: 0;
 }
 input.span6, textarea.span6, select.span6 {
   display: inline-block;
-  float: none;
   width: 330px;
-  margin-left: 0;
 }
 input.span7, textarea.span7, select.span7 {
   display: inline-block;
-  float: none;
   width: 390px;
-  margin-left: 0;
 }
 input.span8, textarea.span8, select.span8 {
   display: inline-block;
-  float: none;
   width: 450px;
-  margin-left: 0;
 }
 input.span9, textarea.span9, select.span9 {
   display: inline-block;
-  float: none;
   width: 510px;
-  margin-left: 0;
 }
 input.span10, textarea.span10, select.span10 {
   display: inline-block;
-  float: none;
   width: 570px;
-  margin-left: 0;
 }
 input.span11, textarea.span11, select.span11 {
   display: inline-block;
-  float: none;
   width: 630px;
-  margin-left: 0;
 }
 input.span12, textarea.span12, select.span12 {
   display: inline-block;
-  float: none;
   width: 690px;
-  margin-left: 0;
 }
 input.span13, textarea.span13, select.span13 {
   display: inline-block;
-  float: none;
   width: 750px;
-  margin-left: 0;
 }
 input.span14, textarea.span14, select.span14 {
   display: inline-block;
-  float: none;
   width: 810px;
-  margin-left: 0;
 }
 input.span15, textarea.span15, select.span15 {
   display: inline-block;
-  float: none;
   width: 870px;
-  margin-left: 0;
 }
 input.span16, textarea.span16, select.span16 {
   display: inline-block;
-  float: none;
   width: 930px;
-  margin-left: 0;
 }
 input[disabled],
 select[disabled],
@@ -1134,6 +1102,54 @@ table tbody tr:last-child td:last-child {
   -moz-border-radius: 0 0 4px 0;
   border-radius: 0 0 4px 0;
 }
+table .span1 {
+  width: 20px;
+}
+table .span2 {
+  width: 60px;
+}
+table .span3 {
+  width: 100px;
+}
+table .span4 {
+  width: 140px;
+}
+table .span5 {
+  width: 180px;
+}
+table .span6 {
+  width: 220px;
+}
+table .span7 {
+  width: 260px;
+}
+table .span8 {
+  width: 300px;
+}
+table .span9 {
+  width: 340px;
+}
+table .span10 {
+  width: 380px;
+}
+table .span11 {
+  width: 420px;
+}
+table .span12 {
+  width: 460px;
+}
+table .span13 {
+  width: 500px;
+}
+table .span14 {
+  width: 540px;
+}
+table .span15 {
+  width: 580px;
+}
+table .span16 {
+  width: 620px;
+}
 .zebra-striped tbody tr:nth-child(odd) td {
   background-color: #f9f9f9;
 }
@@ -2342,7 +2358,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
 .media-grid a {
   float: left;
   padding: 4px;
-  margin: 0 0 20px 20px;
+  margin: 0 0 18px 20px;
   border: 1px solid #ddd;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;

bootstrap.min.css

@@ -35,7 +35,7 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:
 .show{display:block;}
 .row{zoom:1;margin-left:-20px;}.row:before,.row:after{display:table;content:"";zoom:1;*display:inline;}
 .row:after{clear:both;}
-[class*="span"]{display:inline;float:left;margin-left:20px;}
+.row>[class*="span"]{display:inline;float:left;margin-left:20px;}
 .span1{width:40px;}
 .span2{width:100px;}
 .span3{width:160px;}
@@ -60,18 +60,18 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:
 .span22{width:1300px;}
 .span23{width:1360px;}
 .span24{width:1420px;}
-.offset1{margin-left:80px;}
-.offset2{margin-left:140px;}
-.offset3{margin-left:200px;}
-.offset4{margin-left:260px;}
-.offset5{margin-left:320px;}
-.offset6{margin-left:380px;}
-.offset7{margin-left:440px;}
-.offset8{margin-left:500px;}
-.offset9{margin-left:560px;}
-.offset10{margin-left:620px;}
-.offset11{margin-left:680px;}
-.offset12{margin-left:740px;}
+.row >.offset1{margin-left:80px;}
+.row >.offset2{margin-left:140px;}
+.row >.offset3{margin-left:200px;}
+.row >.offset4{margin-left:260px;}
+.row >.offset5{margin-left:320px;}
+.row >.offset6{margin-left:380px;}
+.row >.offset7{margin-left:440px;}
+.row >.offset8{margin-left:500px;}
+.row >.offset9{margin-left:560px;}
+.row >.offset10{margin-left:620px;}
+.row >.offset11{margin-left:680px;}
+.row >.offset12{margin-left:740px;}
 .span-one-third{width:300px;}
 .span-two-thirds{width:620px;}
 .offset-one-third{margin-left:340px;}
@@ -135,22 +135,22 @@ form .clearfix.error .input-prepend span.add-on,form .clearfix.error .input-appe
 .input-xlarge,input.xlarge,textarea.xlarge,select.xlarge{width:270px;}
 .input-xxlarge,input.xxlarge,textarea.xxlarge,select.xxlarge{width:530px;}
 textarea.xxlarge{overflow-y:auto;}
-input.span1,textarea.span1,select.span1{display:inline-block;float:none;width:30px;margin-left:0;}
-input.span2,textarea.span2,select.span2{display:inline-block;float:none;width:90px;margin-left:0;}
-input.span3,textarea.span3,select.span3{display:inline-block;float:none;width:150px;margin-left:0;}
-input.span4,textarea.span4,select.span4{display:inline-block;float:none;width:210px;margin-left:0;}
-input.span5,textarea.span5,select.span5{display:inline-block;float:none;width:270px;margin-left:0;}
-input.span6,textarea.span6,select.span6{display:inline-block;float:none;width:330px;margin-left:0;}
-input.span7,textarea.span7,select.span7{display:inline-block;float:none;width:390px;margin-left:0;}
-input.span8,textarea.span8,select.span8{display:inline-block;float:none;width:450px;margin-left:0;}
-input.span9,textarea.span9,select.span9{display:inline-block;float:none;width:510px;margin-left:0;}
-input.span10,textarea.span10,select.span10{display:inline-block;float:none;width:570px;margin-left:0;}
-input.span11,textarea.span11,select.span11{display:inline-block;float:none;width:630px;margin-left:0;}
-input.span12,textarea.span12,select.span12{display:inline-block;float:none;width:690px;margin-left:0;}
-input.span13,textarea.span13,select.span13{display:inline-block;float:none;width:750px;margin-left:0;}
-input.span14,textarea.span14,select.span14{display:inline-block;float:none;width:810px;margin-left:0;}
-input.span15,textarea.span15,select.span15{display:inline-block;float:none;width:870px;margin-left:0;}
-input.span16,textarea.span16,select.span16{display:inline-block;float:none;width:930px;margin-left:0;}
+input.span1,textarea.span1,select.span1{display:inline-block;width:30px;}
+input.span2,textarea.span2,select.span2{display:inline-block;width:90px;}
+input.span3,textarea.span3,select.span3{display:inline-block;width:150px;}
+input.span4,textarea.span4,select.span4{display:inline-block;width:210px;}
+input.span5,textarea.span5,select.span5{display:inline-block;width:270px;}
+input.span6,textarea.span6,select.span6{display:inline-block;width:330px;}
+input.span7,textarea.span7,select.span7{display:inline-block;width:390px;}
+input.span8,textarea.span8,select.span8{display:inline-block;width:450px;}
+input.span9,textarea.span9,select.span9{display:inline-block;width:510px;}
+input.span10,textarea.span10,select.span10{display:inline-block;width:570px;}
+input.span11,textarea.span11,select.span11{display:inline-block;width:630px;}
+input.span12,textarea.span12,select.span12{display:inline-block;width:690px;}
+input.span13,textarea.span13,select.span13{display:inline-block;width:750px;}
+input.span14,textarea.span14,select.span14{display:inline-block;width:810px;}
+input.span15,textarea.span15,select.span15{display:inline-block;width:870px;}
+input.span16,textarea.span16,select.span16{display:inline-block;width:930px;}
 input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;}
 .actions{background:#f5f5f5;margin-top:18px;margin-bottom:18px;padding:17px 20px 18px 150px;border-top:1px solid #ddd;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;}.actions .secondary-action{float:right;}.actions .secondary-action a{line-height:30px;}.actions .secondary-action a:hover{text-decoration:underline;}
 .help-inline,.help-block{font-size:11px;line-height:18px;color:#bfbfbf;}
@@ -189,6 +189,22 @@ table tbody tr:first-child td:first-child{-webkit-border-radius:4px 0 0 0;-moz-b
 table tbody tr:first-child td:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0;}
 table tbody tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;}
 table tbody tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;}
+table .span1{width:20px;}
+table .span2{width:60px;}
+table .span3{width:100px;}
+table .span4{width:140px;}
+table .span5{width:180px;}
+table .span6{width:220px;}
+table .span7{width:260px;}
+table .span8{width:300px;}
+table .span9{width:340px;}
+table .span10{width:380px;}
+table .span11{width:420px;}
+table .span12{width:460px;}
+table .span13{width:500px;}
+table .span14{width:540px;}
+table .span15{width:580px;}
+table .span16{width:620px;}
 .zebra-striped tbody tr:nth-child(odd) td{background-color:#f9f9f9;}
 .zebra-striped tbody tr:hover td{background-color:#f5f5f5;}
 table .header{cursor:pointer;}table .header:after{content:"";float:right;margin-top:7px;border-width:0 4px 4px;border-style:solid;border-color:#000 transparent;visibility:hidden;}
@@ -326,5 +342,5 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
 .media-grid{margin-left:-20px;margin-bottom:0;zoom:1;}.media-grid:before,.media-grid:after{display:table;content:"";zoom:1;*display:inline;}
 .media-grid:after{clear:both;}
 .media-grid li{display:inline;}
-.media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;}
+.media-grid a{float:left;padding:4px;margin:0 0 18px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;}
 .media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);}

lib/forms.less

@@ -235,9 +235,7 @@ textarea.xxlarge {
 // This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border
 .formColumns(@columnSpan: 1) {
   display: inline-block;
-  float: none;
   width: ((@gridColumnWidth - 10) * @columnSpan) + ((@gridColumnWidth - 10) * (@columnSpan - 1));
-  margin-left: 0;
 }
 input,
 textarea,

lib/patterns.less

@@ -981,7 +981,7 @@ input[type=submit].btn {
 // -----------
 
 .media-grid {
-  margin-left: -20px;
+  margin-left: -@gridGutterWidth;
   margin-bottom: 0;
   .clearfix();
   li {
@@ -990,7 +990,7 @@ input[type=submit].btn {
   a {
     float: left;
     padding: 4px;
-    margin: 0 0 20px 20px;
+    margin: 0 0 @baseline @gridGutterWidth;
     border: 1px solid #ddd;
     .border-radius(4px);
     .box-shadow(0 1px 1px rgba(0,0,0,.075));

lib/scaffolding.less

@@ -82,7 +82,7 @@ a {
 
 // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7)
 // Credit to @dhg for the idea
-[class*="span"] {
+.row > [class*="span"] {
   .gridColumn();
 }
 
@@ -115,18 +115,20 @@ a {
 .span24    { .columns(24); }
 
 // Offset column options
-.offset1   { .offset(1); }
-.offset2   { .offset(2); }
-.offset3   { .offset(3); }
-.offset4   { .offset(4); }
-.offset5   { .offset(5); }
-.offset6   { .offset(6); }
-.offset7   { .offset(7); }
-.offset8   { .offset(8); }
-.offset9   { .offset(9); }
-.offset10  { .offset(10); }
-.offset11  { .offset(11); }
-.offset12  { .offset(12); }
+.row {
+  & > .offset1   { .offset(1); }
+  & > .offset2   { .offset(2); }
+  & > .offset3   { .offset(3); }
+  & > .offset4   { .offset(4); }
+  & > .offset5   { .offset(5); }
+  & > .offset6   { .offset(6); }
+  & > .offset7   { .offset(7); }
+  & > .offset8   { .offset(8); }
+  & > .offset9   { .offset(9); }
+  & > .offset10  { .offset(10); }
+  & > .offset11  { .offset(11); }
+  & > .offset12  { .offset(12); }
+}
 
 // Unique column sizes for 16-column grid
 .span-one-third     { width: 300px; }

lib/tables.less

@@ -52,6 +52,34 @@ table {
 }
 
 
+// TABLE CELL SIZES
+// ----------------
+
+// This is a duplication of the main grid .columns() mixin, but subtracts 20px to account for input padding and border
+.tableColumns(@columnSpan: 1) {
+  width: ((@gridColumnWidth - 20) * @columnSpan) + ((@gridColumnWidth - 20) * (@columnSpan - 1));
+}
+table {
+  // Default columns
+  .span1     { .tableColumns(1); }
+  .span2     { .tableColumns(2); }
+  .span3     { .tableColumns(3); }
+  .span4     { .tableColumns(4); }
+  .span5     { .tableColumns(5); }
+  .span6     { .tableColumns(6); }
+  .span7     { .tableColumns(7); }
+  .span8     { .tableColumns(8); }
+  .span9     { .tableColumns(9); }
+  .span10    { .tableColumns(10); }
+  .span11    { .tableColumns(11); }
+  .span12    { .tableColumns(12); }
+  .span13    { .tableColumns(13); }
+  .span14    { .tableColumns(14); }
+  .span15    { .tableColumns(15); }
+  .span16    { .tableColumns(16); }
+}
+
+
 // ZEBRA-STRIPING
 // --------------