rev/bootstrap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

break scaffolding down into smaller less files

Browse source
This commit is contained in:
Mark Otto 2012-01-26 14:50:55 -08:00
parent 8a6be6601d
commit 7a6737512a
6 changed files with 148 additions and 144 deletions
Download patch file Download diff file Expand all files Collapse all files

2
lib/bootstrap.less vendored
View file

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

86
lib/scaffolding.less
View file

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