mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
break scaffolding down into smaller less files
This commit is contained in:
Mark Otto
parent
8a6be6601d
commit
7a6737512a
6 changed files with 148 additions and 144 deletions
100
bootstrap.css
vendored
100
bootstrap.css
vendored
|
|
@ -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;
|
||||
|
|
|
|||
20
bootstrap.min.css
vendored
20
bootstrap.min.css
vendored
|
|
@ -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;}
|
||||
|
|
|
|||
2
lib/bootstrap.less
vendored
2
lib/bootstrap.less
vendored
|
|
@ -18,6 +18,8 @@
|
|||
|
||||
// Grid system and page structure
|
||||
@import "scaffolding.less";
|
||||
@import "grid.less";
|
||||
@import "layouts.less";
|
||||
|
||||
// Base CSS
|
||||
@import "type.less";
|
||||
|
|
|
|||
41
lib/grid.less
Normal file
41
lib/grid.less
Normal file
|
|
@ -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); }
|
||||
43
lib/layouts.less
Normal file
43
lib/layouts.less
Normal file
|
|
@ -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%;
|
||||
}
|
||||
|
|
@ -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); }
|
||||
|
|
|
|||
Loading…
Reference in a new issue