First commit.

sass/README.txt

@@ -0,0 +1,88 @@
+ZEN'S STYLESHEETS
+-----------------
+
+Don't panic!
+
+There are a lot of files in this Sass folder. A lot. 56, actually.
+
+I swear to you I'm going to give you a good reason not to panic. Just give me
+a minute. (ヘ･_･)ヘ┳━┳
+
+Okay, how about just panicking slightly while I collect my thoughts.
+(╯°□°）╯︵ ┻━┻
+
+Okay. Okay. There _are_ 56 Sass files in this sub-theme, but it's not as bad as
+it first seems.
+
+Why not just one stylesheet?
+
+- For performance reasons you should always have all of your CSS in a single
+  file to minimize the number of HTTP requests the user's browser needs to do.
+  Fortunately, Drupal has a "Aggregate and compress CSS" feature that will
+  automatically combine all the CSS files from its modules and themes into one
+  file. You can turn on that feature under "Bandwidth Optimization" on the page:
+    Administration > Configuration > Development > Performance
+  So Drupal allows us (if we want) to use more than one stylesheet file, but
+  still serves all the styles in one file to our users.
+
+- When developing a site using a single stylesheet, it can become unwieldy to
+  scroll and find the place you need to edit. As a deadline becomes imminent,
+  developers often start stuffing new styles at the bottom of the stylesheet,
+  completely destroying any stylesheet organization.
+
+- Instead of one monolithic stylesheet, Zen sub-themes' CSS files are organized
+  into many small stylesheets. Once you learn the organization (described
+  below) it becomes easier to find the right place to add new styles.
+
+- All the Sass files are imported into the styles.scss so all the CSS is output
+  to the styles.css file.
+
+ORGANIZATION OF STYLESHEETS
+---------------------------
+
+All of the styles in this sub-theme are built using component-based designs. To
+learn more about component-based design, watch the Drupalcon presentation,
+"Style Guide Driven Development: All hail the robot overlords!"
+https://events.drupal.org/losangeles2015/sessions/style-guide-driven-development-all-hail-robot-overlords
+
+The Sass files are organized in a simple file hierarchy, and, best of all are
+documented in a style guide which is super easy to keep up-to-date. Open the
+style guide to learn more about the styles and Sass used in this sub-theme.
+
+Open the styleguide/index.html file in a web browser.
+
+
+ABOUT SASS
+----------
+
+This directory includes Sass versions of Zen's CSS files.
+
+Sass is a language that is just normal CSS plus some extra features, like
+variables, nested rules, math, mixins, etc. If your stylesheets are written in
+Sass, helper applications can convert them to standard CSS so that you can
+include the CSS in the normal ways with your theme.
+
+To learn more about Sass, visit: http://sass-lang.com
+
+Since Sass is just a language, we also need an executable that can easily
+convert Sass files into CSS. We use node-sass to convert our files to CSS. And
+we use Gulp.js to run node-sass and many other useful front-end tasks.
+
+
+DEVELOPING WITH SASS
+--------------------
+
+To automatically generate the CSS versions of the scss while you are doing theme
+development, you'll need to tell Gulp to "watch" the sass directory so that
+any time a .scss file is changed it will automatically generate a CSS file in
+your sub-theme's css directory:
+
+  gulp watch
+
+
+MOVING YOUR CSS TO PRODUCTION
+-----------------------------
+
+Simple! Generate your CSS with: gulp
+
+And don't forget to turn on Drupal's CSS aggregation. :-)

sass/_init.scss

