From f67ac273d2f26a70738efc2cf2b3490fdd636b1d Mon Sep 17 00:00:00 2001
From: beefchimi <curtdulmage@gmail.com>
Date: Tue, 30 Jan 2018 21:40:23 -0500
Subject: [PATCH] Complete polish review of Examples project

---
 README.md                                     |   9 +-
 examples/README.md                            |   2 +-
 examples/package.json                         |  12 +-
 examples/postcss.config.js                    |   2 +
 examples/src/components/Analytics/index.js    |  38 +++
 examples/src/components/Block/Block.scss      |   6 +-
 examples/src/components/Block/variants.scss   |  10 +-
 examples/src/components/Brand/Brand.html      |   4 +-
 examples/src/components/Brand/Brand.scss      |  12 +-
 examples/src/components/Brand/keyframes.scss  |  46 +---
 examples/src/components/Brand/props.scss      |  30 +++
 .../src/components/Document/Analytics.html    |  13 -
 examples/src/components/Document/Head.html    |  23 +-
 .../src/components/Hamburger/Hamburger.scss   |   6 +-
 .../src/components/Hamburger/keyframes.scss   |   2 +
 .../src/components/Handle/DragHandle.scss     |   2 +-
 .../src/components/Handle/NopeHandle.scss     |   2 +-
 examples/src/components/Heading/Heading.scss  |   4 +-
 examples/src/components/Heading/variants.scss |   2 +-
 examples/src/components/Link/Link.scss        |   4 +-
 examples/src/components/MobileNav/index.js    |  18 +-
 .../src/components/Navigation/NavList.html    |   6 +-
 .../src/components/Navigation/Navigation.html |   6 +-
 examples/src/components/Page/Page.scss        |   2 +-
 .../src/components/PaperStack/PaperStack.scss |  10 +-
 .../src/components/PaperStack/variants.scss   |   2 +-
 .../src/components/Patterns/Patterns.scss     |   6 +-
 .../src/components/Patterns/keyframes.scss    |   2 +-
 examples/src/components/Patterns/props.scss   |   2 +-
 .../src/components/PillSwitch/PillSwitch.scss |   6 +-
 examples/src/components/PillSwitch/props.scss |   4 +-
 examples/src/components/Plate/Plate.scss      |   8 +-
 examples/src/components/Plate/index.js        |   2 +-
 examples/src/components/Sidebar/Sidebar.html  |   8 +-
 examples/src/components/Sidebar/Sidebar.scss  |   2 +-
 .../components/StackedList/StackedList.scss   |   8 +-
 .../src/components/StackedList/variants.scss  |   2 +-
 .../Draggable/DragEvents/DragEvents.html      |   2 +-
 .../src/content/Draggable/DragEvents/index.js |   2 +-
 .../UniqueDropzone.html}                      |   2 +-
 .../UniqueDropzone.scss}                      |   7 +-
 .../{OneAndOnly => UniqueDropzone}/index.js   |   4 +-
 examples/src/content/Home/Home.html           |   2 +-
 .../Plugins/Collidable/Collidable.html        |   3 +-
 .../Plugins/Collidable/Collidable.scss        |   2 +-
 .../src/content/Plugins/Collidable/props.scss |   2 +-
 .../content/Plugins/Snappable/Snappable.html  |  10 +-
 .../content/Plugins/Snappable/Snappable.scss  |   2 +-
 .../Plugins/SwapAnimation/SwapAnimation.html  |   2 +-
 .../Plugins/SwapAnimation/SwapAnimation.scss  |   4 +-
 .../MultipleContainers.html                   |   2 +-
 .../Sortable/MultipleContainers/index.js      |   2 +-
 .../Sortable/SimpleList/SimpleList.html       |   2 +-
 .../Sortable/SimpleList/SimpleList.scss       |   3 +
 .../Sortable/Transformed/Transformed.html     |   2 +-
 .../content/Swappable/Flexbox/Flexbox.html    |   2 +-
 .../content/Swappable/Flexbox/Flexbox.scss    |   4 +-
 .../content/Swappable/Floated/Floated.html    |   2 +-
 .../content/Swappable/Floated/Floated.scss    |   4 +-
 .../Swappable/GridLayout/GridLayout.html      |   2 +-
 .../Swappable/GridLayout/GridLayout.scss      |   2 +-
 examples/src/content/index.js                 |  35 +++
 examples/src/content/shared/mixins.scss       |  25 --
 examples/src/root/manifest.json               |  28 ---
 examples/src/scripts/examples-app.js          |  52 +---
 .../scripts/{helpers => utils}/debounce.js    |   4 +-
 .../scripts/{helpers => utils}/flip-sign.js   |   0
 .../utils}/match-mirror-size.js               |   0
 examples/src/styles/examples-app.scss         |  22 +-
 .../examples => examples-theme}/_border.scss  |   0
 .../_breakpoint.scss                          |   0
 .../examples => examples-theme}/_color.scss   |   0
 .../examples => examples-theme}/_cursor.scss  |   0
 .../_duration.scss                            |   0
 .../examples => examples-theme}/_easing.scss  |   0
 .../_font-stack.scss                          |   0
 .../_layout-length.scss                       |   0
 .../examples => examples-theme}/_spacing.scss |   0
 .../_type-scale.scss                          |   0
 .../examples => examples-theme}/_z-index.scss |   0
 .../examples-theme.scss}                      |  16 +-
 examples/src/styles/themes/examples.scss      |  16 --
 .../styles/utilities/shared/_functions.scss   |  61 -----
 .../styles/utilities/shared/_typography.scss  |  58 -----
 .../global/_animation.scss                    |   2 +-
 .../{utilities => utils}/global/_layout.scss  |   8 +-
 .../global/_typography.scss                   |   4 +-
 .../src/styles/utils/global/global-utils.scss |   7 +
 .../shared/animation.scss}                    |   2 +-
 .../src/styles/utils/shared/functions.scss    |  17 ++
 .../_layout.scss => utils/shared/layout.scss} |  54 ++---
 .../src/styles/utils/shared/typography.scss   |  23 ++
 examples/src/views/collidable.html            |  14 +-
 examples/src/views/data-pages.json            |   5 +-
 examples/src/views/drag-events.html           |  14 +-
 examples/src/views/flexbox.html               |  16 +-
 examples/src/views/floated.html               |  14 +-
 examples/src/views/grid-layout.html           |  16 +-
 examples/src/views/index.html                 |  14 +-
 examples/src/views/multiple-containers.html   |  14 +-
 examples/src/views/restrict-axis.html         |  31 ---
 examples/src/views/simple-list.html           |  14 +-
 examples/src/views/snappable.html             |  14 +-
 examples/src/views/swap-animation.html        |  14 +-
 examples/src/views/transformed.html           |  14 +-
 ...one-and-only.html => unique-dropzone.html} |  20 +-
 examples/tools/helpers.js                     |   3 -
 examples/tools/index.js                       |   4 +-
 examples/tools/tasks/index.js                 |   2 -
 examples/tools/tasks/root.js                  |   8 -
 examples/tools/tasks/styles.js                |   9 +-
 examples/tools/tasks/views.js                 |   5 +-
 examples/tools/watch.js                       |   5 +-
 examples/yarn.lock                            | 229 ++++++++++--------
 114 files changed, 597 insertions(+), 710 deletions(-)
 create mode 100644 examples/src/components/Analytics/index.js
 create mode 100644 examples/src/components/Brand/props.scss
 delete mode 100644 examples/src/components/Document/Analytics.html
 rename examples/src/content/Droppable/{OneAndOnly/OneAndOnly.html => UniqueDropzone/UniqueDropzone.html} (97%)
 rename examples/src/content/Droppable/{OneAndOnly/OneAndOnly.scss => UniqueDropzone/UniqueDropzone.scss} (96%)
 rename examples/src/content/Droppable/{OneAndOnly => UniqueDropzone}/index.js (86%)
 create mode 100644 examples/src/content/index.js
 delete mode 100644 examples/src/content/shared/mixins.scss
 delete mode 100644 examples/src/root/manifest.json
 rename examples/src/scripts/{helpers => utils}/debounce.js (67%)
 rename examples/src/scripts/{helpers => utils}/flip-sign.js (100%)
 rename examples/src/{content/shared => scripts/utils}/match-mirror-size.js (100%)
 rename examples/src/styles/{themes/examples => examples-theme}/_border.scss (100%)
 rename examples/src/styles/{themes/examples => examples-theme}/_breakpoint.scss (100%)
 rename examples/src/styles/{themes/examples => examples-theme}/_color.scss (100%)
 rename examples/src/styles/{themes/examples => examples-theme}/_cursor.scss (100%)
 rename examples/src/styles/{themes/examples => examples-theme}/_duration.scss (100%)
 rename examples/src/styles/{themes/examples => examples-theme}/_easing.scss (100%)
 rename examples/src/styles/{themes/examples => examples-theme}/_font-stack.scss (100%)
 rename examples/src/styles/{themes/examples => examples-theme}/_layout-length.scss (100%)
 rename examples/src/styles/{themes/examples => examples-theme}/_spacing.scss (100%)
 rename examples/src/styles/{themes/examples => examples-theme}/_type-scale.scss (100%)
 rename examples/src/styles/{themes/examples => examples-theme}/_z-index.scss (100%)
 rename examples/src/styles/{themes/merge-with-threads.scss => examples-theme/examples-theme.scss} (74%)
 delete mode 100644 examples/src/styles/themes/examples.scss
 delete mode 100644 examples/src/styles/utilities/shared/_functions.scss
 delete mode 100644 examples/src/styles/utilities/shared/_typography.scss
 rename examples/src/styles/{utilities => utils}/global/_animation.scss (98%)
 rename examples/src/styles/{utilities => utils}/global/_layout.scss (51%)
 rename examples/src/styles/{utilities => utils}/global/_typography.scss (90%)
 create mode 100644 examples/src/styles/utils/global/global-utils.scss
 rename examples/src/styles/{utilities/shared/_animation.scss => utils/shared/animation.scss} (83%)
 create mode 100644 examples/src/styles/utils/shared/functions.scss
 rename examples/src/styles/{utilities/shared/_layout.scss => utils/shared/layout.scss} (80%)
 create mode 100644 examples/src/styles/utils/shared/typography.scss
 delete mode 100644 examples/src/views/restrict-axis.html
 rename examples/src/views/{one-and-only.html => unique-dropzone.html} (51%)
 delete mode 100644 examples/tools/helpers.js
 delete mode 100644 examples/tools/tasks/root.js

diff --git a/README.md b/README.md
index c8ca5389..702d0d91 100644
--- a/README.md
+++ b/README.md
@@ -2,16 +2,11 @@
   <img src="https://circleci.com/gh/Shopify/draggable.svg?style=shield&circle-token=bd97f87d63e330e3b4b186ef11d8223889ef925f" title="CircleCI status" alt="CircleCI status">
 </a>
 
-<hr/>
-
 <a href="https://shopify.github.io/draggable" title="Visit Draggable website">
-  <img src="https://user-images.githubusercontent.com/643944/30787041-84ccc1aa-a14e-11e7-982d-972978185636.png" alt="">
+  <img src="https://user-images.githubusercontent.com/643944/35602291-99e2c56e-0605-11e8-847f-95f1f6be1610.jpg" alt="">
 </a>
 
-<hr/>
-
-
-> **Warning:** Draggable is currently in beta
+> **Ready for production!** While Draggable may still be in beta, all existing features are stable and safe for consumption. Draggable will exit beta once all remaining features have been implemented.
 
 Get complete control over drag and drop behaviour with Draggable! Draggable abstracts
 native browser events into a comprehensive API to create a custom drag and drop experience.
diff --git a/examples/README.md b/examples/README.md
index f290934b..7c0dc69d 100644
--- a/examples/README.md
+++ b/examples/README.md
@@ -30,7 +30,7 @@ This folder contains the top-level page templates. The project uses Nunjucks for
 There is only one layout template, `views/templates/document.html`, which is extended by all of the `.html` files in the root of `/views`. These root views do the following:
 
 1. Import global components such as `Sidebar` and `PageHeader`
-2. Define the `ViewAttrs` for the view _(Page title, description, etc)_.
+2. Define the `ViewAttr` for the view _(Page title, description, etc)_.
 3. Import and render the content component for that view.
 
 ### `src/styles`
diff --git a/examples/package.json b/examples/package.json
index 7eeae9ac..e7d0d4b9 100644
--- a/examples/package.json
+++ b/examples/package.json
@@ -41,26 +41,26 @@
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.2",
     "babel-preset-shopify": "^16.2.0",
-    "browser-sync": "^2.23.5",
+    "browser-sync": "^2.23.6",
     "cssnano": "^3.10.0",
     "cssnano-preset-advanced": "^4.0.0-rc.2",
-    "eslint": "^4.16.0",
-    "eslint-plugin-prettier": "^2.5.0",
+    "eslint": "^4.17.0",
+    "eslint-plugin-prettier": "^2.6.0",
     "eslint-plugin-shopify": "^19.0.0",
     "gulp": "gulpjs/gulp.git#4.0",
-    "gulp-cli": "^2.0.0",
+    "gulp-cli": "^2.0.1",
     "gulp-data": "^1.3.1",
     "gulp-htmlmin": "^4.0.0",
     "gulp-nunjucks": "^3.1.1",
     "gulp-postcss": "^7.0.1",
     "gulp-sass": "^3.1.0",
-    "gulp-sourcemaps": "^2.6.3",
+    "gulp-sourcemaps": "^2.6.4",
     "nunjucks": "^3.0.1",
     "prettier": "^1.10.2",
     "prettier-stylelint": "^0.4.2",
     "stylelint": "^8.4.0",
     "stylelint-config-shopify": "^4.0.0",
     "webpack": "^3.10.0",
-    "webpack-bundle-analyzer": "^2.9.2"
+    "webpack-bundle-analyzer": "^2.10.0"
   }
 }
