redefine the grid to use attribute selectors with css regex, make previously fixed...

diff --git a/bootstrap-1.1.1.css b/bootstrap-1.1.1.css
index 1809ce7654cce5e340bf1caca127c9c23639cfa5..de1daafa47bdccad9a57c71419cf7b1868ad711a 100644 (file)
--- a/bootstrap-1.1.1.css
+++ b/bootstrap-1.1.1.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: Fri Aug 26 23:07:21 PDT 2011
+ * Date: Sat Aug 27 15:29:10 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).
@@ -280,22 +280,7 @@ table {
 .row:after {
   clear: both;
 }
-.row .span1,
-.row .span2,
-.row .span3,
-.row .span4,
-.row .span5,
-.row .span6,
-.row .span7,
-.row .span8,
-.row .span9,
-.row .span10,
-.row .span11,
-.row .span12,
-.row .span13,
-.row .span14,
-.row .span15,
-.row .span16 {
+.row [class^="span"] {
   display: inline;
   float: left;
   margin-left: 20px;
@@ -384,6 +369,18 @@ table {
 .row .offset12 {
   margin-left: 740px;
 }
+.row .span-one-third {
+  width: 300px;
+}
+.row .span-two-thirds {
+  width: 620px;
+}
+.row .offset-one-third {
+  margin-left: 320px;
+}
+.row .offset-two-thirds {
+  margin-left: 640px;
+}
 html, body {
   background-color: #fff;
 }
@@ -1643,9 +1640,9 @@ footer {
   opacity: 0.65;
 }
 .btn:active {
-  -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
-  -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
-  box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
+  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
+  -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 .btn.large {
   font-size: 16px;

diff --git a/bootstrap-1.1.1.min.css b/bootstrap-1.1.1.min.css
index 76d771a97e565e6c648e1c828754d7fc57dce579..87e25dccc0e5bf6c9c6b5da64d61be45aeb25631 100644 (file)
--- a/bootstrap-1.1.1.min.css
+++ b/bootstrap-1.1.1.min.css
@@ -31,7 +31,7 @@ table{border-collapse:collapse;border-spacing:0;}
 .btn.info,.alert-message.info{background-color:#339bb9;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
 .row{zoom:1;margin-bottom:18px;margin-left:-20px;}.row:before,.row:after{display:table;content:"";}
 .row:after{clear:both;}
-.row .span1,.row .span2,.row .span3,.row .span4,.row .span5,.row .span6,.row .span7,.row .span8,.row .span9,.row .span10,.row .span11,.row .span12,.row .span13,.row .span14,.row .span15,.row .span16{display:inline;float:left;margin-left:20px;}
+.row [class^="span"]{display:inline;float:left;margin-left:20px;}
 .row .span1{width:40px;}
 .row .span2{width:100px;}
 .row .span3{width:160px;}
@@ -60,6 +60,10 @@ table{border-collapse:collapse;border-spacing:0;}
 .row .offset10{margin-left:620px;}
 .row .offset11{margin-left:680px;}
 .row .offset12{margin-left:740px;}
+.row .span-one-third{width:300px;}
+.row .span-two-thirds{width:620px;}
+.row .offset-one-third{margin-left:320px;}
+.row .offset-two-thirds{margin-left:640px;}
 html,body{background-color:#fff;}
 body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;color:#808080;text-rendering:optimizeLegibility;}
 .container{width:940px;margin:0 auto;}
@@ -217,7 +221,7 @@ footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;}
 .btn.primary{color:#fff;background-color:#0064cd;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
 .btn.disabled{cursor:default;background-image:none;filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;}
 .btn:disabled{cursor:default;background-image:none;filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;}
-.btn:active{-webkit-box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.1),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.1),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.1),0 1px 2px rgba(0, 0, 0, 0.05);}
+.btn:active{-webkit-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);}
 .btn.large{font-size:16px;line-height:normal;padding:9px 14px 9px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
 .btn.small{padding:7px 9px 7px;font-size:11px;}
 button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;}

diff --git a/docs/index.html b/docs/index.html
index cbc482002e0dc0117867f54b3294877bb96d9c28..1a4a02a0c08489184c3734abf079bb3a6b18d35e 100644 (file)
--- a/docs/index.html
+++ b/docs/index.html
@@ -210,6 +210,11 @@
     <div class="span4 columns">4</div>
     <div class="span4 columns">4</div>
   </div><!-- /row -->
+  <div class="row show-grid" title="Default three column layout">
+    <div class="span-one-third column">1/3</div>
+    <div class="span-one-third column">1/3</div>
+    <div class="span-one-third column">1/3</div>
+  </div><!-- /row -->
   <div class="row show-grid" title="Irregular three column layout">
     <div class="span4 columns">4</div>
     <div class="span6 columns">6</div>

diff --git a/lib/patterns.less b/lib/patterns.less
index cc25b120c3cc60bff62294ef2409c9c8139315b4..9dabd22c9a2d4b0ce992135ab964198a4347aa37 100644 (file)
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -434,7 +434,7 @@ footer {
   }
 
   &:active {
-    @shadow: inset 0 3px 7px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.05);
+    @shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
     .box-shadow(@shadow);
   }
 

diff --git a/lib/preboot.less b/lib/preboot.less
index 75e75020b3f211060e6f21200b89e7c2552db985..f5d5a48d187e64abda48395e43ca624471d0456b 100644 (file)
--- a/lib/preboot.less
+++ b/lib/preboot.less
@@ -36,7 +36,7 @@
 @gridColumns:       16;
 @gridColumnWidth:   40px;
 @gridGutterWidth:   20px;
-@extraSpace:        40px;
+@extraSpace:        (@gridGutterWidth * 2); // For our grid calculations
 @siteWidth:         (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
 
 // Color Scheme

diff --git a/lib/scaffolding.less b/lib/scaffolding.less
index d1b621c13ea37a53aa919b837269a94d57361c41..0833e0c83e265f03865ad035d81fa25653f955c7 100644 (file)
--- a/lib/scaffolding.less
+++ b/lib/scaffolding.less
@@ -9,28 +9,14 @@
 
 .row {
   .clearfix();
-  margin-left: -20px;
+  margin-left: -1 * @gridGutterWidth;
 
-  // Default columns
-  .span1,
-  .span2,
-  .span3,
-  .span4,
-  .span5,
-  .span6,
-  .span7,
-  .span8,
-  .span9,
-  .span10,
-  .span11,
-  .span12,
-  .span13,
-  .span14,
-  .span15,
-  .span16 {
+  // 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"] {
     display: inline;
     float: left;
-    margin-left: 20px;
+    margin-left: @gridGutterWidth;
   }
 
   // Default columns
@@ -64,6 +50,12 @@
   .offset10  { .offset(10); }
   .offset11  { .offset(11); }
   .offset12  { .offset(12); }
+
+  // Unique column sizes for 16-column grid
+  .span-one-third     { width: 300px; }
+  .span-two-thirds    { width: 620px; }
+  .offset-one-third   { margin-left: 320px; }
+  .offset-two-thirds  { margin-left: 640px; }
 }