From 7a6737512a18f56bb95a0024fdbd4a8823034b76 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 26 Jan 2012 14:50:55 -0800 Subject: break scaffolding down into smaller less files --- lib/bootstrap.less | 2 ++ lib/grid.less | 41 +++++++++++++++++++++++++ lib/layouts.less | 43 ++++++++++++++++++++++++++ lib/scaffolding.less | 86 ++-------------------------------------------------- 4 files changed, 88 insertions(+), 84 deletions(-) create mode 100644 lib/grid.less create mode 100644 lib/layouts.less (limited to 'lib') diff --git a/lib/bootstrap.less b/lib/bootstrap.less index 8d307d427..40ebd7f2f 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 000000000..d5b5f487d --- /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 000000000..14435c9d1 --- /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 7002b0408..3eced0ef0 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(); -} - -// 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 +// ----- -// 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); } -- cgit v1.2.3