diff --git a/examples/postcss.config.js b/examples/postcss.config.js
index a40b33e8..2f3d6b6c 100644
--- a/examples/postcss.config.js
+++ b/examples/postcss.config.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 module.exports = () => ({
   plugins: {
     autoprefixer: {},
@@ -8,3 +9,4 @@ module.exports = () => ({
     },
   },
 });
+/* eslint-enable no-undef */
diff --git a/examples/src/components/Analytics/index.js b/examples/src/components/Analytics/index.js
new file mode 100644
index 00000000..2f8fc111
--- /dev/null
+++ b/examples/src/components/Analytics/index.js
@@ -0,0 +1,38 @@
+function gtag() {
+  window.dataLayer.push(arguments); // eslint-disable-line prefer-rest-params
+}
+
+export default class Analytics {
+  constructor(ua) {
+    this.ua = ua;
+  }
+
+  init() {
+    if (location.hostname === 'localhost' || location.hostname === '127.0.0.1') {
+      console.log('🤖 Analytics disabled in local development.');
+      return;
+    }
+
+    this._appendScript()
+      .then(() => {
+        window.dataLayer = window.dataLayer || [];
+
+        gtag('js', new Date());
+        gtag('config', this.ua);
+
+        return window.dataLayer;
+      })
+      .catch((error) => console.warn(error));
+  }
+
+  _appendScript() {
+    return new Promise((resolve, reject) => {
+      const script = document.createElement('script');
+      document.body.appendChild(script);
+      script.onload = resolve;
+      script.onerror = reject;
+      script.async = true;
+      script.src = `https://www.googletagmanager.com/gtag/js?id=${this.ua}`;
+    });
+  }
+}
diff --git a/examples/src/components/Block/Block.scss b/examples/src/components/Block/Block.scss
index 197a0111..e56b0e5b 100644
--- a/examples/src/components/Block/Block.scss
+++ b/examples/src/components/Block/Block.scss
@@ -3,8 +3,8 @@
 /// Block
 ////
 
-@import 'utilities/shared/functions';
-@import 'utilities/shared/layout';
+@import 'utils/shared/functions';
+@import 'utils/shared/layout';
 
 .BlockWrapper {
   .Block {
@@ -37,3 +37,5 @@
     margin-top: -0.1em;
   }
 }
+
+@import 'variants';
diff --git a/examples/src/components/Block/variants.scss b/examples/src/components/Block/variants.scss
index 9cf25a21..2c440e6b 100644
--- a/examples/src/components/Block/variants.scss
+++ b/examples/src/components/Block/variants.scss
@@ -3,15 +3,15 @@
 /// Block variants
 ////
 
-@import 'utilities/shared/layout';
+@import 'utils/shared/layout';
 @import 'components/Patterns/props';
 
 ///
 /// BlockLayout
 .BlockLayout--typeFlex,
 .BlockLayout--typeFloat {
-  margin-top: -#{get-border(thin)};
-  margin-left: -#{get-border(thin)};
+  margin-top: -(get-border(thin));
+  margin-left: -(get-border(thin));
 
   > .BlockWrapper {
     margin-top: get-border(thin);
@@ -24,8 +24,8 @@
   }
 
   @media screen and (min-width: get-breakpoint(tablet)) {
-    margin-top: -#{get-border()};
-    margin-left: -#{get-border()};
+    margin-top: -(get-border());
+    margin-left: -(get-border());
 
     > .BlockWrapper {
       margin-top: get-border();
diff --git a/examples/src/components/Brand/Brand.html b/examples/src/components/Brand/Brand.html
index bee443f1..5b590cd7 100644
--- a/examples/src/components/Brand/Brand.html
+++ b/examples/src/components/Brand/Brand.html
@@ -1,9 +1,9 @@
 <a href="./" class="Brand" title="Return to Examples index">
   <div class="SvgContainer BrandLogo">
-    {% include './Logo.html' %}
+    {% include 'components/Brand/Logo.html' %}
   </div>
 
   <div class="SvgContainer BrandWordmark">
-    {% include './Wordmark.html' %}
+    {% include 'components/Brand/Wordmark.html' %}
   </div>
 </a>
diff --git a/examples/src/components/Brand/Brand.scss b/examples/src/components/Brand/Brand.scss
index 4b04c9c7..4f128156 100644
--- a/examples/src/components/Brand/Brand.scss
+++ b/examples/src/components/Brand/Brand.scss
@@ -3,10 +3,8 @@
 /// Brand
 ////
 
-@import './keyframes';
-
-$logo-width: 4.6rem;
-$wordmark-width: 17.6rem;
+@import 'keyframes';
+@import 'props';
 
 .Brand {
   cursor: get-cursor(rock);
@@ -21,7 +19,7 @@ $wordmark-width: 17.6rem;
   }
 
   @media screen and (min-width: get-breakpoint(desktop)) {
-    margin-left: -#{get-spacing(tightest)};
+    margin-left: -(get-spacing(tightest));
   }
 }
 
@@ -61,9 +59,9 @@ $wordmark-width: 17.6rem;
 }
 
 // --- Interaction
-.Brand:hover {
+.Brand {
   &:hover {
-    @include logo-hover;
+    @include logo-animation;
   }
 
   &:active {
diff --git a/examples/src/components/Brand/keyframes.scss b/examples/src/components/Brand/keyframes.scss
index c820f706..978d9ebc 100644
--- a/examples/src/components/Brand/keyframes.scss
+++ b/examples/src/components/Brand/keyframes.scss
@@ -3,6 +3,18 @@
 /// Brand keyframes
 ////
 
+@import 'props';
+
+@keyframes logo-outline-bounce {
+  25% {
+    transform: translate(-$logo-bounce-offset, $logo-bounce-offset);
+  }
+
+  75% {
+    transform: translate($logo-bounce-offset, -$logo-bounce-offset);
+  }
+}
+
 @keyframes logo-rainbow-mask {
   0% {
     fill: get-color(coal, dark);
@@ -74,37 +86,3 @@
     fill: get-color(brand, red);
   }
 }
-
-@keyframes logo-outline-bounce {
-  25% {
-    transform: translate(-0.1rem, 0.1rem);
-  }
-
-  75% {
-    transform: translate(0.1rem, -0.1rem);
-  }
-}
-
-///
-/// Animation mixin
-@mixin logo-hover {
-  .Wave--colorMask {
-    animation: logo-rainbow-mask get-duration(slow) get-easing() infinite;
-  }
-
-  .Wave--colorPurple {
-    animation: logo-rainbow-purple get-duration(slow) get-easing() infinite;
-  }
-
-  .Wave--colorRed {
-    animation: logo-rainbow-red get-duration(slow) get-easing() infinite;
-  }
-
-  .Wave--colorOrange {
-    animation: logo-rainbow-orange get-duration(slow) get-easing() infinite;
-  }
-
-  .Hand {
-    animation: logo-outline-bounce get-duration(slow) linear infinite;
-  }
-}
diff --git a/examples/src/components/Brand/props.scss b/examples/src/components/Brand/props.scss
new file mode 100644
index 00000000..cc848fac
--- /dev/null
+++ b/examples/src/components/Brand/props.scss
@@ -0,0 +1,30 @@
+////
+/// Components
+/// Brand props
+////
+
+$logo-width: 4.6rem;
+$wordmark-width: 17.6rem;
+$logo-bounce-offset: 0.1rem;
+
+@mixin logo-animation {
+  .Wave--colorMask {
+    animation: logo-rainbow-mask get-duration(slow) get-easing() infinite;
+  }
+
+  .Wave--colorPurple {
+    animation: logo-rainbow-purple get-duration(slow) get-easing() infinite;
+  }
+
+  .Wave--colorRed {
+    animation: logo-rainbow-red get-duration(slow) get-easing() infinite;
+  }
+
+  .Wave--colorOrange {
+    animation: logo-rainbow-orange get-duration(slow) get-easing() infinite;
+  }
+
+  .Hand {
+    animation: logo-outline-bounce get-duration(slow) linear infinite;
+  }
+}
diff --git a/examples/src/components/Document/Analytics.html b/examples/src/components/Document/Analytics.html
deleted file mode 100644
index f083341f..00000000
--- a/examples/src/components/Document/Analytics.html
+++ /dev/null
@@ -1,13 +0,0 @@
-{% macro render(trackingId) %}
-  {% if trackingId %}
-    <script src="https://www.googletagmanager.com/gtag/js?id={{trackingId}}" async></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag() {
-        dataLayer.push(arguments)
-      };
-      gtag('js', new Date());
-      gtag('config', '{{trackingId}}');
-    </script>
-  {% endif %}
-{% endmacro %}
diff --git a/examples/src/components/Document/Head.html b/examples/src/components/Document/Head.html
index d095c3f2..d02e3f59 100644
--- a/examples/src/components/Document/Head.html
+++ b/examples/src/components/Document/Head.html
@@ -1,19 +1,17 @@
-{% import './SocialShare.html' as SocialShare %}
-{% import './Analytics.html' as Analytics %}
+{% import 'components/Document/SocialShare.html' as SocialShare %}
 
-{% macro render(ViewAttrs) %}
+{% macro render(ViewAttr) %}
   {% set url = 'https://shopify.github.io/draggable' %}
-  {% set trackingId = 'UA-107063633-1' %}
   {% set siteName = 'Draggable JS Examples' %}
   {% set titleSep = ' | ' %}
 
-  {% set parentFragment = ViewAttrs.parent + titleSep if ViewAttrs.parent %}
-  {% set childFragment = ViewAttrs.child + titleSep if ViewAttrs.child %}
-  {% set title = [parentFragment, childFragment, siteName] %}
+  {% set parentFragment = ViewAttr.parent + titleSep if ViewAttr.parent %}
+  {% set childFragment = ViewAttr.child + titleSep if ViewAttr.child %}
+  {% set titleText = [parentFragment, childFragment, siteName] %}
 
   {% set HeadAttr = {
     siteName: siteName,
-    title: ViewAttrs.subheading,
+    title: ViewAttr.subheading,
     description: 'Draggable is a lightweight, responsive, modern drag and drop JavaScript library – the ideal choice for adding slick native-feeling drag and drop behaviour to your web apps.',
     siteUrl: url,
     socialImg: url + '/assets/img/social/draggable-social.png',
@@ -25,23 +23,20 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
-    <title>{{ title | join('') | trim }}</title>
+    <title>{{ titleText | join('') | trim }}</title>
 
     <meta name="description" content="{{ HeadAttr.description }}">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="format-detection" content="telephone=no">
 
     {{ SocialShare.render(HeadAttr) }}
+    {% include 'components/Document/Favicon.html' %}
 
-    {% include './Favicon.html' %}
-
-    <link rel="manifest" href="manifest.json">
+    <link rel="manifest" href="{{ url }}/manifest.json">
     <link rel="stylesheet" href="assets/css/examples-app.css">
 
     <script src="assets/js/examples-runtime.js" defer></script>
     <script src="assets/js/examples-vendor.js" defer></script>
     <script src="assets/js/examples-app.js" defer></script>
-
-    {{ Analytics.render(trackingId) }}
   </head>
 {% endmacro %}
diff --git a/examples/src/components/Hamburger/Hamburger.scss b/examples/src/components/Hamburger/Hamburger.scss
index eed8f27c..eccd5f7c 100644
--- a/examples/src/components/Hamburger/Hamburger.scss
+++ b/examples/src/components/Hamburger/Hamburger.scss
@@ -3,9 +3,9 @@
 /// Hamburger
 ////
 
-@import 'utilities/shared/layout';
-@import './props';
-@import './keyframes';
+@import 'utils/shared/layout';
+@import 'keyframes';
+@import 'props';
 
 .Hamburger {
   z-index: get-z-index(hamburger);
diff --git a/examples/src/components/Hamburger/keyframes.scss b/examples/src/components/Hamburger/keyframes.scss
index cf09d6d8..2d7612b8 100644
--- a/examples/src/components/Hamburger/keyframes.scss
+++ b/examples/src/components/Hamburger/keyframes.scss
@@ -3,6 +3,8 @@
 /// Hamburger keyframes
 ////
 
+@import 'props';
+
 @keyframes FadeActivator {
   to {
     opacity: 1;
diff --git a/examples/src/components/Handle/DragHandle.scss b/examples/src/components/Handle/DragHandle.scss
index fbd352e7..e2b5c314 100644
--- a/examples/src/components/Handle/DragHandle.scss
+++ b/examples/src/components/Handle/DragHandle.scss
@@ -3,7 +3,7 @@
 /// DragHandle
 ////
 
-@import './props';
+@import 'props';
 
 .DragHandle {
   position: relative;
diff --git a/examples/src/components/Handle/NopeHandle.scss b/examples/src/components/Handle/NopeHandle.scss
index 2ab9e360..3f9898e6 100644
--- a/examples/src/components/Handle/NopeHandle.scss
+++ b/examples/src/components/Handle/NopeHandle.scss
@@ -3,7 +3,7 @@
 /// NopeHandle
 ////
 
-@import './props';
+@import 'props';
 
 .NopeHandle {
   position: relative;
diff --git a/examples/src/components/Heading/Heading.scss b/examples/src/components/Heading/Heading.scss
index baf2fb13..f1e7b9f3 100644
--- a/examples/src/components/Heading/Heading.scss
+++ b/examples/src/components/Heading/Heading.scss
@@ -3,7 +3,7 @@
 /// Heading
 ////
 
-@import './props';
+@import 'props';
 
 .Heading {
   @include Heading;
@@ -12,3 +12,5 @@
 .Subheading {
   @include Subheading;
 }
+
+@import 'variants';
diff --git a/examples/src/components/Heading/variants.scss b/examples/src/components/Heading/variants.scss
index 1cb1a53b..094fd0aa 100644
--- a/examples/src/components/Heading/variants.scss
+++ b/examples/src/components/Heading/variants.scss
@@ -3,7 +3,7 @@
 /// Heading variants
 ////
 
-@import './props';
+@import 'props';
 
 ///
 /// Heading sizes
diff --git a/examples/src/components/Link/Link.scss b/examples/src/components/Link/Link.scss
index 64139e83..51e89543 100644
--- a/examples/src/components/Link/Link.scss
+++ b/examples/src/components/Link/Link.scss
@@ -3,8 +3,10 @@
 /// Link
 ////
 
-@import './props';
+@import 'props';
 
 .Link {
   @include Link;
 }
+
+@import 'variants';
diff --git a/examples/src/components/MobileNav/index.js b/examples/src/components/MobileNav/index.js
index d77a73e6..a6b1d8d9 100644
--- a/examples/src/components/MobileNav/index.js
+++ b/examples/src/components/MobileNav/index.js
@@ -1,4 +1,4 @@
-import {debounce, debounceDuration} from '../../scripts/helpers/debounce';
+import debounce, {debounceDuration} from '../../scripts/utils/debounce';
 
 // equal to `get-breakpoint()` base value
 const MAX_WIDTH = 960;
@@ -7,18 +7,18 @@ const Attrs = {
   controls: 'aria-controls',
   expanded: 'aria-expanded',
   hidden: 'aria-hidden',
-  scroll: 'data-scroll-lock',
 };
 
 export default class MobileNav {
   constructor(activator) {
     this.activator = activator;
+    this.target = document.getElementById(activator.getAttribute(Attrs.controls));
+  }
 
-    const controlsTarget = activator.getAttribute(Attrs.controls);
-    this.target = document.getElementById(controlsTarget);
-
+  init() {
     if (!this.target) {
-      throw Error('The activator must have a valid `aria-controls` value. Target not found.');
+      console.error('The activator must have a valid `aria-controls` value. Target not found.');
+      return;
     }
 
     this._setState();
@@ -33,13 +33,13 @@ export default class MobileNav {
   }
 
   expand(widthExceeded = false) {
-    const scrollLock = !widthExceeded;
+    const lockScrolling = !widthExceeded;
     const willExpand = widthExceeded ? 'undefined' : 'false';
 
     this.expanded = true;
     this.activator.setAttribute(Attrs.expanded, 'true');
     this.target.setAttribute(Attrs.hidden, willExpand);
-    document.documentElement.setAttribute(Attrs.scroll, scrollLock);
+    document.documentElement.dataset.scrollLock = lockScrolling;
   }
 
   collapse() {
@@ -50,7 +50,7 @@ export default class MobileNav {
     this.expanded = false;
     this.activator.setAttribute(Attrs.expanded, 'false');
     this.target.setAttribute(Attrs.hidden, 'true');
-    document.documentElement.setAttribute(Attrs.scroll, 'false');
+    document.documentElement.dataset.scrollLock = false;
   }
 
   toggle() {
diff --git a/examples/src/components/Navigation/NavList.html b/examples/src/components/Navigation/NavList.html
index ebf37c78..d7d35fa4 100644
--- a/examples/src/components/Navigation/NavList.html
+++ b/examples/src/components/Navigation/NavList.html
@@ -1,8 +1,8 @@
-{% macro render(ViewAttrs, SubNav) %}
+{% macro render(ViewAttr, SubNav) %}
   {% for Section, Links in SubNav %}
     {% set listClasses = ['NavList'] %}
     {% set listClasses = (
-      listClasses.push('NavList--isCurrent') if ViewAttrs.parent == Section, listClasses
+      listClasses.push('NavList--isCurrent') if ViewAttr.parent == Section, listClasses
     ) %}
 
     <ul class="{{ listClasses | join(' ') | trim }}">
@@ -14,7 +14,7 @@
         {% set linkHref = Link | lower | replace(' ', '-') %}
         {% set linkClasses = ['NavLink'] %}
         {% set linkClasses = (
-          linkClasses.push('NavLink--isCurrent') if ViewAttrs.child == Link, linkClasses
+          linkClasses.push('NavLink--isCurrent') if ViewAttr.child == Link, linkClasses
         ) %}
         {% set linkClasses = linkClasses | join(' ') | trim %}
 
diff --git a/examples/src/components/Navigation/Navigation.html b/examples/src/components/Navigation/Navigation.html
index da09e21f..b5eae1b9 100644
--- a/examples/src/components/Navigation/Navigation.html
+++ b/examples/src/components/Navigation/Navigation.html
@@ -1,9 +1,9 @@
-{% import './NavList.html' as NavList %}
+{% import 'components/Navigation/NavList.html' as NavList %}
 
-{% macro render(ViewAttrs, DataPages) %}
+{% macro render(ViewAttr, DataPages) %}
   <nav class="Navigation">
     {% for SubNav in DataPages %}
-      {{ NavList.render(ViewAttrs, SubNav) }}
+      {{ NavList.render(ViewAttr, SubNav) }}
     {% endfor %}
   </nav>
 {% endmacro %}
diff --git a/examples/src/components/Page/Page.scss b/examples/src/components/Page/Page.scss
index 253a312f..20ae7ae6 100644
--- a/examples/src/components/Page/Page.scss
+++ b/examples/src/components/Page/Page.scss
@@ -3,7 +3,7 @@
 /// Page
 ////
 
-@import 'utilities/shared/layout';
+@import 'utils/shared/layout';
 
 html {
   @include scroll-lock;
diff --git a/examples/src/components/PaperStack/PaperStack.scss b/examples/src/components/PaperStack/PaperStack.scss
index 2f40f8dd..d92ea5f6 100644
--- a/examples/src/components/PaperStack/PaperStack.scss
+++ b/examples/src/components/PaperStack/PaperStack.scss
@@ -3,8 +3,8 @@
 /// PaperStack
 ////
 
-@import 'utilities/shared/layout';
-@import './props';
+@import 'utils/shared/layout';
+@import 'props';
 
 .PaperStack {
   position: relative;
@@ -73,9 +73,9 @@
   .PaperStackContent::after {
     content: '';
     position: absolute;
-    right: -#{paper-stack-shadow(offset)};
+    right: -(paper-stack-shadow(offset));
     bottom: paper-stack-shadow(bottom);
-    left: -#{paper-stack-shadow(offset)};
+    left: -(paper-stack-shadow(offset));
     display: block;
     height: paper-stack-shadow(height);
     background-color: get-color(coal, dark);
@@ -110,3 +110,5 @@
     @include paper-stack-item-offset(desktop);
   }
 }
+
+@import 'variants';
diff --git a/examples/src/components/PaperStack/variants.scss b/examples/src/components/PaperStack/variants.scss
index f2f90c70..cd72383f 100644
--- a/examples/src/components/PaperStack/variants.scss
+++ b/examples/src/components/PaperStack/variants.scss
@@ -3,8 +3,8 @@
 /// PaperStack variants
 ////
 
-@import './props';
 @import 'components/Patterns/props';
+@import 'props';
 
 ///
 /// Draggable layout
diff --git a/examples/src/components/Patterns/Patterns.scss b/examples/src/components/Patterns/Patterns.scss
index 8118d2a7..4e9f4c17 100644
--- a/examples/src/components/Patterns/Patterns.scss
+++ b/examples/src/components/Patterns/Patterns.scss
@@ -3,9 +3,9 @@
 /// Patterns
 ////
 
-@import 'utilities/shared/layout';
-@import './props';
-@import './keyframes';
+@import 'utils/shared/layout';
+@import 'keyframes';
+@import 'props';
 
 :root {
   --pattern-bg-color: white;
diff --git a/examples/src/components/Patterns/keyframes.scss b/examples/src/components/Patterns/keyframes.scss
index 0a952b19..7903a9e2 100644
--- a/examples/src/components/Patterns/keyframes.scss
+++ b/examples/src/components/Patterns/keyframes.scss
@@ -3,7 +3,7 @@
 /// Patterns keyframes
 ////
 
-@import './props';
+@import 'props';
 
 @keyframes placed {
   to {
diff --git a/examples/src/components/Patterns/props.scss b/examples/src/components/Patterns/props.scss
index 5854fb8a..a46e2ec5 100644
--- a/examples/src/components/Patterns/props.scss
+++ b/examples/src/components/Patterns/props.scss
@@ -3,7 +3,7 @@
 /// Pattern props
 ////
 
-@import 'utilities/shared/layout';
+@import 'utils/shared/layout';
 
 $stripes-bg-size: 0.8rem;
 $halftone-bg-size: 1.2rem;
diff --git a/examples/src/components/PillSwitch/PillSwitch.scss b/examples/src/components/PillSwitch/PillSwitch.scss
index 5ee4edc5..c8d9abeb 100644
--- a/examples/src/components/PillSwitch/PillSwitch.scss
+++ b/examples/src/components/PillSwitch/PillSwitch.scss
@@ -3,9 +3,9 @@
 /// PillSwitch
 ////
 
-@import 'utilities/shared/layout';
-@import './props';
+@import 'utils/shared/layout';
 @import 'components/Patterns/props';
+@import 'props';
 
 .PillSwitch {
   position: relative;
@@ -100,3 +100,5 @@
     @include visible(false);
   }
 }
+
+@import 'variants';
diff --git a/examples/src/components/PillSwitch/props.scss b/examples/src/components/PillSwitch/props.scss
index 07cbe33b..2cfc8867 100644
--- a/examples/src/components/PillSwitch/props.scss
+++ b/examples/src/components/PillSwitch/props.scss
@@ -38,8 +38,8 @@ $pill-switch-data: (
 ///
 /// Mixins
 @mixin pill-switch-track-layout($breakpoint: 'base') {
-  margin-top: -#{pill-switch(radius, $breakpoint)};
-  margin-left: -#{pill-switch(track-width, $breakpoint) / 2};
+  margin-top: -(pill-switch(radius, $breakpoint));
+  margin-left: -(pill-switch(track-width, $breakpoint) / 2);
   width: pill-switch(track-width, $breakpoint);
   height: pill-switch(control-size, $breakpoint);
   border-radius: pill-switch(radius, $breakpoint);
diff --git a/examples/src/components/Plate/Plate.scss b/examples/src/components/Plate/Plate.scss
index b3b129de..2bbf4303 100644
--- a/examples/src/components/Plate/Plate.scss
+++ b/examples/src/components/Plate/Plate.scss
@@ -3,9 +3,9 @@
 /// Plate
 ////
 
-@import 'utilities/shared/layout';
-@import './props';
-@import './keyframes';
+@import 'utils/shared/layout';
+@import 'keyframes';
+@import 'props';
 
 .PlateWrapper {
   @include centered-width($plate-max-size);
@@ -59,3 +59,5 @@
     margin-bottom: 0;
   }
 }
+
+@import 'variants';
diff --git a/examples/src/components/Plate/index.js b/examples/src/components/Plate/index.js
index 42a14540..4e28dc21 100644
--- a/examples/src/components/Plate/index.js
+++ b/examples/src/components/Plate/index.js
@@ -1,4 +1,4 @@
-import flipSign from '../../scripts/helpers/flip-sign';
+import flipSign from '../../scripts/utils/flip-sign';
 
 const scaleFactor = 0.725;
 const translateFactors = {
diff --git a/examples/src/components/Sidebar/Sidebar.html b/examples/src/components/Sidebar/Sidebar.html
index a7e6c278..cd0cdad7 100644
--- a/examples/src/components/Sidebar/Sidebar.html
+++ b/examples/src/components/Sidebar/Sidebar.html
@@ -1,12 +1,12 @@
-{% import '../Navigation/Navigation.html' as Navigation %}
+{% import 'components/Navigation/Navigation.html' as Navigation %}
 
-{% macro render(ViewAttrs, DataPages) %}
+{% macro render(ViewAttr, DataPages) %}
   <aside id="Sidebar" class="Sidebar" aria-hidden="true">
     <header class="SidebarHeader">
-      {% include '../Brand/Brand.html' %}
+      {% include 'components/Brand/Brand.html' %}
     </header>
 
-    {{ Navigation.render(ViewAttrs, DataPages) }}
+    {{ Navigation.render(ViewAttr, DataPages) }}
 
     <footer class="SidebarFooter">
       <p class="LegalText"><a href="https://shopify.github.io/draggable/" class="Link Link--typeDark" title="Visit Draggable JS">draggable.js</a> was developed by <a href="https://github.com/tsov" class="Link Link--noWrap" title="Github: tsov">Max Hoffmann</a> and <a href="https://github.com/beefchimi" class="Link Link--noWrap" title="Github: beefchimi">Curtis Dulmage</a>.</p>
diff --git a/examples/src/components/Sidebar/Sidebar.scss b/examples/src/components/Sidebar/Sidebar.scss
index 0f6b0b47..9cf81eb9 100644
--- a/examples/src/components/Sidebar/Sidebar.scss
+++ b/examples/src/components/Sidebar/Sidebar.scss
@@ -3,7 +3,7 @@
 /// Sidebar
 ////
 
-@import 'utilities/shared/layout';
+@import 'utils/shared/layout';
 @import 'components/MobileNav/props';
 
 .Sidebar {
diff --git a/examples/src/components/StackedList/StackedList.scss b/examples/src/components/StackedList/StackedList.scss
index e6ecd926..ce03d551 100644
--- a/examples/src/components/StackedList/StackedList.scss
+++ b/examples/src/components/StackedList/StackedList.scss
@@ -3,12 +3,12 @@
 /// StackedList
 ////
 
-@import 'utilities/shared/layout';
-@import 'utilities/shared/typography';
-@import './props';
+@import 'utils/shared/layout';
+@import 'utils/shared/typography';
 @import 'components/Handle/props';
 @import 'components/Heading/props';
 @import 'components/Patterns/props';
+@import 'props';
 
 .StackedListWrapper {
   @include stripes-bg;
@@ -138,3 +138,5 @@
       opacity get-duration(fast) get-easing();
   }
 }
+
+@import 'variants';
diff --git a/examples/src/components/StackedList/variants.scss b/examples/src/components/StackedList/variants.scss
index 29a46590..aff07910 100644
--- a/examples/src/components/StackedList/variants.scss
+++ b/examples/src/components/StackedList/variants.scss
@@ -3,9 +3,9 @@
 /// StackedList variants
 ////
 
-@import './props';
 @import 'components/Handle/props';
 @import 'components/Patterns/props';
+@import 'props';
 
 ///
 /// Size variants
diff --git a/examples/src/content/Draggable/DragEvents/DragEvents.html b/examples/src/content/Draggable/DragEvents/DragEvents.html
index 3c998a59..38cc6e97 100644
--- a/examples/src/content/Draggable/DragEvents/DragEvents.html
+++ b/examples/src/content/Draggable/DragEvents/DragEvents.html
@@ -1,4 +1,4 @@
-{% import '../../../components/PillSwitch/PillSwitch.html' as PillSwitch %}
+{% import 'components/PillSwitch/PillSwitch.html' as PillSwitch %}
 
 {% macro render(id) %}
   <section id="{{ id }}" class="{{ id }}">
diff --git a/examples/src/content/Draggable/DragEvents/index.js b/examples/src/content/Draggable/DragEvents/index.js
index ad4a8760..35162676 100644
--- a/examples/src/content/Draggable/DragEvents/index.js
+++ b/examples/src/content/Draggable/DragEvents/index.js
@@ -69,7 +69,7 @@ export default function DragEvents() {
     // as that would be very expensive.
     // Instead, we look at the mouse position, which we can ballpark as being
     // close to the center of the draggable element.
-    // We need to look at both the X and Y offset and determin which is the higher number,
+    // We need to look at both the X and Y offset and determine which is the higher number.
     // That way we can drag outside of the container and still have the
     // draggable element move appropriately.
     const offsetX = calcOffset(evt.sensorEvent.clientX - initialMousePosition.x);
diff --git a/examples/src/content/Droppable/OneAndOnly/OneAndOnly.html b/examples/src/content/Droppable/UniqueDropzone/UniqueDropzone.html
similarity index 97%
rename from examples/src/content/Droppable/OneAndOnly/OneAndOnly.html
rename to examples/src/content/Droppable/UniqueDropzone/UniqueDropzone.html
index 49ecf68f..4cae1005 100644
--- a/examples/src/content/Droppable/OneAndOnly/OneAndOnly.html
+++ b/examples/src/content/Droppable/UniqueDropzone/UniqueDropzone.html
@@ -1,4 +1,4 @@
-{% import '../../../components/Block/Block.html' as Block %}
+{% import 'components/Block/Block.html' as Block %}
 
 {% macro render(id) %}
   <section id="{{ id }}" class="{{ id }}">
diff --git a/examples/src/content/Droppable/OneAndOnly/OneAndOnly.scss b/examples/src/content/Droppable/UniqueDropzone/UniqueDropzone.scss
similarity index 96%
rename from examples/src/content/Droppable/OneAndOnly/OneAndOnly.scss
rename to examples/src/content/Droppable/UniqueDropzone/UniqueDropzone.scss
index c7f4065a..505f03ca 100644
--- a/examples/src/content/Droppable/OneAndOnly/OneAndOnly.scss
+++ b/examples/src/content/Droppable/UniqueDropzone/UniqueDropzone.scss
@@ -1,16 +1,15 @@
 ////
 /// Content
-/// OneAndOnly
+/// UniqueDropzone
 ////
 
-@import 'utilities/shared/functions';
-@import 'components/Patterns/props';
+@import 'utils/shared/functions';
 
 $grid-area-names: a, b, c, d, e, f, g, h;
 $grid-rows: 6;
 $grid-columns: 4;
 
-.OneAndOnly {
+.UniqueDropzone {
   .BlockLayout {
     .BlockWrapper {
       .Block:nth-child(1n+3):not(.draggable-source--is-dragging) {
diff --git a/examples/src/content/Droppable/OneAndOnly/index.js b/examples/src/content/Droppable/UniqueDropzone/index.js
similarity index 86%
rename from examples/src/content/Droppable/OneAndOnly/index.js
rename to examples/src/content/Droppable/UniqueDropzone/index.js
index e6061476..a48dadec 100644
--- a/examples/src/content/Droppable/OneAndOnly/index.js
+++ b/examples/src/content/Droppable/UniqueDropzone/index.js
@@ -2,8 +2,8 @@
 import Droppable from 'lib/droppable';
 /* eslint-enable import/no-extraneous-dependencies, import/no-unresolved */
 
-export default function OneAndOnly() {
-  const containers = document.querySelectorAll('#OneAndOnly .BlockLayout');
+export default function UniqueDropzone() {
+  const containers = document.querySelectorAll('#UniqueDropzone .BlockLayout');
 
   if (containers.length === 0) {
     return false;
diff --git a/examples/src/content/Home/Home.html b/examples/src/content/Home/Home.html
index 416409c6..d5a649b2 100644
--- a/examples/src/content/Home/Home.html
+++ b/examples/src/content/Home/Home.html
@@ -1,4 +1,4 @@
-{% import '../../components/Plate/Plate.html' as Plate %}
+{% import 'components/Plate/Plate.html' as Plate %}
 
 {% macro render(id) %}
   <section id="{{ id }}" class="{{ id }}">
diff --git a/examples/src/content/Plugins/Collidable/Collidable.html b/examples/src/content/Plugins/Collidable/Collidable.html
index 57439173..c2981f1e 100644
--- a/examples/src/content/Plugins/Collidable/Collidable.html
+++ b/examples/src/content/Plugins/Collidable/Collidable.html
@@ -1,4 +1,4 @@
-{% import '../../../components/Block/Block.html' as Block %}
+{% import 'components/Block/Block.html' as Block %}
 
 {% macro render(id) %}
   <section id="{{ id }}" class="{{ id }}">
@@ -15,6 +15,7 @@
         {{ Block.render('drop', {index: 4, type: 'Hollow'}) }}
       </div>
 
+      {# If we ever implement a "constrain to container" feature, these can be removed #}
       <div class="CollidableWall CollidableWall--itemTop CollidableObstacle"></div>
       <div class="CollidableWall CollidableWall--itemRight CollidableObstacle"></div>
       <div class="CollidableWall CollidableWall--itemBottom CollidableObstacle"></div>
diff --git a/examples/src/content/Plugins/Collidable/Collidable.scss b/examples/src/content/Plugins/Collidable/Collidable.scss
index 7adf02dc..3c7f44d9 100644
--- a/examples/src/content/Plugins/Collidable/Collidable.scss
+++ b/examples/src/content/Plugins/Collidable/Collidable.scss
@@ -3,7 +3,7 @@
 /// Collidable
 ////
 
-@import './props';
+@import 'props';
 
 .Collidable {
   .BlockLayout--typePositioned {
diff --git a/examples/src/content/Plugins/Collidable/props.scss b/examples/src/content/Plugins/Collidable/props.scss
index df4a7ee1..031d4ba8 100644
--- a/examples/src/content/Plugins/Collidable/props.scss
+++ b/examples/src/content/Plugins/Collidable/props.scss
@@ -3,7 +3,7 @@
 /// Collidable props
 ////
 
-@import 'utilities/shared/functions';
+@import 'utils/shared/functions';
 
 $collidable-container-height: 60rem;
 $collidable-container-height-tablet: 64rem;
diff --git a/examples/src/content/Plugins/Snappable/Snappable.html b/examples/src/content/Plugins/Snappable/Snappable.html
index f3dfabc6..2dc279ec 100644
--- a/examples/src/content/Plugins/Snappable/Snappable.html
+++ b/examples/src/content/Plugins/Snappable/Snappable.html
@@ -1,10 +1,10 @@
-{% import '../../../components/Block/Block.html' as Block %}
+{% import 'components/Block/Block.html' as Block %}
 
 {% macro render(id) %}
   <section id="{{ id }}" class="{{ id }}">
     <article class="BlockLayout BlockLayout--typeGrid">
       <div class="BlockWrapper">
-        {{ Block.render('snap',   {index: 1, draggable: true, classes: ['draggable-source']}) }}
+        {{ Block.render('snap', {index: 1, draggable: true, classes: ['draggable-source']}) }}
       </div>
       <div class="BlockWrapper">
         {{ Block.render('two', {index: 2}) }}
@@ -20,7 +20,7 @@
         {{ Block.render('five', {index: 5}) }}
       </div>
       <div class="BlockWrapper">
-        {{ Block.render('',   {index: 6, type: 'Stripes', classes: ['draggable-source']}) }}
+        {{ Block.render('', {index: 6, type: 'Stripes', classes: ['draggable-source']}) }}
       </div>
       <div class="BlockWrapper">
         {{ Block.render('crack', {index: 7, draggable: true, classes: ['draggable-source']}) }}
@@ -30,7 +30,7 @@
       </div>
 
       <div class="BlockWrapper">
-        {{ Block.render('',   {index: 9, type: 'Stripes', classes: ['draggable-source']}) }}
+        {{ Block.render('', {index: 9, type: 'Stripes', classes: ['draggable-source']}) }}
       </div>
       <div class="BlockWrapper">
         {{ Block.render('ten', {index: 10}) }}
@@ -39,7 +39,7 @@
         {{ Block.render('', {index: 11, type: 'Stripes', classes: ['draggable-source']}) }}
       </div>
       <div class="BlockWrapper">
-        {{ Block.render('pop',  {index: 12, draggable: true, classes: ['draggable-source']}) }}
+        {{ Block.render('pop', {index: 12, draggable: true, classes: ['draggable-source']}) }}
       </div>
 
       <div class="BlockWrapper">
diff --git a/examples/src/content/Plugins/Snappable/Snappable.scss b/examples/src/content/Plugins/Snappable/Snappable.scss
index 46f8c993..4c3ccca8 100644
--- a/examples/src/content/Plugins/Snappable/Snappable.scss
+++ b/examples/src/content/Plugins/Snappable/Snappable.scss
@@ -3,7 +3,7 @@
 /// Snappable
 ////
 
-@import 'utilities/shared/functions';
+@import 'utils/shared/functions';
 
 .Snappable {
   .BlockLayout--typeGrid {
diff --git a/examples/src/content/Plugins/SwapAnimation/SwapAnimation.html b/examples/src/content/Plugins/SwapAnimation/SwapAnimation.html
index d330eefe..e9311323 100644
--- a/examples/src/content/Plugins/SwapAnimation/SwapAnimation.html
+++ b/examples/src/content/Plugins/SwapAnimation/SwapAnimation.html
@@ -1,4 +1,4 @@
-{% import '../../../components/Block/Block.html' as Block %}
+{% import 'components/Block/Block.html' as Block %}
 
 {% macro render(id) %}
   <section id="{{ id }}" class="{{ id }}">
diff --git a/examples/src/content/Plugins/SwapAnimation/SwapAnimation.scss b/examples/src/content/Plugins/SwapAnimation/SwapAnimation.scss
index 11564dc4..fd40f3a2 100644
--- a/examples/src/content/Plugins/SwapAnimation/SwapAnimation.scss
+++ b/examples/src/content/Plugins/SwapAnimation/SwapAnimation.scss
@@ -3,8 +3,8 @@
 /// SwapAnimation
 ////
 
-@import 'utilities/shared/functions';
-@import 'content/shared/mixins';
+@import 'utils/shared/functions';
+@import 'utils/shared/layout';
 
 $swap-anim-block-name: unquote('Block');
 
diff --git a/examples/src/content/Sortable/MultipleContainers/MultipleContainers.html b/examples/src/content/Sortable/MultipleContainers/MultipleContainers.html
index d4cb7ca9..c3077ba0 100644
--- a/examples/src/content/Sortable/MultipleContainers/MultipleContainers.html
+++ b/examples/src/content/Sortable/MultipleContainers/MultipleContainers.html
@@ -1,4 +1,4 @@
-{% import '../../../components/StackedList/StackedListItem.html' as StackedListItem %}
+{% import 'components/StackedList/StackedListItem.html' as StackedListItem %}
 
 {% macro render(id) %}
   <section id="{{ id }}" class="{{ id }}">
diff --git a/examples/src/content/Sortable/MultipleContainers/index.js b/examples/src/content/Sortable/MultipleContainers/index.js
index c075dc29..b755da6e 100644
--- a/examples/src/content/Sortable/MultipleContainers/index.js
+++ b/examples/src/content/Sortable/MultipleContainers/index.js
@@ -1,7 +1,7 @@
 /* eslint-disable import/no-extraneous-dependencies, import/no-unresolved */
 import Sortable from 'lib/sortable';
 /* eslint-enable import/no-extraneous-dependencies, import/no-unresolved */
-import matchMirrorSize from '../../shared/match-mirror-size';
+import matchMirrorSize from '../../../scripts/utils/match-mirror-size';
 
 const Classes = {
   draggable: 'StackedListItem--isDraggable',
diff --git a/examples/src/content/Sortable/SimpleList/SimpleList.html b/examples/src/content/Sortable/SimpleList/SimpleList.html
index 8d97a30f..dfea9610 100644
--- a/examples/src/content/Sortable/SimpleList/SimpleList.html
+++ b/examples/src/content/Sortable/SimpleList/SimpleList.html
@@ -1,4 +1,4 @@
-{% import '../../../components/StackedList/StackedListItem.html' as StackedListItem %}
+{% import 'components/StackedList/StackedListItem.html' as StackedListItem %}
 
 {% macro render(id) %}
   <section id="{{ id }}" class="{{ id }}">
diff --git a/examples/src/content/Sortable/SimpleList/SimpleList.scss b/examples/src/content/Sortable/SimpleList/SimpleList.scss
index c385139d..18d48ba9 100644
--- a/examples/src/content/Sortable/SimpleList/SimpleList.scss
+++ b/examples/src/content/Sortable/SimpleList/SimpleList.scss
@@ -3,6 +3,9 @@
 /// Simple list
 ////
 
+@import 'utils/shared/layout';
+@import 'components/StackedList/props';
+
 .SimpleList {
   @include centered-width(columns(5));
 
diff --git a/examples/src/content/Sortable/Transformed/Transformed.html b/examples/src/content/Sortable/Transformed/Transformed.html
index 9e5c800b..3c6de0ae 100644
--- a/examples/src/content/Sortable/Transformed/Transformed.html
+++ b/examples/src/content/Sortable/Transformed/Transformed.html
@@ -1,4 +1,4 @@
-{% import '../../../components/PaperStack/PaperStackItem.html' as PaperStackItem %}
+{% import 'components/PaperStack/PaperStackItem.html' as PaperStackItem %}
 
 {% macro render(id) %}
   <section id="{{ id }}" class="{{ id }}">
diff --git a/examples/src/content/Swappable/Flexbox/Flexbox.html b/examples/src/content/Swappable/Flexbox/Flexbox.html
index 74936a11..e4ef3078 100644
--- a/examples/src/content/Swappable/Flexbox/Flexbox.html
+++ b/examples/src/content/Swappable/Flexbox/Flexbox.html
@@ -1,4 +1,4 @@
-{% import '../../../components/Block/Block.html' as Block %}
+{% import 'components/Block/Block.html' as Block %}
 
 {% macro render(id) %}
   <section id="{{ id }}" class="{{ id }}">
diff --git a/examples/src/content/Swappable/Flexbox/Flexbox.scss b/examples/src/content/Swappable/Flexbox/Flexbox.scss
index 1e4f6463..9f64df3c 100644
--- a/examples/src/content/Swappable/Flexbox/Flexbox.scss
+++ b/examples/src/content/Swappable/Flexbox/Flexbox.scss
@@ -3,8 +3,8 @@
 /// Flexbox
 ////
 
-@import 'utilities/shared/functions';
-@import 'content/shared/mixins';
+@import 'utils/shared/functions';
+@import 'utils/shared/layout';
 
 $flexbox-block-name: unquote('Block');
 
diff --git a/examples/src/content/Swappable/Floated/Floated.html b/examples/src/content/Swappable/Floated/Floated.html
index bfea2b89..eed3afb0 100644
--- a/examples/src/content/Swappable/Floated/Floated.html
+++ b/examples/src/content/Swappable/Floated/Floated.html
@@ -1,4 +1,4 @@
-{% import '../../../components/Block/Block.html' as Block %}
+{% import 'components/Block/Block.html' as Block %}
 
 {% macro render(id) %}
   <section id="{{ id }}" class="{{ id }}">
diff --git a/examples/src/content/Swappable/Floated/Floated.scss b/examples/src/content/Swappable/Floated/Floated.scss
index 0e14f45f..44f0ba64 100644
--- a/examples/src/content/Swappable/Floated/Floated.scss
+++ b/examples/src/content/Swappable/Floated/Floated.scss
@@ -3,8 +3,8 @@
 /// Floated
 ////
 
-@import 'utilities/shared/functions';
-@import 'content/shared/mixins';
+@import 'utils/shared/functions';
+@import 'utils/shared/layout';
 
 $floated-block-name: unquote('Block');
 
diff --git a/examples/src/content/Swappable/GridLayout/GridLayout.html b/examples/src/content/Swappable/GridLayout/GridLayout.html
index c61b0aca..3cec5c54 100644
--- a/examples/src/content/Swappable/GridLayout/GridLayout.html
+++ b/examples/src/content/Swappable/GridLayout/GridLayout.html
@@ -1,4 +1,4 @@
-{% import '../../../components/Block/Block.html' as Block %}
+{% import 'components/Block/Block.html' as Block %}
 
 {% macro render(id) %}
   <section id="{{ id }}" class="{{ id }}">
diff --git a/examples/src/content/Swappable/GridLayout/GridLayout.scss b/examples/src/content/Swappable/GridLayout/GridLayout.scss
index 84401a44..ca7ce56a 100644
--- a/examples/src/content/Swappable/GridLayout/GridLayout.scss
+++ b/examples/src/content/Swappable/GridLayout/GridLayout.scss
@@ -3,7 +3,7 @@
 /// Grid Layout
 ////
 
-@import 'utilities/shared/functions';
+@import 'utils/shared/functions';
 
 $grid-area-names: a, b, c, d, e, f, g;
 $grid-rows: 5;
diff --git a/examples/src/content/index.js b/examples/src/content/index.js
new file mode 100644
index 00000000..8f6b5903
--- /dev/null
+++ b/examples/src/content/index.js
@@ -0,0 +1,35 @@
+// Home page
+import Home from './Home';
+// Draggable
+import DragEvents from './Draggable/DragEvents';
+// Droppable
+import UniqueDropzone from './Droppable/UniqueDropzone';
+// Sortable
+import SimpleList from './Sortable/SimpleList';
+import Transformed from './Sortable/Transformed';
+import MultipleContainers from './Sortable/MultipleContainers';
+// Swappable
+import Flexbox from './Swappable/Flexbox';
+import Floated from './Swappable/Floated';
+import GridLayout from './Swappable/GridLayout';
+// Plugins
+import PluginsCollidable from './Plugins/Collidable';
+import PluginsSnappable from './Plugins/Snappable';
+import PluginsSwapAnimation from './Plugins/SwapAnimation';
+
+const Content = {
+  Home,
+  DragEvents,
+  UniqueDropzone,
+  SimpleList,
+  Transformed,
+  MultipleContainers,
+  Flexbox,
+  Floated,
+  GridLayout,
+  PluginsCollidable,
+  PluginsSnappable,
+  PluginsSwapAnimation,
+};
+
+export default Content;
diff --git a/examples/src/content/shared/mixins.scss b/examples/src/content/shared/mixins.scss
deleted file mode 100644
index 6f4320e8..00000000
--- a/examples/src/content/shared/mixins.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-////
-/// Content
-/// Shared mixins
-////
-
-/// Generate a selector chain to resolve draggable source layouts
-/// @param {ArgList} $nth-children - Any number of numeric values
-/// eg: (1, 2, 5, 7, 8, 9)
-@mixin draggable-source-layout($block-name, $nth-children...) {
-  $selector-chain: ();
-
-  @each $child in $nth-children {
-    $child-selector: unquote('.#{$block-name}:nth-child(#{$child})');
-    $adjacent-clone-selector: unquote(
-      '.#{$block-name}.draggable--original ~ .#{$block-name}:nth-child(#{$child + 1})'
-    );
-
-    $selector-chain: append($selector-chain, $child-selector, comma);
-    $selector-chain: append($selector-chain, $adjacent-clone-selector, comma);
-  }
-
-  #{$selector-chain} {
-    @content;
-  }
-}
diff --git a/examples/src/root/manifest.json b/examples/src/root/manifest.json
deleted file mode 100644
index e6510447..00000000
--- a/examples/src/root/manifest.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "name": "Draggable Examples",
-  "short_name": "Draggable Examples",
-  "description": "A lightweight, responsive, modern drag & drop library.",
-  "dir": "auto",
-  "lang": "en-US",
-  "display": "standalone",
-  "orientation": "portrait",
-  "start_url": "/?homescreen=1",
-  "background_color": "#0042ff",
-  "icons": [
-    {
-      "src": "https://shopify.github.io/draggable/assets/img/favicons/android-chrome-144x144.png",
-      "sizes": "144x144",
-      "type": "image/png"
-    },
-    {
-      "src": "https://shopify.github.io/draggable/assets/img/favicons/android-chrome-256x256.png",
-      "sizes": "256x256",
-      "type": "image/png"
-    },
-    {
-      "src": "https://shopify.github.io/draggable/assets/img/favicons/android-chrome-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    }
-  ]
-}
diff --git a/examples/src/scripts/examples-app.js b/examples/src/scripts/examples-app.js
index 812cd3b1..c8e01041 100644
--- a/examples/src/scripts/examples-app.js
+++ b/examples/src/scripts/examples-app.js
@@ -1,44 +1,18 @@
+import Analytics from '../components/Analytics';
 import MobileNav from '../components/MobileNav';
-// Home page
-import Home from '../content/Home';
-// Draggable
-import DragEvents from '../content/Draggable/DragEvents';
-// import RestrictAxis from '../content/Draggable/RestrictAxis';
-// Droppable
-import OneAndOnly from '../content/Droppable/OneAndOnly';
-// import Capacity from '../content/Droppable/Capacity';
-// Sortable
-import SimpleList from '../content/Sortable/SimpleList';
-import Transformed from '../content/Sortable/Transformed';
-import MultipleContainers from '../content/Sortable/MultipleContainers';
-// Swappable
-import Flexbox from '../content/Swappable/Flexbox';
-import Floated from '../content/Swappable/Floated';
-import GridLayout from '../content/Swappable/GridLayout';
-// Plugins
-import PluginsCollidable from '../content/Plugins/Collidable';
-import PluginsSnappable from '../content/Plugins/Snappable';
-import PluginsSwapAnimation from '../content/Plugins/SwapAnimation';
+import Content from '../content';
 
-// Initialize navigation
-const navActivator = document.getElementById('MobileNavActivator');
+// Initialize Google Analytics
+const gtagTracking = new Analytics('UA-107063633-1');
+gtagTracking.init();
 
-if (navActivator) {
-  const mobileNav = new MobileNav(navActivator); // eslint-disable-line no-unused-vars
-}
+// Initialize navigation
+const mobileNav = new MobileNav(document.getElementById('MobileNavActivator'));
+mobileNav.init();
 
 // Initialize all examples
-Home();
-DragEvents();
-// RestrictAxis();
-OneAndOnly();
-// Capacity();
-SimpleList();
-Transformed();
-MultipleContainers();
-Flexbox();
-Floated();
-GridLayout();
-PluginsCollidable();
-PluginsSnappable();
-PluginsSwapAnimation();
+for (const Example in Content) {
+  if (Content.hasOwnProperty(Example)) {
+    Content[Example]();
+  }
+}
diff --git a/examples/src/scripts/helpers/debounce.js b/examples/src/scripts/utils/debounce.js
similarity index 67%
rename from examples/src/scripts/helpers/debounce.js
rename to examples/src/scripts/utils/debounce.js
index f5a92606..b0a52f81 100644
--- a/examples/src/scripts/helpers/debounce.js
+++ b/examples/src/scripts/utils/debounce.js
@@ -1,6 +1,4 @@
-// Debounce
-// -----------------------------------------------------------------------------
-export function debounce(callback, wait) {
+export default function debounce(callback, wait) {
   let timeout = null;
 
   return function(...args) {
diff --git a/examples/src/scripts/helpers/flip-sign.js b/examples/src/scripts/utils/flip-sign.js
similarity index 100%
rename from examples/src/scripts/helpers/flip-sign.js
rename to examples/src/scripts/utils/flip-sign.js
diff --git a/examples/src/content/shared/match-mirror-size.js b/examples/src/scripts/utils/match-mirror-size.js
similarity index 100%
rename from examples/src/content/shared/match-mirror-size.js
rename to examples/src/scripts/utils/match-mirror-size.js
diff --git a/examples/src/styles/examples-app.scss b/examples/src/styles/examples-app.scss
index 85c55494..ec3baa13 100644
--- a/examples/src/styles/examples-app.scss
+++ b/examples/src/styles/examples-app.scss
@@ -7,25 +7,20 @@
 @import 'reset';
 
 ///
-/// Threads theme properties
-@import 'threads/threads';
-@import 'themes/examples';
-@import 'themes/merge-with-threads';
+/// Threads + Examples themes
+@import 'threads/threads'; // imported from `node_modules`
+@import 'examples-theme/examples-theme';
 
 ///
 /// Global Utilities
-@import 'utilities/global/animation';
-@import 'utilities/global/layout';
-@import 'utilities/global/typography';
+@import 'utils/global/global-utils';
 
 ///
 /// Base components
 @import 'components/Page/Page';
 @import 'components/Svg/Svg';
 @import 'components/Link/Link';
-@import 'components/Link/variants';
 @import 'components/Heading/Heading';
-@import 'components/Heading/variants';
 @import 'components/Patterns/Patterns';
 @import 'components/Main/Main';
 @import 'components/PageHeader/PageHeader';
@@ -42,23 +37,16 @@
 ///
 /// Example components
 @import 'components/Block/Block';
-@import 'components/Block/variants';
 @import 'components/PaperStack/PaperStack';
-@import 'components/PaperStack/variants';
 @import 'components/PillSwitch/PillSwitch';
-@import 'components/PillSwitch/variants';
 @import 'components/Plate/Plate';
-@import 'components/Plate/variants';
 @import 'components/StackedList/StackedList';
-@import 'components/StackedList/variants';
 
 ///
 /// Example content
 @import 'content/Home/Home';
 @import 'content/Draggable/DragEvents/DragEvents';
-// @import 'content/Draggable/RestrictAxis/RestrictAxis';
-@import 'content/Droppable/OneAndOnly/OneAndOnly';
-// @import 'content/Droppable/Capacity/Capacity';
+@import 'content/Droppable/UniqueDropzone/UniqueDropzone';
 @import 'content/Sortable/SimpleList/SimpleList';
 @import 'content/Sortable/Transformed/Transformed';
 @import 'content/Sortable/MultipleContainers/MultipleContainers';
diff --git a/examples/src/styles/themes/examples/_border.scss b/examples/src/styles/examples-theme/_border.scss
similarity index 100%
rename from examples/src/styles/themes/examples/_border.scss
rename to examples/src/styles/examples-theme/_border.scss
diff --git a/examples/src/styles/themes/examples/_breakpoint.scss b/examples/src/styles/examples-theme/_breakpoint.scss
similarity index 100%
rename from examples/src/styles/themes/examples/_breakpoint.scss
rename to examples/src/styles/examples-theme/_breakpoint.scss
diff --git a/examples/src/styles/themes/examples/_color.scss b/examples/src/styles/examples-theme/_color.scss
similarity index 100%
rename from examples/src/styles/themes/examples/_color.scss
rename to examples/src/styles/examples-theme/_color.scss
diff --git a/examples/src/styles/themes/examples/_cursor.scss b/examples/src/styles/examples-theme/_cursor.scss
similarity index 100%
rename from examples/src/styles/themes/examples/_cursor.scss
rename to examples/src/styles/examples-theme/_cursor.scss
diff --git a/examples/src/styles/themes/examples/_duration.scss b/examples/src/styles/examples-theme/_duration.scss
similarity index 100%
rename from examples/src/styles/themes/examples/_duration.scss
rename to examples/src/styles/examples-theme/_duration.scss
diff --git a/examples/src/styles/themes/examples/_easing.scss b/examples/src/styles/examples-theme/_easing.scss
similarity index 100%
rename from examples/src/styles/themes/examples/_easing.scss
rename to examples/src/styles/examples-theme/_easing.scss
diff --git a/examples/src/styles/themes/examples/_font-stack.scss b/examples/src/styles/examples-theme/_font-stack.scss
similarity index 100%
rename from examples/src/styles/themes/examples/_font-stack.scss
rename to examples/src/styles/examples-theme/_font-stack.scss
diff --git a/examples/src/styles/themes/examples/_layout-length.scss b/examples/src/styles/examples-theme/_layout-length.scss
similarity index 100%
rename from examples/src/styles/themes/examples/_layout-length.scss
rename to examples/src/styles/examples-theme/_layout-length.scss
diff --git a/examples/src/styles/themes/examples/_spacing.scss b/examples/src/styles/examples-theme/_spacing.scss
similarity index 100%
rename from examples/src/styles/themes/examples/_spacing.scss
rename to examples/src/styles/examples-theme/_spacing.scss
diff --git a/examples/src/styles/themes/examples/_type-scale.scss b/examples/src/styles/examples-theme/_type-scale.scss
similarity index 100%
rename from examples/src/styles/themes/examples/_type-scale.scss
rename to examples/src/styles/examples-theme/_type-scale.scss
diff --git a/examples/src/styles/themes/examples/_z-index.scss b/examples/src/styles/examples-theme/_z-index.scss
similarity index 100%
rename from examples/src/styles/themes/examples/_z-index.scss
rename to examples/src/styles/examples-theme/_z-index.scss
diff --git a/examples/src/styles/themes/merge-with-threads.scss b/examples/src/styles/examples-theme/examples-theme.scss
similarity index 74%
rename from examples/src/styles/themes/merge-with-threads.scss
rename to examples/src/styles/examples-theme/examples-theme.scss
index 7d8a2824..2fae2acf 100644
--- a/examples/src/styles/themes/merge-with-threads.scss
+++ b/examples/src/styles/examples-theme/examples-theme.scss
@@ -1,8 +1,22 @@
 ////
 /// Themes
-/// Merge Examples theme into Threads
+/// Examples
 ////
 
+@import 'border';
+@import 'breakpoint';
+@import 'color';
+@import 'cursor';
+@import 'layout-length';
+@import 'duration';
+@import 'easing';
+@import 'font-stack';
+@import 'type-scale';
+@import 'spacing';
+@import 'z-index';
+
+///
+/// Merge Draggable properties into Threads
 @include threads-update-property('border', $examples-border-data);
 @include threads-update-property('breakpoint', $examples-breakpoint-data);
 @include threads-update-property('color', $examples-color-data);
diff --git a/examples/src/styles/themes/examples.scss b/examples/src/styles/themes/examples.scss
deleted file mode 100644
index 9a62299c..00000000
--- a/examples/src/styles/themes/examples.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-////
-/// Themes
-/// Examples
-////
-
-@import 'examples/border';
-@import 'examples/breakpoint';
-@import 'examples/color';
-@import 'examples/cursor';
-@import 'examples/layout-length';
-@import 'examples/duration';
-@import 'examples/easing';
-@import 'examples/font-stack';
-@import 'examples/type-scale';
-@import 'examples/spacing';
-@import 'examples/z-index';
diff --git a/examples/src/styles/utilities/shared/_functions.scss b/examples/src/styles/utilities/shared/_functions.scss
deleted file mode 100644
index d367336a..00000000
--- a/examples/src/styles/utilities/shared/_functions.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-////
-/// Utilities global
-/// Functions
-////
-
-// Returns the url() function containing the path to the requested asset.
-// @param {String} $media-type - Type of asset you want to fetch.
-// @param {String} $filename - Filename including extension.
-// @return {String} url() with path - example: url('path/to/requested-asset.ftw')
-@function path-to-asset($media-type, $filename) {
-  $accepted-media-types: (
-    svg: 'svg',
-    image: 'img',
-    font: 'fonts',
-  );
-
-  $fetched-value: map-get($accepted-media-types, $media-type);
-
-  @if type-of($fetched-value) == string {
-    @return url('../#{$fetched-value}/#{$filename}');
-  } @else {
-    @error 'Media type `#{$media-type}` not found. Available types: #{available-names($accepted-media-types)}';
-  }
-}
-
-// Darkens the foreground color by the background color.
-// This is the same as the “multiply” filter in graphics apps.
-// @param {Color} $foreground - The color to darken.
-// @param {Color} $background - The background to base darkening on.
-// @return {Color} The modified color.
-@function color-multiply($foreground, $background: null) {
-  @if type-of($background) != color {
-    $background: #ffffff;
-  }
-
-  @return $foreground * $background / 255;
-}
-
-// Determine strength of inset shadow based on background color
-// @param {Color} $color - The color to match shadow opacity against
-// @return {Number} The decimal value of opacity
-@function inset-shadow($color) {
-  @if (lightness($color) > 80 or opacity($color) < 0.5) {
-    @return 0.1;
-  } @else {
-    @return 0.2;
-  }
-}
-
-// Column based max-width layout
-// @param {Number} $count - Number of columns this element should span
-@function columns($count: 1) {
-  @if type-of($count) != number or $count < 1 {
-    @error 'You did not provide a proper column count.';
-  }
-
-  $column-width: $count * get-layout-length(column);
-  $gutter-width: ($count - 1) * get-layout-length(gutter);
-
-  @return $column-width + $gutter-width;
-}
diff --git a/examples/src/styles/utilities/shared/_typography.scss b/examples/src/styles/utilities/shared/_typography.scss
deleted file mode 100644
index 51d55529..00000000
--- a/examples/src/styles/utilities/shared/_typography.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-////
-/// Utilities shared
-/// Typography
-////
-
-// For truncating single line text.
-// @param {String} $display (optional) - The value to be used for `display`.
-// @param {Boolean} $descender-fix (optional) - Sometimes descenders are cutoff by overflow.
-@mixin text-truncate($display: block, $descender-fix: false) {
-  $padding-bottom: if($descender-fix, 0.25em, null);
-  display: $display;
-  padding-bottom: $padding-bottom;
-  max-width: 100%;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-// For preventing any text selection.
-@mixin text-no-select {
-  pointer-events: none;
-  user-select: none;
-}
-
-// A better way to achieve `text-decoration: underline;` (allows for transitions)
-// @param {Number} $bottom (optional) - Allows for increasing / decreasing vertical positioning.
-// @param {Number} $weight (optional) - Weight of the underline (value to be used for `height`).
-@mixin link-underline($bottom: 0, $weight: 0.1rem) {
-  @if type-of($bottom) != number {
-    @error '#{$bottom} is not a number.';
-  }
-
-  @if type-of($weight) != number {
-    @error '#{$weight} is not a number.';
-  }
-  position: relative; // perhaps there should be a param to prevent overriding `position`?
-
-  &::before {
-    content: '';
-    position: absolute;
-    bottom: $bottom;
-    left: 0;
-    right: 0;
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    height: $weight;
-    background-color: currentColor;
-    opacity: 0;
-    transition: opacity get-duration() get-easing();
-  }
-
-  &:hover {
-    &::before {
-      opacity: 1;
-    }
-  }
-}
diff --git a/examples/src/styles/utilities/global/_animation.scss b/examples/src/styles/utils/global/_animation.scss
similarity index 98%
rename from examples/src/styles/utilities/global/_animation.scss
rename to examples/src/styles/utils/global/_animation.scss
index d20c80cd..026159f9 100644
--- a/examples/src/styles/utilities/global/_animation.scss
+++ b/examples/src/styles/utils/global/_animation.scss
@@ -1,5 +1,5 @@
 ////
-/// Utilities global
+/// Global Utilities
 /// Animation
 ////
 
diff --git a/examples/src/styles/utilities/global/_layout.scss b/examples/src/styles/utils/global/_layout.scss
similarity index 51%
rename from examples/src/styles/utilities/global/_layout.scss
rename to examples/src/styles/utils/global/_layout.scss
index d7280968..7c2cee44 100644
--- a/examples/src/styles/utilities/global/_layout.scss
+++ b/examples/src/styles/utils/global/_layout.scss
@@ -1,9 +1,9 @@
 ////
-/// Utilities global
+/// Global Utilities
 /// Layout
 ////
 
-@import 'utilities/shared/layout';
+@import 'utils/shared/layout';
 
 .flex-item-fix {
   @include flex-item-fix;
@@ -16,3 +16,7 @@
 .clearfix {
   @include clearfix;
 }
+
+.hidden {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}
diff --git a/examples/src/styles/utilities/global/_typography.scss b/examples/src/styles/utils/global/_typography.scss
similarity index 90%
rename from examples/src/styles/utilities/global/_typography.scss
rename to examples/src/styles/utils/global/_typography.scss
index 1e859f66..6399f4be 100644
--- a/examples/src/styles/utilities/global/_typography.scss
+++ b/examples/src/styles/utils/global/_typography.scss
@@ -1,9 +1,9 @@
 ////
-/// Utilities global
+/// Global Utilities
 /// Typography
 ////
 
-@import 'utilities/shared/typography';
+@import 'utils/shared/typography';
 
 .text-truncate {
   @include text-truncate;
diff --git a/examples/src/styles/utils/global/global-utils.scss b/examples/src/styles/utils/global/global-utils.scss
new file mode 100644
index 00000000..4a324eaf
--- /dev/null
+++ b/examples/src/styles/utils/global/global-utils.scss
@@ -0,0 +1,7 @@
+////
+/// Global Utilities manifest
+////
+
+@import 'animation';
+@import 'layout';
+@import 'typography';
diff --git a/examples/src/styles/utilities/shared/_animation.scss b/examples/src/styles/utils/shared/animation.scss
similarity index 83%
rename from examples/src/styles/utilities/shared/_animation.scss
rename to examples/src/styles/utils/shared/animation.scss
index 21e637d4..4e7a754b 100644
--- a/examples/src/styles/utilities/shared/_animation.scss
+++ b/examples/src/styles/utils/shared/animation.scss
@@ -1,5 +1,5 @@
 ////
-/// Utilities shared
+/// Shared Utilities
 /// Animation
 ////
 
diff --git a/examples/src/styles/utils/shared/functions.scss b/examples/src/styles/utils/shared/functions.scss
new file mode 100644
index 00000000..73084c02
--- /dev/null
+++ b/examples/src/styles/utils/shared/functions.scss
@@ -0,0 +1,17 @@
+////
+/// Shared Utilities
+/// Functions
+////
+
+// Column based max-width layout
+// @param {Number} $count - Number of columns this element should span
+@function columns($count: 1) {
+  @if type-of($count) != number or $count < 1 {
+    @error 'You did not provide a proper column count.';
+  }
+
+  $column-width: $count * get-layout-length(column);
+  $gutter-width: ($count - 1) * get-layout-length(gutter);
+
+  @return $column-width + $gutter-width;
+}
diff --git a/examples/src/styles/utilities/shared/_layout.scss b/examples/src/styles/utils/shared/layout.scss
similarity index 80%
rename from examples/src/styles/utilities/shared/_layout.scss
rename to examples/src/styles/utils/shared/layout.scss
index 50f8dce8..5dcad123 100644
--- a/examples/src/styles/utilities/shared/_layout.scss
+++ b/examples/src/styles/utils/shared/layout.scss
@@ -1,15 +1,35 @@
 ////
-/// Utilities shared
+/// Shared Utilities
 /// Layout
 ////
 
+/// Generate a selector chain to resolve draggable source layouts
+/// @param {ArgList} $nth-children - Any number of numeric values
+/// eg: (1, 2, 5, 7, 8, 9)
+@mixin draggable-source-layout($block-name, $nth-children...) {
+  $selector-chain: ();
+
+  @each $child in $nth-children {
+    $child-selector: unquote('.#{$block-name}:nth-child(#{$child})');
+    $adjacent-clone-selector: unquote(
+      '.#{$block-name}.draggable--original ~ .#{$block-name}:nth-child(#{$child + 1})'
+    );
+
+    $selector-chain: append($selector-chain, $child-selector, comma);
+    $selector-chain: append($selector-chain, $adjacent-clone-selector, comma);
+  }
+
+  #{$selector-chain} {
+    @content;
+  }
+}
+
 // Styles for (un)locking the ability to scroll the document.
 // Requires the `data-html-scroll` attribute on <html>.
 // Toggling of the attribute value is handled via JS.
 @mixin scroll-lock {
   &[data-scroll-lock],
   &[data-scroll-lock] body {
-    // min-height: 100vh;
     height: 100%;
   }
 
@@ -20,14 +40,7 @@
   }
 }
 
-// Adds spacing between all direct children.
-// @param {String} $spacing-variant - The key for the desired spacing variant.
-@mixin vertical-rhythm($spacing-variant: base) {
-  > * + * {
-    margin-top: get-spacing($spacing-variant);
-  }
-}
-
+// Quick and easy max-width centered layout
 @mixin centered-width($max-width: null) {
   margin-left: auto;
   margin-right: auto;
@@ -42,7 +55,7 @@
   max-width: 100%;
 }
 
-// perhaps remove this in favour of a ui-helper?
+// Center any element, any where, any time
 @mixin flex-center($full-height: false) {
   display: flex;
   align-items: center;
@@ -119,25 +132,6 @@
   }
 }
 
-// Set a background-image to `cover`.
-// @param {String} $image (optional) - Path to the image asset to be used.
-// defaults to `none`, as you may be declaring the `background-image` as an inline style.
-// @param {Color} $color (optional) - Value for `background-color`.
-@mixin background-cover($image: none, $color: transparent) {
-  @if $color != color {
-    @error '#{$color} is not provide a valid `$color`.';
-  }
-
-  @if ($image != none or $image != '') {
-    background-image: url($image);
-  }
-  background-color: $color;
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-attachment: fixed;
-  background-size: cover;
-}
-
 // Private mixin - used by `aspect-ratio()`
 // @param {Number} $padding - Value to be used for padding-top.
 @mixin _aspect-ratio-padding-top($padding: 0%) {
diff --git a/examples/src/styles/utils/shared/typography.scss b/examples/src/styles/utils/shared/typography.scss
new file mode 100644
index 00000000..92c236d4
--- /dev/null
+++ b/examples/src/styles/utils/shared/typography.scss
@@ -0,0 +1,23 @@
+////
+/// Shared Utilities
+/// Typography
+////
+
+// For truncating single line text.
+// @param {String} $display (optional) - The value to be used for `display`.
+// @param {Boolean} $descender-fix (optional) - Sometimes descenders are cutoff by overflow.
+@mixin text-truncate($display: block, $descender-fix: false) {
+  $padding-bottom: if($descender-fix, 0.25em, null);
+  display: $display;
+  padding-bottom: $padding-bottom;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+// For preventing any text selection.
+@mixin text-no-select {
+  pointer-events: none;
+  user-select: none;
+}
diff --git a/examples/src/views/collidable.html b/examples/src/views/collidable.html
index f76657ba..95dc5507 100644
--- a/examples/src/views/collidable.html
+++ b/examples/src/views/collidable.html
@@ -1,4 +1,4 @@
-{% extends 'views/templates/document.html' %}
+{% extends 'templates/document.html' %}
 
 {% import 'components/Document/Head.html' as Head %}
 {% import 'components/Sidebar/Sidebar.html' as Sidebar %}
@@ -6,24 +6,24 @@
 
 {% import 'content/Plugins/Collidable/Collidable.html' as Collidable %}
 
-{% set ViewAttrs = {
+{% set ViewAttr = {
   id: 'Collidable',
   parent: 'Plugins',
   child: 'Collidable',
   subheading: 'Enable collision detection by including the Collidable plugin. You can now resist dragging over all elements specificed as collision obstacles.'
 } %}
 
-{% block PageId %}{{ ViewAttrs.id }}{% endblock %}
+{% block PageId %}{{ ViewAttr.id }}{% endblock %}
 
 {% block head %}
-  {{ Head.render(ViewAttrs) }}
+  {{ Head.render(ViewAttr) }}
 {% endblock %}
 
 {% block sidebar %}
-  {{ Sidebar.render(ViewAttrs, DataPages) }}
+  {{ Sidebar.render(ViewAttr, DataPages) }}
 {% endblock %}
 
 {% block main %}
-  {{ PageHeader.render(ViewAttrs.parent, ViewAttrs.subheading) }}
-  {{ Collidable.render(ViewAttrs.id) }}
+  {{ PageHeader.render(ViewAttr.parent, ViewAttr.subheading) }}
+  {{ Collidable.render(ViewAttr.id) }}
 {% endblock %}
diff --git a/examples/src/views/data-pages.json b/examples/src/views/data-pages.json
index cd416fc9..cb16e101 100644
--- a/examples/src/views/data-pages.json
+++ b/examples/src/views/data-pages.json
@@ -8,7 +8,7 @@
     },
     {
       "Droppable": [
-        "One and only",
+        "Unique dropzone",
         "~Capacity"
       ]
     },
@@ -16,7 +16,8 @@
       "Sortable": [
         "Simple list",
         "Transformed",
-        "Multiple containers"
+        "Multiple containers",
+        "~Nested"
       ]
     },
     {
diff --git a/examples/src/views/drag-events.html b/examples/src/views/drag-events.html
index 94f00915..7049d871 100644
--- a/examples/src/views/drag-events.html
+++ b/examples/src/views/drag-events.html
@@ -1,4 +1,4 @@
-{% extends 'views/templates/document.html' %}
+{% extends 'templates/document.html' %}
 
 {% import 'components/Document/Head.html' as Head %}
 {% import 'components/Sidebar/Sidebar.html' as Sidebar %}
@@ -6,24 +6,24 @@
 
 {% import 'content/Draggable/DragEvents/DragEvents.html' as DragEvents %}
 
-{% set ViewAttrs = {
+{% set ViewAttr = {
   id: 'DragEvents',
   parent: 'Draggable',
   child: 'Drag events',
   subheading: 'You may not need to use any of the additional modules. Hook into any of Draggable’s events and write your own logic.'
 } %}
 
-{% block PageId %}{{ ViewAttrs.id }}{% endblock %}
+{% block PageId %}{{ ViewAttr.id }}{% endblock %}
 
 {% block head %}
-  {{ Head.render(ViewAttrs) }}
+  {{ Head.render(ViewAttr) }}
 {% endblock %}
 
 {% block sidebar %}
-  {{ Sidebar.render(ViewAttrs, DataPages) }}
+  {{ Sidebar.render(ViewAttr, DataPages) }}
 {% endblock %}
 
 {% block main %}
-  {{ PageHeader.render(ViewAttrs.parent, ViewAttrs.subheading) }}
-  {{ DragEvents.render(ViewAttrs.id) }}
+  {{ PageHeader.render(ViewAttr.parent, ViewAttr.subheading) }}
+  {{ DragEvents.render(ViewAttr.id) }}
 {% endblock %}
diff --git a/examples/src/views/flexbox.html b/examples/src/views/flexbox.html
index a58b57eb..dbe7cd6c 100644
--- a/examples/src/views/flexbox.html
+++ b/examples/src/views/flexbox.html
@@ -1,4 +1,4 @@
-{% extends 'views/templates/document.html' %}
+{% extends 'templates/document.html' %}
 
 {% import 'components/Document/Head.html' as Head %}
 {% import 'components/Sidebar/Sidebar.html' as Sidebar %}
@@ -6,24 +6,24 @@
 
 {% import 'content/Swappable/Flexbox/Flexbox.html' as Flexbox %}
 
-{% set ViewAttrs = {
+{% set ViewAttr = {
   id: 'Flexbox',
   parent: 'Swappable',
   child: 'Flexbox',
-  subheading: 'Maintaining layout while swapping direct children can be challenging. This example solves the problem using CSS nth-child and adjacent child rules.'
+  subheading: 'Maintaining layout while swapping direct children can be challenging. This example solves the problem using nth-child and adjacent sibling selectors.'
 } %}
 
-{% block PageId %}{{ ViewAttrs.id }}{% endblock %}
+{% block PageId %}{{ ViewAttr.id }}{% endblock %}
 
 {% block head %}
-  {{ Head.render(ViewAttrs) }}
+  {{ Head.render(ViewAttr) }}
 {% endblock %}
 
 {% block sidebar %}
-  {{ Sidebar.render(ViewAttrs, DataPages) }}
+  {{ Sidebar.render(ViewAttr, DataPages) }}
 {% endblock %}
 
 {% block main %}
-  {{ PageHeader.render(ViewAttrs.parent, ViewAttrs.subheading) }}
-  {{ Flexbox.render(ViewAttrs.id) }}
+  {{ PageHeader.render(ViewAttr.parent, ViewAttr.subheading) }}
+  {{ Flexbox.render(ViewAttr.id) }}
 {% endblock %}
diff --git a/examples/src/views/floated.html b/examples/src/views/floated.html
index 6ab705bb..df2b8912 100644
--- a/examples/src/views/floated.html
+++ b/examples/src/views/floated.html
@@ -1,4 +1,4 @@
-{% extends 'views/templates/document.html' %}
+{% extends 'templates/document.html' %}
 
 {% import 'components/Document/Head.html' as Head %}
 {% import 'components/Sidebar/Sidebar.html' as Sidebar %}
@@ -6,24 +6,24 @@
 
 {% import 'content/Swappable/Floated/Floated.html' as Floated %}
 
-{% set ViewAttrs = {
+{% set ViewAttr = {
   id: 'Floated',
   parent: 'Swappable',
   child: 'Floated',
   subheading: 'Floated layouts work just like the Flexbox example. A bit of clever CSS can help mitigate any layout conflicts while dragging.'
 } %}
 
-{% block PageId %}{{ ViewAttrs.id }}{% endblock %}
+{% block PageId %}{{ ViewAttr.id }}{% endblock %}
 
 {% block head %}
-  {{ Head.render(ViewAttrs) }}
+  {{ Head.render(ViewAttr) }}
 {% endblock %}
 
 {% block sidebar %}
-  {{ Sidebar.render(ViewAttrs, DataPages) }}
+  {{ Sidebar.render(ViewAttr, DataPages) }}
 {% endblock %}
 
 {% block main %}
-  {{ PageHeader.render(ViewAttrs.parent, ViewAttrs.subheading) }}
-  {{ Floated.render(ViewAttrs.id) }}
+  {{ PageHeader.render(ViewAttr.parent, ViewAttr.subheading) }}
+  {{ Floated.render(ViewAttr.id) }}
 {% endblock %}
diff --git a/examples/src/views/grid-layout.html b/examples/src/views/grid-layout.html
index 33ca61f6..6197038c 100644
--- a/examples/src/views/grid-layout.html
+++ b/examples/src/views/grid-layout.html
@@ -1,4 +1,4 @@
-{% extends 'views/templates/document.html' %}
+{% extends 'templates/document.html' %}
 
 {% import 'components/Document/Head.html' as Head %}
 {% import 'components/Sidebar/Sidebar.html' as Sidebar %}
@@ -6,24 +6,24 @@
 
 {% import 'content/Swappable/GridLayout/GridLayout.html' as GridLayout %}
 
-{% set ViewAttrs = {
+{% set ViewAttr = {
   id: 'GridLayout',
   parent: 'Swappable',
   child: 'Grid layout',
-  subheading: 'Draggable children do not need to be direct descendants of their container. Wrapper elements can be used to maintain layout and avoid complicated CSS rules.'
+  subheading: 'Draggable children do not need to be direct descendants of their container. Wrapper elements can be used to maintain layout and simplify styling.'
 } %}
 
-{% block PageId %}{{ ViewAttrs.id }}{% endblock %}
+{% block PageId %}{{ ViewAttr.id }}{% endblock %}
 
 {% block head %}
-  {{ Head.render(ViewAttrs) }}
+  {{ Head.render(ViewAttr) }}
 {% endblock %}
 
 {% block sidebar %}
-  {{ Sidebar.render(ViewAttrs, DataPages) }}
+  {{ Sidebar.render(ViewAttr, DataPages) }}
 {% endblock %}
 
 {% block main %}
-  {{ PageHeader.render(ViewAttrs.parent, ViewAttrs.subheading) }}
-  {{ GridLayout.render(ViewAttrs.id) }}
+  {{ PageHeader.render(ViewAttr.parent, ViewAttr.subheading) }}
+  {{ GridLayout.render(ViewAttr.id) }}
 {% endblock %}
diff --git a/examples/src/views/index.html b/examples/src/views/index.html
index 883f1c5b..13ff9175 100644
--- a/examples/src/views/index.html
+++ b/examples/src/views/index.html
@@ -1,4 +1,4 @@
-{% extends 'views/templates/document.html' %}
+{% extends 'templates/document.html' %}
 
 {% import 'components/Document/Head.html' as Head %}
 {% import 'components/Sidebar/Sidebar.html' as Sidebar %}
@@ -6,23 +6,23 @@
 
 {% import 'content/Home/Home.html' as Home %}
 
-{% set ViewAttrs = {
+{% set ViewAttr = {
   id: 'Home',
   parent: 'Examples',
   subheading: 'Draggable is a modern drag and drop JavaScript library. Lightweight, modular and accessible.'
 } %}
 
-{% block PageId %}{{ ViewAttrs.id }}{% endblock %}
+{% block PageId %}{{ ViewAttr.id }}{% endblock %}
 
 {% block head %}
-  {{ Head.render(ViewAttrs) }}
+  {{ Head.render(ViewAttr) }}
 {% endblock %}
 
 {% block sidebar %}
-  {{ Sidebar.render(ViewAttrs, DataPages) }}
+  {{ Sidebar.render(ViewAttr, DataPages) }}
 {% endblock %}
 
 {% block main %}
-  {{ PageHeader.render(ViewAttrs.parent, ViewAttrs.subheading) }}
-  {{ Home.render(ViewAttrs.id) }}
+  {{ PageHeader.render(ViewAttr.parent, ViewAttr.subheading) }}
+  {{ Home.render(ViewAttr.id) }}
 {% endblock %}
diff --git a/examples/src/views/multiple-containers.html b/examples/src/views/multiple-containers.html
index 11b86cf4..1f2048dc 100644
--- a/examples/src/views/multiple-containers.html
+++ b/examples/src/views/multiple-containers.html
@@ -1,4 +1,4 @@
-{% extends 'views/templates/document.html' %}
+{% extends 'templates/document.html' %}
 
 {% import 'components/Document/Head.html' as Head %}
 {% import 'components/Sidebar/Sidebar.html' as Sidebar %}
@@ -6,24 +6,24 @@
 
 {% import 'content/Sortable/MultipleContainers/MultipleContainers.html' as MultipleContainers %}
 
-{% set ViewAttrs = {
+{% set ViewAttr = {
   id: 'MultipleContainers',
   parent: 'Sortable',
   child: 'Multiple containers',
   subheading: 'Sort elements across multiple containers. Each container can maintain its own set of rules.'
 } %}
 
-{% block PageId %}{{ ViewAttrs.id }}{% endblock %}
+{% block PageId %}{{ ViewAttr.id }}{% endblock %}
 
 {% block head %}
-  {{ Head.render(ViewAttrs) }}
+  {{ Head.render(ViewAttr) }}
 {% endblock %}
 
 {% block sidebar %}
-  {{ Sidebar.render(ViewAttrs, DataPages) }}
+  {{ Sidebar.render(ViewAttr, DataPages) }}
 {% endblock %}
 
 {% block main %}
-  {{ PageHeader.render(ViewAttrs.parent, ViewAttrs.subheading) }}
-  {{ MultipleContainers.render(ViewAttrs.id) }}
+  {{ PageHeader.render(ViewAttr.parent, ViewAttr.subheading) }}
+  {{ MultipleContainers.render(ViewAttr.id) }}
 {% endblock %}
diff --git a/examples/src/views/restrict-axis.html b/examples/src/views/restrict-axis.html
deleted file mode 100644
index 6613a2da..00000000
--- a/examples/src/views/restrict-axis.html
+++ /dev/null
@@ -1,31 +0,0 @@
-{% extends 'views/templates/document.html' %}
-
-{% import 'components/Document/Head.html' as Head %}
-{% import 'components/Sidebar/Sidebar.html' as Sidebar %}
-{% import 'components/PageHeader/PageHeader.html' as PageHeader %}
-
-{#
-{% import 'content/Draggable/RestrictAxis/RestrictAxis.html' as RestrictAxis %}
-
-{% set ViewAttrs = {
-  id: 'RestrictAxis',
-  parent: 'Draggable',
-  child: 'Restrict axis',
-  subheading: '...'
-} %}
-
-{% block PageId %}{{ ViewAttrs.id }}{% endblock %}
-
-{% block head %}
-  {{ Head.render(ViewAttrs) }}
-{% endblock %}
-
-{% block sidebar %}
-  {{ Sidebar.render(ViewAttrs, DataPages) }}
-{% endblock %}
-
-{% block main %}
-  {{ PageHeader.render(ViewAttrs.parent, ViewAttrs.subheading) }}
-  {{ RestrictAxis.render(ViewAttrs.id) }}
-{% endblock %}
-#}
diff --git a/examples/src/views/simple-list.html b/examples/src/views/simple-list.html
index e8ccc5f6..2dc0b95e 100644
--- a/examples/src/views/simple-list.html
+++ b/examples/src/views/simple-list.html
@@ -1,4 +1,4 @@
-{% extends 'views/templates/document.html' %}
+{% extends 'templates/document.html' %}
 
 {% import 'components/Document/Head.html' as Head %}
 {% import 'components/Sidebar/Sidebar.html' as Sidebar %}
@@ -6,24 +6,24 @@
 
 {% import 'content/Sortable/SimpleList/SimpleList.html' as SimpleList %}
 
-{% set ViewAttrs = {
+{% set ViewAttr = {
   id: 'SimpleList',
   parent: 'Sortable',
   child: 'Simple list',
   subheading: 'Sort elements in a single collection, maintaining order for all but the element being dragged.'
 } %}
 
-{% block PageId %}{{ ViewAttrs.id }}{% endblock %}
+{% block PageId %}{{ ViewAttr.id }}{% endblock %}
 
 {% block head %}
-  {{ Head.render(ViewAttrs) }}
+  {{ Head.render(ViewAttr) }}
 {% endblock %}
 
 {% block sidebar %}
-  {{ Sidebar.render(ViewAttrs, DataPages) }}
+  {{ Sidebar.render(ViewAttr, DataPages) }}
 {% endblock %}
 
 {% block main %}
-  {{ PageHeader.render(ViewAttrs.parent, ViewAttrs.subheading) }}
-  {{ SimpleList.render(ViewAttrs.id) }}
+  {{ PageHeader.render(ViewAttr.parent, ViewAttr.subheading) }}
+  {{ SimpleList.render(ViewAttr.id) }}
 {% endblock %}
diff --git a/examples/src/views/snappable.html b/examples/src/views/snappable.html
index 01e8eb3d..6b7e88d9 100644
--- a/examples/src/views/snappable.html
+++ b/examples/src/views/snappable.html
@@ -1,4 +1,4 @@
-{% extends 'views/templates/document.html' %}
+{% extends 'templates/document.html' %}
 
 {% import 'components/Document/Head.html' as Head %}
 {% import 'components/Sidebar/Sidebar.html' as Sidebar %}
@@ -6,24 +6,24 @@
 
 {% import 'content/Plugins/Snappable/Snappable.html' as Snappable %}
 
-{% set ViewAttrs = {
+{% set ViewAttr = {
   id: 'Snappable',
   parent: 'Plugins',
   child: 'Snappable',
   subheading: 'Snappable turns draggable elements into suction cups. Drag an item close enough to another draggable and it will snap into place.'
 } %}
 
-{% block PageId %}{{ ViewAttrs.id }}{% endblock %}
+{% block PageId %}{{ ViewAttr.id }}{% endblock %}
 
 {% block head %}
-  {{ Head.render(ViewAttrs) }}
+  {{ Head.render(ViewAttr) }}
 {% endblock %}
 
 {% block sidebar %}
-  {{ Sidebar.render(ViewAttrs, DataPages) }}
+  {{ Sidebar.render(ViewAttr, DataPages) }}
 {% endblock %}
 
 {% block main %}
-  {{ PageHeader.render(ViewAttrs.parent, ViewAttrs.subheading) }}
-  {{ Snappable.render(ViewAttrs.id) }}
+  {{ PageHeader.render(ViewAttr.parent, ViewAttr.subheading) }}
+  {{ Snappable.render(ViewAttr.id) }}
 {% endblock %}
diff --git a/examples/src/views/swap-animation.html b/examples/src/views/swap-animation.html
index 3d9389cb..e2f0838e 100644
--- a/examples/src/views/swap-animation.html
+++ b/examples/src/views/swap-animation.html
@@ -1,4 +1,4 @@
-{% extends 'views/templates/document.html' %}
+{% extends 'templates/document.html' %}
 
 {% import 'components/Document/Head.html' as Head %}
 {% import 'components/Sidebar/Sidebar.html' as Sidebar %}
@@ -6,24 +6,24 @@
 
 {% import 'content/Plugins/SwapAnimation/SwapAnimation.html' as SwapAnimation %}
 
-{% set ViewAttrs = {
+{% set ViewAttr = {
   id: 'SwapAnimation',
   parent: 'Plugins',
   child: 'Swap Animation',
   subheading: 'This example is currently waiting for SwapAnimation to support translating both X and Y coordinates.'
 } %}
 
-{% block PageId %}{{ ViewAttrs.id }}{% endblock %}
+{% block PageId %}{{ ViewAttr.id }}{% endblock %}
 
 {% block head %}
-  {{ Head.render(ViewAttrs) }}
+  {{ Head.render(ViewAttr) }}
 {% endblock %}
 
 {% block sidebar %}
-  {{ Sidebar.render(ViewAttrs, DataPages) }}
+  {{ Sidebar.render(ViewAttr, DataPages) }}
 {% endblock %}
 
 {% block main %}
-  {{ PageHeader.render(ViewAttrs.parent, ViewAttrs.subheading) }}
-  {{ SwapAnimation.render(ViewAttrs.id) }}
+  {{ PageHeader.render(ViewAttr.parent, ViewAttr.subheading) }}
+  {{ SwapAnimation.render(ViewAttr.id) }}
 {% endblock %}
diff --git a/examples/src/views/transformed.html b/examples/src/views/transformed.html
index efcaddde..1739e60f 100644
--- a/examples/src/views/transformed.html
+++ b/examples/src/views/transformed.html
@@ -1,4 +1,4 @@
-{% extends 'views/templates/document.html' %}
+{% extends 'templates/document.html' %}
 
 {% import 'components/Document/Head.html' as Head %}
 {% import 'components/Sidebar/Sidebar.html' as Sidebar %}
@@ -6,24 +6,24 @@
 
 {% import 'content/Sortable/Transformed/Transformed.html' as Transformed %}
 
-{% set ViewAttrs = {
+{% set ViewAttr = {
   id: 'Transformed',
   parent: 'Sortable',
   child: 'Transformed',
   subheading: 'Draggable’s mirror is positioned using transform3d(). Any existing transform styles will get removed. This is solved by introducing an interior wrapper.'
 } %}
 
-{% block PageId %}{{ ViewAttrs.id }}{% endblock %}
+{% block PageId %}{{ ViewAttr.id }}{% endblock %}
 
 {% block head %}
-  {{ Head.render(ViewAttrs) }}
+  {{ Head.render(ViewAttr) }}
 {% endblock %}
 
 {% block sidebar %}
-  {{ Sidebar.render(ViewAttrs, DataPages) }}
+  {{ Sidebar.render(ViewAttr, DataPages) }}
 {% endblock %}
 
 {% block main %}
-  {{ PageHeader.render(ViewAttrs.parent, ViewAttrs.subheading) }}
-  {{ Transformed.render(ViewAttrs.id) }}
+  {{ PageHeader.render(ViewAttr.parent, ViewAttr.subheading) }}
+  {{ Transformed.render(ViewAttr.id) }}
 {% endblock %}
diff --git a/examples/src/views/one-and-only.html b/examples/src/views/unique-dropzone.html
similarity index 51%
rename from examples/src/views/one-and-only.html
rename to examples/src/views/unique-dropzone.html
index 7ec9415e..91e1f9ae 100644
--- a/examples/src/views/one-and-only.html
+++ b/examples/src/views/unique-dropzone.html
@@ -1,29 +1,29 @@
-{% extends 'views/templates/document.html' %}
+{% extends 'templates/document.html' %}
 
 {% import 'components/Document/Head.html' as Head %}
 {% import 'components/Sidebar/Sidebar.html' as Sidebar %}
 {% import 'components/PageHeader/PageHeader.html' as PageHeader %}
 
-{% import 'content/Droppable/OneAndOnly/OneAndOnly.html' as OneAndOnly %}
+{% import 'content/Droppable/UniqueDropzone/UniqueDropzone.html' as UniqueDropzone %}
 
-{% set ViewAttrs = {
-  id: 'OneAndOnly',
+{% set ViewAttr = {
+  id: 'UniqueDropzone',
   parent: 'Droppable',
-  child: 'One and only',
+  child: 'Unique dropzone',
   subheading: 'Dropzones are intended to hold only one Droppable child. This example restricts each Droppable item to a specific Dropzone identifier.'
 } %}
 
-{% block PageId %}{{ ViewAttrs.id }}{% endblock %}
+{% block PageId %}{{ ViewAttr.id }}{% endblock %}
 
 {% block head %}
-  {{ Head.render(ViewAttrs) }}
+  {{ Head.render(ViewAttr) }}
 {% endblock %}
 
 {% block sidebar %}
-  {{ Sidebar.render(ViewAttrs, DataPages) }}
+  {{ Sidebar.render(ViewAttr, DataPages) }}
 {% endblock %}
 
 {% block main %}
-  {{ PageHeader.render(ViewAttrs.parent, ViewAttrs.subheading) }}
-  {{ OneAndOnly.render(ViewAttrs.id) }}
+  {{ PageHeader.render(ViewAttr.parent, ViewAttr.subheading) }}
+  {{ UniqueDropzone.render(ViewAttr.id) }}
 {% endblock %}
diff --git a/examples/tools/helpers.js b/examples/tools/helpers.js
deleted file mode 100644
index 197af27c..00000000
--- a/examples/tools/helpers.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export function reportWatchStats(path) {
-  console.log(`File ${path} was changed`);
-}
diff --git a/examples/tools/index.js b/examples/tools/index.js
index 72d85eb1..dc362d05 100644
--- a/examples/tools/index.js
+++ b/examples/tools/index.js
@@ -8,6 +8,4 @@ export const views = tasks.views;
 export const server = tasks.startServer;
 export const start = watch;
 
-const root = tasks.root;
-
-export const build = gulp.parallel(scripts, styles, views, root);
+export const build = gulp.parallel(scripts, styles, views);
diff --git a/examples/tools/tasks/index.js b/examples/tools/tasks/index.js
index dbf1e379..1c2ab4e3 100644
--- a/examples/tools/tasks/index.js
+++ b/examples/tools/tasks/index.js
@@ -2,14 +2,12 @@ import {startServer} from '../server';
 import {scripts} from './scripts';
 import {styles} from './styles';
 import {views} from './views';
-import {root} from './root';
 
 const tasks = {
   startServer,
   scripts,
   styles,
   views,
-  root,
 };
 
 export default tasks;
diff --git a/examples/tools/tasks/root.js b/examples/tools/tasks/root.js
deleted file mode 100644
index f399da6d..00000000
--- a/examples/tools/tasks/root.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import gulp from 'gulp';
-
-const srcRoot = 'src/root/';
-const distRoot = 'dist/';
-
-export function root() {
-  return gulp.src(`${srcRoot}*`).pipe(gulp.dest(distRoot));
-}
diff --git a/examples/tools/tasks/styles.js b/examples/tools/tasks/styles.js
index 3f63fe3b..46e621b8 100644
--- a/examples/tools/tasks/styles.js
+++ b/examples/tools/tasks/styles.js
@@ -7,16 +7,15 @@ import {server} from '../server';
 export const srcStyles = 'src/styles/';
 const distStyles = 'dist/assets/css/';
 const stylesInputPath = `${srcStyles}examples-app.scss`;
+const sassOptions = {
+  includePaths: ['./src', './node_modules'],
+};
 
 export function styles() {
   return gulp
     .src(stylesInputPath)
     .pipe(sourcemaps.init())
-    .pipe(
-      sass({
-        includePaths: ['./src', './node_modules'],
-      }).on('error', sass.logError),
-    )
+    .pipe(sass(sassOptions).on('error', sass.logError))
     .pipe(postcss())
     .pipe(sourcemaps.write('./'))
     .pipe(gulp.dest(distStyles))
diff --git a/examples/tools/tasks/views.js b/examples/tools/tasks/views.js
index 1c6f9d0f..1d47d32c 100644
--- a/examples/tools/tasks/views.js
+++ b/examples/tools/tasks/views.js
@@ -11,7 +11,10 @@ const extViews = '*.+(html|njk)';
 export const extAllViews = '*.+(html|njk|json|md)';
 
 export function views() {
-  const nunjucksEnv = new nunjucks.Environment(new nunjucks.FileSystemLoader('src'));
+  const nunjucksEnv = new nunjucks.Environment([
+    new nunjucks.FileSystemLoader('src/views'),
+    new nunjucks.FileSystemLoader('src'),
+  ]);
   const dataPages = JSON.parse(fs.readFileSync('src/views/data-pages.json'));
 
   return gulp
diff --git a/examples/tools/watch.js b/examples/tools/watch.js
index 87bcf3f2..fa84e060 100644
--- a/examples/tools/watch.js
+++ b/examples/tools/watch.js
@@ -3,7 +3,10 @@ import {reloadServer, startServer} from './server';
 import {scripts} from './tasks/scripts';
 import {styles} from './tasks/styles';
 import {extAllViews, views} from './tasks/views';
-import {reportWatchStats} from './helpers';
+
+function reportWatchStats(path) {
+  console.log(`File ${path} was changed`);
+}
 
 export function watch() {
   startServer();
diff --git a/examples/yarn.lock b/examples/yarn.lock
index b953fa0f..b5bf4512 100644
--- a/examples/yarn.lock
+++ b/examples/yarn.lock
@@ -105,9 +105,9 @@ acorn-jsx@^3.0.0:
   dependencies:
     acorn "^3.0.4"
 
-acorn@5.X, acorn@^5.0.0, acorn@^5.0.3, acorn@^5.1.1, acorn@^5.2.1:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.3.0.tgz#7446d39459c54fb49a80e6ee6478149b940ec822"
+acorn@5.X, acorn@^5.0.0, acorn@^5.0.3, acorn@^5.3.0, acorn@^5.4.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.4.1.tgz#fdc58d9d17f4a4e98d102ded826a9b9759125102"
 
 acorn@^3.0.4:
   version "3.3.0"
@@ -252,10 +252,11 @@ argparse@^1.0.7:
     sprintf-js "~1.0.2"
 
 aria-query@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-0.7.0.tgz#4af10a1e61573ddea0cf3b99b51c52c05b424d24"
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-0.7.1.tgz#26cbb5aff64144b0a825be1846e0b16cfa00b11e"
   dependencies:
     ast-types-flow "0.0.7"
+    commander "^2.11.0"
 
 arr-diff@^1.0.1:
   version "1.1.0"
@@ -1231,6 +1232,14 @@ better-assert@~1.0.0:
   dependencies:
     callsite "1.0.0"
 
+bfj-node4@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/bfj-node4/-/bfj-node4-5.2.0.tgz#bd08350353f81d808d6a8352a15f5d9fb74ddec6"
+  dependencies:
+    bluebird "^3.5.1"
+    check-types "^7.3.0"
+    tryer "^1.0.0"
+
 big.js@^3.1.3:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
@@ -1249,6 +1258,10 @@ block-stream@*:
   dependencies:
     inherits "~2.0.0"
 
+bluebird@^3.5.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9"
+
 bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
   version "4.11.8"
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
@@ -1344,9 +1357,9 @@ browser-sync-ui@v1.0.1:
     socket.io-client "2.0.4"
     stream-throttle "^0.1.3"
 
-browser-sync@^2.23.5:
-  version "2.23.5"
-  resolved "https://registry.yarnpkg.com/browser-sync/-/browser-sync-2.23.5.tgz#088bc5c3bb4dfc1507bad0278f140d8060fe4299"
+browser-sync@^2.23.6:
+  version "2.23.6"
+  resolved "https://registry.yarnpkg.com/browser-sync/-/browser-sync-2.23.6.tgz#ed0721c92e5b98c71b7bf839b39092ac9f220650"
   dependencies:
     browser-sync-ui v1.0.1
     bs-recipes "1.3.4"
@@ -1569,8 +1582,8 @@ caniuse-api@^2.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
-  version "1.0.30000793"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000793.tgz#3c00c66e423a7a1907c7dd96769a78b2afa8a72e"
+  version "1.0.30000800"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000800.tgz#a86e6bc23bd9a707d5df42f33e64d0495cfda218"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000791, caniuse-lite@^1.0.30000792:
   version "1.0.30000792"
@@ -1637,6 +1650,10 @@ chardet@^0.4.0:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
 
+check-types@^7.3.0:
+  version "7.3.0"
+  resolved "https://registry.yarnpkg.com/check-types/-/check-types-7.3.0.tgz#468f571a4435c24248f5fd0cb0e8d87c3c341e7d"
+
 chokidar@1.7.0, chokidar@^1.4.3, chokidar@^1.6.0, chokidar@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
@@ -1846,7 +1863,7 @@ commander@2.12.x:
   version "2.12.2"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.12.2.tgz#0f5946c427ed9ec0d91a46bb9def53e54650e555"
 
-commander@^2.2.0, commander@^2.9.0, commander@~2.13.0:
+commander@^2.11.0, commander@^2.13.0, commander@^2.2.0, commander@^2.9.0, commander@~2.13.0:
   version "2.13.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"
 
@@ -2419,7 +2436,7 @@ doctrine@1.5.0:
     esutils "^2.0.2"
     isarray "^1.0.0"
 
-doctrine@^2.0.0, doctrine@^2.1.0:
+doctrine@^2.0.2, doctrine@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
   dependencies:
@@ -2437,8 +2454,8 @@ dom-walk@^0.1.0:
   resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
 
 domain-browser@^1.1.1:
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
 
 domelementtype@1, domelementtype@^1.3.0:
   version "1.3.0"
@@ -2519,13 +2536,13 @@ ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
 
-ejs@^2.5.6:
+ejs@^2.5.7:
   version "2.5.7"
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.5.7.tgz#cc872c168880ae3c7189762fd5ffc00896c9518a"
 
 electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.30:
-  version "1.3.31"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.31.tgz#00d832cba9fe2358652b0c48a8816c8e3a037e9f"
+  version "1.3.32"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.32.tgz#11d0684c0840e003c4be8928f8ac5f35dbc2b4e6"
 
 elliptic@^6.0.0:
   version "6.4.0"
@@ -2552,8 +2569,8 @@ emojis-list@^2.0.0:
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
 
 encodeurl@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20"
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
 
 encoding@^0.1.11:
   version "0.1.12"
@@ -2751,8 +2768,8 @@ eslint-module-utils@^2.1.1:
     pkg-dir "^1.0.0"
 
 eslint-plugin-ava@^4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-ava/-/eslint-plugin-ava-4.4.0.tgz#c1866e1f62e70daf2b7b5f60cfbc53bfe267a717"
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-ava/-/eslint-plugin-ava-4.5.0.tgz#9f305d0703e2879974fa9ead29cc533b3d12a44b"
   dependencies:
     arrify "^1.0.1"
     deep-strict-equal "^0.2.0"
@@ -2772,8 +2789,8 @@ eslint-plugin-chai-expect@^1.1.1:
   resolved "https://registry.yarnpkg.com/eslint-plugin-chai-expect/-/eslint-plugin-chai-expect-1.1.1.tgz#cd640b8b38cf6c3abcc378673b7b173b99ddc70a"
 
 eslint-plugin-flowtype@^2.41.0:
-  version "2.41.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.41.0.tgz#fd5221c60ba917c059d7ef69686a99cca09fd871"
+  version "2.42.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.42.0.tgz#7fcc98df4ed9482a22ac10ba4ca48d649c4c733a"
   dependencies:
     lodash "^4.15.0"
 
@@ -2809,8 +2826,8 @@ eslint-plugin-jsx-a11y@^6.0.3:
     jsx-ast-utils "^2.0.0"
 
 eslint-plugin-lodash@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-lodash/-/eslint-plugin-lodash-2.5.0.tgz#be23eb0c0b7b15c1fc3a46bf702b4be757446b45"
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-lodash/-/eslint-plugin-lodash-2.6.0.tgz#552d83ef74167e6e25aa1004541ea53c3f9aea9b"
   dependencies:
     lodash "~4.17.0"
 
@@ -2829,9 +2846,9 @@ eslint-plugin-node@^5.2.1:
     resolve "^1.3.3"
     semver "5.3.0"
 
-eslint-plugin-prettier@^2.4.0, eslint-plugin-prettier@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-2.5.0.tgz#39a91dd7528eaf19cd42c0ee3f2c1f684606a05f"
+eslint-plugin-prettier@^2.4.0, eslint-plugin-prettier@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-2.6.0.tgz#33e4e228bdb06142d03c560ce04ec23f6c767dd7"
   dependencies:
     fast-diff "^1.1.1"
     jest-docblock "^21.0.0"
@@ -2841,12 +2858,12 @@ eslint-plugin-promise@^3.6.0:
   resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-3.6.0.tgz#54b7658c8f454813dc2a870aff8152ec4969ba75"
 
 eslint-plugin-react@^7.5.1:
-  version "7.5.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.5.1.tgz#52e56e8d80c810de158859ef07b880d2f56ee30b"
+  version "7.6.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.6.1.tgz#5d0e908be599f0c02fbf4eef0c7ed6f29dff7633"
   dependencies:
-    doctrine "^2.0.0"
+    doctrine "^2.0.2"
     has "^1.0.1"
-    jsx-ast-utils "^2.0.0"
+    jsx-ast-utils "^2.0.1"
     prop-types "^15.6.0"
 
 eslint-plugin-shopify@^19.0.0:
@@ -2898,9 +2915,9 @@ eslint-visitor-keys@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d"
 
-eslint@^4.16.0:
-  version "4.16.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.16.0.tgz#934ada9e98715e1d7bbfd6f6f0519ed2fab35cc1"
+eslint@^4.17.0:
+  version "4.17.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.17.0.tgz#dc24bb51ede48df629be7031c71d9dc0ee4f3ddf"
   dependencies:
     ajv "^5.3.0"
     babel-code-frame "^6.22.0"
@@ -2941,10 +2958,10 @@ eslint@^4.16.0:
     text-table "~0.2.0"
 
 espree@^3.1.3, espree@^3.5.2:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.2.tgz#756ada8b979e9dcfcdb30aad8d1a9304a905e1ca"
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.3.tgz#931e0af64e7fbbed26b050a29daad1fc64799fa6"
   dependencies:
-    acorn "^5.2.1"
+    acorn "^5.4.0"
     acorn-jsx "^3.0.0"
 
 esprima@^2.6.0:
@@ -3056,7 +3073,7 @@ expand-tilde@^2.0.0, expand-tilde@^2.0.2:
   dependencies:
     homedir-polyfill "^1.0.1"
 
-express@^4.15.2:
+express@^4.16.2:
   version "4.16.2"
   resolved "https://registry.yarnpkg.com/express/-/express-4.16.2.tgz#e35c6dfe2d64b7dca0a5cd4f21781be3299e076c"
   dependencies:
@@ -3202,7 +3219,7 @@ filename-regex@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
 
-filesize@^3.5.9:
+filesize@^3.5.11:
   version "3.5.11"
   resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.5.11.tgz#1919326749433bb3cf77368bd158caabcc19e9ee"
 
@@ -3304,7 +3321,7 @@ flatten@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
 
-flush-write-stream@^1.0.0, flush-write-stream@^1.0.2:
+flush-write-stream@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.0.2.tgz#c81b90d8746766f1a609a46809946c45dd8ae417"
   dependencies:
@@ -3576,8 +3593,8 @@ global@^4.3.0:
     process "~0.5.1"
 
 globals@^11.0.1, globals@^11.1.0:
-  version "11.1.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-11.1.0.tgz#632644457f5f0e3ae711807183700ebf2e4633e4"
+  version "11.3.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.3.0.tgz#e04fdb7b9796d8adac9c8f64c14837b2313378b0"
 
 globals@^9.18.0:
   version "9.18.0"
@@ -3628,8 +3645,8 @@ globule@^1.0.0:
     minimatch "~3.0.2"
 
 glogg@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/glogg/-/glogg-1.0.0.tgz#7fe0f199f57ac906cf512feead8f90ee4a284fc5"
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/glogg/-/glogg-1.0.1.tgz#dcf758e44789cc3f3d32c1f3562a3676e6a34810"
   dependencies:
     sparkles "^1.0.0"
 
@@ -3659,9 +3676,9 @@ graceful-fs@4.X, graceful-fs@^4.0.0, graceful-fs@^4.1.11, graceful-fs@^4.1.2, gr
   version "4.1.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
 
-gulp-cli@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/gulp-cli/-/gulp-cli-2.0.0.tgz#7f049ad298ed388cda9bd813b5d7062407d62cad"
+gulp-cli@^2.0.0, gulp-cli@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/gulp-cli/-/gulp-cli-2.0.1.tgz#7847e220cb3662f2be8a6d572bf14e17be5a994b"
   dependencies:
     ansi-colors "^1.0.1"
     archy "^1.0.0"
@@ -3669,16 +3686,16 @@ gulp-cli@^2.0.0:
     color-support "^1.1.3"
     concat-stream "^1.6.0"
     copy-props "^2.0.1"
-    fancy-log "^1.1.0"
+    fancy-log "^1.3.2"
     gulplog "^1.0.0"
-    interpret "^1.0.0"
+    interpret "^1.1.0"
     isobject "^3.0.1"
-    liftoff "^2.3.0"
+    liftoff "^2.5.0"
     matchdep "^2.0.0"
     mute-stdout "^1.0.0"
     pretty-hrtime "^1.0.0"
     replace-homedir "^1.0.0"
-    semver-greatest-satisfied-range "^1.0.0"
+    semver-greatest-satisfied-range "^1.1.0"
     v8flags "^3.0.1"
     yargs "^7.1.0"
 
@@ -3730,9 +3747,9 @@ gulp-sass@^3.1.0:
     through2 "^2.0.0"
     vinyl-sourcemaps-apply "^0.2.0"
 
-gulp-sourcemaps@^2.6.3:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/gulp-sourcemaps/-/gulp-sourcemaps-2.6.3.tgz#11b033f759f909e0a5f15b7bdf47ac29cc54efa4"
+gulp-sourcemaps@^2.6.4:
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/gulp-sourcemaps/-/gulp-sourcemaps-2.6.4.tgz#cbb2008450b1bcce6cd23bf98337be751bf6e30a"
   dependencies:
     "@gulp-sourcemaps/identity-map" "1.X"
     "@gulp-sourcemaps/map-sources" "1.X"
@@ -3742,7 +3759,7 @@ gulp-sourcemaps@^2.6.3:
     debug-fabulous "1.X"
     detect-newline "2.X"
     graceful-fs "4.X"
-    source-map "0.X"
+    source-map "~0.6.0"
     strip-bom-string "1.X"
     through2 "2.X"
 
@@ -3784,11 +3801,12 @@ gulplog@^1.0.0:
   dependencies:
     glogg "^1.0.0"
 
-gzip-size@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-3.0.0.tgz#546188e9bdc337f673772f81660464b389dce520"
+gzip-size@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-4.1.0.tgz#8ae096257eabe7d69c45be2b67c448124ffb517c"
   dependencies:
     duplexer "^0.1.1"
+    pify "^3.0.0"
 
 har-schema@^1.0.5:
   version "1.0.5"
@@ -4150,7 +4168,7 @@ inquirer@^3.0.6:
     strip-ansi "^4.0.0"
     through "^2.3.6"
 
-interpret@^1.0.0:
+interpret@^1.0.0, interpret@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614"
 
@@ -4468,8 +4486,8 @@ is-relative@^1.0.0:
     is-unc-path "^1.0.0"
 
 is-resolvable@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.0.1.tgz#acca1cd36dbe44b974b924321555a70ba03b1cf4"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
 
 is-retry-allowed@^1.0.0:
   version "1.1.0"
@@ -4565,8 +4583,8 @@ jest-docblock@^21.0.0:
   resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-21.2.0.tgz#51529c3b30d5fd159da60c27ceedc195faf8d414"
 
 js-base64@^2.1.8, js-base64@^2.1.9:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.1.tgz#e02813181cd53002888e918935467acb2910e596"
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.3.tgz#2e545ec2b0f2957f41356510205214e98fad6582"
 
 js-tokens@^3.0.0, js-tokens@^3.0.2:
   version "3.0.2"
@@ -4655,7 +4673,7 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
-jsx-ast-utils@^2.0.0:
+jsx-ast-utils@^2.0.0, jsx-ast-utils@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.0.1.tgz#e801b1b39985e20fffc87b40e3748080e2dcac7f"
   dependencies:
@@ -4741,7 +4759,7 @@ levn@^0.3.0, levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
-liftoff@^2.3.0:
+liftoff@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/liftoff/-/liftoff-2.5.0.tgz#2009291bb31cea861bbf10a7c15a28caf75c31ec"
   dependencies:
@@ -4938,8 +4956,8 @@ lodash@^4.0.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.4, l
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
 log-symbols@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.1.0.tgz#f35fa60e278832b538dc4dddcbb478a45d3e3be6"
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
   dependencies:
     chalk "^2.0.1"
 
@@ -5191,8 +5209,8 @@ mime@1.4.1:
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
 
 mimic-fn@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.1.0.tgz#e667783d92e89dbd342818b5230b9d62a672ad18"
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
 
 min-document@^2.19.0:
   version "2.19.0"
@@ -6489,8 +6507,8 @@ postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0
     supports-color "^3.2.3"
 
 postcss@^6.0.0, postcss@^6.0.11, postcss@^6.0.13, postcss@^6.0.14, postcss@^6.0.15, postcss@^6.0.16, postcss@^6.0.6, postcss@^6.0.8:
-  version "6.0.16"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.16.tgz#112e2fe2a6d2109be0957687243170ea5589e146"
+  version "6.0.17"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.17.tgz#e259a051ca513f81e9afd0c21f7f82eda50c65c5"
   dependencies:
     chalk "^2.3.0"
     source-map "^0.6.1"
@@ -6614,8 +6632,8 @@ public-encrypt@^4.0.0:
     randombytes "^2.0.1"
 
 pump@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/pump/-/pump-2.0.0.tgz#7946da1c8d622b098e2ceb2d3476582470829c9d"
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-2.0.1.tgz#12399add6e4cf7526d973cbc8b5ce2e2908b3909"
   dependencies:
     end-of-stream "^1.1.0"
     once "^1.3.1"
@@ -6713,8 +6731,8 @@ raw-body@2.3.2:
     unpipe "1.0.0"
 
 rc@^1.0.1, rc@^1.1.6, rc@^1.1.7:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.4.tgz#a0f606caae2a3b862bbd0ef85482c0125b315fa3"
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.5.tgz#275cd687f6e3b36cc756baa26dfee80a790301fd"
   dependencies:
     deep-extend "~0.4.0"
     ini "~1.3.0"
@@ -6861,8 +6879,8 @@ reduce-css-calc@^1.2.6:
     reduce-function-call "^1.0.1"
 
 reduce-css-calc@^2.0.0:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.3.tgz#63c4c6325ffbbf4ea6c23f1d4deb47c3953f3b81"
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.4.tgz#c20e9cda8445ad73d4ff4bea960c6f8353791708"
   dependencies:
     css-unit-converter "^1.1.1"
     postcss-value-parser "^3.3.0"
@@ -6910,8 +6928,8 @@ regexpu-core@^2.0.0:
     regjsparser "^0.1.4"
 
 registry-auth-token@^3.0.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-3.3.1.tgz#fb0d3289ee0d9ada2cbb52af5dfe66cb070d3006"
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-3.3.2.tgz#851fd49038eecb586911115af845260eec983f20"
   dependencies:
     rc "^1.1.6"
     safe-buffer "^5.0.1"
@@ -7274,7 +7292,7 @@ semver-diff@^2.0.0:
   dependencies:
     semver "^5.0.3"
 
-semver-greatest-satisfied-range@^1.0.0:
+semver-greatest-satisfied-range@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/semver-greatest-satisfied-range/-/semver-greatest-satisfied-range-1.1.0.tgz#13e8c2658ab9691cb0cd71093240280d36f77a5b"
   dependencies:
@@ -7411,8 +7429,8 @@ setprototypeof@1.1.0:
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.0.tgz#d0bd85536887b6fe7c0d818cb962d9d91c54e656"
 
 sha.js@^2.4.0, sha.js@^2.4.8:
-  version "2.4.9"
-  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.9.tgz#98f64880474b74f4a38b8da9d3c0f2d104633e7d"
+  version "2.4.10"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.10.tgz#b1fde5cd7d11a5626638a07c604ab909cfa31f9b"
   dependencies:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
@@ -7578,10 +7596,6 @@ source-map@0.5.x, source-map@^0.5.1, source-map@^0.5.3, source-map@^0.5.6, sourc
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
 
-source-map@0.X:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.0.tgz#ebf0d13a48f3619f91891816fdda932f83a6021f"
-
 source-map@^0.1.38:
   version "0.1.43"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
@@ -7594,7 +7608,7 @@ source-map@^0.4.2, source-map@^0.4.4:
   dependencies:
     amdefine ">=0.0.4"
 
-source-map@^0.6.1, source-map@~0.6.1:
+source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
 
@@ -8042,8 +8056,8 @@ timed-out@^4.0.0:
   resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-4.0.1.tgz#f32eacac5a175bea25d7fab565ab3ed8741ef56f"
 
 timers-browserify@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.4.tgz#96ca53f4b794a5e7c0e1bd7cc88a372298fa01e6"
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.6.tgz#241e76927d9ca05f4d959819022f5b3664b64bae"
   dependencies:
     setimmediate "^1.0.4"
 
@@ -8150,6 +8164,10 @@ trough@^1.0.0:
   dependencies:
     glob "^6.0.4"
 
+tryer@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.0.tgz#027b69fa823225e551cace3ef03b11f6ab37c1d7"
+
 tryit@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/tryit/-/tryit-1.0.3.tgz#393be730a9446fd1ead6da59a014308f36c289cb"
@@ -8205,8 +8223,8 @@ ua-parser-js@^0.7.9:
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
 
 uglify-js@3.3.x:
-  version "3.3.7"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.3.7.tgz#28463e7c7451f89061d2b235e30925bf5625e14d"
+  version "3.3.9"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.3.9.tgz#33869666c8ab7f7658ce3d22f0f1ced40097d33a"
   dependencies:
     commander "~2.13.0"
     source-map "~0.6.1"
@@ -8494,10 +8512,9 @@ vfile@^2.0.0:
     vfile-message "^1.0.0"
 
 vinyl-fs@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/vinyl-fs/-/vinyl-fs-3.0.1.tgz#74af5f6836a1cf414d35eeb3c10f2e65fc2a2c10"
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/vinyl-fs/-/vinyl-fs-3.0.2.tgz#1b86258844383f57581fcaac081fe09ef6d6d752"
   dependencies:
-    flush-write-stream "^1.0.0"
     fs-mkdirp-stream "^1.0.0"
     glob-stream "^6.1.0"
     graceful-fs "^4.0.0"
@@ -8506,6 +8523,7 @@ vinyl-fs@^3.0.0:
     lead "^1.0.0"
     object.assign "^4.0.4"
     pumpify "^1.3.5"
+    readable-stream "^2.3.3"
     remove-bom-buffer "^3.0.0"
     remove-bom-stream "^1.2.0"
     resolve-options "^1.1.0"
@@ -8566,17 +8584,18 @@ watchpack@^1.4.0:
     chokidar "^1.7.0"
     graceful-fs "^4.1.2"
 
-webpack-bundle-analyzer@^2.9.2:
-  version "2.9.2"
-  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.9.2.tgz#63ed86eb71cc4cda86f68e685a84530ba0126449"
+webpack-bundle-analyzer@^2.10.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.10.0.tgz#d0646cda342939f6f05eb632a090abbd90317446"
   dependencies:
-    acorn "^5.1.1"
-    chalk "^1.1.3"
-    commander "^2.9.0"
-    ejs "^2.5.6"
-    express "^4.15.2"
-    filesize "^3.5.9"
-    gzip-size "^3.0.0"
+    acorn "^5.3.0"
+    bfj-node4 "^5.2.0"
+    chalk "^2.3.0"
+    commander "^2.13.0"
+    ejs "^2.5.7"
+    express "^4.16.2"
+    filesize "^3.5.11"
+    gzip-size "^4.1.0"
     lodash "^4.17.4"
     mkdirp "^0.5.1"
     opener "^1.4.3"