Slight Sass doc authoring [related to #241]

_sass/other/_ds.shame.scss

@@ -98,14 +98,14 @@ code {
   }
 }
 
-// This isn't broken in fsa-style, but for is with Ruby-based SASS, which strips out the :not() rule
+// This isn't broken in fsa-style, but for is with Ruby-based Sass, which strips out the :not() rule
 .fsa-table__sort:hover:not(.fsa-table__sort--descending, .fsa-table__sort--ascending):after {
   background-image: url('#{$image-path}/chevron-up.png');
   background-image: url('#{$image-path}/chevron-up.svg');
   opacity: .4;
 }
 
-// This isn't broken in fsa-style, but for is with Ruby-based SASS
+// This isn't broken in fsa-style, but for is with Ruby-based Sass
 // scss-lint:disable QualifyingElement
 span.fsa-stepped-tabs__label,
 div.fsa-stepped-tabs__label {

getting-started/index.md

@@ -32,7 +32,7 @@ npm install --save fsa-style
 ```
 
 The package will be installed in `node_modules/fsa-style`. You can either use the un-compiled files
-found in the `src/` or the compiled files in the `dist/` directory. For example, if you're interested in using the SASS files (`.scss`) you would use the `src/` directory; otherwise, `dist/` is what you want.
+found in the `src/` or the compiled files in the `dist/` directory. For example, if you're interested in using the Sass files (`.scss`) you would use the `src/` directory; otherwise, `dist/` is what you want.
 
 ```
 node_modules/fsa-style/

grid-and-layout/index.md

@@ -427,7 +427,7 @@ A grid column's width can automatically distribute itself via `class="fsa-grid__
   </div>
 </div>
 
-## SASS Mixins
+## Sass Mixins
 
 Homeroll your own semantic grids.
 

guides/front-end/css-preprocessors.md

@@ -2,43 +2,64 @@
 layout: guide
 parent: "Front-end"
 title: "CSS Preprocessors"
-intro: "The FSA Design System takes advantage of an automated build system which utilizes SASS and SCSS."
+intro: "The FSA Design System takes advantage of an automated build system which utilizes Sass."
 ---
 
 ## What is a CSS Preprocessor
 
-Cascading Style Sheets (CSS) control the majority of the visual elements within an application, and while the technology is fairly straight forward, keeping your styles organized and structured properly can be an arguous task. Preprocessors extend CSS with variables, operators, function, and mixins which allow for more programatic control and structure over your CSS. Some CSS preprocessors include SASS and LESS, and are generally paired with Gulp or Grunt to create an automated build process for Developers.
+Cascading Style Sheets (CSS) control the majority of the visual elements within an application, and while the technology is fairly straight forward, keeping your styles organized and structured properly can be an arguous task. Preprocessors extend CSS with variables, operators, function, and mixins which allow for more programatic control and structure over your CSS. Some CSS preprocessors include [Sass](https://sass-lang.com/) and [LESS](http://lesscss.org/), and are generally paired with [Gulp](https://gulpjs.com/) or [Grunt](https://gruntjs.com/) to create an automated build process for Developers.
 
-The FSA Design System utilizes SASS along with a Grunt automated build process. All components and style are structured in a modular and systematic format to allow for easy of integration into projects. This also allows for better code optimization, system maintenance, and feature updates.
+The FSA Design System's CSS Framework (`fsa-style`) utilizes Sass paired with a Grunt automated build process. Components and styles are structured in a modular and systematic format to allow for easy of integration into projects. This also allows for better code optimization, system maintenance, and feature updates.
 
 ### CSS Preprocessor Code Snippet
 
+#### Sass
+
 ```scss
-.fsa-breadcrumb {
+.fsa-example {
 
   &__list {
-    margin: 0 0 $size-small;
+    margin: 0 0 $size-small; // Sass variable
     padding: 0;
   }
 
   &__item {
 
-    @include font-size(1);
+    @include font-size(1); // Sass Custom Mixin
     margin: 0;
     display: inline-block;
 
-    @include breakpoint(M) {
-      @include font-size(3);
+    @include breakpoint(M) { // Mixin: at screens M and bigger apply these styles
+      @include font-size(3); // Sass Custom Mixin
     }
   }
 }
 ```
 
-As seen in the above example, the ability to apply variables (`$size-small`) and functions (`font-size(1)` and `breakpoint(M)`) across multiple projects and components allows for a cohesive design and an efficient development environment.
+#### Compiled CSS
+```css
+.fsa-example { }
+.fsa-example__list {
+  margin: 0 0 .8rem;
+  padding: 0;
+}
+.fsa-example__item {
+  font-size: 1.4rem;
+  margin: 0;
+  display: inline-block;
+}
+@media (min-width: 37.5em) {
+  .fsa-example__item {
+    font-size: 1.7rem;
+  }
+}
+```
+
+As seen in the above example, the ability to apply variables (`$size-small`) and custom mixins (`font-size(1)` and `breakpoint(M)`) across multiple projects and components allows for a cohesive design and an efficient development environment.
 
 ## Related Information
 
-* [SASS](http://sass-lang.com/)
+* [Sass](http://sass-lang.com/)
 * [LESS](http://lesscss.org/)
 * [Grunt](https://gruntjs.com/)
 * [Gulp](https://gulpjs.com/)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "fsa-design-system",
   "description": "Open Source UI components and visual style guide for USDA-FSA web sites and apps",
-  "version": "1.11.0",
+  "version": "1.11.1",
   "license": "SEE LICENSE in LICENSE.md",
   "repository": {
     "type": "git",

visual-style/typography/index.md

@@ -222,7 +222,7 @@ Most elements and components have a deliberate size assigned to them, Utilities
 
 ### Unstyled
 
-#### SASS Mixin
+#### Sass Mixin
 
 Resets `<ul>` or `<ol>` elements by stripping all style properties, e.g. bullets, numbers, margins, etc.
 
@@ -234,7 +234,7 @@ Resets `<ul>` or `<ol>` elements by stripping all style properties, e.g. bullets
   </ul>
 </div>
 ```scss
-// SASS
+// SCSS
 .your-custom-list {
 
   @include reset-ul();
@@ -256,7 +256,7 @@ Resets `<ul>` or `<ol>` elements by stripping all style properties, e.g. bullets
 
 #### HTML
 
-If SASS is not an option, these CSS Utilities will reset list styles.
+If Sass is not an option, these CSS Utilities will reset list styles.
 
 ##### Unordered list
 
@@ -379,12 +379,9 @@ Most HTML elements and components immediately have an assigned font size, follow
   </div>
 </div>
 
+### CSS (via Sass)
 
-
-
-### CSS (via SASS)
-
-With a <a href="http://sass-lang.com/">SASS</a> mixin, `@include font-size([size]);` - where `[size]` is one of `0-7`.
+With a <a href="http://sass-lang.com/">Sass</a> mixin, `@include font-size([size]);` - where `[size]` is one of `0-7`.
 
 ```scss
 .your-custom-selector { @include font-size([size]); }