break scaffolding down into smaller less files

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