kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

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

This commit is contained in:
Mark Otto 2011-08-27 15:30:18 -07:00
parent b552281558
commit 650251228b
6 changed files with 41 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
bootstrap-1.1.1.css vendored
View File

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

8
bootstrap-1.1.1.min.css vendored
View File

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

5
docs/index.html
View File

@ -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>

2
lib/patterns.less
View File

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

2
lib/preboot.less
View File

@ -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

30
lib/scaffolding.less
View File

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