diff --git a/bootstrap.css b/bootstrap.css index 8db6a82e63..6970487e01 100644 --- 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: Thu Jan 26 13:56:25 PST 2012 + * Date: Thu Jan 26 14:50:34 PST 2012 */ article, aside, @@ -102,55 +102,6 @@ body { color: #555555; background-color: #ffffff; } -.container { - width: 940px; - margin-left: auto; - margin-right: auto; - *zoom: 1; -} -.container:before, .container:after { - display: table; - content: ""; -} -.container:after { - clear: both; -} -.fluid-container { - position: relative; - min-width: 940px; - padding-left: 20px; - padding-right: 20px; - *zoom: 1; -} -.fluid-container:before, .fluid-container:after { - display: table; - content: ""; -} -.fluid-container:after { - clear: both; -} -.fluid-sidebar { - width: 220px; - margin: 0 20px 18px; -} -.sidebar-left { - padding-left: 260px; -} -.sidebar-right { - padding-right: 260px; -} -.sidebar-left .fluid-sidebar { - float: left; - margin-left: -240px; -} -.sidebar-right .fluid-sidebar { - float: right; - margin-right: -240px; -} -.fluid-content { - float: left; - width: 100%; -} a { color: #0088cc; text-decoration: none; @@ -243,6 +194,55 @@ a:hover { .offset11 { margin-left: 900px; } +.container { + width: 940px; + margin-left: auto; + margin-right: auto; + *zoom: 1; +} +.container:before, .container:after { + display: table; + content: ""; +} +.container:after { + clear: both; +} +.fluid-container { + position: relative; + min-width: 940px; + padding-left: 20px; + padding-right: 20px; + *zoom: 1; +} +.fluid-container:before, .fluid-container:after { + display: table; + content: ""; +} +.fluid-container:after { + clear: both; +} +.fluid-sidebar { + width: 220px; + margin: 0 20px 18px; +} +.sidebar-left { + padding-left: 260px; +} +.sidebar-right { + padding-right: 260px; +} +.sidebar-left .fluid-sidebar { + float: left; + margin-left: -240px; +} +.sidebar-right .fluid-sidebar { + float: right; + margin-right: -240px; +} +.fluid-content { + float: left; + width: 100%; +} p { margin: 0 0 9px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; diff --git a/bootstrap.min.css b/bootstrap.min.css index 191784b436..dc158adcf4 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -16,16 +16,6 @@ input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;} textarea{overflow:auto;vertical-align:top;} body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;color:#555555;background-color:#ffffff;} -.container{width:940px;margin-left:auto;margin-right:auto;*zoom:1;}.container:before,.container:after{display:table;content:"";} -.container:after{clear:both;} -.fluid-container{position:relative;min-width:940px;padding-left:20px;padding-right:20px;*zoom:1;}.fluid-container:before,.fluid-container:after{display:table;content:"";} -.fluid-container:after{clear:both;} -.fluid-sidebar{width:220px;margin:0 20px 18px;} -.sidebar-left{padding-left:260px;} -.sidebar-right{padding-right:260px;} -.sidebar-left .fluid-sidebar{float:left;margin-left:-240px;} -.sidebar-right .fluid-sidebar{float:right;margin-right:-240px;} -.fluid-content{float:left;width:100%;} a{color:#0088cc;text-decoration:none;}a:hover{color:#005580;text-decoration:underline;} .row{margin-left:-20px;*zoom:1;}.row:before,.row:after{display:table;content:"";} .row:after{clear:both;} @@ -53,6 +43,16 @@ a{color:#0088cc;text-decoration:none;}a:hover{color:#005580;text-decoration:unde .offset9{margin-left:740px;} .offset10{margin-left:820px;} .offset11{margin-left:900px;} +.container{width:940px;margin-left:auto;margin-right:auto;*zoom:1;}.container:before,.container:after{display:table;content:"";} +.container:after{clear:both;} +.fluid-container{position:relative;min-width:940px;padding-left:20px;padding-right:20px;*zoom:1;}.fluid-container:before,.fluid-container:after{display:table;content:"";} +.fluid-container:after{clear:both;} +.fluid-sidebar{width:220px;margin:0 20px 18px;} +.sidebar-left{padding-left:260px;} +.sidebar-right{padding-right:260px;} +.sidebar-left .fluid-sidebar{float:left;margin-left:-240px;} +.sidebar-right .fluid-sidebar{float:right;margin-right:-240px;} +.fluid-content{float:left;width:100%;} p{margin:0 0 9px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;}p small{font-size:11px;color:#999999;} .lead{margin-bottom:18px;font-size:20px;font-weight:200;line-height:27px;} h1,h2,h3,h4,h5,h6{margin:0;font-weight:bold;color:#333333;text-rendering:optimizelegibility;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{font-weight:normal;color:#999999;} diff --git a/lib/bootstrap.less b/lib/bootstrap.less index 8d307d4271..40ebd7f2f8 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -18,6 +18,8 @@ // Grid system and page structure @import "scaffolding.less"; +@import "grid.less"; +@import "layouts.less"; // Base CSS @import "type.less"; diff --git a/lib/grid.less b/lib/grid.less new file mode 100644 index 0000000000..d5b5f487d1 --- /dev/null +++ b/lib/grid.less @@ -0,0 +1,41 @@ +// GRID SYSTEM +// ----------- +// To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there +.row { + margin-left: @gridGutterWidth * -1; + .clearfix(); +} + +// 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"] { + .gridColumn(); +} + +// Default columns +.span1 { .columns(1); } +.span2 { .columns(2); } +.span3 { .columns(3); } +.span4 { .columns(4); } +.span5 { .columns(5); } +.span6 { .columns(6); } +.span7 { .columns(7); } +.span8 { .columns(8); } +.span9 { .columns(9); } +.span10 { .columns(10); } +.span11 { .columns(11); } +.span12 { .columns(12); } + +// 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); } diff --git a/lib/layouts.less b/lib/layouts.less new file mode 100644 index 0000000000..14435c9d15 --- /dev/null +++ b/lib/layouts.less @@ -0,0 +1,43 @@ +// +// Layouts +// Fixed-width and fluid (with sidebar) layouts +// -------------------------------------------- + + +// Container (centered, fixed-width layouts) +.container { + .container-fixed(); +} + +// Fluid layouts (left aligned, with sidebar, min- & max-width content) +.fluid-container { + position: relative; + min-width: @siteWidth; + padding-left: @gridGutterWidth; + padding-right: @gridGutterWidth; + .clearfix(); +} + +// Sidebars (left and right options) +.fluid-sidebar { + width: @fluidSidebarWidth; + margin: 0 20px 18px; +} +.sidebar-left { padding-left: @fluidSidebarWidth + @gridGutterWidth * 2; } +.sidebar-right { padding-right: @fluidSidebarWidth + @gridGutterWidth * 2; } + +// Float the sidebars accordingly +.sidebar-left .fluid-sidebar { + float: left; + margin-left: (@fluidSidebarWidth + @gridGutterWidth) * -1; +} +.sidebar-right .fluid-sidebar { + float: right; + margin-right: (@fluidSidebarWidth + @gridGutterWidth) * -1; +} + +// The main content area +.fluid-content { + float: left; + width: 100%; +} diff --git a/lib/scaffolding.less b/lib/scaffolding.less index 7002b04083..3eced0ef09 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -16,49 +16,10 @@ body { background-color: @white; } -// Container (centered, fixed-width layouts) -.container { - .container-fixed(); -} -// Fluid layouts (left aligned, with sidebar, min- & max-width content) -.fluid-container { - position: relative; - min-width: @siteWidth; - padding-left: @gridGutterWidth; - padding-right: @gridGutterWidth; - .clearfix(); -} +// LINKS +// ----- -// Sidebars (left and right options) -.fluid-sidebar { - width: @fluidSidebarWidth; - margin: 0 20px 18px; -} -.sidebar-left { padding-left: @fluidSidebarWidth + @gridGutterWidth * 2; } -.sidebar-right { padding-right: @fluidSidebarWidth + @gridGutterWidth * 2; } - -// Float the sidebars accordingly -.sidebar-left .fluid-sidebar { - float: left; - margin-left: (@fluidSidebarWidth + @gridGutterWidth) * -1; -} -.sidebar-right .fluid-sidebar { - float: right; - margin-right: (@fluidSidebarWidth + @gridGutterWidth) * -1; -} - -// The main content area -.fluid-content { - float: left; - width: 100%; -} - - -// BASE STYLES -// ----------- - -// Links a { color: @linkColor; text-decoration: none; @@ -67,46 +28,3 @@ a { text-decoration: underline; } } - - -// GRID SYSTEM -// ----------- -// To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there -.row { - margin-left: @gridGutterWidth * -1; - .clearfix(); -} - -// 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"] { - .gridColumn(); -} - -// Default columns -.span1 { .columns(1); } -.span2 { .columns(2); } -.span3 { .columns(3); } -.span4 { .columns(4); } -.span5 { .columns(5); } -.span6 { .columns(6); } -.span7 { .columns(7); } -.span8 { .columns(8); } -.span9 { .columns(9); } -.span10 { .columns(10); } -.span11 { .columns(11); } -.span12 { .columns(12); } - -// 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); }