@@ -0,0 +1,69 @@
+// Initialization partial
+//
+// To make it easier to use all variables and mixins in any Sass file in this
+// project, each .scss file has a `@import 'init';` declaration. The _init.scss
+// file is in charge of importing all the other partials needed for the
+// project.
+//
+// The initialization partial is organized in this way:
+// - First we set any shared Sass variables.
+// - Next we import Sass modules.
+// - Last we define our custom mixins for this project.
+//
+// Weight: -1
+//
+// Style guide: sass.init
+
+
+// The following Sass functions/mixins are required to generate some variables'
+// values, so we load them first.
+@import 'breakpoint';
+@import 'chroma/functions';
+
+@import 'init/colors';
+@import 'init/variables';
+
+
+// 3rd party libraries
+//
+// The following sass modules are shared with all .scss files:
+// - [Breakpoint](http://breakpoint-sass.com/)
+// - [Chroma](https://github.com/JohnAlbin/chroma)
+// - [Support-for](https://github.com/JohnAlbin/support-for)
+// - [Typey](https://github.com/jptaranto/typey)
+// - [Zen Grids](http://zengrids.com/help/)
+//
+// Additional pre-built libraries can be found on the [Sache website](http://www.sache.in/).
+//
+// Style guide: sass.modules
+
+// Add Chroma to manage colors.
+@import 'chroma';
+@import 'chroma/kss';
+// Add support-for to manage normalize-scss' browser support.
+@import 'support-for';
+// Add typey to manage font sizes and margins.
+@import 'typey';
+// Add the Zen Grids responsive layout mixins.
+@import 'zen-grids';
+
+
+// Mixins
+//
+// Custom mixins used on this site.
+//
+// Weight: 1
+//
+// Style guide: sass.mixins
+@import 'init/clearfix/clearfix';
+@import 'init/rtl/rtl';
+@import 'init/visually-hidden/visually-hidden';
+
+// Functions
+//
+// Custom functions used on this site.
+//
+// Weight: 1
+//
+// Style guide: sass.functions
+@import 'init/image-url/image-url';

sass/_slicknav.scss

@@ -0,0 +1,154 @@
+// sass-lint:disable all
+
+.slicknav_btn {
+  position: relative;
+  display: block;
+  vertical-align: middle;
+  float: right;
+  padding: .438em .625em;
+  line-height: 1.125em;
+  cursor: pointer;
+  margin: 5px;
+  text-decoration: none;
+  text-shadow: 0 1px 1px rgba(255, 255, 255, .75);
+  border-radius: 4px;
+  background-color: color(nearblack);
+}
+
+.slicknav_menu {
+  box-sizing: border-box;
+  background-color: color(header-bg);
+  padding: 2px;
+
+  &::before,
+  &::after {
+    content: ' ';
+    display: table;
+  }
+
+  &::after {
+    clear: both;
+  }
+}
+
+.slicknav_menutxt {
+  display: block;
+  line-height: 1.188em;
+  float: left;
+  color: color(text-bg);
+  font-weight: bold;
+  text-shadow: 0 1px 3px color(text);
+}
+
+.slicknav_icon {
+  float: left;
+  width: 1.125em;
+  height: .875em;
+  margin: .188em 0 0 .438em;
+
+  &::before { // Firefox Mobile v42 bugfix
+    background-color: transparent;
+    width: 1.125em;
+    height: .875em;
+    display: block;
+    content: '';
+    position: absolute;
+  }
+}
+
+.slicknav_no-text {
+  margin: 0;
+}
+
+.slicknav_icon-bar {
+  display: block;
+  width: 1.125em;
+  height: .125em;
+  border-radius: 1px;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
+  background-color: color(text-bg);
+
+  & + .slicknav_icon-bar {
+    margin-top: .188em;
+  }
+}
+
+.slicknav_nav {
+  background-color: color(body-bg);
+  color: color(link);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  overflow: hidden;
+  clear: both;
+
+  ul {
+    display: block;
+    list-style: none;
+    overflow: hidden;
+    padding: 0;
+    margin: 0 0 0 20px;
+  }
+
+  li {
+    display: block;
+  }
+
+  a {
+    display: block;
+    padding: 5px 10px;
+    margin: 2px 5px;
+    text-decoration: none;
+    color: color(link);
+
+    &:hover {
+      border-radius: 6px;
+      background-color: color(nearblack);
+      color: color(text-bg);
+    }
+  }
+}
+
+.slicknav_row {
+  display: block;
+  padding: 5px 10px;
+  margin: 2px 5px;
+
+  &:hover {
+    border-radius: 6px;
+    background-color: color(nearblack);
+    color: color(text-bg);
+  }
+}
+
+.slicknav_arrow {
+  margin: 0 0 0 .4em;
+}
+
+.slicknav_txtnode {
+  margin-left: 15px;
+}
+
+.slicknav_item {
+  cursor: pointer;
+
+  a {
+    display: inline;
+    padding: 0;
+    margin: 0;
+  }
+}
+
+.slicknav_parent-link a {
+  display: inline;
+  padding: 0;
+  margin: 0;
+}
+
+.slicknav_brand {
+  float: left;
+  color: color(text-bg);
+  line-height: 30px;
+  padding: 7px 12px;
+  height: 44px;
+}

