Better LESS organization

Gruntfile.js

@@ -16,7 +16,7 @@ module.exports = function(grunt) {
       dist: {
         files: {
           'assets/css/main.min.css': [
-            'assets/less/app.less'
+            'assets/less/main.less'
           ]
         },
         options: {
@@ -80,7 +80,8 @@ module.exports = function(grunt) {
     watch: {
       less: {
         files: [
-          'assets/less/*.less'
+          'assets/less/*.less',
+          'assets/less/**/*.less'
         ],
         tasks: ['less', 'version']
       },

assets/less/_bootstrap.less

@@ -0,0 +1,56 @@
+//
+// Bootstrap
+//
+// Comment out any unused components
+// --------------------------------------------------
+
+// Core variables and mixins
+@import "../vendor/bootstrap/less/variables";
+@import "_variables"; // Bootstrap variable overrides and custom variables
+@import "../vendor/bootstrap/less/mixins";
+
+// Reset
+@import "../vendor/bootstrap/less/normalize";
+@import "../vendor/bootstrap/less/print";
+
+// Core CSS
+@import "../vendor/bootstrap/less/scaffolding";
+@import "../vendor/bootstrap/less/type";
+@import "../vendor/bootstrap/less/code";
+@import "../vendor/bootstrap/less/grid";
+@import "../vendor/bootstrap/less/tables";
+@import "../vendor/bootstrap/less/forms";
+@import "../vendor/bootstrap/less/buttons";
+
+// Components
+@import "../vendor/bootstrap/less/component-animations";
+@import "../vendor/bootstrap/less/glyphicons";
+@import "../vendor/bootstrap/less/dropdowns";
+@import "../vendor/bootstrap/less/button-groups";
+@import "../vendor/bootstrap/less/input-groups";
+@import "../vendor/bootstrap/less/navs";
+@import "../vendor/bootstrap/less/navbar";
+@import "../vendor/bootstrap/less/breadcrumbs";
+@import "../vendor/bootstrap/less/pagination";
+@import "../vendor/bootstrap/less/pager";
+@import "../vendor/bootstrap/less/labels";
+@import "../vendor/bootstrap/less/badges";
+@import "../vendor/bootstrap/less/jumbotron";
+@import "../vendor/bootstrap/less/thumbnails";
+@import "../vendor/bootstrap/less/alerts";
+@import "../vendor/bootstrap/less/progress-bars";
+@import "../vendor/bootstrap/less/media";
+@import "../vendor/bootstrap/less/list-group";
+@import "../vendor/bootstrap/less/panels";
+@import "../vendor/bootstrap/less/wells";
+@import "../vendor/bootstrap/less/close";
+
+// Components w/ JavaScript
+@import "../vendor/bootstrap/less/modals";
+@import "../vendor/bootstrap/less/tooltip";
+@import "../vendor/bootstrap/less/popovers";
+@import "../vendor/bootstrap/less/carousel";
+
+// Utility classes
+@import "../vendor/bootstrap/less/utilities";
+@import "../vendor/bootstrap/less/responsive-utilities";

assets/less/_variables.less

@@ -0,0 +1,10 @@
+// Brand colors
+// -------------------------
+
+@brand-primary:         #27ae60;
+
+
+// Glyphicons path
+// -------------------------
+
+@icon-font-path:        "../vendor/bootstrap/fonts/";

assets/less/app.less

@@ -1,90 +0,0 @@
-/*!
- * Roots 6.5.2
- */
-
-@import "../vendor/bootstrap/less/bootstrap.less";
-
-/* ==========================================================================
-   Base
-   ========================================================================== */
-
-body { }
-
-
-
-/* ==========================================================================
-   Header
-   ========================================================================== */
-
-.banner { }
-
-
-
-/* ==========================================================================
-   Content
-   ========================================================================== */
-
-.content { }
-
-
-
-/* ==========================================================================
-   Primary Content
-   ========================================================================== */
-
-.main { }
-
-/* Gallery Shortcode */
-.gallery-row { padding: 15px 0; }
-
-
-
-/* ==========================================================================
-   Sidebar
-   ========================================================================== */
-
-.sidebar { }
-
-
-
-/* ==========================================================================
-   Posts
-   ========================================================================== */
-
-.hentry header { }
-.hentry time { }
-.hentry .byline { }
-.hentry .entry-content { }
-.hentry footer { }
-
-
-
-/* ==========================================================================
-   Footer
-   ========================================================================== */
-
-.content-info { }
-
-
-
-/* ==========================================================================
-   WordPress Generated Classes
-   See: http://codex.wordpress.org/CSS#WordPress_Generated_Classes
-   ========================================================================== */
-
-.aligncenter { display: block; margin: 0 auto; }
-.alignleft { float: left; }
-.alignright { float: right; }
-figure.alignnone { margin-left: 0; margin-right: 0; }
-
-
-
-/* ==========================================================================
-   Media Queries
-   ========================================================================== */
-
-@media (min-width: @screen-sm-min) { }
-
-@media (min-width: @screen-md-min) { }
-
-@media (min-width: @screen-lg-min) { }

assets/less/components/_gallery.less

@@ -0,0 +1,4 @@
+// Gallery shortcode
+.gallery-row {
+  padding: (@line-height-computed / 2) 0;
+}

assets/less/components/_wp-classes.less

@@ -0,0 +1,27 @@
+// WordPress Generated Classes
+// http://codex.wordpress.org/CSS#WordPress_Generated_Classes
+
+.aligncenter {
+  display: block;
+  margin: (@line-height-computed / 2) auto;
+}
+.alignleft,
+.alignright {
+  margin-bottom: (@line-height-computed / 2);
+}
+figure.alignnone {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+@media (min-width: @screen-sm-min) {
+  // Only float images if not on an extra small device like smartphones
+  .alignleft {
+    float: left;
+    margin-right: (@line-height-computed / 2);
+  }
+  .alignright {
+    float: right;
+    margin-left: (@line-height-computed / 2);
+  }
+}

assets/less/layouts/_footer.less

@@ -0,0 +1 @@
+.content-info { }

assets/less/layouts/_general.less

@@ -0,0 +1,5 @@
+// Content wrapper
+.wrap { }
+
+// Main content area
+.main { }

assets/less/layouts/_header.less

@@ -0,0 +1 @@
+.banner { }

assets/less/layouts/_posts.less

@@ -0,0 +1,5 @@
+.hentry header { }
+.hentry time { }
+.hentry .byline { }
+.hentry .entry-content { }
+.hentry footer { }

assets/less/layouts/_sidebar.less

@@ -0,0 +1 @@
+.sidebar { }

assets/less/main.less

@@ -0,0 +1,16 @@
+// Bootstrap
+@import "_bootstrap";
+
+// Roots
+@import "_global";                   // Base styling & custom mixins
+@import "components/_buttons";       // Button tweaks
+@import "components/_forms";         // Form tweaks
+@import "components/_gallery";       // WordPress galleries
+@import "components/_wp-classes";    // WordPress generated classes
+@import "layouts/_general";          // General styling
+@import "layouts/_header";           // Header styling
+@import "layouts/_sidebar";          // Sidebar styling
+@import "layouts/_footer";           // Footer styling
+@import "layouts/_pages";            // Page styling
+@import "layouts/pages/_home";       // Home page styling
+@import "layouts/_posts";            // Post styling

lib/scripts.php

@@ -11,7 +11,7 @@
  * 3. /theme/assets/js/main.min.js (in footer)
  */
 function roots_scripts() {
-  wp_enqueue_style('roots_main', get_template_directory_uri() . '/assets/css/main.min.css', false, 'c1a58eb4baaf24c3771085df3d54ff8d');
+  wp_enqueue_style('roots_main', get_template_directory_uri() . '/assets/css/main.min.css', false, 'a28b4865249f1b0d598be3cc7559f63a');
 
   // jQuery is loaded using the same method from HTML5 Boilerplate:
   // Grab Google CDN's latest jQuery with a protocol relative URL; fallback to local if offline