From 650251228bfda8d57a09b4b350ce2b9f1e0efcc1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 27 Aug 2011 15:30:18 -0700 Subject: [PATCH] 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 | 37 +++++++++++++++++-------------------- bootstrap-1.1.1.min.css | 8 ++++++-- docs/index.html | 5 +++++ lib/patterns.less | 2 +- lib/preboot.less | 2 +- lib/scaffolding.less | 30 +++++++++++------------------- 6 files changed, 41 insertions(+), 43 deletions(-) diff --git a/bootstrap-1.1.1.css b/bootstrap-1.1.1.css index 1809ce765..de1daafa4 100644 --- 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 76d771a97..87e25dccc 100644 --- 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 cbc482002..1a4a02a0c 100644 --- a/docs/index.html +++ b/docs/index.html @@ -210,6 +210,11 @@
4
4
+
+
1/3
+
1/3
+
1/3
+
4
6
diff --git a/lib/patterns.less b/lib/patterns.less index cc25b120c..9dabd22c9 100644 --- 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 75e75020b..f5d5a48d1 100644 --- 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 d1b621c13..0833e0c83 100644 --- 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; } }