diff --git a/_config.yml b/_config.yml
index eaff727c3b63283008fc2d285195025ecad5016e..b87bd8ef34a10ba8e75753799578c9c1a1a24f29 100644
--- a/_config.yml
+++ b/_config.yml
@@ -23,4 +23,5 @@ sass:
   load_paths:
     - node_modules/
 
+permalink: pretty
 exclude: ["node_modules/", "*.gemspec", "Gemfile", "Gemfile.lock", "package.json", "LICENSE.txt"]
diff --git a/_includes/head.html b/_includes/head.html
index 39bc633b51d41b46fad55943c124e100a479bba1..1ac4771b69b9392b46776e3fe2977b1c6007e7ff 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -4,5 +4,8 @@
 
   <title>{{ page.title }} - {{ site.title }}</title>
   <link rel="stylesheet" href="/assets/css/just-the-docs.css">
+  <script type="text/javascript" src="/assets/js/vendor/lunr.min.js"></script>
+  <script type="text/javascript" src="/assets/js/just-the-docs.js"></script>
 
+  <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
diff --git a/_includes/nav.html b/_includes/nav.html
index 6b649149ccceaf4e9ef7fd422d937def81d96d47..874357422fcb4540c735cc2feeb77966e9c39b97 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -10,7 +10,7 @@
             <ul class="navigation-list-child-list">
               {% for child in children_list %}
                 {% if child.parent == node.parent and child.title != node.title %}
-                <li class="navigation-list-item">
+                <li class="navigation-list-item {% if page.url == child.url %} active{% endif %}">
                   <a href="{{ child.url | absolute_url }}" class="navigation-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
                 </li>
                 {% endif %}
diff --git a/_layouts/default.html b/_layouts/default.html
index 1e16fd472511b57a607b149b8e3e1e27dd1e4001..23d5b429f0d2e4c644e83b191a2c46b3f4c5c1bc 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -6,18 +6,20 @@
 <div class="page-wrap">
   <div class="side-bar">
     <a href="{{ site.url }}" class="site-title fs-6 fw-300 text-grey-dk-300">Just the <span class="fw-700">/docs</span></a>
-    <div class="navigation">
+    <span class="fs-3"><button class="js-main-nav-trigger navigation-list-toggle btn btn-outline" type="button" data-text-toggle="Hide">Menu</button></span>
+    <div class="navigation main-nav js-main-nav">
       {% include nav.html %}
+      <footer role="contentinfo" class="site-footer">
+        <p class="text-small text-grey-dk-000">This site uses <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.</p>
+      </footer>
     </div>
-    <footer role="contentinfo" class="site-footer">
-      <p class="text-small text-grey-dk-000">This site uses <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.</p>
-    </footer>
-
   </div>
   <div class="main-content-wrap">
     <div class="main-content">
+      <input type="text" class="js-search-input" />
+      <div class="js-search-results search-results-wrap"></div>
       {% unless page.url == "/" %}
-      <nav>
+      <nav class="breadcrumb-nav">
         <ol class="breadcrumb-nav-list">
           <li class="breadcrumb-nav-list-item"><a href="{{ site.url }}">Home</a></li>
           {% if page.parent != nil and page.parent != page.title %}
@@ -27,22 +29,24 @@
         </ol>
       </nav>
       {% endunless %}
-      {{ content }}
+      <div class="page-content">
+        {{ content }}
 
-      {% if page.has_children == true %}
-      <hr>
-      <h2 class="text-delta">Table of contents</h2>
-      {% assign children_list = site.pages | sort:"nav_order" %}
-      <ol>
-        {% for child in children_list %}
-          {% if child.parent == page.title and child.title != page.title %}
-          <li>
-            <a href="{{ child.url | absolute_url }}">{{ child.title }}</a>
-          </li>
-          {% endif %}
-        {% endfor %}
-      </ol>
-      {% endif %}
+        {% if page.has_children == true %}
+        <hr>
+        <h2 class="text-delta">Table of contents</h2>
+        {% assign children_list = site.pages | sort:"nav_order" %}
+        <ol>
+          {% for child in children_list %}
+            {% if child.parent == page.title and child.title != page.title %}
+            <li>
+              <a href="{{ child.url | absolute_url }}">{{ child.title }}</a>
+            </li>
+            {% endif %}
+          {% endfor %}
+        </ol>
+        {% endif %}
+      </div>
     </div>
   </div>
 </div>
diff --git a/_sass/base.scss b/_sass/base.scss
index 689902008e733e1ae882bd49f2b053550f89c493..5566b5cc0648bf25ca9bd50ac6c67fcbc51faf4b 100644
--- a/_sass/base.scss
+++ b/_sass/base.scss
@@ -1,3 +1,7 @@
+//
+// Base element style overrides
+//
+
 // stylelint-disable selector-no-type
 
 * {
@@ -5,36 +9,16 @@
 }
 
 html {
-  font-size: $root-font-size;
+  @include fs-4;
 }
 
 body {
   font-family: $body-font-family;
   font-size: inherit;
-  line-height: 1.4;
+  line-height: $body-line-height;
   color: $body-text-color;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-weight: 500;
-  color: $body-heading-color;
-  line-height: 1.1;
-  margin-bottom: .8em;
-
-  &:not(:first-child) {
-    margin-top: 1.2  em;
-  }
-}
-
-p {
-  margin-bottom: 1em;
-}
-
 p,
 h1,
 h2,
@@ -57,18 +41,54 @@ table {
   margin-top: 0;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 500;
+  color: $body-heading-color;
+  line-height: $body-heading-line-height;
+  margin-bottom: .8em;
+  margin-top: 1.2em;
+}
+
+p {
+  margin-bottom: 1em;
+}
+
+
 a {
   color: $link-color;
   text-decoration: none;
 }
 
+a:not([class]) {
+  text-decoration: none;
+  background-image: linear-gradient($grey-lt-100 0%, $grey-lt-100 100%);
+  background-repeat: repeat-x;
+  background-position: 0 100%;
+  background-size: 1px 1px;
+
+  &:hover {
+    background-image: linear-gradient(rgba($link-color, 0.45) 0%, rgba($link-color, 0.45) 100%);
+    background-size: 1px 1px;
+
+  }
+}
+
 pre,
 code {
   font-size: 90%;
-  line-height: 1.3;
+  line-height: $body-line-height;
   font-family: $mono-font-family;
 }
 
+figure {
+  margin: 0;
+}
+
 li {
   margin: 0.25em 0;
 }
@@ -77,3 +97,11 @@ img {
   max-width: 100%;
   height: auto;
 }
