Merge pull request #1328 from roots/styles-reorg

Re-organizing the styles directory

assets/styles/_variables.less

@@ -1,17 +0,0 @@
-// Grid settings
-// -------------------------
-
-@main-sm-columns:       @grid-columns;
-@sidebar-sm-columns:    4;
-
-
-// Brand colors
-// -------------------------
-
-@brand-primary:         #27ae60;
-
-
-// Glyphicons path
-// -------------------------
-
-@icon-font-path:        "../fonts/";

assets/styles/common/_variables.less

@@ -0,0 +1,6 @@
+// Grid settings
+@main-sm-columns:       @grid-columns;
+@sidebar-sm-columns:    4;
+
+// Colors
+@brand-primary:         #27ae60;

assets/styles/components/_grid.less

@@ -1,10 +1,10 @@
-// Content wrapper
-.wrap { }
-
-// Main content area
+// Grid system
 .main {
   .make-sm-column(@main-sm-columns);
   .sidebar-primary & {
     .make-sm-column(@main-sm-columns - @sidebar-sm-columns);
   }
 }
+.sidebar {
+  .make-sm-column(@sidebar-sm-columns);
+}

assets/styles/components/_media.less

@@ -1,13 +0,0 @@
-// Captions
-.wp-caption {
-  &:extend(.thumbnail all);
-}
-
-.wp-caption-text {
-  &:extend(.thumbnail .caption all);
-}
-
-// Gallery shortcode
-.gallery-row {
-  padding: (@line-height-computed / 2) 0;
-}

assets/styles/components/_wp-classes.less

@@ -1,6 +1,12 @@
 // WordPress Generated Classes
 // http://codex.wordpress.org/CSS#WordPress_Generated_Classes
 
+// Media alignment
+.alignnone {
+  margin-left: 0;
+  margin-right: 0;
+  max-width: 100%;
+}
 .aligncenter {
   display: block;
   margin: (@line-height-computed / 2) auto;
@@ -10,7 +16,7 @@
   margin-bottom: (@line-height-computed / 2);
 }
 @media (min-width: @screen-sm-min) {
-  // Only float images if not on an extra small device like smartphones
+  // Only float if not on an extra small device
   .alignleft {
     float: left;
     margin-right: (@line-height-computed / 2);
@@ -21,12 +27,15 @@
   }
 }
 
-figure.alignnone {
-  margin-left: 0;
-  margin-right: 0;
-  max-width: 100%;
+// Captions
+.wp-caption {
+  &:extend(.thumbnail all);
+}
+.wp-caption-text {
+  &:extend(.thumbnail .caption all);
 }
 
+// Text meant only for screen readers
 .screen-reader-text {
   &:extend(.sr-only all);
   &:extend(.sr-only-focusable all);

assets/styles/editor-style.less

@@ -1,4 +1,4 @@
-@import "main.less";
+@import "main";
 
 body {
   margin: 12px !important;

assets/styles/layouts/_footer.less

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

assets/styles/layouts/_header.less

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

assets/styles/layouts/_posts.less

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

assets/styles/layouts/_sidebar.less

@@ -1,3 +0,0 @@
-.sidebar {
-  .make-sm-column(@sidebar-sm-columns);
-}

assets/styles/main.less

@@ -2,17 +2,15 @@
 @import "../../bower_components/bootstrap/less/bootstrap.less";
 // endbower
 
-@import "_variables";                // Variable overrides and custom variables
-@import "_global";                   // Base styling & custom mixins
-@import "components/_buttons";       // Button tweaks
-@import "components/_comments";      // Comment styling
-@import "components/_forms";         // Form tweaks
-@import "components/_media";         // WordPress media
-@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
+@import "common/_variables";
+@import "common/_global";
+@import "components/_buttons";
+@import "components/_comments";
+@import "components/_forms";
+@import "components/_grid";
+@import "components/_wp-classes";
+@import "layouts/_header";
+@import "layouts/_sidebar";
+@import "layouts/_footer";
+@import "layouts/_pages";
+@import "layouts/_posts";

assets/styles/main.scss.example

@@ -1,11 +1,11 @@
-// How to get started using Bootstrap Sass:
+// How to get started using Sass instead of Less:
 //
 // 1. Run `bower install bootstrap-sass-official --save`
 // 2. Rename this file to `main.scss` and remove `main.less`
-// 3. Update the `assets/manifest.json` styles dependenies to change `main.less` to `main.scss`
+// 3. Rename `editor-style.less` to `editor-style.scss`
+// 4. Update the `assets/manifest.json` styles dependenies from `.less` to `.scss`
 //
-// Feel free to remove this file if you're using LESS
-
+// Feel free to remove this file if you're using Less
 
 // bower:sass
 @import "../../bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";