sass/_zen.scss

@@ -0,0 +1,208 @@
+/**
+ * @file
+ * Zen custom styles
+ */
+
+/* Zen overrides */
+
+p,
+pre {
+  // Set 1 unit of vertical rhythm on the top and bottom margin.
+  @include margin(.75 0);
+}
+
+/* Apply smaller text to blocks, footer etc. */
+
+th,
+label,
+legend,
+figcaption {
+  @include type-layout(s, 1);
+
+  @include respond-to(xxl) {
+    @include type-layout(s-2, 1);
+  }
+}
+
+.footer {
+  @include type-layout(xs, 1);
+
+  @include respond-to(xxl) {
+    @include type-layout(xs-2, 1);
+  }
+}
+
+/* Apply heading font stack to heading, labels etc. */
+
+h1,
+h2,
+h3,
+th,
+nav,
+label,
+legend,
+article > header,
+.header,
+.footer {
+  @include typeface(headings);
+  color: color(headings);
+  font-weight: normal;
+}
+
+article,
+aside {
+  ul {
+    @extend %ul-straight-left;
+  }
+
+  ol {
+    @extend %ol-straight-left;
+  }
+}
+
+figure {
+  @include respond-to(s) {
+    display: table;
+
+    &.left {
+      @include padding(.5 .5 0 0);
+      margin: 0;
+      float: left;
+      clear: both;
+
+      figcaption {
+        @include padding(0 .5 .5 0);
+      }
+    }
+
+    &.right {
+      @include padding(.5 0 0 .5);
+      margin: 0;
+      float: right;
+      clear: both;
+
+      figcaption {
+        @include padding(0 0 .5 .5);
+      }
+    }
+  }
+}
+
+figcaption {
+  @include respond-to(s) {
+    display: table-caption;
+    caption-side: bottom;
+  }
+
+  p {
+    margin: 0;
+  }
+}
+
+/* Page */
+
+body {
+  background-color: color(backdrop);
+}
+
+.layout-center {
+  background-color: color(body-bg);
+}
+
+.header {
+  padding-top: $zen-gutters / 2;
+
+  @include respond-to(m) {
+    padding-top: $zen-gutters;
+  }
+
+  &__logo {
+    width: 100px;
+  }
+}
+
+/* Navigation */
+
+.main-menu {
+  @include margin-top(.5);
+  @include margin-bottom(.5);
+  outline: 0;
+
+  li {
+    @include margin-right(.5);
+    @include margin-bottom(.5);
+    padding: 0;
+  }
+
+  a {
+    display: block;
+    background-color: color(brand);
+    color: color(text-bg);
+    padding: 2px 8px;
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+      background-color: color(brand-dark);
+    }
+
+    &:active,
+    &.active {
+      background-color: color(brand);
+      text-decoration: underline;
+    }
+  }
+}
+
+.menu a.active {
+  text-decoration: none;
+}
+
+.footer {
+  @include margin-top(1.5);
+  @include padding(.5 0);
+  text-align: center;
+  border-top: 2px solid color(brand);
+
+  p {
+    margin: 0;
+  }
+}
+
+/* Print. */
+
+aside,
+nav,
+footer {
+  @extend %print-none;
+}
+
+@media print {
+  body,
+  .layout-center {
+    background-color: color(white);
+  }
+
+  .layout-swap {
+    padding-top: 0;
+  }
+
+  [role='main'] {
+    width: 100%;
+  }
+
+  .layout-swap__top {
+    border-bottom: 0;
+  }
+
+  /* Zen overrides */
+  :link,
+  :visited {
+    text-decoration: underline;
+  }
+
+  a[href]::after {
+    content: '';
+  }
+
+}