+
+hr {
+  height: 1px;
+  padding: 0;
+  margin: $sp-6 0;
+  background-color: $grey-lt-100;
+  border: 0;
+}
diff --git a/_sass/buttons.scss b/_sass/buttons.scss
new file mode 100644
index 0000000000000000000000000000000000000000..559d1dba64d85b7eece20a44e363879132333d1a
--- /dev/null
+++ b/_sass/buttons.scss
@@ -0,0 +1,112 @@
+//
+// Buttons and things that look like buttons
+//
+
+.btn {
+  display: inline-block;
+  box-sizing: border-box;
+  padding-top: 0.25em;
+  padding-right: 1em;
+  padding-bottom: 0.25em;
+  padding-left: 1em;
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 1.5;
+  color: $purple-200;
+  text-decoration: none;
+  vertical-align: baseline;
+  cursor: pointer;
+  background-color: #f7f7f7;
+  border-width: 0;
+  border-radius: 3px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
+  appearance: none;
+
+  &:focus {
+    text-decoration: none;
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(blue, 0.25);
+  }
+
+  &:focus:hover,
+  &.selected:focus {
+    box-shadow: 0 0 0 3px rgba(blue, 0.25);
+  }
+
+  &:hover,
+  &.zeroclipboard-is-hover {
+    color: $purple-300;
+  }
+
+  &:hover,
+  &:active,
+  &.zeroclipboard-is-hover,
+  &.zeroclipboard-is-active {
+    text-decoration: none;
+    background-color: #f4f4f4;
+  }
+
+  &:active,
+  &.selected,
+  &.zeroclipboard-is-active {
+    background-color: #ededed;
+    background-image: none;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
+  }
+
+  &.selected:hover {
+    background-color: darken(#dcdcdc, 5%);
+  }
+
+  &:disabled,
+  &.disabled {
+    &,
+    &:hover {
+      color: rgba(102, 102, 102, 0.5);
+      cursor: default;
+      background-color: rgba(229, 229, 229, 0.5);
+      background-image: none;
+      box-shadow: none;
+    }
+  }
+}
+
+.btn-outline {
+  box-shadow: inset 0 0 0 2px $grey-lt-300;
+  background: transparent;
+  color: $blue-100;
+
+  &:hover,
+  &:active,
+  &.zeroclipboard-is-hover,
+  &.zeroclipboard-is-active {
+    box-shadow: inset 0 0 0 3px $grey-lt-300;
+    text-decoration: none;
+    background-color: transparent;
+    color: $grey-dk-100;
+  }
+
+  &:focus {
+    text-decoration: none;
+    outline: none;
+    box-shadow: inset 0 0 0 2px $grey-dk-100, 0 0 0 3px rgba(blue, 0.25);
+  }
+
+  &:focus:hover,
+  &.selected:focus {
+    box-shadow: inset 0 0 0 2px $grey-dk-100;
+  }
+}
+
+.btn-purple {
+  @include btn-color($white, $purple-100);
+}
+
+.btn-blue {
+  @include btn-color($white, $blue-000);
+}
+
+.btn-green {
+  @include btn-color($white, $green-100);
+}
diff --git a/_sass/code.scss b/_sass/code.scss
index caa0f407222671db7e285e1217a846e7ec329293..bb534f6d907a0ccabeeefa8adf38930ac5591e91 100644
--- a/_sass/code.scss
+++ b/_sass/code.scss
@@ -1,13 +1,19 @@
+//
+// Code and syntax highlighting
+//
+
 code {
   background-color: $grey-lt-000;
   padding: 0.2em 0.15em;
   border: $border $border-color;
   border-radius: $border-radius;
+  font-weight: 400;
 }
 
 .highlight {
   background-color: $grey-lt-000;
   padding: $sp-3;
+  margin-bottom: 0;
 
   code {
     border: 0;
@@ -15,6 +21,12 @@ code {
   }
 }
 
+.highlighter-rouge {
+  margin-bottom: $sp-3;
+  border-radius: $border-radius;
+  overflow: hidden;
+}
+
 .highlight .c { color: #586E75 } /* Comment */
 .highlight .err { color: #93A1A1 } /* Error */
 .highlight .g { color: #93A1A1 } /* Generic */
@@ -83,3 +95,27 @@ code {
 .highlight .vg { color: #268BD2 } /* Name.Variable.Global */
 .highlight .vi { color: #268BD2 } /* Name.Variable.Instance */
 .highlight .il { color: #2AA198 } /* Literal.Number.Integer.Long */
+
+//
+// Code examples (rendered)
+//
+
+.code-example {
+  border: 1px solid $border-color;
+  padding: $sp-3;
+  border-radius: $border-radius;
+  margin-bottom: $sp-3;
+  overflow: scroll;
+
+  + .highlighter-rouge,
+  + figure.highlight {
+    position: relative;
+    border-left: 1px solid $border-color;
+    border-right: 1px solid $border-color;
+    border-bottom: 1px solid $border-color;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    margin-top: -$sp-4;
+  }
+
+}
diff --git a/_sass/content.scss b/_sass/content.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e40ad336adf7d6ab7994fe5730068bbda3ee2442
--- /dev/null
+++ b/_sass/content.scss
@@ -0,0 +1,48 @@
+//
+// Styles for rendered markdown in the .main-content container
+//
+
+// stylelint-disable selector-no-type
+
+.page-content {
+  ul,
+  ol,
+  dl {
+    padding-left: 1.5em;
+  }
+
+  ol {
+    list-style-type: none;
+    counter-reset: step-counter;
+
+    li {
+      position: relative;
+
+      &::before {
+        counter-increment: step-counter;
+        content: counter(step-counter);
+        left: -1.5em;
+        top: 0.11em;
+        position: absolute;
+        color: $grey-dk-000;
+        @include fs-3;
+      }
+
+      ol {
+        counter-reset: sub-counter;
+
+        li {
+          &::before {
+            counter-increment: sub-counter;
+            content: counter(sub-counter, lower-alpha);
+          }
+        }
+      }
+    }
+  }
+
+  hr + *,
+  h1:first-of-type {
+    margin-top: 0;
+  }
+}
diff --git a/_sass/layout.scss b/_sass/layout.scss
index 35370a548f4d1b60a910c58882bd9c30e006dbcb..6dffabab1e4f3ccf05666f625b059e65b11ec730 100644
--- a/_sass/layout.scss
+++ b/_sass/layout.scss
@@ -1,3 +1,7 @@
+//
+// The basic two column layout
+//
+
 .page-wrap {
   @include mq(md) {
     display: flex;
@@ -12,9 +16,8 @@
 }
 
 .side-bar {
-
-  padding-top: $gutter-spacing;
-  padding-bottom: $gutter-spacing;
+  padding-top: $gutter-spacing-sm;
+  padding-bottom: $gutter-spacing-sm;
   background-color: $grey-lt-000;
   z-index: 100;
 
@@ -28,6 +31,7 @@
     align-items: flex-end;
     width: $nav-width + 16px;
     height: 100%;
+    min-height: 400px;
   }
 
   @include mq(lg) {
@@ -41,6 +45,7 @@
     position: absolute;
     width: 100%;
     height: 100%;
+    min-height: 600px;
     top: 0;
     left: 0;
     -webkit-overflow-scrolling: touch;
@@ -50,14 +55,14 @@
 }
 
 .main-content {
-  padding-top: $gutter-spacing;
-  padding-right: $gutter-spacing;
-  padding-left: $gutter-spacing;
+  padding-top: $gutter-spacing-sm;
+  @include container;
+
   @include mq(md) {
     position: relative;
     margin-left: $nav-width;
     max-width: $content-width;
-    padding-right: $gutter-spacing;
+    padding-top: $gutter-spacing;
     padding-left: $gutter-spacing * 1.5;
     padding-bottom: $gutter-spacing;
   }
@@ -68,23 +73,11 @@
   }
 }
 
+.navigation,
 .site-title {
-  display: block;
 
-  @include mq(md) {
-    position: absolute;
-    top: $gutter-spacing;
-    right: 0;
-    width: $nav-width;
-    z-index: 101;
-  }
-}
+  @include container;
 
-.navigation,
-.site-title,
-.site-footer {
-  padding-left: $gutter-spacing;
-  padding-right: $gutter-spacing;
   width: 100%;
 
   @include mq(lg) {
@@ -95,21 +88,22 @@
 .navigation {
   @include mq(md) {
     position: absolute;
-    top: $sp-8;
+    padding-top: $sp-8;
+    top: 0;
     right: 0;
+    height: 100%;
   }
 }
 
 .site-footer {
+
   @include mq(md) {
+    display: block;
     position: absolute;
-    bottom: $sp-8;
     right: 0;
+    bottom: $sp-8;
     z-index: 100;
-  }
-}
 
-.img-logo {
-  width: 150px;
-  height: auto;
+    @include container;
+  }
 }
diff --git a/_sass/navigation.scss b/_sass/navigation.scss
index 7667222268ba57dd2e7daf67a8c2afbc358272bf..4d226c1890cc1e28021e87e08224505def16808b 100644
--- a/_sass/navigation.scss
+++ b/_sass/navigation.scss
@@ -1,3 +1,21 @@
+//
+// Main nav, breadcrumb, etc...
+//
+
+.site-title {
+  display: block;
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: auto;
+
+  @include mq(md) {
+    position: absolute;
+    top: $gutter-spacing;
+    right: 0;
+    z-index: 101;
+  }
+}
+
 .navigation-list {
   list-style: none;
   padding: 0;
@@ -11,6 +29,8 @@
 .navigation-list-child-list {
   list-style: none;
   padding-left: $sp-3;
+  margin-top: $sp-2;
+  margin-bottom: $sp-2;
 
   .navigation-list-link {
     color: $grey-dk-100;
@@ -23,6 +43,12 @@
       margin-left: -0.8em;
       color: $grey-dk-000;
     }
+
+    &.active {
+      &::before {
+        color: $grey-dk-100;
+      }
+    }
   }
 }
 
@@ -40,6 +66,39 @@
   }
 }
 
+// Small screen nav
+
+.main-nav {
+  display: none;
+
+  &.nav-open {
+    display: block;
+  }
+  @include mq(md) {
+    display: block;
+  }
+}
+
+.side-bar {
+  display: flex;
+  flex-wrap: wrap;
+
+  @include mq(md) {
+    display: block;
+  }
+}
+
+.navigation-list-toggle {
+  position: absolute;
+  right: $sp-4;
+
+  @include mq(md) {
+    display: none !important;
+  }
+}
+
+// Breadcrumb nav
+
 .breadcrumb-nav-list {
   list-style: none;
   padding-left: 0;
@@ -51,6 +110,10 @@
   display: table-cell;
   @include fs-2;
 
+  &::before {
+    display: none;
+  }
+
   &::after {
     display: inline-block;
     margin-left: $sp-2;
@@ -65,3 +128,25 @@
     }
   }
 }
+
+ // Table of contents
+
+#markdown-toc {
+  counter-reset: toc-counter;
+  li {
+    &::before {
+      counter-increment: toc-counter;
+      content: counter(toc-counter, upper-roman);
+    }
+    ol {
+      counter-reset: toc-sub-counter;
+    }
+
+    li {
+      &::before {
+        counter-increment: toc-sub-counter;
+        content: counter(toc-sub-counter, lower-roman);
+      }
+    }
+  }
+}
diff --git a/_sass/search.scss b/_sass/search.scss
new file mode 100644
index 0000000000000000000000000000000000000000..10c37869fbcf15d092af73bbc1573fcc081ad5c8
--- /dev/null
+++ b/_sass/search.scss
@@ -0,0 +1,6 @@
+.search-results-wrap {
+  position: absolute;
+  background: $white;
+  width: 400px;
+  z-index: 100;
+}
diff --git a/_sass/support/_variables.scss b/_sass/support/_variables.scss
index 629c2e6780d4a7bbf0ece7d17e68b79f2acaa51c..96abff6884802dd5e65e9a7146f7908e37d7cbe5 100644
--- a/_sass/support/_variables.scss
+++ b/_sass/support/_variables.scss
@@ -1,31 +1,47 @@
+//
+// Typography
+//
+
+$body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif !default;
+$mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace !default;
+$root-font-size: 16px !default;         // Base font-size for rems
+$body-line-height: 1.4;
+$body-heading-line-height: 1.15;
+
 //
 // Colors
 //
 
-$grey-dk-000: #959396;
-$grey-dk-100: #5c5962;
-$grey-dk-200: #44434d;
-$grey-dk-300: #27262b;
+$white: #fff !default;
+
+$grey-dk-000: #959396 !default;
+$grey-dk-100: #5c5962 !default;
+$grey-dk-200: #44434d !default;
+$grey-dk-300: #27262b !default;
+
+$grey-lt-000: #f5f6fa !default;
+$grey-lt-100: #eeebee !default;
+$grey-lt-200: #ecebed !default;
+$grey-lt-300: #e6e1e8 !default;
 
-$grey-lt-000: #f5f6fa;
-$grey-lt-100: #efebf0;
-$grey-lt-200: #ecebed;
-$grey-lt-300: #e6e1e8;
+$purple-000: #7253ed !default;
+$purple-100: #5e41d0 !default;
+$purple-200: #4e26af !default;
+$purple-300: #381885 !default;
 
-$purple-000: #7253ed;
-$purple-100: #5e41d0;
-$purple-200: #4e26af;
-$purple-300: #381885;
+$blue-000: #2c84fa !default;
+$blue-100: #2869e6 !default;
+$blue-200: #264caf !default;
+$blue-300: #183385 !default;
 
-$green-000: #41d66f;
-$green-100: #2bb45a;
-$green-200: #299950;
-$green-300: #156f49;
+$green-000: #41d693 !default;
+$green-100: #11b584 !default;
+$green-200: #009c7b !default;
+$green-300: #026e57 !default;
 
-$body-text-color: $grey-dk-100;
-$body-heading-color: $grey-dk-300;
-$root-font-size: 16px;         // Base font-size for rems
-$link-color: $purple-000;
+$body-text-color: $grey-dk-100 !default;
+$body-heading-color: $grey-dk-300 !default;
+$link-color: $purple-000 !default;
 
 //
 // Media queries in pixels
@@ -36,7 +52,7 @@ $media-queries: (
   sm: 500px,
   md: 740px,
   lg: 1120px,
-  xl: 1200px
+  xl: 1400px
 ) !default;
 
 //
@@ -55,7 +71,7 @@ $spacers: (
   sp-6: $spacing-unit * 2,
   sp-7: $spacing-unit * 2.5,
   sp-8: $spacing-unit * 3
-);
+) !default;
 
 $sp-1: map-get($spacers, sp-1); // 0.25 rem == 4px
 $sp-2: map-get($spacers, sp-2); // 0.5  rem == 8px
@@ -70,17 +86,18 @@ $sp-8: map-get($spacers, sp-8); // 3    rem == 48px
 // Borders
 //
 
-$border: 1px solid;
-$border-radius: 4px;
-$border-color: $grey-lt-100;
+$border: 1px solid !default;
+$border-radius: 4px !default;
+$border-color: $grey-lt-100 !default;
 
 //
 // Grid system
 //
 
-$gutter-spacing: $sp-6;
-$nav-width: 232px;
-$content-width: 800px;
+$gutter-spacing: $sp-6 !default;
+$gutter-spacing-sm: $sp-4 !default;
+$nav-width: 232px !default;
+$content-width: 800px !default;
 
 $media-queries: (
   xs: 320px,
@@ -89,11 +106,3 @@ $media-queries: (
   lg: 800px,
   xl: 1316px
 ) !default;
-
-//
-// Typography
-//
-
-$body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif;
-
-$mono-font-family: Menlo, Consolas, Monospace;
diff --git a/_sass/support/mixins/_buttons.scss b/_sass/support/mixins/_buttons.scss
new file mode 100644
index 0000000000000000000000000000000000000000..9a6b84feb6b4dc9056d330f57477906c57be4d3a
--- /dev/null
+++ b/_sass/support/mixins/_buttons.scss
@@ -0,0 +1,25 @@
+// Colored button
+
+@mixin btn-color($fg, $bg) {
+  color: $fg;
+  background-image: linear-gradient(lighten($bg, 5%), darken($bg, 2%));
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 4px 10px rgba(0, 0, 0, 0.12);
+
+  &:hover,
+  &.zeroclipboard-is-hover {
+    color: $fg;
+    background-image: linear-gradient((lighten($bg, 2%), darken($bg, 4%)));
+  }
+
+  &:active,
+  &.selected,
+  &.zeroclipboard-is-active {
+    background-color: darken($bg, 5%);
+    background-image: none;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
+  }
+
+  &.selected:hover {
+    background-color: darken($bg, 10%);
+  }
+}
diff --git a/_sass/support/_mixins.scss b/_sass/support/mixins/_layout.scss
similarity index 52%
rename from _sass/support/_mixins.scss
rename to _sass/support/mixins/_layout.scss
index d63845aab265b9776b2fbfc2ce99262d8898ad7d..52b9e3cb192b5ecfb8474b95b475f628f75d005c 100644
--- a/_sass/support/_mixins.scss
+++ b/_sass/support/mixins/_layout.scss
@@ -1,45 +1,3 @@
-// Font size
-
-@mixin fs-1 {
-  font-size: 10px !important;
-}
-
-@mixin fs-2 {
-  font-size: 12px !important;
-}
-
-@mixin fs-3 {
-  font-size: 14px !important;
-}
-
-@mixin fs-4 {
-  font-size: 16px !important;
-}
-
-@mixin fs-5 {
-  font-size: 18px !important;
-}
-
-@mixin fs-6 {
-  font-size: 24px !important;
-}
-
-@mixin fs-7 {
-  font-size: 32px !important;
-}
-
-@mixin fs-8 {
-  font-size: 36px !important;
-}
-
-@mixin fs-9 {
-  font-size: 42px !important;
-}
-
-@mixin fs-10 {
-  font-size: 48px !important;
-}
-
 // Media query
 
 // Media query mixin
@@ -62,3 +20,15 @@
         + "Please make sure it is defined in `$media-queries` map.";
   }
 }
+
+// Responsive container
+
+@mixin container {
+  padding-left: $gutter-spacing-sm;
+  padding-right: $gutter-spacing-sm;
+
+  @include mq(md) {
+    padding-left: $gutter-spacing;
+    padding-right: $gutter-spacing;
+  }
+}
diff --git a/_sass/support/mixins/_typography.scss b/_sass/support/mixins/_typography.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e6d85beaa71062767d1ece9e9bde819f2a31e2ad
--- /dev/null
+++ b/_sass/support/mixins/_typography.scss
@@ -0,0 +1,81 @@
+// Font size
+
+@mixin fs-1 {
+  font-size: 9px !important;
+
+  @include mq(sm) {
+    font-size: 10px !important;
+  }
+}
+
+@mixin fs-2 {
+  font-size: 11px !important;
+
+  @include mq(sm) {
+    font-size: 12px !important;
+  }
+}
+
+@mixin fs-3 {
+  font-size: 12px !important;
+
+  @include mq(sm) {
+    font-size: 14px !important;
+  }
+}
+
+@mixin fs-4 {
+  font-size: 14px !important;
+
+  @include mq(sm) {
+    font-size: 16px !important;
+  }
+}
+
+@mixin fs-5 {
+  font-size: 16px !important;
+
+  @include mq(sm) {
+    font-size: 18px !important;
+  }
+}
+
+@mixin fs-6 {
+  font-size: 18px !important;
+
+  @include mq(sm) {
+    font-size: 24px !important;
+  }
+}
+
+@mixin fs-7 {
+  font-size: 24px !important;
+
+  @include mq(sm) {
+    font-size: 32px !important;
+  }
+}
+
+@mixin fs-8 {
+  font-size: 32px !important;
+
+  @include mq(sm) {
+    font-size: 36px !important;
+  }
+}
+
+@mixin fs-9 {
+  font-size: 36px !important;
+
+  @include mq(sm) {
+    font-size: 42px !important;
+  }
+}
+
+@mixin fs-10 {
+  font-size: 42px !important;
+
+  @include mq(sm) {
+    font-size: 48px !important;
+  }
+}
diff --git a/_sass/support/mixins/mixins.scss b/_sass/support/mixins/mixins.scss
new file mode 100644
index 0000000000000000000000000000000000000000..0506fbf5ff41fe2323e6154501ebdcaf00b36d26
--- /dev/null
+++ b/_sass/support/mixins/mixins.scss
@@ -0,0 +1,3 @@
+@import "./layout";
+@import "./buttons";
+@import "./typography";
diff --git a/_sass/support/support.scss b/_sass/support/support.scss
index e060be55fa28de4f92f4c5ab941b38305cb927c2..8131a3201a04b0ff1a9698fa22ac7b1bbba1dc82 100644
--- a/_sass/support/support.scss
+++ b/_sass/support/support.scss
@@ -1,3 +1,3 @@
 @import "./variables";
 @import "./functions";
-@import "./mixins";
+@import "./mixins/mixins";
diff --git a/_sass/tables.scss b/_sass/tables.scss
index 1b55156321f78c2ffd9ce45229445cb125c550d2..e10715122a2b57824dfdacb7e271aeb98021a171 100644
--- a/_sass/tables.scss
+++ b/_sass/tables.scss
@@ -1,8 +1,19 @@
+//
+// Tables
+//
+
 table {
+  display: block;
   width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
   margin-bottom: $sp-5;
   border-collapse: separate;
-  box-shadow: 0 3px 12px 0 transparentize($grey-dk-300, 0.9);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05);
+
+  @include mq(sm) {
+    display: table;
+  }
 }
 
 th,
@@ -14,6 +25,7 @@ td {
   padding-right: $sp-3;
   border-bottom: $border $grey-lt-000;
   border-left: $border $border-color;
+  min-width: 120px;
 
   &:first-of-type {
     border-left: 0;
@@ -54,11 +66,8 @@ tbody {
   }
 }
 
-
-
-
-
 thead {
   th {
+    border-bottom: 1px solid $border-color;
   }
 }
diff --git a/_sass/typography.scss b/_sass/typography.scss
index b5944b944763d31259c1646bdf68a4a956546cd2..1b2cb28c48e1872d8e41a896d37734c9862861f2 100644
--- a/_sass/typography.scss
+++ b/_sass/typography.scss
@@ -1,3 +1,7 @@
+//
+// Typography
+//
+
 h1,
 .text-alpha {
   @include fs-8;
@@ -29,7 +33,7 @@ h5,
 }
 
 h6,
-.text-epsilon {
+.text-zeta {
   @include fs-2;
   color: $grey-dk-200;
 }
@@ -40,14 +44,10 @@ li {
   }
 }
 
-hr {
-  height: 1px;
-  padding: 0;
-  margin: $sp-6 0;
-  background-color: $grey-lt-100;
-  border: 0;
-}
-
 .text-small {
   @include fs-2;
 }
+
+.text-mono {
+  font-family: $mono-font-family;
+}
diff --git a/_sass/utilities/_colors.scss b/_sass/utilities/_colors.scss
index aa8e0d8817acd9c8903f9dc9109d85acb1e9f5ad..6ea157864fbaadd9c7eb3b577412b5970ecb2f02 100644
--- a/_sass/utilities/_colors.scss
+++ b/_sass/utilities/_colors.scss
@@ -1,17 +1,23 @@
-.text-purple-000 {
-  color: $purple-000 !important;
+//
+// Utility classes for colors
+//
+
+// Text colors
+
+.text-grey-dk-000 {
+  color: $grey-dk-000 !important;
 }
 
-.text-purple-100 {
-  color: $purple-100 !important;
+.text-grey-dk-100 {
+  color: $grey-dk-100 !important;
 }
 
-.text-purple-200 {
-  color: $purple-200 !important;
+.text-grey-dk-200 {
+  color: $grey-dk-200 !important;
 }
 
-.text-purple-300 {
-  color: $purple-300 !important;
+.text-grey-dk-300 {
+  color: $grey-dk-300 !important;
 }
 
 .text-grey-lt-000 {
@@ -30,18 +36,50 @@
   color: $grey-lt-300 !important;
 }
 
-.text-grey-dk-000 {
-  color: $grey-dk-000 !important;
+.text-blue-000 {
+  color: $blue-000 !important;
 }
 
-.text-grey-dk-100 {
-  color: $grey-dk-100 !important;
+.text-blue-100 {
+  color: $blue-100 !important;
 }
 
-.text-grey-dk-200 {
-  color: $grey-dk-200 !important;
+.text-blue-200 {
+  color: $blue-200 !important;
 }
 
-.text-grey-dk-300 {
-  color: $grey-dk-300 !important;
+.text-blue-300 {
+  color: $blue-300 !important;
+}
+
+.text-green-000 {
+  color: $green-000 !important;
+}
+
+.text-green-100 {
+  color: $green-100 !important;
+}
+
+.text-green-200 {
+  color: $green-200 !important;
+}
+
+.text-green-300 {
+  color: $green-300 !important;
+}
+
+.text-purple-000 {
+  color: $purple-000 !important;
+}
+
+.text-purple-100 {
+  color: $purple-100 !important;
+}
+
+.text-purple-200 {
+  color: $purple-200 !important;
+}
+
+.text-purple-300 {
+  color: $purple-300 !important;
 }
diff --git a/_sass/utilities/_layout.scss b/_sass/utilities/_layout.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..24f4fe125a800801a91c85aeb1cb793259eb17cf 100644
--- a/_sass/utilities/_layout.scss
+++ b/_sass/utilities/_layout.scss
@@ -0,0 +1,26 @@
+//
+// Utility classes for layout and spacing
+//
+
+.d-block { display: block !important; }
+.d-flex { display: flex !important; }
+.d-inline { display: inline !important; }
+.d-inline-block { display: inline-block !important; }
+.d-none { display: none !important; }
+
+@each $media-query in map-keys($media-queries) {
+  @for $i from 1 through length($spacers) {
+    @include mq($media-query) {
+      $size: #{map-get($spacers, sp-#{$i - 1})};
+      $scale: #{$i - 1};
+
+      // .d-sm-block, .d-md-none, .d-lg-inline
+      .d-#{$media-query}-block { display: block !important; }
+      .d-#{$media-query}-flex { display: flex !important; }
+      .d-#{$media-query}-inline { display: inline !important; }
+      .d-#{$media-query}-inline-block { display: inline-block !important; }
+      .d-#{$media-query}-none { display: none !important; }
+
+    }
+  }
+}
diff --git a/_sass/utilities/_lists.scss b/_sass/utilities/_lists.scss
index 6fea9fca5ae4fa10a410ae9f8bff47e71894ade0..0c5bcad7e69ea97393e5581f3c8b94026ecb5591 100644
--- a/_sass/utilities/_lists.scss
+++ b/_sass/utilities/_lists.scss
@@ -1,3 +1,7 @@
+//
+// Utility classes for lists
+//
+
 // stylelint-disable primer/selector-no-utility
 
 .list-style-none {
diff --git a/_sass/utilities/_spacing.scss b/_sass/utilities/_spacing.scss
index cd8214c53220f8640f0fe0bdc80c21492935ec21..9b428169e63b5d23e20fa269117740a2cf566194 100644
--- a/_sass/utilities/_spacing.scss
+++ b/_sass/utilities/_spacing.scss
@@ -1,10 +1,10 @@
-// scss-lint:disable SpaceAfterPropertyName
-// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility
-
-// Margin spacer utilities
+//
+// Utility classes for margins and padding
+//
 
 // scss-lint:disable SpaceAfterPropertyName
 // stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility
+
 // Margin spacer utilities
 
 @for $i from 1 through length($spacers) {
@@ -42,7 +42,7 @@
 @each $media-query in map-keys($media-queries) {
   @for $i from 1 through length($spacers) {
     @include mq($media-query) {
-      $size: #{map-get($spacers, spacer#{$i - 1})};
+      $size: #{map-get($spacers, sp-#{$i - 1})};
       $scale: #{$i - 1};
 
       // .m-sm-0, .m-md-1, .m-lg-2...
@@ -97,7 +97,7 @@
 @each $media-query in map-keys($media-queries) {
   @include mq($media-query) {
     @for $i from 1 through length($spacers) {
-      $size: #{map-get($spacers, spacer#{$i - 1})};
+      $size: #{map-get($spacers, sp-#{$i - 1})};
       $scale: #{$i - 1};
 
       // .p-sm-0, .p-md-1, .p-lg-2...
diff --git a/_sass/utilities/_typography.scss b/_sass/utilities/_typography.scss
index f9625fba52ad38e3aee4c9a7adeabda06abb11f6..7206deff2df087cbd28f9e8099b3bc9ca4857b76 100644
--- a/_sass/utilities/_typography.scss
+++ b/_sass/utilities/_typography.scss
@@ -1,3 +1,9 @@
+//
+// Utility classes for typography
+//
+
+// stylelint-disable primer/selector-no-utility
+
 .fs-1 {
   @include fs-1;
 }
@@ -53,3 +59,33 @@
 .fw-700 {
   font-weight: 700 !important;
 }
+
+.lh-0 {
+  line-height: 0 !important;
+}
+
+.lh-default {
+  line-height: $body-line-height;
+}
+
+.lh-tight {
+  line-height: $body-heading-line-height;
+}
+
+.ls-5 {
+  letter-spacing: 0.05em !important;
+}
+
+.ls-10 {
+  letter-spacing: 0.1em !important;
+}
+
+.ls-0 {
+  letter-spacing: 0 !important;
+}
+
+.text-uppercase {
+  text-transform: uppercase !important;
+}
+
+// stylelint-enable primer/selector-no-utility
diff --git a/assets/css/just-the-docs.scss b/assets/css/just-the-docs.scss
index dce54397d44da1b28e1770fef1096a5b83b1734a..4fc74eaa5fd253dc196bb44977055bb2375f3b7a 100644
--- a/assets/css/just-the-docs.scss
+++ b/assets/css/just-the-docs.scss
@@ -15,24 +15,13 @@
 
 // Support
 @import "./support/support";
-
-// Utilities
-@import "./utilities/utilities";
-
-// Base
 @import "./base";
-
-// Layout
 @import "./layout";
-
-// Navigation
+@import "./content";
 @import "./navigation";
-
-// Typography
 @import "./typography";
-
-// Tables
+@import "./buttons";
+@import "./search";
 @import "./tables";
-
-// Code blocks and inline code
 @import "./code";
+@import "./utilities/utilities";
diff --git a/assets/images/just-the-docs.png b/assets/images/just-the-docs.png
index a2a57a94a432c6060942394854e99f9c11b91635..81c33065f2794814cbe1a53791d8bc4bfbb91cb1 100644
Binary files a/assets/images/just-the-docs.png and b/assets/images/just-the-docs.png differ
diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..4d2979910d5a8a2811c7610bbbb826b2bfceb20f 100644
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -0,0 +1,125 @@
+// Event handling
+
+function addEvent(el, type, handler) {
+    if (el.attachEvent) el.attachEvent('on'+type, handler); else el.addEventListener(type, handler);
+}
+function removeEvent(el, type, handler) {
+    if (el.detachEvent) el.detachEvent('on'+type, handler); else el.removeEventListener(type, handler);
+}
+
+// Show/hide mobile menu
+
+function toggleNav(){
+  const nav = document.querySelector('.js-main-nav');
+  const navTrigger = document.querySelector('.js-main-nav-trigger');
+
+
+  addEvent(navTrigger, 'click', function(){
+    var text = navTrigger.innerText;
+    var textToggle = navTrigger.getAttribute('data-text-toggle');
+
+    nav.classList.toggle('nav-open');
+    navTrigger.classList.toggle('nav-open');
+    navTrigger.innerText = textToggle;
+    navTrigger.setAttribute('data-text-toggle', text);
+    textToggle = text;
+  })
+}
+
+// Site search
+
+function initSearch() {
+  var index = lunr(function () {
+    this.ref('id');
+    this.field('title');
+    this.field('content', { boost: 10 });
+    this.field('url');
+  });
+
+  // Get the generated search_data.json file so lunr.js can search it locally.
+
+  var request = new XMLHttpRequest();
+  request.open('GET', '/search-data.json', true);
+
+  request.onload = function() {
+    if (request.status >= 200 && request.status < 400) {
+      // Success!
+      var data = JSON.parse(request.responseText);
+      var keys = Object.keys(data);
+
+      for(var i in data) {
+        index.add({
+          id: data[i].id,
+          title: data[i].title,
+          content: data[i].content,
+          url: data[i].url
+        });
+      }
+      searchResults(data);
+    } else {
+      // We reached our target server, but it returned an error
+      console.log('Error loading ajax request. Request status:' + request.status);
+    }
+  };
+
+  request.onerror = function() {
+    // There was a connection error of some sort
+    console.log('There was a connection error');
+  };
+
+  request.send();
+
+  function searchResults(dataStore) {
+    var searchInput = document.querySelector('.js-search-input');
+    var searchResults = document.querySelector('.js-search-results');
+    var store = dataStore;
+
+    addEvent(searchInput, 'keyup', function(){
+        var query = this.value;
+
+        searchResults.innerHTML = '';
+
+        if (query === '') {
+          searchResults.innerHTML = '';
+        } else {
+          var results = index.search(query);
+          for (var i in results) {
+            var resultsList = document.createElement("ul");
+            var resultsListItem = document.createElement("li");
+            var resultsLink = document.createElement("a");
+            var resultsUrl = store[results[i].ref].url;
+            var resultsTitle = store[results[i].ref].title;
+
+            resultsLink.setAttribute("href", store[results[i].ref].url);
+            resultsLink.innerText = resultsTitle;
+
+            resultsList.classList.add("search-results-list");
+            searchResults.appendChild(resultsList);
+            resultsList.appendChild(resultsListItem);
+            resultsListItem.appendChild(resultsLink)
+          }
+        }
+    });
+
+    addEvent(searchInput, 'blur', function(){
+      setTimeout(function(){searchResults.innerHTML = '';}, 300);
+    });
+  }
+}
+
+
+// Document ready
+
+function ready(){
+  toggleNav();
+  initSearch();
+}
+
+// in case the document is already rendered
+if (document.readyState!='loading') ready();
+// modern browsers
+else if (document.addEventListener) document.addEventListener('DOMContentLoaded', ready);
+// IE <= 8
+else document.attachEvent('onreadystatechange', function(){
+    if (document.readyState=='complete') ready();
+});
diff --git a/assets/js/vendor/lunr.min.js b/assets/js/vendor/lunr.min.js
new file mode 100644
index 0000000000000000000000000000000000000000..9960ccd23f6f24b89680f80e2e21bf26d5ccc6d2
--- /dev/null
+++ b/assets/js/vendor/lunr.min.js
@@ -0,0 +1,6 @@
+/**
+ * lunr - http://lunrjs.com - A bit like Solr, but much smaller and not as bright - 1.0.0
+ * Copyright (C) 2017 Oliver Nightingale
+ * @license MIT
+ */
+!function(){var t=function(e){var n=new t.Index;return n.pipeline.add(t.trimmer,t.stopWordFilter,t.stemmer),e&&e.call(n,n),n};t.version="1.0.0",t.utils={},t.utils.warn=function(t){return function(e){t.console&&console.warn&&console.warn(e)}}(this),t.utils.asString=function(t){return void 0===t||null===t?"":t.toString()},t.EventEmitter=function(){this.events={}},t.EventEmitter.prototype.addListener=function(){var t=Array.prototype.slice.call(arguments),e=t.pop(),n=t;if("function"!=typeof e)throw new TypeError("last argument must be a function");n.forEach(function(t){this.hasHandler(t)||(this.events[t]=[]),this.events[t].push(e)},this)},t.EventEmitter.prototype.removeListener=function(t,e){if(this.hasHandler(t)){var n=this.events[t].indexOf(e);this.events[t].splice(n,1),this.events[t].length||delete this.events[t]}},t.EventEmitter.prototype.emit=function(t){if(this.hasHandler(t)){var e=Array.prototype.slice.call(arguments,1);this.events[t].forEach(function(t){t.apply(void 0,e)})}},t.EventEmitter.prototype.hasHandler=function(t){return t in this.events},t.tokenizer=function(e){return arguments.length&&null!=e&&void 0!=e?Array.isArray(e)?e.map(function(e){return t.utils.asString(e).toLowerCase()}):e.toString().trim().toLowerCase().split(t.tokenizer.separator):[]},t.tokenizer.separator=/[\s\-]+/,t.tokenizer.load=function(t){var e=this.registeredFunctions[t];if(!e)throw new Error("Cannot load un-registered function: "+t);return e},t.tokenizer.label="default",t.tokenizer.registeredFunctions={"default":t.tokenizer},t.tokenizer.registerFunction=function(e,n){n in this.registeredFunctions&&t.utils.warn("Overwriting existing tokenizer: "+n),e.label=n,this.registeredFunctions[n]=e},t.Pipeline=function(){this._stack=[]},t.Pipeline.registeredFunctions={},t.Pipeline.registerFunction=function(e,n){n in this.registeredFunctions&&t.utils.warn("Overwriting existing registered function: "+n),e.label=n,t.Pipeline.registeredFunctions[e.label]=e},t.Pipeline.warnIfFunctionNotRegistered=function(e){var n=e.label&&e.label in this.registeredFunctions;n||t.utils.warn("Function is not registered with pipeline. This may cause problems when serialising the index.\n",e)},t.Pipeline.load=function(e){var n=new t.Pipeline;return e.forEach(function(e){var i=t.Pipeline.registeredFunctions[e];if(!i)throw new Error("Cannot load un-registered function: "+e);n.add(i)}),n},t.Pipeline.prototype.add=function(){var e=Array.prototype.slice.call(arguments);e.forEach(function(e){t.Pipeline.warnIfFunctionNotRegistered(e),this._stack.push(e)},this)},t.Pipeline.prototype.after=function(e,n){t.Pipeline.warnIfFunctionNotRegistered(n);var i=this._stack.indexOf(e);if(-1==i)throw new Error("Cannot find existingFn");i+=1,this._stack.splice(i,0,n)},t.Pipeline.prototype.before=function(e,n){t.Pipeline.warnIfFunctionNotRegistered(n);var i=this._stack.indexOf(e);if(-1==i)throw new Error("Cannot find existingFn");this._stack.splice(i,0,n)},t.Pipeline.prototype.remove=function(t){var e=this._stack.indexOf(t);-1!=e&&this._stack.splice(e,1)},t.Pipeline.prototype.run=function(t){for(var e=[],n=t.length,i=this._stack.length,r=0;n>r;r++){for(var o=t[r],s=0;i>s&&(o=this._stack[s](o,r,t),void 0!==o&&""!==o);s++);void 0!==o&&""!==o&&e.push(o)}return e},t.Pipeline.prototype.reset=function(){this._stack=[]},t.Pipeline.prototype.toJSON=function(){return this._stack.map(function(e){return t.Pipeline.warnIfFunctionNotRegistered(e),e.label})},t.Vector=function(){this._magnitude=null,this.list=void 0,this.length=0},t.Vector.Node=function(t,e,n){this.idx=t,this.val=e,this.next=n},t.Vector.prototype.insert=function(e,n){this._magnitude=void 0;var i=this.list;if(!i)return this.list=new t.Vector.Node(e,n,i),this.length++;if(e<i.idx)return this.list=new t.Vector.Node(e,n,i),this.length++;for(var r=i,o=i.next;void 0!=o;){if(e<o.idx)return r.next=new t.Vector.Node(e,n,o),this.length++;r=o,o=o.next}return r.next=new t.Vector.Node(e,n,o),this.length++},t.Vector.prototype.magnitude=function(){if(this._magnitude)return this._magnitude;for(var t,e=this.list,n=0;e;)t=e.val,n+=t*t,e=e.next;return this._magnitude=Math.sqrt(n)},t.Vector.prototype.dot=function(t){for(var e=this.list,n=t.list,i=0;e&&n;)e.idx<n.idx?e=e.next:e.idx>n.idx?n=n.next:(i+=e.val*n.val,e=e.next,n=n.next);return i},t.Vector.prototype.similarity=function(t){return this.dot(t)/(this.magnitude()*t.magnitude())},t.SortedSet=function(){this.length=0,this.elements=[]},t.SortedSet.load=function(t){var e=new this;return e.elements=t,e.length=t.length,e},t.SortedSet.prototype.add=function(){var t,e;for(t=0;t<arguments.length;t++)e=arguments[t],~this.indexOf(e)||this.elements.splice(this.locationFor(e),0,e);this.length=this.elements.length},t.SortedSet.prototype.toArray=function(){return this.elements.slice()},t.SortedSet.prototype.map=function(t,e){return this.elements.map(t,e)},t.SortedSet.prototype.forEach=function(t,e){return this.elements.forEach(t,e)},t.SortedSet.prototype.indexOf=function(t){for(var e=0,n=this.elements.length,i=n-e,r=e+Math.floor(i/2),o=this.elements[r];i>1;){if(o===t)return r;t>o&&(e=r),o>t&&(n=r),i=n-e,r=e+Math.floor(i/2),o=this.elements[r]}return o===t?r:-1},t.SortedSet.prototype.locationFor=function(t){for(var e=0,n=this.elements.length,i=n-e,r=e+Math.floor(i/2),o=this.elements[r];i>1;)t>o&&(e=r),o>t&&(n=r),i=n-e,r=e+Math.floor(i/2),o=this.elements[r];return o>t?r:t>o?r+1:void 0},t.SortedSet.prototype.intersect=function(e){for(var n=new t.SortedSet,i=0,r=0,o=this.length,s=e.length,a=this.elements,h=e.elements;;){if(i>o-1||r>s-1)break;a[i]!==h[r]?a[i]<h[r]?i++:a[i]>h[r]&&r++:(n.add(a[i]),i++,r++)}return n},t.SortedSet.prototype.clone=function(){var e=new t.SortedSet;return e.elements=this.toArray(),e.length=e.elements.length,e},t.SortedSet.prototype.union=function(t){var e,n,i;this.length>=t.length?(e=this,n=t):(e=t,n=this),i=e.clone();for(var r=0,o=n.toArray();r<o.length;r++)i.add(o[r]);return i},t.SortedSet.prototype.toJSON=function(){return this.toArray()},t.Index=function(){this._fields=[],this._ref="id",this.pipeline=new t.Pipeline,this.documentStore=new t.Store,this.tokenStore=new t.TokenStore,this.corpusTokens=new t.SortedSet,this.eventEmitter=new t.EventEmitter,this.tokenizerFn=t.tokenizer,this._idfCache={},this.on("add","remove","update",function(){this._idfCache={}}.bind(this))},t.Index.prototype.on=function(){var t=Array.prototype.slice.call(arguments);return this.eventEmitter.addListener.apply(this.eventEmitter,t)},t.Index.prototype.off=function(t,e){return this.eventEmitter.removeListener(t,e)},t.Index.load=function(e){e.version!==t.version&&t.utils.warn("version mismatch: current "+t.version+" importing "+e.version);var n=new this;return n._fields=e.fields,n._ref=e.ref,n.tokenizer(t.tokenizer.load(e.tokenizer)),n.documentStore=t.Store.load(e.documentStore),n.tokenStore=t.TokenStore.load(e.tokenStore),n.corpusTokens=t.SortedSet.load(e.corpusTokens),n.pipeline=t.Pipeline.load(e.pipeline),n},t.Index.prototype.field=function(t,e){var e=e||{},n={name:t,boost:e.boost||1};return this._fields.push(n),this},t.Index.prototype.ref=function(t){return this._ref=t,this},t.Index.prototype.tokenizer=function(e){var n=e.label&&e.label in t.tokenizer.registeredFunctions;return n||t.utils.warn("Function is not a registered tokenizer. This may cause problems when serialising the index"),this.tokenizerFn=e,this},t.Index.prototype.add=function(e,n){var i={},r=new t.SortedSet,o=e[this._ref],n=void 0===n?!0:n;this._fields.forEach(function(t){var n=this.pipeline.run(this.tokenizerFn(e[t.name]));i[t.name]=n;for(var o=0;o<n.length;o++){var s=n[o];r.add(s),this.corpusTokens.add(s)}},this),this.documentStore.set(o,r);for(var s=0;s<r.length;s++){for(var a=r.elements[s],h=0,u=0;u<this._fields.length;u++){var l=this._fields[u],c=i[l.name],f=c.length;if(f){for(var d=0,p=0;f>p;p++)c[p]===a&&d++;h+=d/f*l.boost}}this.tokenStore.add(a,{ref:o,tf:h})}n&&this.eventEmitter.emit("add",e,this)},t.Index.prototype.remove=function(t,e){var n=t[this._ref],e=void 0===e?!0:e;if(this.documentStore.has(n)){var i=this.documentStore.get(n);this.documentStore.remove(n),i.forEach(function(t){this.tokenStore.remove(t,n)},this),e&&this.eventEmitter.emit("remove",t,this)}},t.Index.prototype.update=function(t,e){var e=void 0===e?!0:e;this.remove(t,!1),this.add(t,!1),e&&this.eventEmitter.emit("update",t,this)},t.Index.prototype.idf=function(t){var e="@"+t;if(Object.prototype.hasOwnProperty.call(this._idfCache,e))return this._idfCache[e];var n=this.tokenStore.count(t),i=1;return n>0&&(i=1+Math.log(this.documentStore.length/n)),this._idfCache[e]=i},t.Index.prototype.search=function(e){var n=this.pipeline.run(this.tokenizerFn(e)),i=new t.Vector,r=[],o=this._fields.reduce(function(t,e){return t+e.boost},0),s=n.some(function(t){return this.tokenStore.has(t)},this);if(!s)return[];n.forEach(function(e,n,s){var a=1/s.length*this._fields.length*o,h=this,u=this.tokenStore.expand(e).reduce(function(n,r){var o=h.corpusTokens.indexOf(r),s=h.idf(r),u=1,l=new t.SortedSet;if(r!==e){var c=Math.max(3,r.length-e.length);u=1/Math.log(c)}o>-1&&i.insert(o,a*s*u);for(var f=h.tokenStore.get(r),d=Object.keys(f),p=d.length,v=0;p>v;v++)l.add(f[d[v]].ref);return n.union(l)},new t.SortedSet);r.push(u)},this);var a=r.reduce(function(t,e){return t.intersect(e)});return a.map(function(t){return{ref:t,score:i.similarity(this.documentVector(t))}},this).sort(function(t,e){return e.score-t.score})},t.Index.prototype.documentVector=function(e){for(var n=this.documentStore.get(e),i=n.length,r=new t.Vector,o=0;i>o;o++){var s=n.elements[o],a=this.tokenStore.get(s)[e].tf,h=this.idf(s);r.insert(this.corpusTokens.indexOf(s),a*h)}return r},t.Index.prototype.toJSON=function(){return{version:t.version,fields:this._fields,ref:this._ref,tokenizer:this.tokenizerFn.label,documentStore:this.documentStore.toJSON(),tokenStore:this.tokenStore.toJSON(),corpusTokens:this.corpusTokens.toJSON(),pipeline:this.pipeline.toJSON()}},t.Index.prototype.use=function(t){var e=Array.prototype.slice.call(arguments,1);e.unshift(this),t.apply(this,e)},t.Store=function(){this.store={},this.length=0},t.Store.load=function(e){var n=new this;return n.length=e.length,n.store=Object.keys(e.store).reduce(function(n,i){return n[i]=t.SortedSet.load(e.store[i]),n},{}),n},t.Store.prototype.set=function(t,e){this.has(t)||this.length++,this.store[t]=e},t.Store.prototype.get=function(t){return this.store[t]},t.Store.prototype.has=function(t){return t in this.store},t.Store.prototype.remove=function(t){this.has(t)&&(delete this.store[t],this.length--)},t.Store.prototype.toJSON=function(){return{store:this.store,length:this.length}},t.stemmer=function(){var t={ational:"ate",tional:"tion",enci:"ence",anci:"ance",izer:"ize",bli:"ble",alli:"al",entli:"ent",eli:"e",ousli:"ous",ization:"ize",ation:"ate",ator:"ate",alism:"al",iveness:"ive",fulness:"ful",ousness:"ous",aliti:"al",iviti:"ive",biliti:"ble",logi:"log"},e={icate:"ic",ative:"",alize:"al",iciti:"ic",ical:"ic",ful:"",ness:""},n="[^aeiou]",i="[aeiouy]",r=n+"[^aeiouy]*",o=i+"[aeiou]*",s="^("+r+")?"+o+r,a="^("+r+")?"+o+r+"("+o+")?$",h="^("+r+")?"+o+r+o+r,u="^("+r+")?"+i,l=new RegExp(s),c=new RegExp(h),f=new RegExp(a),d=new RegExp(u),p=/^(.+?)(ss|i)es$/,v=/^(.+?)([^s])s$/,g=/^(.+?)eed$/,m=/^(.+?)(ed|ing)$/,y=/.$/,S=/(at|bl|iz)$/,w=new RegExp("([^aeiouylsz])\\1$"),k=new RegExp("^"+r+i+"[^aeiouwxy]$"),x=/^(.+?[^aeiou])y$/,b=/^(.+?)(ational|tional|enci|anci|izer|bli|alli|entli|eli|ousli|ization|ation|ator|alism|iveness|fulness|ousness|aliti|iviti|biliti|logi)$/,E=/^(.+?)(icate|ative|alize|iciti|ical|ful|ness)$/,F=/^(.+?)(al|ance|ence|er|ic|able|ible|ant|ement|ment|ent|ou|ism|ate|iti|ous|ive|ize)$/,_=/^(.+?)(s|t)(ion)$/,z=/^(.+?)e$/,O=/ll$/,P=new RegExp("^"+r+i+"[^aeiouwxy]$"),T=function(n){var i,r,o,s,a,h,u;if(n.length<3)return n;if(o=n.substr(0,1),"y"==o&&(n=o.toUpperCase()+n.substr(1)),s=p,a=v,s.test(n)?n=n.replace(s,"$1$2"):a.test(n)&&(n=n.replace(a,"$1$2")),s=g,a=m,s.test(n)){var T=s.exec(n);s=l,s.test(T[1])&&(s=y,n=n.replace(s,""))}else if(a.test(n)){var T=a.exec(n);i=T[1],a=d,a.test(i)&&(n=i,a=S,h=w,u=k,a.test(n)?n+="e":h.test(n)?(s=y,n=n.replace(s,"")):u.test(n)&&(n+="e"))}if(s=x,s.test(n)){var T=s.exec(n);i=T[1],n=i+"i"}if(s=b,s.test(n)){var T=s.exec(n);i=T[1],r=T[2],s=l,s.test(i)&&(n=i+t[r])}if(s=E,s.test(n)){var T=s.exec(n);i=T[1],r=T[2],s=l,s.test(i)&&(n=i+e[r])}if(s=F,a=_,s.test(n)){var T=s.exec(n);i=T[1],s=c,s.test(i)&&(n=i)}else if(a.test(n)){var T=a.exec(n);i=T[1]+T[2],a=c,a.test(i)&&(n=i)}if(s=z,s.test(n)){var T=s.exec(n);i=T[1],s=c,a=f,h=P,(s.test(i)||a.test(i)&&!h.test(i))&&(n=i)}return s=O,a=c,s.test(n)&&a.test(n)&&(s=y,n=n.replace(s,"")),"y"==o&&(n=o.toLowerCase()+n.substr(1)),n};return T}(),t.Pipeline.registerFunction(t.stemmer,"stemmer"),t.generateStopWordFilter=function(t){var e=t.reduce(function(t,e){return t[e]=e,t},{});return function(t){return t&&e[t]!==t?t:void 0}},t.stopWordFilter=t.generateStopWordFilter(["a","able","about","across","after","all","almost","also","am","among","an","and","any","are","as","at","be","because","been","but","by","can","cannot","could","dear","did","do","does","either","else","ever","every","for","from","get","got","had","has","have","he","her","hers","him","his","how","however","i","if","in","into","is","it","its","just","least","let","like","likely","may","me","might","most","must","my","neither","no","nor","not","of","off","often","on","only","or","other","our","own","rather","said","say","says","she","should","since","so","some","than","that","the","their","them","then","there","these","they","this","tis","to","too","twas","us","wants","was","we","were","what","when","where","which","while","who","whom","why","will","with","would","yet","you","your"]),t.Pipeline.registerFunction(t.stopWordFilter,"stopWordFilter"),t.trimmer=function(t){return t.replace(/^\W+/,"").replace(/\W+$/,"")},t.Pipeline.registerFunction(t.trimmer,"trimmer"),t.TokenStore=function(){this.root={docs:{}},this.length=0},t.TokenStore.load=function(t){var e=new this;return e.root=t.root,e.length=t.length,e},t.TokenStore.prototype.add=function(t,e,n){var n=n||this.root,i=t.charAt(0),r=t.slice(1);return i in n||(n[i]={docs:{}}),0===r.length?(n[i].docs[e.ref]=e,void(this.length+=1)):this.add(r,e,n[i])},t.TokenStore.prototype.has=function(t){if(!t)return!1;for(var e=this.root,n=0;n<t.length;n++){if(!e[t.charAt(n)])return!1;e=e[t.charAt(n)]}return!0},t.TokenStore.prototype.getNode=function(t){if(!t)return{};for(var e=this.root,n=0;n<t.length;n++){if(!e[t.charAt(n)])return{};e=e[t.charAt(n)]}return e},t.TokenStore.prototype.get=function(t,e){return this.getNode(t,e).docs||{}},t.TokenStore.prototype.count=function(t,e){return Object.keys(this.get(t,e)).length},t.TokenStore.prototype.remove=function(t,e){if(t){for(var n=this.root,i=0;i<t.length;i++){if(!(t.charAt(i)in n))return;n=n[t.charAt(i)]}delete n.docs[e]}},t.TokenStore.prototype.expand=function(t,e){var n=this.getNode(t),i=n.docs||{},e=e||[];return Object.keys(i).length&&e.push(t),Object.keys(n).forEach(function(n){"docs"!==n&&e.concat(this.expand(t+n,e))},this),e},t.TokenStore.prototype.toJSON=function(){return{root:this.root,length:this.length}},function(t,e){"function"==typeof define&&define.amd?define(e):"object"==typeof exports?module.exports=e():t.lunr=e()}(this,function(){return t})}();
\ No newline at end of file
diff --git a/docs/navigation-structure.md b/docs/navigation-structure.md
new file mode 100644
index 0000000000000000000000000000000000000000..83516b671decf55321221a8eaeb5d87dde0621e4
--- /dev/null
+++ b/docs/navigation-structure.md
@@ -0,0 +1,22 @@
+---
+layout: default
+title: Navigation Structure
+nav_order: 4
+---
+
+# Navigation Structure
+{:.no_toc}
+
+## Table of contents
+{: .no_toc .text-delta }
+
+1. TOC
+{:toc}
+
+---
+
+## Main navigation
+
+---
+
+## In-page navigation with Table of Contents
diff --git a/docs/page-architecture.md b/docs/page-architecture.md
deleted file mode 100644
index b28f3cf7dfee9c2a791146c3f1ea873128318efe..0000000000000000000000000000000000000000
--- a/docs/page-architecture.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-layout: default
-title: Navigation Structure
-nav_order: 3
----
diff --git a/docs/ui-components/buttons.md b/docs/ui-components/buttons.md
index cc8a644cb509cbd07222340277179f66bcb698ac..eec5deffc31c5b449803dc3dfff34b915325aaff 100644
--- a/docs/ui-components/buttons.md
+++ b/docs/ui-components/buttons.md
@@ -4,3 +4,103 @@ title: Buttons
 parent: UI Components
 nav_order: 2
 ---
+
+# Buttons
+{:.no_toc}
+
+## Table of contents
+{: .no_toc .text-delta }
+
+1. TOC
+{:toc}
+
+---
+
+## Basic button styles
+
+### Links that look like buttons
+
+<div class="code-example" markdown="1">
+
+[Link button](http://example.com/){: .btn }
+
+[Link button](http://example.com/){: .btn .btn-purple }
+[Link button](http://example.com/){: .btn .btn-blue }
+[Link button](http://example.com/){: .btn .btn-green }
+
+[Link button](http://example.com/){: .btn .btn-outline }
+
+</div>
+```markdown
+
+[Link button](http://example.com/){: .btn }
+
+[Link button](http://example.com/){: .btn .btn-purple }
+[Link button](http://example.com/){: .btn .btn-blue }
+[Link button](http://example.com/){: .btn .btn-green }
+
+[Link button](http://example.com/){: .btn .btn-outline }
+```
+
+### Button element
+
+GitHub flavored markdown does not support the `button` element, so you'll have to use inline HTML for this:
+
+
+<div class="code-example">
+
+<button type="button" name="button" class="btn">Button element</button>
+
+</div>
+```html
+<button type="button" name="button" class="btn">Button element</button>
+```
+
+---
+
+## Using utilities with buttons
+
+### Button size
+
+Wrap the button in container that uses the [font-size utility classes]({{ site.baseurl }}{% link docs/utilities.md %}#typography) to scale buttons:
+
+<div class="code-example" markdown="1">
+
+<span class="fs-6">
+[Big ass button](http://example.com/){: .btn }
+</span>
+
+<span class="fs-3">
+[Tiny ass button](http://example.com/){: .btn }
+</span>
+
+</div>
+```markdown
+<span class="fs-8">
+[Link button](http://example.com/){: .btn }
+</span>
+
+<span class="fs-3">
+[Tiny ass button](http://example.com/){: .btn }
+</span>
+```
+
+### Spacing between buttons
+
+Use the [margin utility classes]({{ site.baseurl }}{% link docs/utilities.md %}#spacing) to add spacing between two buttons in the same block.
+
+<div class="code-example" markdown="1">
+
+[Button with space](http://example.com/){: .btn .btn-purple .mr-2}
+[Button ](http://example.com/){: .btn .btn-blue .mr-2}
+
+[Button with more space](http://example.com/){: .btn .btn-green .mr-4}
+[Button ](http://example.com/){: .btn .btn-blue }
+</div>
+```markdown
+[Button with space](http://example.com/){: .btn .btn-purple .mr-2}
+[Button ](http://example.com/){: .btn .btn-blue }
+
+[Button with more space](http://example.com/){: .btn .btn-green .mr-4}
+[Button ](http://example.com/){: .btn .btn-blue }
+```
diff --git a/docs/ui-components/code.md b/docs/ui-components/code.md
index daf5ec4063d90e0ef42b800fb21d1195be72b2aa..bc1baf2d7be4730f99c52f8fac3c41fc2a399f72 100644
--- a/docs/ui-components/code.md
+++ b/docs/ui-components/code.md
@@ -2,5 +2,83 @@
 layout: default
 title: Code
 parent: UI Components
-nav_order: 3
+nav_order: 4
 ---
+
+# Code
+{:.no_toc}
+
+## Table of contents
+{: .no_toc .text-delta }
+
+1. TOC
+{:toc}
+
+---
+
+## Inline code
+
+Code can be rendered inline using single ticks by wrapping your code in single back ticks.
+
+<div class="code-example" markdown="1">
+
+Lorem ipsum dolor sit amet, `<inline code snippet>` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+</div>
+```markdown
+Lorem ipsum dolor sit amet, `<inline code snippet>` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+```
+
+---
+
+## Syntax highlighted code blocks
+
+Use Jekyll's built in syntax highlighting with Rouge for code blocks by using three backticks, followed by the language name:
+
+<div class="code-example" markdown="1">
+```js
+// Javascript code with syntax highlighting.
+var fun = function lang(l) {
+  dateformat.i18n = require('./lang/' + l)
+  return true;
+}
+```
+</div>
+{% highlight markdown %}
+```js
+// Javascript code with syntax highlighting.
+var fun = function lang(l) {
+  dateformat.i18n = require('./lang/' + l)
+  return true;
+}
+```
+{% endhighlight %}
+
+---
+
+## Code blocks with rendered examples
+
+To demonstrate front end code, sometimes it useful to show a rendered example of that code. After including the styles from your project that you'll need to show the rendering, you can use a div with the `code-example` class, followed by the code block syntax. If you want to render your output with Markdown instead of HTML, use the `markdown="1"` attribute to tell Jekyll that the code you are rendering will be in Markdown format... This is about to get meta...
+
+<div class="code-example" markdown="1">
+
+<div class="code-example" markdown="1">
+
+[Link button](http://example.com/){: .btn }
+
+</div>
+```markdown
+[Link button](http://example.com/){: .btn }
+```
+
+</div>
+{% highlight markdown %}
+<div class="code-example" markdown="1">
+
+[Link button](http://example.com/){: .btn }
+
+</div>
+```markdown
+[Link button](http://example.com/){: .btn }
+```
+{% endhighlight %}
diff --git a/docs/ui-components/tables.md b/docs/ui-components/tables.md
new file mode 100644
index 0000000000000000000000000000000000000000..a26082db79599ffeb705309c02db154267c90099
--- /dev/null
+++ b/docs/ui-components/tables.md
@@ -0,0 +1,40 @@
+---
+layout: default
+title: Tables
+parent: UI Components
+nav_order: 3
+---
+
+# Tables
+{:.no_toc}
+
+## Table of contents
+{: .no_toc .text-delta }
+
+1. TOC
+{:toc }
+
+---
+
+## Default tables
+
+Tables are responsive by default, allowing wide tables to have a horizontal scroll to access columns outside of the normal viewport.
+
+<div class="code-example" markdown="1">
+
+| head1        | head two          | three |
+|:-------------|:------------------|:------|
+| ok           | good swedish fish | nice  |
+| out of stock | good and plenty   | nice  |
+| ok           | good `oreos`      | hmm   |
+| ok           | good `zoute` drop | yumm  |
+
+</div>
+```markdown
+| head1        | head two          | three |
+|:-------------|:------------------|:------|
+| ok           | good swedish fish | nice  |
+| out of stock | good and plenty   | nice  |
+| ok           | good `oreos`      | hmm   |
+| ok           | good `zoute` drop | yumm  |
+```
diff --git a/docs/ui-components/typography.md b/docs/ui-components/typography.md
index 8fa122fbd78a4cbc6339b6ebf81e8c7ed3962046..5b434d5be6e217952cacb14200dad1445a25f9d4 100644
--- a/docs/ui-components/typography.md
+++ b/docs/ui-components/typography.md
@@ -4,3 +4,111 @@ title: Typography
 parent: UI Components
 nav_order: 1
 ---
+
+# Typography
+{:.no_toc}
+
+## Table of contents
+{: .no_toc .text-delta }
+
+1. TOC
+{:toc}
+
+---
+
+## Font stack
+
+By default, Just the Docs uses a native system font stack for sans-serif fonts:
+
+```scss
+-apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif
+```
+
+ABCDEFGHIJKLMNOPQRSTUVWXYZ  
+abcdefghijklmnopqrstuvwxyz
+{: .fs-5 .ls-10 .code-example }
+
+For monospace type, like code snippets or the pre `<pre>` element, Just the Docs uses a native system font stack for monospace fonts:
+
+```scss
+"SFMono-Regular", Menlo, Consolas, Monospace
+```
+
+ABCDEFGHIJKLMNOPQRSTUVWXYZ  
+abcdefghijklmnopqrstuvwxyz
+{: .fs-5 .ls-10 .text-mono .code-example }
+
+---
+
+## Responsive type scale
+
+Just the docs uses a responsive type scale that shifts depending on the viewport size. Common elements text elements rendered from markdown use a
+
+| Selector              | Small screen size `font-size`    | Large screen size `font-size` |
+|:----------------------|:---------------------------------|:------------------------------|
+| `h1`, `.text-alpha`   | 32px                             | 36px                          |
+| `h2`, `.text-beta`    | 18px                             | 24px                          |
+| `h3`, `.text-gamma`   | 16px                             | 18px                          |
+| `h4`, `.text-delta`   | 14px                             | 16px                          |
+| `h5`, `.text-epsilon` | 16px                             | 18px                          |
+| `h6`, `.text-zeta  `   | 18px                             | 24px                          |
+| `body`                | 14px                             | 16px                          |
+
+---
+
+## Headings
+
+Headings are rendered like this:
+
+<div class="code-example">
+<h1>Heading 1</h1>
+<h2>Heading 2</h2>
+<h3>Heading 3</h3>
+<h4>Heading 4</h4>
+<h5>Heading 5</h5>
+<h6>Heading 6</h6>
+</div>
+```markdown
+# Heading 1
+## Heading 2
+### Heading 3
+#### Heading 4
+##### Heading 5
+###### Heading 6
+```
+
+---
+
+## Body text
+
+Default body text is rendered like this:
+
+<div class="code-example" markdown="1">
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</div>
+```markdown
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+```
+
+---
+
+## Inline elements
+
+<div class="code-example" markdown="1">
+Text can be **bold**, _italic_, or ~~strikethrough~~.
+
+[Link to another page](another-page).
+</div>
+```markdown
+Text can be **bold**, _italic_, or ~~strikethrough~~.
+
+[Link to another page](another-page).
+```
+
+---
+
+## Typographic Utilities
+
+There are a number of specific typographic CSS classes that allow you to do override default styling for font size, font-weight, line height, and capitalization.
+
+[View typography utilities]({{ site.base_url }}{% link docs/utilities.md %}#typography){: .btn .btn-outline }
diff --git a/docs/ui-components/ui-components.md b/docs/ui-components/ui-components.md
index 49e6812440e8ee54c958bf48183a8c6ca2ea5c6c..96088a80d654f98981af9d530d10efba7bb2eed2 100644
--- a/docs/ui-components/ui-components.md
+++ b/docs/ui-components/ui-components.md
@@ -9,4 +9,5 @@ permalink: /ui-components
 
 # UI Components
 
-Just the Docs includes styles for displaying clear and readable typography, nicely formatted code, and easily identifiable buttons. The goal of this theme is to make it as easy as possible to write code documentation in markdown and have the Just the Docs take care of the rest, so very few CSS classes are required to render commonly used UI elements.
+Just the Docs includes all the CSS you need to create structured documentation for your next project. To make it as easy as possible to write documentation in plain Markdown, most styles will require no additional CSS classes.
+{: .fs-6 .fw-300 }
diff --git a/docs/utilities.md b/docs/utilities.md
new file mode 100644
index 0000000000000000000000000000000000000000..384820a3f682443163edfde95163302c3856b41e
--- /dev/null
+++ b/docs/utilities.md
@@ -0,0 +1,259 @@
+---
+layout: default
+title: Utilities
+nav_order: 3
+---
+
+# Utilities
+{:.no_toc}
+
+CSS utility classes come in handy when you to want to override default styles to give create additional whitespace (margins/padding), unexpected shifts in font-size or weight, add color, or to hide (or show) something a specific screen size.
+{: .fs-6 .fw-300 }
+
+## Table of contents
+{: .no_toc .text-delta }
+
+1. TOC
+{:toc}
+
+---
+
+## Responsive modifiers
+
+Just the Docs spacing works in conjunction with a variety of modifiers that allow you to target specific screen sizes responsively. Use these in conjunction with spacing and display prexix and suffix classes. For example `prefix-modifier-suffix`
+
+| Modifier  | Screen size   |
+|:----------|:-------------------------------------|
+| (none)    | All screens until the next modifier  |
+| `xs`      | 320px (20rem) and up                 |
+| `sm`      | 500px (31.25rem) and up              |
+| `md`      | 740px (46.25rem) and up              |
+| `lg`      | 1120px (70rem) and up                |
+| `xl`      | 1400px (87.5rem) and up              |
+
+## Layout Utilities
+
+### Spacing
+
+These spacers are available to use for margins and padding with responsive utility classes. Combine these prefixes with a screen size and spacing scale to use them responsively.
+
+| Classname prefix | What it does                  |
+|:-----------------|:------------------------------|
+| `.m-`            | `margin`                      |
+| `.mx-`           | `margin-left`, `margin-right` |
+| `.my-`           | `margin top`, `margin bottom` |
+| `.mt-`           | `margin-top`                  |
+| `.mr-`           | `margin-right`                |
+| `.mb-`           | `margin-bottom`               |
+| `.ml-`           | `margin-left`                 |
+
+| Classname prefix | What it does                    |
+|:-----------------|:--------------------------------|
+| `.p-`            | `padding`                       |
+| `.px-`           | `padding-left`, `padding-right` |
+| `.py-`           | `padding top`, `padding bottom` |
+| `.pt-`           | `padding-top`                   |
+| `.pr-`           | `padding-right`                 |
+| `.pb-`           | `padding-bottom`                |
+| `.pl-`           | `padding-left`                  |
+
+Spacing values are based on a `1rem = 16px` spacing scale, broken down into these units:
+
+| Spacer/suffix  | Size in rems  | Rem converted to px |
+|:---------------|:--------------|:--------------------|
+| `1`            | 0.25rem       | 4px                 |
+| `2`            | 0.5rem        | 8px                 |
+| `3`            | 0.75rem       | 12px                |
+| `4`            | 1rem          | 16px                |
+| `5`            | 1.5rem        | 24px                |
+| `6`            | 2rem          | 32px                |
+| `7`            | 2.5rem        | 40px                |
+| `8`            | 3rem          | 48px                |
+
+#### Examples
+{: .no_toc }
+
+```markdown
+In Markdown, use the `{: }` wrapper to apply custom classes:
+
+This paragraph will have a margin bottom of 1rem/16px at large screens.
+{: .mb-lg-4 }
+
+This paragraph will have 2rem/32px of padding on the right and left at all screen sizes.
+{: .px-6 }
+
+```
+
+### Display
+
+Display classes aid in adapting the layout of the elements on a page:
+
+| Class             |                         |
+|:------------------|:------------------------|
+| `.d-block`        | `display: block`        |
+| `.d-flex`         | `display: flex`         |
+| `.d-inline`       | `display: inline`       |
+| `.d-inline-block` | `display: inline-block` |
+| `.d-none`         | `display: none`         |
+
+Use these classes in conjunction with the responsive modifiers.
+
+#### Examples
+{: .no_toc }
+
+```markdown
+In Markdown, use the `{: }` wrapper to apply custom classes:
+
+This button will be hidden until medium screen sizes:
+
+[ A button ](#url)
+{: .d-none .d-md-inline-block }
+
+These headings will be `inline-block`:
+
+### heading 3
+{ .d-inline-block }
+
+### heading 3
+{ .d-inline-block }
+
+```
+
+---
+## Typography
+
+### Font size
+
+Use the `.fs-1` - `.fs-10` to set an explicit font-size.
+
+| Class   | Small screen size `font-size`  | Large screen size `font-size` |
+|:--------|:-------------------------------|:------------------------------|
+| `.fs-1` | 9px                            | 10px                          |
+| `.fs-2` | 11px                           | 12px                          |
+| `.fs-3` | 12px                           | 14px                          |
+| `.fs-4` | 14px                           | 16px                          |
+| `.fs-5` | 16px                           | 18px                          |
+| `.fs-6` | 18px                           | 24px                          |
+| `.fs-7` | 24px                           | 32px                          |
+| `.fs-8` | 32px                           | 38px                          |
+| `.fs-9` | 38px                           | 42px                          |
+| `.fs-10`| 42px                           | 48px                          |
+
+<div class="code-example" markdown="1">
+Font size 1
+{: .fs-1 }
+Font size 2
+{: .fs-2 }
+Font size 3
+{: .fs-3 }
+Font size 4
+{: .fs-4 }
+Font size 5
+{: .fs-5 }
+Font size 6
+{: .fs-6 }
+Font size 7
+{: .fs-7 }
+Font size 8
+{: .fs-8 }
+Font size 9
+{: .fs-9 }
+Font size 10
+{: .fs-10 }
+</div>
+```markdown
+In Markdown, use the `{: }` wrapper to apply custom classes:
+
+Font size 1
+{: .fs-1 }
+Font size 2
+{: .fs-2 }
+Font size 3
+{: .fs-3 }
+Font size 4
+{: .fs-4 }
+Font size 5
+{: .fs-5 }
+Font size 6
+{: .fs-6 }
+Font size 7
+{: .fs-7 }
+Font size 8
+{: .fs-8 }
+Font size 9
+{: .fs-9 }
+Font size 10
+{: .fs-10 }
+```
+
+### Font weight
+
+Use the `.fw-300` - `.fw-700` to set an explicit font-size.
+
+<div class="code-example" markdown="1">
+Font weight 300
+{: .fw-300 }
+Font weight 400
+{: .fw-400 }
+Font weight 500
+{: .fw-500 }
+Font weight 700
+{: .fw-700 }
+</div>
+```markdown
+In Markdown, use the `{: }` wrapper to apply custom classes:
+
+Font weight 300
+{: .fw-300 }
+Font weight 400
+{: .fw-400 }
+Font weight 500
+{: .fw-500 }
+Font weight 700
+{: .fw-700 }
+```
+
+### Line height
+
+Use the `lh-` classes to explicitly apply line height to text.
+
+| Class         | `line-height` value  | Notes                         |
+|:--------------|:---------------------|:------------------------------|
+| `.lh-0`       | 0                    |                               |
+| `.lh-tight`   | 1.1                  | Default for headings          |
+| `.lh-default` | 1.4                  | Default for body (paragraphs) |
+
+
+
+<div class="code-example" markdown="1">
+No Line height  
+No Line height
+{: .lh-0 }
+
+Tight line height  
+Tight line height
+{: .lh-tight }
+
+Default line height  
+Default line height
+{: .fh-default }
+</div>
+```markdown
+In Markdown, use the `{: }` wrapper to apply custom classes:
+
+No Line height  
+No Line height
+{: .lh-0 }
+
+Tight line height  
+Tight line height
+{: .lh-tight }
+
+Default line height  
+Default line height
+{: .fh-default }
+```
+---
+## Color
+### Font color
+### Background color
diff --git a/index.md b/index.md
index c978ace1967cbe9da52de8489c0cceb2edf22e35..703b0c90490ae8a423f698b7e44651918359e128 100644
--- a/index.md
+++ b/index.md
@@ -4,12 +4,21 @@ title: Home
 nav_order: 1
 ---
 
-![Just the Docs](/assets/images/just-the-docs.png){:.img-logo}
 
-# A Jekyll theme for documentation
+# Focus on writing documentation, not building a website for it.
+{: .mt-4 .mt-md-0 :}
 
-Focus on writing good docs, not building a site for it. Just the docs allows you to create your documentation site with a Jekyll theme that is easily hosted on GitHub pages.
-{: .fs-6 .fw-300 }
+<div class="d-sm-flex my-sm-7">
+  <div class="px-8 pl-sm-0 pr-sm-6 mb-5 mb-sm-0">
+    <img src="/assets/images/just-the-docs.png" alt="" class="mt-sm-2">
+  </div>
+  <div markdown="1">
+  Just the Docs gives your documentation a home with a responsive Jekyll theme that is easily customizable and hosted on GitHub pages.
+  {: .fs-6 .fw-300 }
+
+  [Get Started](#getting-started){: .btn .btn-purple .mr-2 } [View GitHub](https://github.com/pmarsceill/just-the-docs){: .btn }
+  </div>
+</div>
 
 ---
 
@@ -32,6 +41,10 @@ theme: "just-the-docs"
 ```
 3. Run you local Jekyll server
 ```bash
+$ jekyll serve
+```
+```bash
+# .. or if you're using a Gemfile (bundler)
 $ bundle exec jekyll serve
 ```
 4. Point your web browser to [http://localhost:4000](http://localhost:4000)
@@ -40,7 +53,7 @@ $ bundle exec jekyll serve
 
 ## About the project
 
-Just the Docs is &copy; 2016 by [Patrick Marsceill](http://patrickmarsceill.com).
+Just the Docs is &copy; 2017 by [Patrick Marsceill](http://patrickmarsceill.com).
 
 ### License
 
diff --git a/search-data.json b/search-data.json
index a845151cc840034a50f5fd010515d61e661f79ee..0c01c809296f142031eabbdec0c58014d799c9eb 100644
--- a/search-data.json
+++ b/search-data.json
@@ -1,2 +1,15 @@
 ---
 ---
+{
+  {% for page in site.pages %}
+    {% unless page.url contains "css" %}
+    "{{ forloop.index - 1 }}": {
+      "id": "{{ forloop.index - 1 }}",
+      "title": "{{ page.title | xml_escape }}",
+      "content": "{{ page.content | strip_html | strip_newlines | escape | remove: "\"}}",
+      "url": " {{ page.url | xml_escape }}"
+    }
+    {% unless forloop.last %},{% endunless %}
+    {% endunless %}
+  {% endfor %}
+}