Move SCSS partials to /_sass/minimal-mistakes for easier CSS customization

docs/_docs/16-stylesheets.md

@@ -2,44 +2,74 @@
 title: "Stylesheets"
 permalink: /docs/stylesheets/
 excerpt: "Instructions for customizing and building the theme's stylesheets."
-last_modified_at: 2016-11-03T11:34:42-04:00
+last_modified_at: 2017-04-18T12:34:31-04:00
 ---
 
 The theme's `assets/css/main.css` file is built from several SCSS partials located in [`_sass/`](https://github.com/mmistakes/minimal-mistakes/tree/master/_sass) and is structured as follows:
 
 ```bash
-minimal mistakes
+minimal-mistakes
 ├── _sass
-|  ├── vendor               # vendor SCSS partials
-|  |   ├── breakpoint       # media query mixins
-|  |   ├── font-awesome     # Font Awesome icons
-|  |   ├── magnific-popup   # Magnific Popup lightbox
-|  |   └── susy             # Susy grid system
-|  ├── _animations.scss     # animations
-|  ├── _archive.scss        # archives (list, grid, feature views)
-|  ├── _base.scss           # base HTML elements
-|  ├── _buttons.scss        # buttons
-|  ├── _footer.scss         # footer
-|  ├── _masthead.scss       # masthead
-|  ├── _mixins.scss         # mixins (em function, clearfix)
-|  ├── _navigation.scss     # nav links (breadcrumb, priority+, toc, pagination, etc.)
-|  ├── _notices.scss        # notices
-|  ├── _page.scss           # pages
-|  ├── _print.scss          # print styles
-|  ├── _reset.scss          # reset
-|  ├── _sidebar.scss        # sidebar
-|  ├── _syntax.scss         # syntax highlighting
-|  ├── _tables.scss         # tables
-|  ├── _utilities.scss      # utility classes (text/image alignment)
-|  └── _variables.scss      # theme defaults (fonts, colors, etc.)
+|  └── minimal-mistakes
+|     ├── vendor               # vendor SCSS partials
+|     |   ├── breakpoint       # media query mixins
+|     |   ├── font-awesome     # Font Awesome icons
+|     |   ├── magnific-popup   # Magnific Popup lightbox
+|     |   └── susy             # Susy grid system
+|     ├── _animations.scss     # animations
+|     ├── _archive.scss        # archives (list, grid, feature views)
+|     ├── _base.scss           # base HTML elements
+|     ├── _buttons.scss        # buttons
+|     ├── _footer.scss         # footer
+|     ├── _masthead.scss       # masthead
+|     ├── _mixins.scss         # mixins (em function, clearfix)
+|     ├── _navigation.scss     # nav links (breadcrumb, priority+, toc, pagination, etc.)
+|     ├── _notices.scss        # notices
+|     ├── _page.scss           # pages
+|     ├── _print.scss          # print styles
+|     ├── _reset.scss          # reset
+|     ├── _sidebar.scss        # sidebar
+|     ├── _syntax.scss         # syntax highlighting
+|     ├── _tables.scss         # tables
+|     ├── _utilities.scss      # utility classes (text/image alignment)
+|     └── _variables.scss      # theme defaults (fonts, colors, etc.)
 ├── assets
 |  ├── css
-|  |  └── main.scss         # main stylesheet, loads SCSS partials in _sass
+|  |  └── main.scss            # main stylesheet, loads SCSS partials in _sass
 ```
 
 ## Customizing
 
-The variables and settings found in [`_sass/_variables.scss`](https://github.com/mmistakes/minimal-mistakes/blob/master/_sass/_variables.scss) can be used to modify the following aspects of the theme:
+To override the default [Sass](http://sass-lang.com/guide) (located in theme's 
+`_sass` directory), do one of the following:
+
+1. Copy directly from the Minimal Mistakes theme gem
+
+   - Go to your local Basically Basic gem installation directory (run 
+     `bundle show minimal-mistakes-jekyll` to get the path to it).
+   - Copy the contents of `/assets/css/main.scss` from there to 
+     `<your_project>`.
+   - Customize what you want inside `<your_project>/assets/css/main.scss`.
+
+2. Copy from this repo.
+
+   - Copy the contents of [assets/css/main.scss](https://github.com/mmistakes/minimal-mistakes/blob/master/assets/css/main.scss) 
+     to `<your_project>`.
+   - Customize want you want inside `<your_project/assets/css/main.scss`.
+
+**Note:** To make more extensive changes and customize the Sass partials bundled 
+in the gem. You will need to copy the complete contents of the `_sass` directory 
+to `<your_project>` due to the way Jekyll currently reads those files.
+
+To make basic tweaks to theme's style Sass variables can be overridden by adding 
+to `<your_project>/assets/css/main.scss`. For instance, to change the 
+link color used throughout the theme add:
+
+```scss
+$link-color: red;
+```
+
+Before any `@import` lines.
 
 ### Paragraph Indention 
 
@@ -80,11 +110,11 @@ Not a fan of the refreshed typography of the theme and want to revert back an ol
 <link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700|PT+Serif:400,700,400italic" rel="stylesheet" type="text/css">
 ```
 
-**2.** Update the following variables in `/_sass/_variables.scss`:
+**2.** Update the following SCSS variables:
 
 ```scss
 $serif              : "PT Serif", Georgia, Times, serif;
-$sans-serif-narrow  : "PT Sans Narrow", $sans-serif;
+$sans-serif-narrow  : "PT Sans Narrow", -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif;
 
 $global-font-family : $serif;
 $header-font-family : $sans-serif-narrow;
@@ -92,7 +122,7 @@ $header-font-family : $sans-serif-narrow;
 
 ### Type Scale
 
-Wherever possible type scale variables have been used instead of writing out fixed sizes. This makes updating much easier by changing values in one file, `_variables.scss`. 
+Wherever possible type scale variables have been used instead of writing out fixed sizes. This makes updating much easier by changing values in one file. 
 
 Example:
 

docs/_sass/minimal-mistakes.scss

@@ -0,0 +1,40 @@
+/*!
+ * Minimal Mistakes Jekyll Theme 4.3.1 by Michael Rose
+ * Copyright 2017 Michael Rose - mademistakes.com | @mmistakes
+ * Licensed under MIT (https://github.com/mmistakes/minimal-mistakes/blob/master/LICENSE.txt)
+*/
+
+/* Variables */
+@import "minimal-mistakes/variables";
+
+/* Mixins and functions */
+@import "minimal-mistakes/vendor/breakpoint/breakpoint";
+@include breakpoint-set("to ems", true);
+@import "minimal-mistakes/vendor/font-awesome/font-awesome";
+@import "minimal-mistakes/vendor/magnific-popup/magnific-popup"; // Magnific Popup
+@import "minimal-mistakes/vendor/susy/susy";
+@import "minimal-mistakes/mixins";
+
+/* Core CSS */
+@import "minimal-mistakes/reset";
+@import "minimal-mistakes/base";
+@import "minimal-mistakes/forms";
+@import "minimal-mistakes/tables";
+@import "minimal-mistakes/animations";
+
+/* Components */
+@import "minimal-mistakes/buttons";
+@import "minimal-mistakes/notices";
+@import "minimal-mistakes/masthead";
+@import "minimal-mistakes/navigation";
+@import "minimal-mistakes/footer";
+@import "minimal-mistakes/syntax";
+
+/* Utility classes */
+@import "minimal-mistakes/utilities";
+
+/* Layout specific */
+@import "minimal-mistakes/page";
+@import "minimal-mistakes/archive";
+@import "minimal-mistakes/sidebar";
+@import "minimal-mistakes/print";