sass/base/_fonts.scss

@@ -0,0 +1,33 @@
+// Font faces
+//
+// Instead of relying on the fonts that are available on a user's computer, you
+// can use web fonts which, like images, are resources downloaded to the user's
+// browser. Because of the bandwidth and rendering resources required, web fonts
+// should be used with care.
+//
+// Numerous resources for web fonts can be found on Google. Here are a few
+// websites where you can find Open Source fonts to download:
+// - http://www.fontsquirrel.com/fontface
+// - http://www.theleagueofmoveabletype.com
+//
+// In order to use these fonts, you will need to convert them into formats
+// suitable for web fonts. We recommend the free-to-use Font Squirrel's
+// Font-Face Generator:
+//   http://www.fontsquirrel.com/fontface/generator
+//
+// The following is an example @font-face declaration. This font can then be
+// used in any ruleset using a property like this:  font-family: Example, serif;
+//
+// Since we're using Sass, you'll need to declare your font faces here, then you
+// can add them to the font variables in the _init.scss partial.
+
+// @font-face {
+//   font-family: 'Example';
+//   src: url('../fonts/example.eot');
+//   src: url('../fonts/example.eot?iefix') format('eot'),
+//     url('../fonts/example.woff') format('woff'),
+//     url('../fonts/example.ttf') format('truetype'),
+//     url('../fonts/example.svg#webfontOkOndcij') format('svg');
+//   font-weight: normal;
+//   font-style: normal;
+// }

sass/base/_html5.scss

@@ -0,0 +1,45 @@
+// HTML5 display definitions
+// ==========================================================================
+
+// Add the correct display in IE <10.
+// Add the correct display in Edge, IE, and Firefox for `details` or `summary`.
+// Add the correct display in IE for `main`.
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+// Add the correct display in IE <10.
+audio,
+canvas,
+progress,
+video {
+  display: inline-block;
+}
+
+// Add the correct display and remove excess height in iOS 4-7.
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+// Add the correct vertical alignment in Chrome, Firefox, and Opera.
+progress {
+  vertical-align: baseline;
+}
+
+// Add the correct display in IE <11, Safari <8, and Firefox <22.
+template,
+[hidden] {
+  display: none;
+}

sass/base/_normalize.scss

@@ -0,0 +1,23 @@
+// Normalize.css is intended to be used as an alternative to CSS resets.
+//
+// @see http://nicolasgallagher.com/about-normalize-css/
+//
+// Also: @see http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/
+//       @see http://snook.ca/archives/html_and_css/no_css_reset/
+//
+// This directory is a slight fork of this original source:
+// - normalize-scss 5.0.3 | MIT/GPLv2 License | bit.ly/normalize-scss
+
+
+// Normalize-scss is broken into modular pieces to make it easier to edit.
+@import 'root';
+@import 'html5';
+@import 'links/links';
+@import 'headings/headings';
+@import 'text/text';
+@import 'grouping/grouping';
+@import 'embedded/embedded';
+@import 'tables/tables';
+
+// Note: we allow the .button component (loaded by forms) to override :link, by
+// loading links first.

