Re-organize SASS structure (#1425)

.gitignore

@@ -2,4 +2,5 @@
 /vendor
 package-lock.json
 composer.lock
-style.css.map
+style.css.map
+.DS_Store

README.md

@@ -13,7 +13,7 @@ My ultra-minimal CSS might make me look like theme tartare but that means less s
 * Custom template tags in `inc/template-tags.php` that keep your templates clean and neat and prevent code duplication.
 * Some small tweaks in `inc/template-functions.php` that can improve your theming experience.
 * A script at `js/navigation.js` that makes your menu a toggled dropdown on small screens (like your phone), ready for CSS artistry. It's enqueued in `functions.php`.
-* 2 sample layouts in `sass/layout/` made using CSS Grid for a sidebar on either side of your content. Just uncomment the layout of your choice in `sass/site/_site.scss`.
+* 2 sample layouts in `sass/layouts/` made using CSS Grid for a sidebar on either side of your content. Just uncomment the layout of your choice in `sass/style.scss`.
 Note: `.no-sidebar` styles are automatically loaded.
 * Smartly organized starter CSS in `style.css` that will help you to quickly get your design off the ground.
 * Full support for `WooCommerce plugin` integration with hooks in `inc/woocommerce.php`, styling override woocommerce.css with product gallery features (zoom, swipe, lightbox) enabled.

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/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/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
---------------------------------------------------------------*/
-@import "variables-site/variables-site";
-@import "mixins/mixins-master";
+# 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
 
-/*--------------------------------------------------------------
-# Normalize
 --------------------------------------------------------------*/
-@import "normalize";
 
-/*--------------------------------------------------------------
-# Typography
---------------------------------------------------------------*/
-@import "typography/typography";
+// Import variables and mixins.
+@import "abstracts/abstracts";
 
 /*--------------------------------------------------------------
-# Elements
+# Generic
 --------------------------------------------------------------*/
-@import "elements/elements";
 
-/*--------------------------------------------------------------
-# Forms
---------------------------------------------------------------*/
-@import "forms/forms";
+/* Normalize
+--------------------------------------------- */
+@import "generic/normalize";
 
-/*--------------------------------------------------------------
-# Navigation
---------------------------------------------------------------*/
-@import "navigation/navigation";
+/* Box sizing
+--------------------------------------------- */
+@import "generic/box-sizing";
 
 /*--------------------------------------------------------------
-# Accessibility
+# Base
 --------------------------------------------------------------*/
-@import "modules/accessibility";
+@import "base/base";
 
 /*--------------------------------------------------------------
-# Alignments
+# Layouts
 --------------------------------------------------------------*/
-@import "modules/alignments";
+// @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.
 
 /*--------------------------------------------------------------
-# Widgets
+# Components
 --------------------------------------------------------------*/
-@import "site/secondary/widgets";
+@import "components/components";
 
 /*--------------------------------------------------------------
-# Content
+# Plugins
 --------------------------------------------------------------*/
-@import "site/site";
 
-/*--------------------------------------------------------------
-# Infinite scroll
---------------------------------------------------------------*/
-@import "modules/infinite-scroll";
+/* Jetpack infinite scroll
+--------------------------------------------- */
+@import "plugins/jetpack/infinite-scroll";
 
 /*--------------------------------------------------------------
-# Media
+# Utilities
 --------------------------------------------------------------*/
-@import "media/media";
+
+/* Accessibility
+--------------------------------------------- */
+@import "utilities/accessibility";
+
+/* Alignments
+--------------------------------------------- */
+@import "utilities/alignments";

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