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

diff --git a/bootstrap.css b/bootstrap.css
index d5a05d9fda53b4203fbf2528ee4efb7c69754a0e..a7ba4c6492e42a166df18d9cc0d1a1de7cdc41f8 100644 (file)
--- a/bootstrap.css
+++ b/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;

diff --git a/bootstrap.min.css b/bootstrap.min.css
index 0755122ce7177a0f4c68c1b50fea1a4c7a391000..e9d26649cff6716e73e604adad9296fef72bf2da 100644 (file)
--- a/bootstrap.min.css
+++ b/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);}

diff --git a/lib/forms.less b/lib/forms.less
index 77e1ce24b6a73e9f7948b7d2fd8a0009853d3de2..85e6e361e8bfc13453ad95cd41036ef0d3a58ef2 100644 (file)
--- a/lib/forms.less
+++ b/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,

diff --git a/lib/patterns.less b/lib/patterns.less
index ce387614e9a13d8f177ece609cab44efeca5b058..c4469e5392246521646bd01d432e4ec6b43b2bf5 100644 (file)
--- a/lib/patterns.less
+++ b/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));

diff --git a/lib/scaffolding.less b/lib/scaffolding.less
index 26bb0cc059977a654606cd62222dd1bbdf50f04e..4f8634710f3260a444056171c5226a0ba41e9b32 100644 (file)
--- a/lib/scaffolding.less
+++ b/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; }

diff --git a/lib/tables.less b/lib/tables.less
index dcc72d3ea730baeed4038170681186a1fddd1cf4..949072001d6baabaa089100db0e35c7817f192c7 100644 (file)
--- a/lib/tables.less
+++ b/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
 // --------------