sass/base/_root.scss

@@ -0,0 +1,37 @@
+// sass-lint:disable no-vendor-prefixes
+
+// Use the saner border-box model for all elements.
+* {
+  box-sizing: border-box;
+}
+
+html {
+  @include define-type-sizing();
+  // Change the default font family in all browsers (opinionated).
+  @include typeface(body);
+  // Prevent adjustments of font size after orientation changes in IE and iOS.
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  // On short pages, we want any background gradients to fill the entire height
+  // of the browser.
+  min-height: 100%;
+}
+
+body {
+  // Output a horizontal grid to help with debugging typography. The
+  // $typey-debug variable will toggle its output.
+  @include typey-debug-grid();
+  // Remove default margin and padding.
+  margin: 0;
+  padding: 0;
+  color: color(text);
+  background-color: color(text-bg);
+}
+
+@include respond-to(xxl) {
+
+  html {
+    @include define-type-sizing($base-font-size-2, $base-line-height-2);
+  }
+
+}

sass/base/embedded/_embedded.scss

@@ -0,0 +1,46 @@
+// Embedded content
+//
+// Weight: 2
+//
+// Style guide: base.embedded
+
+// Image
+//
+// An `<img>` element represents an image.
+//
+// Markup: embedded-img.twig
+//
+// Style guide: base.embedded.img
+
+img {
+  // Remove the border on images inside links in IE <11.
+  border-style: none;
+  @if support-for(ie, 7) {
+    // Improve image quality when scaled in IE 7.
+    // sass-lint:disable no-vendor-prefixes
+    -ms-interpolation-mode: bicubic;
+  }
+}
+
+img,
+svg {
+  // Suppress the space beneath the baseline
+  // vertical-align: bottom;
+
+  // Responsive images
+  max-width: 100%;
+  height: auto;
+}
+
+// Scalable vector
+//
+// A `<svg>` element represents an image encoded as a Scalable Vector Graphic.
+//
+// Markup: embedded-svg.twig
+//
+// Style guide: base.embedded.svg
+
+svg:not(:root) {
+  // Hide the overflow in IE.
+  overflow: hidden;
+}

sass/base/embedded/embedded-img.twig

@@ -0,0 +1,6 @@
+<p>An image <img class="{{modifier_class}}" src="kss-assets/sample-inline.png"> that is inline with other text.</p>
+
+<figure style="width: 50%; max-width: 300px;">
+  <figcaption>An image inside a figure.</figcaption>
+  <img class="{{modifier_class}}" src="kss-assets/sample.png">
+</figure>

sass/base/embedded/embedded-svg.twig

@@ -0,0 +1,8 @@
+<p>A svg image <svg class="{{modifier_class}}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="10px" height="10px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><polygon fill="#bdad94" stroke="#bdad94" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="  259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08   29.274,197.007 188.165,173.919 "/></svg> that is inline with other text.</p>
+
+<figure style="width: 50%; max-width: 300px;">
+  <figcaption>A svg inside a figure.</figcaption>
+  <svg class="{{modifier_class}}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+  <polygon fill="#bdad94" stroke="#bdad94" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="  259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08   29.274,197.007 188.165,173.919 "/>
+  </svg>
+</figure>

sass/base/grouping/_grouping.scss

