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

redefine the grid to use attribute selectors with css regex, make previously fixed grid values use variables we use elsewhere

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;

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;}

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>

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);
   }
 

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

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; }
 }