break scaffolding down into smaller less files

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;

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

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

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

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%;
+}

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)
+// LINKS
-.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
 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); }