@@ -0,0 +1,184 @@
+// Dependencies.
+@import 'base/text/text';
+@import 'components/divider/divider';
+
+// Grouping content
+//
+// Weight: 1
+//
+// Style guide: base.grouping
+
+
+// Block quotes
+//
+// The `<blockquote>` element is for quoting blocks of content from another
+// source within your document. Wrap the `<blockquote>` around any <abbr
+// title="HyperText Markup Language">HTML</abbr> as the quote. For straight
+// quotes, we recommend a `<p>`.
+//
+// Optionally, add a `<footer>` to identify the source of the quote, wrapping
+// the name of the source work in `<cite>`.
+//
+// Markup: grouping-blockquote.twig
+//
+// Style guide: base.grouping.blockquote
+
+blockquote {
+  // Set 1 unit of vertical rhythm on the top and bottom margin.
+  // Also indent the quote on both sides.
+  @include margin(1 $indent-amount);
+}
+
+// Lists
+//
+// Weight: -1
+//
+// Style guide: base.grouping.lists
+
+// Unordered list
+//
+// The `<ul>` element is a list of items in which the order does <em>not</em>
+// explicitly matter.
+//
+// Markup: grouping-ul.twig
+//
+// Style guide: base.grouping.lists.ul
+
+// Ordered list
+//
+// The `<ol>` element is a list of items in which the order <em>does</em>
+// explicitly matter.
+//
+// Markup: grouping-ol.twig
+//
+// Style guide: base.grouping.lists.ol
+
+// Description list
+//
+// The `<dl>` element is a list of terms with their associated descriptions.
+//
+// Markup: grouping-dl.twig
+//
+// Weight: 1
+//
+// Style guide: base.grouping.lists.dl
+
+dl,
+menu,
+ol,
+ul {
+  // Address margins set differently in IE 6/7.
+  @include margin(1 0);
+}
+
+// Turn off margins on nested lists.
+ol,
+ul {
+  ol,
+  ul {
+    margin: 0;
+  }
+}
+
+dt {
+  // Add your styles.
+}
+
+dd {
+  margin: 0 0 0 $indent-amount;
+
+  @include rtl {
+    margin: 0 $indent-amount 0 0;
+  }
+}
+
+// Address paddings set differently in IE 6/7.
+menu,
+ol,
+ul {
+  padding: 0 0 0 $indent-amount;
+
+  @include rtl {
+    padding: 0 $indent-amount 0 0;
+  }
+}
+
+@if support-for(ie, 7) {
+  // Correct list images handled incorrectly in IE 7.
+  nav ul,
+  nav ol {
+    list-style: none;
+    list-style-image: none;
+  }
+}
+
+// Figures
+//
+// The `<figure>` element can be used to annotate illustrations, diagrams,
+// photos, code listings, etc.
+//
+// Optionally, a `<figcaption>` element inside the `<figure>` represents the
+// caption of the figure.
+//
+// Markup: grouping-figure.twig
+//
+// Style guide: base.grouping.figure
+
+figure {
+  // Add the correct margin in IE 8.
+  @include margin(1 0);
+}
+
+figcaption {
+  // Add your styles.
+}
+
+// Horizontal rule
+//
+// The `<hr>` element represents a paragraph-level thematic break, e.g. a scene
+// change in a story, or a transition to another topic within a section of a
+// reference book.
+//
+// Markup: grouping-hr.twig
+//
+// Style guide: base.grouping.hr
+
+hr {
+  @extend %divider;
+  // Add the correct box sizing in Firefox.
+  box-sizing: content-box;
+  height: 0;
+  // Show the overflow in Edge and IE.
+  overflow: visible;
+}
+
+// Body copy
+//
+// The default `font-size` and `line-height` properties are applied to the
+// `<body>` element and all paragraphs. In addition, `<p>` (paragraphs) receive
+// a top and bottom margin.
+//
+// Markup: grouping-p.twig
+//
+// Weight: -2
+//
+// Style guide: base.grouping.p
+
+p,
+pre {
+  // Set 1 unit of vertical rhythm on the top and bottom margin.
+  @include margin(1 0);
+}
+
+// Preformatted text
+//
+// The `<pre>` element represents a block of preformatted text, such as
+// fragments of computer code, ASCII art, etc.
+//
+// Markup: grouping-pre.twig
+//
+// Style guide: base.grouping.pre
+
+pre {
+  @extend %monospace;
+}

