Re-organize SASS structure (#1425)

sass/abstracts/_abstracts.scss

@@ -0,0 +1,5 @@
+@import "variables/colors";
+@import "variables/typography";
+@import "variables/structure";
+@import "variables/columns";
+@import "mixins/mixins";

sass/base/_base.scss

@@ -0,0 +1,20 @@
+/* Typography
+--------------------------------------------- */
+@import "typography/typography";
+
+/* Elements
+--------------------------------------------- */
+@import "elements/body";
+@import "elements/hr";
+@import "elements/lists";
+@import "elements/media";
+@import "elements/tables";
+
+/* Links
+--------------------------------------------- */
+@import "elements/links";
+
+/* Forms
+--------------------------------------------- */
+@import "elements/buttons";
+@import "elements/fields";

sass/base/elements/_body.scss

@@ -0,0 +1,3 @@
+body {
+	background: $color__background-body; // Fallback for when there is no custom background color defined.
+}

sass/base/elements/_hr.scss

@@ -0,0 +1,6 @@
+hr {
+	background-color: $color__background-hr;
+	border: 0;
+	height: 1px;
+	margin-bottom: 1.5em;
+}

sass/base/elements/_media.scss

@@ -0,0 +1,15 @@
+/* Make sure embeds and iframes fit their containers. */
+embed,
+iframe,
+object {
+	max-width: 100%;
+}
+
+img {
+	height: auto; // Make sure images are scaled correctly.
+	max-width: 100%; // Adhere to container width.
+}
+
+figure {
+	margin: 1em 0; // Extra wide images within figure tags don't overflow the content area.
+}

sass/components/_components.scss

@@ -0,0 +1,27 @@
+/* Navigation
+--------------------------------------------- */
+@import "navigation/navigation";
+
+/* Posts and pages
+--------------------------------------------- */
+@import "content/posts-and-pages";
+
+/* Comments
+--------------------------------------------- */
+@import "comments/comments";
+
+/* Widgets
+--------------------------------------------- */
+@import "widgets/widgets";
+
+/* Media
+--------------------------------------------- */
+@import "media/media";
+
+/* Captions
+--------------------------------------------- */
+@import "media/captions";
+
+/* Galleries
+--------------------------------------------- */
+@import "media/galleries";

sass/components/media/_media.scss

@@ -0,0 +1,13 @@
+.page-content .wp-smiley,
+.entry-content .wp-smiley,
+.comment-content .wp-smiley {
+	border: none;
+	margin-bottom: 0;
+	margin-top: 0;
+	padding: 0;
+}
+
+/* Make sure logo link wraps around logo image. */
+.custom-logo-link {
+	display: inline-block;
+}

sass/elements/_elements.scss

@@ -1,35 +0,0 @@
-/* Inherit box-sizing to more easily change it's value on a component level.
-@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
-*,
-*::before,
-*::after {
-	box-sizing: inherit;
-}
-
-html {
-	box-sizing: border-box;
-}
-
-body {
-	background: $color__background-body; // Fallback for when there is no custom background color defined.
-}
-
-hr {
-	background-color: $color__background-hr;
-	border: 0;
-	height: 1px;
-	margin-bottom: 1.5em;
-}
-
-@import "lists";
-
-img {
-	height: auto; // Make sure images are scaled correctly.
-	max-width: 100%; // Adhere to container width.
-}
-
-figure {
-	margin: 1em 0; // Extra wide images within figure tags don't overflow the content area.
-}
-
-@import "tables";

sass/forms/_forms.scss

@@ -1,2 +0,0 @@
-@import "buttons";
-@import "fields";

sass/generic/_box-sizing.scss

@@ -0,0 +1,11 @@
+/* Inherit box-sizing to more easily change it's value on a component level.
+@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
+*,
+*::before,
+*::after {
+	box-sizing: inherit;
+}
+
+html {
+	box-sizing: border-box;
+}

sass/media/_media.scss

@@ -1,30 +0,0 @@
-.page-content .wp-smiley,
-.entry-content .wp-smiley,
-.comment-content .wp-smiley {
-	border: none;
-	margin-bottom: 0;
-	margin-top: 0;
-	padding: 0;
-}
-
-/* Make sure embeds and iframes fit their containers. */
-embed,
-iframe,
-object {
-	max-width: 100%;
-}
-
-/* Make sure logo link wraps around logo image. */
-.custom-logo-link {
-	display: inline-block;
-}
-
-/*--------------------------------------------------------------
-## Captions
---------------------------------------------------------------*/
-@import "captions";
-
-/*--------------------------------------------------------------
-## Galleries
---------------------------------------------------------------*/
-@import "galleries";

sass/navigation/_navigation.scss

@@ -1,9 +0,0 @@
-/*--------------------------------------------------------------
-## Links
---------------------------------------------------------------*/
-@import "links";
-
-/*--------------------------------------------------------------
-## Menus
---------------------------------------------------------------*/
-@import "menus";

sass/site/_site.scss

@@ -1,12 +0,0 @@
-// @import "../layout/content-sidebar";
-// @import "../layout/sidebar-content";
-
-/*--------------------------------------------------------------
-## Posts and pages
---------------------------------------------------------------*/
-@import "primary/posts-and-pages";
-
-/*--------------------------------------------------------------
-## Comments
---------------------------------------------------------------*/
-@import "primary/comments";

sass/style.scss

@@ -23,78 +23,78 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
 /*--------------------------------------------------------------
 >>> TABLE OF CONTENTS:
 ----------------------------------------------------------------
-# Normalize
-# Typography
-# Elements
-# Forms
-# Navigation
-	## Links
-	## Menus
-# Accessibility
-# Alignments
-# Widgets
-# Content
-	## Posts and pages
-	## Comments
-# Infinite scroll
-# Media
-	## Captions
-	## Galleries
+# Generic
+	- Normalize
+	- Box sizing
+# Base
+	- Typography
+	- Elements
+	- Links
+	- Forms
+## Layouts
+# Components
+	- Navigation
+	- Posts and pages
+	- Comments
+	- Widgets
+	- Media
+	- Captions
+	- Galleries
+# plugins
+	- Jetpack infinite scroll
+# Utilities
+	- Accessibility
+	- Alignments
+
 --------------------------------------------------------------*/
-@import "variables-site/variables-site";
-@import "mixins/mixins-master";
+
+// Import variables and mixins.
+@import "abstracts/abstracts";
 
 /*--------------------------------------------------------------
-# Normalize
+# Generic
 --------------------------------------------------------------*/
-@import "normalize";
+
+/* Normalize
+--------------------------------------------- */
+@import "generic/normalize";
+
+/* Box sizing
+--------------------------------------------- */
+@import "generic/box-sizing";
 
 /*--------------------------------------------------------------
-# Typography
+# Base
 --------------------------------------------------------------*/
-@import "typography/typography";
+@import "base/base";
 
 /*--------------------------------------------------------------
-# Elements
+# Layouts
 --------------------------------------------------------------*/
-@import "elements/elements";
+// @import "layouts/content-sidebar"; // Uncomment this line for a sidebar on right side of your content.
+// @import "layouts/sidebar-content"; // Uncomment this line for a sidebar on left side of your content.
 
 /*--------------------------------------------------------------
-# Forms
+# Components
 --------------------------------------------------------------*/
-@import "forms/forms";
+@import "components/components";
 
 /*--------------------------------------------------------------
-# Navigation
+# Plugins
 --------------------------------------------------------------*/
-@import "navigation/navigation";
+
+/* Jetpack infinite scroll
+--------------------------------------------- */
+@import "plugins/jetpack/infinite-scroll";
 
 /*--------------------------------------------------------------
-# Accessibility
+# Utilities
 --------------------------------------------------------------*/
-@import "modules/accessibility";
 
-/*--------------------------------------------------------------
-# Alignments
---------------------------------------------------------------*/
-@import "modules/alignments";
+/* Accessibility
+--------------------------------------------- */
+@import "utilities/accessibility";
 
-/*--------------------------------------------------------------
-# Widgets
---------------------------------------------------------------*/
-@import "site/secondary/widgets";
-
-/*--------------------------------------------------------------
-# Content
---------------------------------------------------------------*/
-@import "site/site";
-
-/*--------------------------------------------------------------
-# Infinite scroll
---------------------------------------------------------------*/
-@import "modules/infinite-scroll";
-
-/*--------------------------------------------------------------
-# Media
---------------------------------------------------------------*/
-@import "media/media";
+/* Alignments
+--------------------------------------------- */
+@import "utilities/alignments";

sass/variables-site/_variables-site.scss

@@ -1,4 +0,0 @@
-@import "colors";
-@import "typography";
-@import "structure";
-@import "columns";

sass/woocommerce.scss

@@ -9,36 +9,35 @@ $woocommerce__color-error: #e2401c;
 $woocommerce__color-success: #0f834d;
 $woocommerce__color-info: #3d9cd2;
 
-// Imports
-@import "variables-site/variables-site";
-@import "mixins/mixins-master";
+// Import variables and mixins
+@import "abstracts/abstracts";
 
 /**
  * Shop tables
  */
-@import "shop/tables";
+@import "plugins/woocommerce/tables";
 
 /**
  * Products
  */
-@import "shop/products";
+@import "plugins/woocommerce/products";
 
 /**
  * Single product
  */
-@import "shop/single-product";
+@import "plugins/woocommerce/single-product";
 
 /**
  * Checkout
  */
-@import "shop/checkout";
+@import "plugins/woocommerce/checkout";
 
 /**
  * General WooCommerce components
  */
-@import "shop/components";
+@import "plugins/woocommerce/components";
 
 /**
  * WooCommerce widgets
  */
-@import "shop/widgets";
+@import "plugins/woocommerce/widgets";