First commit.

sass/style-guide/chroma-kss-styles.scss

@@ -0,0 +1,4 @@
+// Build the stylesheet needed for the color section of the KSS style guide.
+@import 'init';
+
+@include chroma-kss-styles();

sass/style-guide/homepage.md

@@ -0,0 +1,29 @@
+# KSS Style Guide
+
+This style guide documents the designs of this website which are built with component-based styles and Sass variables, functions and mixins. To ensure it is always up-to-date, this style guide is automatically generated from comments in the Sass files.
+
+## Organization
+
+Design components are reusable designs that can be applied using just the CSS class names specified in the component. We categorize our components to make them easy to find.
+
+<dl>
+<dt>**Defaults**</dt>
+<dd>`sass/base` — The default “base” components apply to HTML elements. Since all of the rulesets in this class of styles are HTML elements, the styles apply automatically.</dd>
+<dt>**Layouts**</dt>
+<dd>`sass/layouts` — Layout components position major chunks of the page. They just apply positioning, no other styles.</dd>
+<dt>**Components**</dt>
+<dd>`sass/components` — Miscellaneous components are grouped together, but feel free to further categorize these.</dd>
+<dt>**Navigation**</dt>
+<dd>`sass/navigation` — Navigation components are specialized design components that are applied to website navigation.</dd>
+<dt>**Forms**</dt>
+<dd>`sass/forms` — Form components are specialized design components that are applied to forms or form elements.</dd>
+</dl>
+
+In addition to the components, our component library also contains these folders:
+
+<dl>
+<dt>**Colors and Sass**</dt>
+<dd>`sass/init` — This Sass documents the colors used throughout the site and various Sass variables, functions and mixins. It also initializes everything we need for all other Sass files: variables, 3rd-party libraries, custom mixins and custom functions.</dd>
+<dt>**Style guide helper files**</dt>
+<dd>`sass/style-guide` — files needed to build this automated style guide; includes some CSS overrides for the default KSS style guide</dd>
+</dl>

sass/style-guide/kss-example-chroma.scss

@@ -0,0 +1,8 @@
+// Build the markup needed for the color section of the KSS style guide.
+
+@import 'init';
+
+// sass-lint:disable no-css-comments
+/*
+#{chroma-kss-markup()}
+*/

sass/style-guide/kss-only.scss

@@ -0,0 +1,22 @@
+// sass-lint:disable no-ids
+
+@import 'init';
+
+// This file is used to add styles to the style guide and is not included in
+// the Drupal site. It gets included by the style guide by adding it to the
+// options.styleGuide.css object in gulpfile.js.
+
+// Add an outline to every grid item in the style guide.
+[id^='kssref-layouts-'] [class^='layout-'][class*='__'] {
+  outline: 1px dotted color('grey');
+}
+
+// Because our grids assume a container has some padding, add the standard
+// padding to the example wrapper.
+#kssref-layouts-layout-3column .kss-modifier__example {
+  @include zen-apply-gutter-padding();
+
+  @include zen-respond-to(m) {
+    @include zen-apply-gutter-padding();
+  }
+}