sass/base/grouping/grouping-blockquote.twig

@@ -0,0 +1,11 @@
+<blockquote class="{{modifier_class}}">
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
+  erat a ante.</p>
+</blockquote>
+
+<blockquote class="{{modifier_class}}">
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
+  erat a ante.</p>
+  <footer>J. Smith in <cite title="Source Title, 2nd Edition">Source
+  Title</cite></footer>
+</blockquote>

sass/base/grouping/grouping-dl.twig

@@ -0,0 +1,9 @@
+<dl class="{{modifier_class}}">
+  <dt>Description lists</dt>
+  <dd>A description list is perfect for defining terms.</dd>
+  <dt>Euismod</dt>
+  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
+  <dd>Donec id elit non mi porta gravida at eget metus.</dd>
+  <dt>Malesuada porta</dt>
+  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+</dl>

sass/base/grouping/grouping-figure.twig

@@ -0,0 +1,8 @@
+<figure class="{{modifier_class}}">
+  An illustration, diagram, photo, code listing, etc.
+</figure>
+
+<figure class="{{modifier_class}}">
+  An illustration, diagram, photo, code listing, etc.
+  <figcaption>Figure 1</figcaption>
+</figure>

sass/base/grouping/grouping-hr.twig

@@ -0,0 +1,8 @@
+<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
+penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id
+dolor id nibh ultricies vehicula.</p>
+
+<hr class="{{modifier_class}}">
+
+<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
+ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.</p>

sass/base/grouping/grouping-ol.twig

@@ -0,0 +1,17 @@
+<ol class="{{modifier_class}}">
+  <li>Lorem ipsum dolor sit amet</li>
+  <li>Consectetur adipiscing elit</li>
+  <li>Integer molestie lorem at massa</li>
+  <li>Facilisis in pretium nisl aliquet</li>
+  <li>Nulla volutpat aliquam velit
+    <ol class="{{modifier_class}}">
+      <li>Phasellus iaculis neque</li>
+      <li>Purus sodales ultricies</li>
+      <li>Vestibulum laoreet porttitor sem</li>
+      <li>Ac tristique libero volutpat at</li>
+    </ol>
+  </li>
+  <li>Faucibus porta lacus fringilla vel</li>
+  <li>Aenean sit amet erat nunc</li>
+  <li>Eget porttitor lorem</li>
+</ol>

sass/base/grouping/grouping-p.twig

@@ -0,0 +1,12 @@
+<p class="{{modifier_class}}">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
+penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id
+dolor id nibh ultricies vehicula.</p>
+
+<p class="{{modifier_class}}">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
+ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis,
+est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec
+elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
+
+<p class="{{modifier_class}}">Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit
+non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi
+erat porttitor ligula, eget lacinia odio sem nec elit.</p>

sass/base/grouping/grouping-pre.twig

@@ -0,0 +1,4 @@
+The following text is preformatted:
+<pre class="{{modifier_class}}">
+(ノ゜Д゜)ノ ︵ ┻━┻
+</pre>

sass/base/grouping/grouping-ul.twig

@@ -0,0 +1,17 @@
+<ul class="{{modifier_class}}">
+  <li>Lorem ipsum dolor sit amet</li>
+  <li>Consectetur adipiscing elit</li>
+  <li>Integer molestie lorem at massa</li>
+  <li>Facilisis in pretium nisl aliquet</li>
+  <li>Nulla volutpat aliquam velit
+    <ul class="{{modifier_class}}">
+      <li>Phasellus iaculis neque</li>
+      <li>Purus sodales ultricies</li>
+      <li>Vestibulum laoreet porttitor sem</li>
+      <li>Ac tristique libero volutpat at</li>
+    </ul>
+  </li>
+  <li>Faucibus porta lacus fringilla vel</li>
+  <li>Aenean sit amet erat nunc</li>
+  <li>Eget porttitor lorem</li>
+</ul>