diff --git a/docs/assets/anchor.js b/docs/assets/anchor.js
new file mode 100644
index 00000000..1f573dcb
--- /dev/null
+++ b/docs/assets/anchor.js
@@ -0,0 +1,350 @@
+/*!
+ * AnchorJS - v4.0.0 - 2017-06-02
+ * https://github.com/bryanbraun/anchorjs
+ * Copyright (c) 2017 Bryan Braun; Licensed MIT
+ */
+/* eslint-env amd, node */
+
+// https://github.com/umdjs/umd/blob/master/templates/returnExports.js
+(function (root, factory) {
+  'use strict';
+  if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module.
+    define([], factory);
+  } else if (typeof module === 'object' && module.exports) {
+    // Node. Does not work with strict CommonJS, but
+    // only CommonJS-like environments that support module.exports,
+    // like Node.
+    module.exports = factory();
+  } else {
+    // Browser globals (root is window)
+    root.AnchorJS = factory();
+    root.anchors = new root.AnchorJS();
+  }
+})(this, function () {
+  'use strict';
+  function AnchorJS(options) {
+    this.options = options || {};
+    this.elements = [];
+
+    /**
+     * Assigns options to the internal options object, and provides defaults.
+     * @param {Object} opts - Options object
+     */
+    function _applyRemainingDefaultOptions(opts) {
+      opts.icon = opts.hasOwnProperty('icon') ? opts.icon : '\ue9cb'; // Accepts characters (and also URLs?), like  '#', '¶', '❡', or '§'.
+      opts.visible = opts.hasOwnProperty('visible') ? opts.visible : 'hover'; // Also accepts 'always' & 'touch'
+      opts.placement = opts.hasOwnProperty('placement')
+        ? opts.placement
+        : 'right'; // Also accepts 'left'
+      opts.class = opts.hasOwnProperty('class') ? opts.class : ''; // Accepts any class name.
+      // Using Math.floor here will ensure the value is Number-cast and an integer.
+      opts.truncate = opts.hasOwnProperty('truncate')
+        ? Math.floor(opts.truncate)
+        : 64; // Accepts any value that can be typecast to a number.
+    }
+
+    _applyRemainingDefaultOptions(this.options);
+
+    /**
+     * Checks to see if this device supports touch. Uses criteria pulled from Modernizr:
+     * https://github.com/Modernizr/Modernizr/blob/da22eb27631fc4957f67607fe6042e85c0a84656/feature-detects/touchevents.js#L40
+     * @returns {Boolean} - true if the current device supports touch.
+     */
+    this.isTouchDevice = function () {
+      return !!(
+        'ontouchstart' in window ||
+        (window.DocumentTouch && document instanceof DocumentTouch)
+      );
+    };
+
+    /**
+     * Add anchor links to page elements.
+     * @param  {String|Array|Nodelist} selector - A CSS selector for targeting the elements you wish to add anchor links
+     *                                            to. Also accepts an array or nodeList containing the relavant elements.
+     * @returns {this}                           - The AnchorJS object
+     */
+    this.add = function (selector) {
+      var elements,
+        elsWithIds,
+        idList,
+        elementID,
+        i,
+        index,
+        count,
+        tidyText,
+        newTidyText,
+        readableID,
+        anchor,
+        visibleOptionToUse,
+        indexesToDrop = [];
+
+      // We reapply options here because somebody may have overwritten the default options object when setting options.
+      // For example, this overwrites all options but visible:
+      //
+      // anchors.options = { visible: 'always'; }
+      _applyRemainingDefaultOptions(this.options);
+
+      visibleOptionToUse = this.options.visible;
+      if (visibleOptionToUse === 'touch') {
+        visibleOptionToUse = this.isTouchDevice() ? 'always' : 'hover';
+      }
+
+      // Provide a sensible default selector, if none is given.
+      if (!selector) {
+        selector = 'h2, h3, h4, h5, h6';
+      }
+
+      elements = _getElements(selector);
+
+      if (elements.length === 0) {
+        return this;
+      }
+
+      _addBaselineStyles();
+
+      // We produce a list of existing IDs so we don't generate a duplicate.
+      elsWithIds = document.querySelectorAll('[id]');
+      idList = [].map.call(elsWithIds, function assign(el) {
+        return el.id;
+      });
+
+      for (i = 0; i < elements.length; i++) {
+        if (this.hasAnchorJSLink(elements[i])) {
+          indexesToDrop.push(i);
+          continue;
+        }
+
+        if (elements[i].hasAttribute('id')) {
+          elementID = elements[i].getAttribute('id');
+        } else if (elements[i].hasAttribute('data-anchor-id')) {
+          elementID = elements[i].getAttribute('data-anchor-id');
+        } else {
+          tidyText = this.urlify(elements[i].textContent);
+
+          // Compare our generated ID to existing IDs (and increment it if needed)
+          // before we add it to the page.
+          newTidyText = tidyText;
+          count = 0;
+          do {
+            if (index !== undefined) {
+              newTidyText = tidyText + '-' + count;
+            }
+
+            index = idList.indexOf(newTidyText);
+            count += 1;
+          } while (index !== -1);
+          index = undefined;
+          idList.push(newTidyText);
+
+          elements[i].setAttribute('id', newTidyText);
+          elementID = newTidyText;
+        }
+
+        readableID = elementID.replace(/-/g, ' ');
+
+        // The following code builds the following DOM structure in a more effiecient (albeit opaque) way.
+        // '<a class="anchorjs-link ' + this.options.class + '" href="#' + elementID + '" aria-label="Anchor link for: ' + readableID + '" data-anchorjs-icon="' + this.options.icon + '"></a>';
+        anchor = document.createElement('a');
+        anchor.className = 'anchorjs-link ' + this.options.class;
+        anchor.href = '#' + elementID;
+        anchor.setAttribute('aria-label', 'Anchor link for: ' + readableID);
+        anchor.setAttribute('data-anchorjs-icon', this.options.icon);
+
+        if (visibleOptionToUse === 'always') {
+          anchor.style.opacity = '1';
+        }
+
+        if (this.options.icon === '\ue9cb') {
+          anchor.style.font = '1em/1 anchorjs-icons';
+
+          // We set lineHeight = 1 here because the `anchorjs-icons` font family could otherwise affect the
+          // height of the heading. This isn't the case for icons with `placement: left`, so we restore
+          // line-height: inherit in that case, ensuring they remain positioned correctly. For more info,
+          // see https://github.com/bryanbraun/anchorjs/issues/39.
+          if (this.options.placement === 'left') {
+            anchor.style.lineHeight = 'inherit';
+          }
+        }
+
+        if (this.options.placement === 'left') {
+          anchor.style.position = 'absolute';
+          anchor.style.marginLeft = '-1em';
+          anchor.style.paddingRight = '0.5em';
+          elements[i].insertBefore(anchor, elements[i].firstChild);
+        } else {
+          // if the option provided is `right` (or anything else).
+          anchor.style.paddingLeft = '0.375em';
+          elements[i].appendChild(anchor);
+        }
+      }
+
+      for (i = 0; i < indexesToDrop.length; i++) {
+        elements.splice(indexesToDrop[i] - i, 1);
+      }
+      this.elements = this.elements.concat(elements);
+
+      return this;
+    };
+
+    /**
+     * Removes all anchorjs-links from elements targed by the selector.
+     * @param  {String|Array|Nodelist} selector - A CSS selector string targeting elements with anchor links,
+     *                                            OR a nodeList / array containing the DOM elements.
+     * @returns {this}                           - The AnchorJS object
+     */
+    this.remove = function (selector) {
+      var index,
+        domAnchor,
+        elements = _getElements(selector);
+
+      for (var i = 0; i < elements.length; i++) {
+        domAnchor = elements[i].querySelector('.anchorjs-link');
+        if (domAnchor) {
+          // Drop the element from our main list, if it's in there.
+          index = this.elements.indexOf(elements[i]);
+          if (index !== -1) {
+            this.elements.splice(index, 1);
+          }
+          // Remove the anchor from the DOM.
+          elements[i].removeChild(domAnchor);
+        }
+      }
+      return this;
+    };
+
+    /**
+     * Removes all anchorjs links. Mostly used for tests.
+     */
+    this.removeAll = function () {
+      this.remove(this.elements);
+    };
+
+    /**
+     * Urlify - Refine text so it makes a good ID.
+     *
+     * To do this, we remove apostrophes, replace nonsafe characters with hyphens,
+     * remove extra hyphens, truncate, trim hyphens, and make lowercase.
+     *
+     * @param  {String} text - Any text. Usually pulled from the webpage element we are linking to.
+     * @returns {String}      - hyphen-delimited text for use in IDs and URLs.
+     */
+    this.urlify = function (text) {
+      // Regex for finding the nonsafe URL characters (many need escaping): & +$,:;=?@"#{}|^~[`%!'<>]./()*\
+      var nonsafeChars = /[& +$,:;=?@"#{}|^~[`%!'<>\]\.\/\(\)\*\\]/g,
+        urlText;
+
+      // The reason we include this _applyRemainingDefaultOptions is so urlify can be called independently,
+      // even after setting options. This can be useful for tests or other applications.
+      if (!this.options.truncate) {
+        _applyRemainingDefaultOptions(this.options);
+      }
+
+      // Note: we trim hyphens after truncating because truncating can cause dangling hyphens.
+      // Example string:                                  // " ⚡⚡ Don't forget: URL fragments should be i18n-friendly, hyphenated, short, and clean."
+      urlText = text
+        .trim() // "⚡⚡ Don't forget: URL fragments should be i18n-friendly, hyphenated, short, and clean."
+        .replace(/\'/gi, '') // "⚡⚡ Dont forget: URL fragments should be i18n-friendly, hyphenated, short, and clean."
+        .replace(nonsafeChars, '-') // "⚡⚡-Dont-forget--URL-fragments-should-be-i18n-friendly--hyphenated--short--and-clean-"
+        .replace(/-{2,}/g, '-') // "⚡⚡-Dont-forget-URL-fragments-should-be-i18n-friendly-hyphenated-short-and-clean-"
+        .substring(0, this.options.truncate) // "⚡⚡-Dont-forget-URL-fragments-should-be-i18n-friendly-hyphenated-"
+        .replace(/^-+|-+$/gm, '') // "⚡⚡-Dont-forget-URL-fragments-should-be-i18n-friendly-hyphenated"
+        .toLowerCase(); // "⚡⚡-dont-forget-url-fragments-should-be-i18n-friendly-hyphenated"
+
+      return urlText;
+    };
+
+    /**
+     * Determines if this element already has an AnchorJS link on it.
+     * Uses this technique: http://stackoverflow.com/a/5898748/1154642
+     * @param    {HTMLElemnt}  el - a DOM node
+     * @returns   {Boolean}     true/false
+     */
+    this.hasAnchorJSLink = function (el) {
+      var hasLeftAnchor =
+          el.firstChild &&
+          (' ' + el.firstChild.className + ' ').indexOf(' anchorjs-link ') > -1,
+        hasRightAnchor =
+          el.lastChild &&
+          (' ' + el.lastChild.className + ' ').indexOf(' anchorjs-link ') > -1;
+
+      return hasLeftAnchor || hasRightAnchor || false;
+    };
+
+    /**
+     * Turns a selector, nodeList, or array of elements into an array of elements (so we can use array methods).
+     * It also throws errors on any other inputs. Used to handle inputs to .add and .remove.
+     * @param  {String|Array|Nodelist} input - A CSS selector string targeting elements with anchor links,
+     *                                         OR a nodeList / array containing the DOM elements.
+     * @returns {Array} - An array containing the elements we want.
+     */
+    function _getElements(input) {
+      var elements;
+      if (typeof input === 'string' || input instanceof String) {
+        // See https://davidwalsh.name/nodelist-array for the technique transforming nodeList -> Array.
+        elements = [].slice.call(document.querySelectorAll(input));
+        // I checked the 'input instanceof NodeList' test in IE9 and modern browsers and it worked for me.
+      } else if (Array.isArray(input) || input instanceof NodeList) {
+        elements = [].slice.call(input);
+      } else {
+        throw new Error('The selector provided to AnchorJS was invalid.');
+      }
+      return elements;
+    }
+
+    /**
+     * _addBaselineStyles
+     * Adds baseline styles to the page, used by all AnchorJS links irregardless of configuration.
+     */
+    function _addBaselineStyles() {
+      // We don't want to add global baseline styles if they've been added before.
+      if (document.head.querySelector('style.anchorjs') !== null) {
+        return;
+      }
+
+      var style = document.createElement('style'),
+        linkRule =
+          ' .anchorjs-link {' +
+          '   opacity: 0;' +
+          '   text-decoration: none;' +
+          '   -webkit-font-smoothing: antialiased;' +
+          '   -moz-osx-font-smoothing: grayscale;' +
+          ' }',
+        hoverRule =
+          ' *:hover > .anchorjs-link,' +
+          ' .anchorjs-link:focus  {' +
+          '   opacity: 1;' +
+          ' }',
+        anchorjsLinkFontFace =
+          ' @font-face {' +
+          '   font-family: "anchorjs-icons";' + // Icon from icomoon; 10px wide & 10px tall; 2 empty below & 4 above
+          '   src: url(data:n/a;base64,AAEAAAALAIAAAwAwT1MvMg8yG2cAAAE4AAAAYGNtYXDp3gC3AAABpAAAAExnYXNwAAAAEAAAA9wAAAAIZ2x5ZlQCcfwAAAH4AAABCGhlYWQHFvHyAAAAvAAAADZoaGVhBnACFwAAAPQAAAAkaG10eASAADEAAAGYAAAADGxvY2EACACEAAAB8AAAAAhtYXhwAAYAVwAAARgAAAAgbmFtZQGOH9cAAAMAAAAAunBvc3QAAwAAAAADvAAAACAAAQAAAAEAAHzE2p9fDzz1AAkEAAAAAADRecUWAAAAANQA6R8AAAAAAoACwAAAAAgAAgAAAAAAAAABAAADwP/AAAACgAAA/9MCrQABAAAAAAAAAAAAAAAAAAAAAwABAAAAAwBVAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAMCQAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAg//0DwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAAIAAAACgAAxAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADAAAAAIAAgAAgAAACDpy//9//8AAAAg6cv//f///+EWNwADAAEAAAAAAAAAAAAAAAAACACEAAEAAAAAAAAAAAAAAAAxAAACAAQARAKAAsAAKwBUAAABIiYnJjQ3NzY2MzIWFxYUBwcGIicmNDc3NjQnJiYjIgYHBwYUFxYUBwYGIwciJicmNDc3NjIXFhQHBwYUFxYWMzI2Nzc2NCcmNDc2MhcWFAcHBgYjARQGDAUtLXoWOR8fORYtLTgKGwoKCjgaGg0gEhIgDXoaGgkJBQwHdR85Fi0tOAobCgoKOBoaDSASEiANehoaCQkKGwotLXoWOR8BMwUFLYEuehYXFxYugC44CQkKGwo4GkoaDQ0NDXoaShoKGwoFBe8XFi6ALjgJCQobCjgaShoNDQ0NehpKGgobCgoKLYEuehYXAAAADACWAAEAAAAAAAEACAAAAAEAAAAAAAIAAwAIAAEAAAAAAAMACAAAAAEAAAAAAAQACAAAAAEAAAAAAAUAAQALAAEAAAAAAAYACAAAAAMAAQQJAAEAEAAMAAMAAQQJAAIABgAcAAMAAQQJAAMAEAAMAAMAAQQJAAQAEAAMAAMAAQQJAAUAAgAiAAMAAQQJAAYAEAAMYW5jaG9yanM0MDBAAGEAbgBjAGgAbwByAGoAcwA0ADAAMABAAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAH//wAP) format("truetype");' +
+          ' }',
+        pseudoElContent =
+          ' [data-anchorjs-icon]::after {' +
+          '   content: attr(data-anchorjs-icon);' +
+          ' }',
+        firstStyleEl;
+
+      style.className = 'anchorjs';
+      style.appendChild(document.createTextNode('')); // Necessary for Webkit.
+
+      // We place it in the head with the other style tags, if possible, so as to
+      // not look out of place. We insert before the others so these styles can be
+      // overridden if necessary.
+      firstStyleEl = document.head.querySelector('[rel="stylesheet"], style');
+      if (firstStyleEl === undefined) {
+        document.head.appendChild(style);
+      } else {
+        document.head.insertBefore(style, firstStyleEl);
+      }
+
+      style.sheet.insertRule(linkRule, style.sheet.cssRules.length);
+      style.sheet.insertRule(hoverRule, style.sheet.cssRules.length);
+      style.sheet.insertRule(pseudoElContent, style.sheet.cssRules.length);
+      style.sheet.insertRule(anchorjsLinkFontFace, style.sheet.cssRules.length);
+    }
+  }
+
+  return AnchorJS;
+});
diff --git a/docs/assets/bass-addons.css b/docs/assets/bass-addons.css
new file mode 100644
index 00000000..c27e96d8
--- /dev/null
+++ b/docs/assets/bass-addons.css
@@ -0,0 +1,12 @@
+.input {
+  font-family: inherit;
+  display: block;
+  width: 100%;
+  height: 2rem;
+  padding: .5rem;
+  margin-bottom: 1rem;
+  border: 1px solid #ccc;
+  font-size: .875rem;
+  border-radius: 3px;
+  box-sizing: border-box;
+}
diff --git a/docs/assets/bass.css b/docs/assets/bass.css
new file mode 100644
index 00000000..2d860c56
--- /dev/null
+++ b/docs/assets/bass.css
@@ -0,0 +1,544 @@
+/*! Basscss | http://basscss.com | MIT License */
+
+.h1{ font-size: 2rem }
+.h2{ font-size: 1.5rem }
+.h3{ font-size: 1.25rem }
+.h4{ font-size: 1rem }
+.h5{ font-size: .875rem }
+.h6{ font-size: .75rem }
+
+.font-family-inherit{ font-family:inherit }
+.font-size-inherit{ font-size:inherit }
+.text-decoration-none{ text-decoration:none }
+
+.bold{ font-weight: bold; font-weight: bold }
+.regular{ font-weight:normal }
+.italic{ font-style:italic }
+.caps{ text-transform:uppercase; letter-spacing: .2em; }
+
+.left-align{ text-align:left }
+.center{ text-align:center }
+.right-align{ text-align:right }
+.justify{ text-align:justify }
+
+.nowrap{ white-space:nowrap }
+.break-word{ word-wrap:break-word }
+
+.line-height-1{ line-height: 1 }
+.line-height-2{ line-height: 1.125 }
+.line-height-3{ line-height: 1.25 }
+.line-height-4{ line-height: 1.5 }
+
+.list-style-none{ list-style:none }
+.underline{ text-decoration:underline }
+
+.truncate{
+  max-width:100%;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.list-reset{
+  list-style:none;
+  padding-left:0;
+}
+
+.inline{ display:inline }
+.block{ display:block }
+.inline-block{ display:inline-block }
+.table{ display:table }
+.table-cell{ display:table-cell }
+
+.overflow-hidden{ overflow:hidden }
+.overflow-scroll{ overflow:scroll }
+.overflow-auto{ overflow:auto }
+
+.clearfix:before,
+.clearfix:after{
+  content:" ";
+  display:table
+}
+.clearfix:after{ clear:both }
+
+.left{ float:left }
+.right{ float:right }
+
+.fit{ max-width:100% }
+
+.max-width-1{ max-width: 24rem }
+.max-width-2{ max-width: 32rem }
+.max-width-3{ max-width: 48rem }
+.max-width-4{ max-width: 64rem }
+
+.border-box{ box-sizing:border-box }
+
+.align-baseline{ vertical-align:baseline }
+.align-top{ vertical-align:top }
+.align-middle{ vertical-align:middle }
+.align-bottom{ vertical-align:bottom }
+
+.m0{ margin:0 }
+.mt0{ margin-top:0 }
+.mr0{ margin-right:0 }
+.mb0{ margin-bottom:0 }
+.ml0{ margin-left:0 }
+.mx0{ margin-left:0; margin-right:0 }
+.my0{ margin-top:0; margin-bottom:0 }
+
+.m1{ margin: .5rem }
+.mt1{ margin-top: .5rem }
+.mr1{ margin-right: .5rem }
+.mb1{ margin-bottom: .5rem }
+.ml1{ margin-left: .5rem }
+.mx1{ margin-left: .5rem; margin-right: .5rem }
+.my1{ margin-top: .5rem; margin-bottom: .5rem }
+
+.m2{ margin: 1rem }
+.mt2{ margin-top: 1rem }
+.mr2{ margin-right: 1rem }
+.mb2{ margin-bottom: 1rem }
+.ml2{ margin-left: 1rem }
+.mx2{ margin-left: 1rem; margin-right: 1rem }
+.my2{ margin-top: 1rem; margin-bottom: 1rem }
+
+.m3{ margin: 2rem }
+.mt3{ margin-top: 2rem }
+.mr3{ margin-right: 2rem }
+.mb3{ margin-bottom: 2rem }
+.ml3{ margin-left: 2rem }
+.mx3{ margin-left: 2rem; margin-right: 2rem }
+.my3{ margin-top: 2rem; margin-bottom: 2rem }
+
+.m4{ margin: 4rem }
+.mt4{ margin-top: 4rem }
+.mr4{ margin-right: 4rem }
+.mb4{ margin-bottom: 4rem }
+.ml4{ margin-left: 4rem }
+.mx4{ margin-left: 4rem; margin-right: 4rem }
+.my4{ margin-top: 4rem; margin-bottom: 4rem }
+
+.mxn1{ margin-left: -.5rem; margin-right: -.5rem; }
+.mxn2{ margin-left: -1rem; margin-right: -1rem; }
+.mxn3{ margin-left: -2rem; margin-right: -2rem; }
+.mxn4{ margin-left: -4rem; margin-right: -4rem; }
+
+.ml-auto{ margin-left:auto }
+.mr-auto{ margin-right:auto }
+.mx-auto{ margin-left:auto; margin-right:auto; }
+
+.p0{ padding:0 }
+.pt0{ padding-top:0 }
+.pr0{ padding-right:0 }
+.pb0{ padding-bottom:0 }
+.pl0{ padding-left:0 }
+.px0{ padding-left:0; padding-right:0 }
+.py0{ padding-top:0;  padding-bottom:0 }
+
+.p1{ padding: .5rem }
+.pt1{ padding-top: .5rem }
+.pr1{ padding-right: .5rem }
+.pb1{ padding-bottom: .5rem }
+.pl1{ padding-left: .5rem }
+.py1{ padding-top: .5rem; padding-bottom: .5rem }
+.px1{ padding-left: .5rem; padding-right: .5rem }
+
+.p2{ padding: 1rem }
+.pt2{ padding-top: 1rem }
+.pr2{ padding-right: 1rem }
+.pb2{ padding-bottom: 1rem }
+.pl2{ padding-left: 1rem }
+.py2{ padding-top: 1rem; padding-bottom: 1rem }
+.px2{ padding-left: 1rem; padding-right: 1rem }
+
+.p3{ padding: 2rem }
+.pt3{ padding-top: 2rem }
+.pr3{ padding-right: 2rem }
+.pb3{ padding-bottom: 2rem }
+.pl3{ padding-left: 2rem }
+.py3{ padding-top: 2rem; padding-bottom: 2rem }
+.px3{ padding-left: 2rem; padding-right: 2rem }
+
+.p4{ padding: 4rem }
+.pt4{ padding-top: 4rem }
+.pr4{ padding-right: 4rem }
+.pb4{ padding-bottom: 4rem }
+.pl4{ padding-left: 4rem }
+.py4{ padding-top: 4rem; padding-bottom: 4rem }
+.px4{ padding-left: 4rem; padding-right: 4rem }
+
+.col{
+  float:left;
+  box-sizing:border-box;
+}
+
+.col-right{
+  float:right;
+  box-sizing:border-box;
+}
+
+.col-1{
+  width:8.33333%;
+}
+
+.col-2{
+  width:16.66667%;
+}
+
+.col-3{
+  width:25%;
+}
+
+.col-4{
+  width:33.33333%;
+}
+
+.col-5{
+  width:41.66667%;
+}
+
+.col-6{
+  width:50%;
+}
+
+.col-7{
+  width:58.33333%;
+}
+
+.col-8{
+  width:66.66667%;
+}
+
+.col-9{
+  width:75%;
+}
+
+.col-10{
+  width:83.33333%;
+}
+
+.col-11{
+  width:91.66667%;
+}
+
+.col-12{
+  width:100%;
+}
+@media (min-width: 40em){
+
+  .sm-col{
+    float:left;
+    box-sizing:border-box;
+  }
+
+  .sm-col-right{
+    float:right;
+    box-sizing:border-box;
+  }
+
+  .sm-col-1{
+    width:8.33333%;
+  }
+
+  .sm-col-2{
+    width:16.66667%;
+  }
+
+  .sm-col-3{
+    width:25%;
+  }
+
+  .sm-col-4{
+    width:33.33333%;
+  }
+
+  .sm-col-5{
+    width:41.66667%;
+  }
+
+  .sm-col-6{
+    width:50%;
+  }
+
+  .sm-col-7{
+    width:58.33333%;
+  }
+
+  .sm-col-8{
+    width:66.66667%;
+  }
+
+  .sm-col-9{
+    width:75%;
+  }
+
+  .sm-col-10{
+    width:83.33333%;
+  }
+
+  .sm-col-11{
+    width:91.66667%;
+  }
+
+  .sm-col-12{
+    width:100%;
+  }
+
+}
+@media (min-width: 52em){
+
+  .md-col{
+    float:left;
+    box-sizing:border-box;
+  }
+
+  .md-col-right{
+    float:right;
+    box-sizing:border-box;
+  }
+
+  .md-col-1{
+    width:8.33333%;
+  }
+
+  .md-col-2{
+    width:16.66667%;
+  }
+
+  .md-col-3{
+    width:25%;
+  }
+
+  .md-col-4{
+    width:33.33333%;
+  }
+
+  .md-col-5{
+    width:41.66667%;
+  }
+
+  .md-col-6{
+    width:50%;
+  }
+
+  .md-col-7{
+    width:58.33333%;
+  }
+
+  .md-col-8{
+    width:66.66667%;
+  }
+
+  .md-col-9{
+    width:75%;
+  }
+
+  .md-col-10{
+    width:83.33333%;
+  }
+
+  .md-col-11{
+    width:91.66667%;
+  }
+
+  .md-col-12{
+    width:100%;
+  }
+
+}
+@media (min-width: 64em){
+
+  .lg-col{
+    float:left;
+    box-sizing:border-box;
+  }
+
+  .lg-col-right{
+    float:right;
+    box-sizing:border-box;
+  }
+
+  .lg-col-1{
+    width:8.33333%;
+  }
+
+  .lg-col-2{
+    width:16.66667%;
+  }
+
+  .lg-col-3{
+    width:25%;
+  }
+
+  .lg-col-4{
+    width:33.33333%;
+  }
+
+  .lg-col-5{
+    width:41.66667%;
+  }
+
+  .lg-col-6{
+    width:50%;
+  }
+
+  .lg-col-7{
+    width:58.33333%;
+  }
+
+  .lg-col-8{
+    width:66.66667%;
+  }
+
+  .lg-col-9{
+    width:75%;
+  }
+
+  .lg-col-10{
+    width:83.33333%;
+  }
+
+  .lg-col-11{
+    width:91.66667%;
+  }
+
+  .lg-col-12{
+    width:100%;
+  }
+
+}
+.flex{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex }
+
+@media (min-width: 40em){
+  .sm-flex{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex }
+}
+
+@media (min-width: 52em){
+  .md-flex{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex }
+}
+
+@media (min-width: 64em){
+  .lg-flex{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex }
+}
+
+.flex-column{ -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column }
+.flex-wrap{ -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap }
+
+.items-start{ -webkit-box-align:start; -webkit-align-items:flex-start; -ms-flex-align:start; -ms-grid-row-align:flex-start; align-items:flex-start }
+.items-end{ -webkit-box-align:end; -webkit-align-items:flex-end; -ms-flex-align:end; -ms-grid-row-align:flex-end; align-items:flex-end }
+.items-center{ -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; -ms-grid-row-align:center; align-items:center }
+.items-baseline{ -webkit-box-align:baseline; -webkit-align-items:baseline; -ms-flex-align:baseline; -ms-grid-row-align:baseline; align-items:baseline }
+.items-stretch{ -webkit-box-align:stretch; -webkit-align-items:stretch; -ms-flex-align:stretch; -ms-grid-row-align:stretch; align-items:stretch }
+
+.self-start{ -webkit-align-self:flex-start; -ms-flex-item-align:start; align-self:flex-start }
+.self-end{ -webkit-align-self:flex-end; -ms-flex-item-align:end; align-self:flex-end }
+.self-center{ -webkit-align-self:center; -ms-flex-item-align:center; align-self:center }
+.self-baseline{ -webkit-align-self:baseline; -ms-flex-item-align:baseline; align-self:baseline }
+.self-stretch{ -webkit-align-self:stretch; -ms-flex-item-align:stretch; align-self:stretch }
+
+.justify-start{ -webkit-box-pack:start; -webkit-justify-content:flex-start; -ms-flex-pack:start; justify-content:flex-start }
+.justify-end{ -webkit-box-pack:end; -webkit-justify-content:flex-end; -ms-flex-pack:end; justify-content:flex-end }
+.justify-center{ -webkit-box-pack:center; -webkit-justify-content:center; -ms-flex-pack:center; justify-content:center }
+.justify-between{ -webkit-box-pack:justify; -webkit-justify-content:space-between; -ms-flex-pack:justify; justify-content:space-between }
+.justify-around{ -webkit-justify-content:space-around; -ms-flex-pack:distribute; justify-content:space-around }
+
+.content-start{ -webkit-align-content:flex-start; -ms-flex-line-pack:start; align-content:flex-start }
+.content-end{ -webkit-align-content:flex-end; -ms-flex-line-pack:end; align-content:flex-end }
+.content-center{ -webkit-align-content:center; -ms-flex-line-pack:center; align-content:center }
+.content-between{ -webkit-align-content:space-between; -ms-flex-line-pack:justify; align-content:space-between }
+.content-around{ -webkit-align-content:space-around; -ms-flex-line-pack:distribute; align-content:space-around }
+.content-stretch{ -webkit-align-content:stretch; -ms-flex-line-pack:stretch; align-content:stretch }
+.flex-auto{
+  -webkit-box-flex:1;
+  -webkit-flex:1 1 auto;
+      -ms-flex:1 1 auto;
+          flex:1 1 auto;
+  min-width:0;
+  min-height:0;
+}
+.flex-none{ -webkit-box-flex:0; -webkit-flex:none; -ms-flex:none; flex:none }
+.fs0{ flex-shrink: 0 }
+
+.order-0{ -webkit-box-ordinal-group:1; -webkit-order:0; -ms-flex-order:0; order:0 }
+.order-1{ -webkit-box-ordinal-group:2; -webkit-order:1; -ms-flex-order:1; order:1 }
+.order-2{ -webkit-box-ordinal-group:3; -webkit-order:2; -ms-flex-order:2; order:2 }
+.order-3{ -webkit-box-ordinal-group:4; -webkit-order:3; -ms-flex-order:3; order:3 }
+.order-last{ -webkit-box-ordinal-group:100000; -webkit-order:99999; -ms-flex-order:99999; order:99999 }
+
+.relative{ position:relative }
+.absolute{ position:absolute }
+.fixed{ position:fixed }
+
+.top-0{ top:0 }
+.right-0{ right:0 }
+.bottom-0{ bottom:0 }
+.left-0{ left:0 }
+
+.z1{ z-index: 1 }
+.z2{ z-index: 2 }
+.z3{ z-index: 3 }
+.z4{ z-index: 4 }
+
+.border{
+  border-style:solid;
+  border-width: 1px;
+}
+
+.border-top{
+  border-top-style:solid;
+  border-top-width: 1px;
+}
+
+.border-right{
+  border-right-style:solid;
+  border-right-width: 1px;
+}
+
+.border-bottom{
+  border-bottom-style:solid;
+  border-bottom-width: 1px;
+}
+
+.border-left{
+  border-left-style:solid;
+  border-left-width: 1px;
+}
+
+.border-none{ border:0 }
+
+.rounded{ border-radius: 3px }
+.circle{ border-radius:50% }
+
+.rounded-top{ border-radius: 3px 3px 0 0 }
+.rounded-right{ border-radius: 0 3px 3px 0 }
+.rounded-bottom{ border-radius: 0 0 3px 3px }
+.rounded-left{ border-radius: 3px 0 0 3px }
+
+.not-rounded{ border-radius:0 }
+
+.hide{
+  position:absolute !important;
+  height:1px;
+  width:1px;
+  overflow:hidden;
+  clip:rect(1px, 1px, 1px, 1px);
+}
+
+@media (max-width: 40em){
+  .xs-hide{ display:none !important }
+}
+
+@media (min-width: 40em) and (max-width: 52em){
+  .sm-hide{ display:none !important }
+}
+
+@media (min-width: 52em) and (max-width: 64em){
+  .md-hide{ display:none !important }
+}
+
+@media (min-width: 64em){
+  .lg-hide{ display:none !important }
+}
+
+.display-none{ display:none !important }
+
diff --git a/docs/assets/fonts/EOT/SourceCodePro-Bold.eot b/docs/assets/fonts/EOT/SourceCodePro-Bold.eot
new file mode 100755
index 00000000..d24cc39f
Binary files /dev/null and b/docs/assets/fonts/EOT/SourceCodePro-Bold.eot differ
diff --git a/docs/assets/fonts/EOT/SourceCodePro-Regular.eot b/docs/assets/fonts/EOT/SourceCodePro-Regular.eot
new file mode 100755
index 00000000..09e94730
Binary files /dev/null and b/docs/assets/fonts/EOT/SourceCodePro-Regular.eot differ
diff --git a/docs/assets/fonts/LICENSE.txt b/docs/assets/fonts/LICENSE.txt
new file mode 100755
index 00000000..d154618a
--- /dev/null
+++ b/docs/assets/fonts/LICENSE.txt
@@ -0,0 +1,93 @@
+Copyright 2010, 2012 Adobe Systems Incorporated (http://www.adobe.com/), with Reserved Font Name 'Source'. All Rights Reserved. Source is a trademark of Adobe Systems Incorporated in the United States and/or other countries.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+
+This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/docs/assets/fonts/OTF/SourceCodePro-Bold.otf b/docs/assets/fonts/OTF/SourceCodePro-Bold.otf
new file mode 100755
index 00000000..f4e576ce
Binary files /dev/null and b/docs/assets/fonts/OTF/SourceCodePro-Bold.otf differ
diff --git a/docs/assets/fonts/OTF/SourceCodePro-Regular.otf b/docs/assets/fonts/OTF/SourceCodePro-Regular.otf
new file mode 100755
index 00000000..4e3b9d0b
Binary files /dev/null and b/docs/assets/fonts/OTF/SourceCodePro-Regular.otf differ
diff --git a/docs/assets/fonts/TTF/SourceCodePro-Bold.ttf b/docs/assets/fonts/TTF/SourceCodePro-Bold.ttf
new file mode 100755
index 00000000..e0c576f1
Binary files /dev/null and b/docs/assets/fonts/TTF/SourceCodePro-Bold.ttf differ
diff --git a/docs/assets/fonts/TTF/SourceCodePro-Regular.ttf b/docs/assets/fonts/TTF/SourceCodePro-Regular.ttf
new file mode 100755
index 00000000..437f4728
Binary files /dev/null and b/docs/assets/fonts/TTF/SourceCodePro-Regular.ttf differ
diff --git a/docs/assets/fonts/WOFF/OTF/SourceCodePro-Bold.otf.woff b/docs/assets/fonts/WOFF/OTF/SourceCodePro-Bold.otf.woff
new file mode 100755
index 00000000..cf960992
Binary files /dev/null and b/docs/assets/fonts/WOFF/OTF/SourceCodePro-Bold.otf.woff differ
diff --git a/docs/assets/fonts/WOFF/OTF/SourceCodePro-Regular.otf.woff b/docs/assets/fonts/WOFF/OTF/SourceCodePro-Regular.otf.woff
new file mode 100755
index 00000000..395436eb
Binary files /dev/null and b/docs/assets/fonts/WOFF/OTF/SourceCodePro-Regular.otf.woff differ
diff --git a/docs/assets/fonts/WOFF/TTF/SourceCodePro-Bold.ttf.woff b/docs/assets/fonts/WOFF/TTF/SourceCodePro-Bold.ttf.woff
new file mode 100755
index 00000000..c65ba841
Binary files /dev/null and b/docs/assets/fonts/WOFF/TTF/SourceCodePro-Bold.ttf.woff differ
diff --git a/docs/assets/fonts/WOFF/TTF/SourceCodePro-Regular.ttf.woff b/docs/assets/fonts/WOFF/TTF/SourceCodePro-Regular.ttf.woff
new file mode 100755
index 00000000..0af792a1
Binary files /dev/null and b/docs/assets/fonts/WOFF/TTF/SourceCodePro-Regular.ttf.woff differ
diff --git a/docs/assets/fonts/WOFF2/OTF/SourceCodePro-Bold.otf.woff2 b/docs/assets/fonts/WOFF2/OTF/SourceCodePro-Bold.otf.woff2
new file mode 100755
index 00000000..cbe38353
Binary files /dev/null and b/docs/assets/fonts/WOFF2/OTF/SourceCodePro-Bold.otf.woff2 differ
diff --git a/docs/assets/fonts/WOFF2/OTF/SourceCodePro-Regular.otf.woff2 b/docs/assets/fonts/WOFF2/OTF/SourceCodePro-Regular.otf.woff2
new file mode 100755
index 00000000..65cd591b
Binary files /dev/null and b/docs/assets/fonts/WOFF2/OTF/SourceCodePro-Regular.otf.woff2 differ
diff --git a/docs/assets/fonts/WOFF2/TTF/SourceCodePro-Bold.ttf.woff2 b/docs/assets/fonts/WOFF2/TTF/SourceCodePro-Bold.ttf.woff2
new file mode 100755
index 00000000..b78d5235
Binary files /dev/null and b/docs/assets/fonts/WOFF2/TTF/SourceCodePro-Bold.ttf.woff2 differ
diff --git a/docs/assets/fonts/WOFF2/TTF/SourceCodePro-Regular.ttf.woff2 b/docs/assets/fonts/WOFF2/TTF/SourceCodePro-Regular.ttf.woff2
new file mode 100755
index 00000000..18d2199e
Binary files /dev/null and b/docs/assets/fonts/WOFF2/TTF/SourceCodePro-Regular.ttf.woff2 differ
diff --git a/docs/assets/fonts/source-code-pro.css b/docs/assets/fonts/source-code-pro.css
new file mode 100755
index 00000000..3abb4f09
--- /dev/null
+++ b/docs/assets/fonts/source-code-pro.css
@@ -0,0 +1,23 @@
+@font-face{
+    font-family: 'Source Code Pro';
+    font-weight: 400;
+    font-style: normal;
+    font-stretch: normal;
+    src: url('EOT/SourceCodePro-Regular.eot') format('embedded-opentype'),
+         url('WOFF2/TTF/SourceCodePro-Regular.ttf.woff2') format('woff2'),
+         url('WOFF/OTF/SourceCodePro-Regular.otf.woff') format('woff'),
+         url('OTF/SourceCodePro-Regular.otf') format('opentype'),
+         url('TTF/SourceCodePro-Regular.ttf') format('truetype');
+}
+
+@font-face{
+    font-family: 'Source Code Pro';
+    font-weight: 700;
+    font-style: normal;
+    font-stretch: normal;
+    src: url('EOT/SourceCodePro-Bold.eot') format('embedded-opentype'),
+         url('WOFF2/TTF/SourceCodePro-Bold.ttf.woff2') format('woff2'),
+         url('WOFF/OTF/SourceCodePro-Bold.otf.woff') format('woff'),
+         url('OTF/SourceCodePro-Bold.otf') format('opentype'),
+         url('TTF/SourceCodePro-Bold.ttf') format('truetype');
+}
diff --git a/docs/assets/github.css b/docs/assets/github.css
new file mode 100644
index 00000000..8852abb4
--- /dev/null
+++ b/docs/assets/github.css
@@ -0,0 +1,123 @@
+/*
+
+github.com style (c) Vasily Polovnyov <vast@whiteants.net>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  color: #333;
+  background: #f8f8f8;
+  -webkit-text-size-adjust: none;
+}
+
+.hljs-comment,
+.diff .hljs-header,
+.hljs-javadoc {
+  color: #998;
+  font-style: italic;
+}
+
+.hljs-keyword,
+.css .rule .hljs-keyword,
+.hljs-winutils,
+.nginx .hljs-title,
+.hljs-subst,
+.hljs-request,
+.hljs-status {
+  color: #1184CE;
+}
+
+.hljs-number,
+.hljs-hexcolor,
+.ruby .hljs-constant {
+  color: #ed225d;
+}
+
+.hljs-string,
+.hljs-tag .hljs-value,
+.hljs-phpdoc,
+.hljs-dartdoc,
+.tex .hljs-formula {
+  color: #ed225d;
+}
+
+.hljs-title,
+.hljs-id,
+.scss .hljs-preprocessor {
+  color: #900;
+  font-weight: bold;
+}
+
+.hljs-list .hljs-keyword,
+.hljs-subst {
+  font-weight: normal;
+}
+
+.hljs-class .hljs-title,
+.hljs-type,
+.vhdl .hljs-literal,
+.tex .hljs-command {
+  color: #458;
+  font-weight: bold;
+}
+
+.hljs-tag,
+.hljs-tag .hljs-title,
+.hljs-rules .hljs-property,
+.django .hljs-tag .hljs-keyword {
+  color: #000080;
+  font-weight: normal;
+}
+
+.hljs-attribute,
+.hljs-variable,
+.lisp .hljs-body {
+  color: #008080;
+}
+
+.hljs-regexp {
+  color: #009926;
+}
+
+.hljs-symbol,
+.ruby .hljs-symbol .hljs-string,
+.lisp .hljs-keyword,
+.clojure .hljs-keyword,
+.scheme .hljs-keyword,
+.tex .hljs-special,
+.hljs-prompt {
+  color: #990073;
+}
+
+.hljs-built_in {
+  color: #0086b3;
+}
+
+.hljs-preprocessor,
+.hljs-pragma,
+.hljs-pi,
+.hljs-doctype,
+.hljs-shebang,
+.hljs-cdata {
+  color: #999;
+  font-weight: bold;
+}
+
+.hljs-deletion {
+  background: #fdd;
+}
+
+.hljs-addition {
+  background: #dfd;
+}
+
+.diff .hljs-change {
+  background: #0086b3;
+}
+
+.hljs-chunk {
+  color: #aaa;
+}
diff --git a/docs/assets/site.js b/docs/assets/site.js
new file mode 100644
index 00000000..a624be7b
--- /dev/null
+++ b/docs/assets/site.js
@@ -0,0 +1,168 @@
+/* global anchors */
+
+// add anchor links to headers
+anchors.options.placement = 'left';
+anchors.add('h3');
+
+// Filter UI
+var tocElements = document.getElementById('toc').getElementsByTagName('li');
+
+document.getElementById('filter-input').addEventListener('keyup', function (e) {
+  var i, element, children;
+
+  // enter key
+  if (e.keyCode === 13) {
+    // go to the first displayed item in the toc
+    for (i = 0; i < tocElements.length; i++) {
+      element = tocElements[i];
+      if (!element.classList.contains('display-none')) {
+        location.replace(element.firstChild.href);
+        return e.preventDefault();
+      }
+    }
+  }
+
+  var match = function () {
+    return true;
+  };
+
+  var value = this.value.toLowerCase();
+
+  if (!value.match(/^\s*$/)) {
+    match = function (element) {
+      var html = element.firstChild.innerHTML;
+      return html && html.toLowerCase().indexOf(value) !== -1;
+    };
+  }
+
+  for (i = 0; i < tocElements.length; i++) {
+    element = tocElements[i];
+    children = Array.from(element.getElementsByTagName('li'));
+    if (match(element) || children.some(match)) {
+      element.classList.remove('display-none');
+    } else {
+      element.classList.add('display-none');
+    }
+  }
+});
+
+var items = document.getElementsByClassName('toggle-sibling');
+for (var j = 0; j < items.length; j++) {
+  items[j].addEventListener('click', toggleSibling);
+}
+
+function toggleSibling() {
+  var stepSibling = this.parentNode.getElementsByClassName('toggle-target')[0];
+  var icon = this.getElementsByClassName('icon')[0];
+  var klass = 'display-none';
+  if (stepSibling.classList.contains(klass)) {
+    stepSibling.classList.remove(klass);
+    icon.innerHTML = '▾';
+  } else {
+    stepSibling.classList.add(klass);
+    icon.innerHTML = '▸';
+  }
+}
+
+function showHashTarget(targetId) {
+  if (targetId) {
+    var hashTarget = document.getElementById(targetId);
+    // new target is hidden
+    if (
+      hashTarget &&
+      hashTarget.offsetHeight === 0 &&
+      hashTarget.parentNode.parentNode.classList.contains('display-none')
+    ) {
+      hashTarget.parentNode.parentNode.classList.remove('display-none');
+    }
+  }
+}
+
+function scrollIntoView(targetId) {
+  // Only scroll to element if we don't have a stored scroll position.
+  if (targetId && !history.state) {
+    var hashTarget = document.getElementById(targetId);
+    if (hashTarget) {
+      hashTarget.scrollIntoView();
+    }
+  }
+}
+
+function gotoCurrentTarget() {
+  showHashTarget(location.hash.substring(1));
+  scrollIntoView(location.hash.substring(1));
+}
+
+window.addEventListener('hashchange', gotoCurrentTarget);
+gotoCurrentTarget();
+
+var toclinks = document.getElementsByClassName('pre-open');
+for (var k = 0; k < toclinks.length; k++) {
+  toclinks[k].addEventListener('mousedown', preOpen, false);
+}
+
+function preOpen() {
+  showHashTarget(this.hash.substring(1));
+}
+
+var split_left = document.querySelector('#split-left');
+var split_right = document.querySelector('#split-right');
+var split_parent = split_left.parentNode;
+var cw_with_sb = split_left.clientWidth;
+split_left.style.overflow = 'hidden';
+var cw_without_sb = split_left.clientWidth;
+split_left.style.overflow = '';
+
+Split(['#split-left', '#split-right'], {
+  elementStyle: function (dimension, size, gutterSize) {
+    return {
+      'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'
+    };
+  },
+  gutterStyle: function (dimension, gutterSize) {
+    return {
+      'flex-basis': gutterSize + 'px'
+    };
+  },
+  gutterSize: 20,
+  sizes: [33, 67]
+});
+
+// Chrome doesn't remember scroll position properly so do it ourselves.
+// Also works on Firefox and Edge.
+
+function updateState() {
+  history.replaceState(
+    {
+      left_top: split_left.scrollTop,
+      right_top: split_right.scrollTop
+    },
+    document.title
+  );
+}
+
+function loadState(ev) {
+  if (ev) {
+    // Edge doesn't replace change history.state on popstate.
+    history.replaceState(ev.state, document.title);
+  }
+  if (history.state) {
+    split_left.scrollTop = history.state.left_top;
+    split_right.scrollTop = history.state.right_top;
+  }
+}
+
+window.addEventListener('load', function () {
+  // Restore after Firefox scrolls to hash.
+  setTimeout(function () {
+    loadState();
+    // Update with initial scroll position.
+    updateState();
+    // Update scroll positions only after we've loaded because Firefox
+    // emits an initial scroll event with 0.
+    split_left.addEventListener('scroll', updateState);
+    split_right.addEventListener('scroll', updateState);
+  }, 1);
+});
+
+window.addEventListener('popstate', loadState);
diff --git a/docs/assets/split.css b/docs/assets/split.css
new file mode 100644
index 00000000..2d7779ee
--- /dev/null
+++ b/docs/assets/split.css
@@ -0,0 +1,15 @@
+.gutter {
+    background-color: #f5f5f5;
+    background-repeat: no-repeat;
+    background-position: 50%;
+}
+
+.gutter.gutter-vertical {
+    background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
+    cursor: ns-resize;
+}
+
+.gutter.gutter-horizontal {
+    background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
+    cursor: ew-resize;
+}
diff --git a/docs/assets/split.js b/docs/assets/split.js
new file mode 100644
index 00000000..71f9a60b
--- /dev/null
+++ b/docs/assets/split.js
@@ -0,0 +1,782 @@
+/*! Split.js - v1.5.11 */
+
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    (global.Split = factory());
+}(this, (function () { 'use strict';
+
+    // The programming goals of Split.js are to deliver readable, understandable and
+    // maintainable code, while at the same time manually optimizing for tiny minified file size,
+    // browser compatibility without additional requirements, graceful fallback (IE8 is supported)
+    // and very few assumptions about the user's page layout.
+    var global = window;
+    var document = global.document;
+
+    // Save a couple long function names that are used frequently.
+    // This optimization saves around 400 bytes.
+    var addEventListener = 'addEventListener';
+    var removeEventListener = 'removeEventListener';
+    var getBoundingClientRect = 'getBoundingClientRect';
+    var gutterStartDragging = '_a';
+    var aGutterSize = '_b';
+    var bGutterSize = '_c';
+    var HORIZONTAL = 'horizontal';
+    var NOOP = function () { return false; };
+
+    // Figure out if we're in IE8 or not. IE8 will still render correctly,
+    // but will be static instead of draggable.
+    var isIE8 = global.attachEvent && !global[addEventListener];
+
+    // Helper function determines which prefixes of CSS calc we need.
+    // We only need to do this once on startup, when this anonymous function is called.
+    //
+    // Tests -webkit, -moz and -o prefixes. Modified from StackOverflow:
+    // http://stackoverflow.com/questions/16625140/js-feature-detection-to-detect-the-usage-of-webkit-calc-over-calc/16625167#16625167
+    var calc = (['', '-webkit-', '-moz-', '-o-']
+        .filter(function (prefix) {
+            var el = document.createElement('div');
+            el.style.cssText = "width:" + prefix + "calc(9px)";
+
+            return !!el.style.length
+        })
+        .shift()) + "calc";
+
+    // Helper function checks if its argument is a string-like type
+    var isString = function (v) { return typeof v === 'string' || v instanceof String; };
+
+    // Helper function allows elements and string selectors to be used
+    // interchangeably. In either case an element is returned. This allows us to
+    // do `Split([elem1, elem2])` as well as `Split(['#id1', '#id2'])`.
+    var elementOrSelector = function (el) {
+        if (isString(el)) {
+            var ele = document.querySelector(el);
+            if (!ele) {
+                throw new Error(("Selector " + el + " did not match a DOM element"))
+            }
+            return ele
+        }
+
+        return el
+    };
+
+    // Helper function gets a property from the properties object, with a default fallback
+    var getOption = function (options, propName, def) {
+        var value = options[propName];
+        if (value !== undefined) {
+            return value
+        }
+        return def
+    };
+
+    var getGutterSize = function (gutterSize, isFirst, isLast, gutterAlign) {
+        if (isFirst) {
+            if (gutterAlign === 'end') {
+                return 0
+            }
+            if (gutterAlign === 'center') {
+                return gutterSize / 2
+            }
+        } else if (isLast) {
+            if (gutterAlign === 'start') {
+                return 0
+            }
+            if (gutterAlign === 'center') {
+                return gutterSize / 2
+            }
+        }
+
+        return gutterSize
+    };
+
+    // Default options
+    var defaultGutterFn = function (i, gutterDirection) {
+        var gut = document.createElement('div');
+        gut.className = "gutter gutter-" + gutterDirection;
+        return gut
+    };
+
+    var defaultElementStyleFn = function (dim, size, gutSize) {
+        var style = {};
+
+        if (!isString(size)) {
+            if (!isIE8) {
+                style[dim] = calc + "(" + size + "% - " + gutSize + "px)";
+            } else {
+                style[dim] = size + "%";
+            }
+        } else {
+            style[dim] = size;
+        }
+
+        return style
+    };
+
+    var defaultGutterStyleFn = function (dim, gutSize) {
+        var obj;
+
+        return (( obj = {}, obj[dim] = (gutSize + "px"), obj ));
+    };
+
+    // The main function to initialize a split. Split.js thinks about each pair
+    // of elements as an independant pair. Dragging the gutter between two elements
+    // only changes the dimensions of elements in that pair. This is key to understanding
+    // how the following functions operate, since each function is bound to a pair.
+    //
+    // A pair object is shaped like this:
+    //
+    // {
+    //     a: DOM element,
+    //     b: DOM element,
+    //     aMin: Number,
+    //     bMin: Number,
+    //     dragging: Boolean,
+    //     parent: DOM element,
+    //     direction: 'horizontal' | 'vertical'
+    // }
+    //
+    // The basic sequence:
+    //
+    // 1. Set defaults to something sane. `options` doesn't have to be passed at all.
+    // 2. Initialize a bunch of strings based on the direction we're splitting.
+    //    A lot of the behavior in the rest of the library is paramatized down to
+    //    rely on CSS strings and classes.
+    // 3. Define the dragging helper functions, and a few helpers to go with them.
+    // 4. Loop through the elements while pairing them off. Every pair gets an
+    //    `pair` object and a gutter.
+    // 5. Actually size the pair elements, insert gutters and attach event listeners.
+    var Split = function (idsOption, options) {
+        if ( options === void 0 ) options = {};
+
+        var ids = idsOption;
+        var dimension;
+        var clientAxis;
+        var position;
+        var positionEnd;
+        var clientSize;
+        var elements;
+
+        // Allow HTMLCollection to be used as an argument when supported
+        if (Array.from) {
+            ids = Array.from(ids);
+        }
+
+        // All DOM elements in the split should have a common parent. We can grab
+        // the first elements parent and hope users read the docs because the
+        // behavior will be whacky otherwise.
+        var firstElement = elementOrSelector(ids[0]);
+        var parent = firstElement.parentNode;
+        var parentStyle = getComputedStyle ? getComputedStyle(parent) : null;
+        var parentFlexDirection = parentStyle ? parentStyle.flexDirection : null;
+
+        // Set default options.sizes to equal percentages of the parent element.
+        var sizes = getOption(options, 'sizes') || ids.map(function () { return 100 / ids.length; });
+
+        // Standardize minSize to an array if it isn't already. This allows minSize
+        // to be passed as a number.
+        var minSize = getOption(options, 'minSize', 100);
+        var minSizes = Array.isArray(minSize) ? minSize : ids.map(function () { return minSize; });
+
+        // Get other options
+        var expandToMin = getOption(options, 'expandToMin', false);
+        var gutterSize = getOption(options, 'gutterSize', 10);
+        var gutterAlign = getOption(options, 'gutterAlign', 'center');
+        var snapOffset = getOption(options, 'snapOffset', 30);
+        var dragInterval = getOption(options, 'dragInterval', 1);
+        var direction = getOption(options, 'direction', HORIZONTAL);
+        var cursor = getOption(
+            options,
+            'cursor',
+            direction === HORIZONTAL ? 'col-resize' : 'row-resize'
+        );
+        var gutter = getOption(options, 'gutter', defaultGutterFn);
+        var elementStyle = getOption(
+            options,
+            'elementStyle',
+            defaultElementStyleFn
+        );
+        var gutterStyle = getOption(options, 'gutterStyle', defaultGutterStyleFn);
+
+        // 2. Initialize a bunch of strings based on the direction we're splitting.
+        // A lot of the behavior in the rest of the library is paramatized down to
+        // rely on CSS strings and classes.
+        if (direction === HORIZONTAL) {
+            dimension = 'width';
+            clientAxis = 'clientX';
+            position = 'left';
+            positionEnd = 'right';
+            clientSize = 'clientWidth';
+        } else if (direction === 'vertical') {
+            dimension = 'height';
+            clientAxis = 'clientY';
+            position = 'top';
+            positionEnd = 'bottom';
+            clientSize = 'clientHeight';
+        }
+
+        // 3. Define the dragging helper functions, and a few helpers to go with them.
+        // Each helper is bound to a pair object that contains its metadata. This
+        // also makes it easy to store references to listeners that that will be
+        // added and removed.
+        //
+        // Even though there are no other functions contained in them, aliasing
+        // this to self saves 50 bytes or so since it's used so frequently.
+        //
+        // The pair object saves metadata like dragging state, position and
+        // event listener references.
+
+        function setElementSize(el, size, gutSize, i) {
+            // Split.js allows setting sizes via numbers (ideally), or if you must,
+            // by string, like '300px'. This is less than ideal, because it breaks
+            // the fluid layout that `calc(% - px)` provides. You're on your own if you do that,
+            // make sure you calculate the gutter size by hand.
+            var style = elementStyle(dimension, size, gutSize, i);
+
+            Object.keys(style).forEach(function (prop) {
+                // eslint-disable-next-line no-param-reassign
+                el.style[prop] = style[prop];
+            });
+        }
+
+        function setGutterSize(gutterElement, gutSize, i) {
+            var style = gutterStyle(dimension, gutSize, i);
+
+            Object.keys(style).forEach(function (prop) {
+                // eslint-disable-next-line no-param-reassign
+                gutterElement.style[prop] = style[prop];
+            });
+        }
+
+        function getSizes() {
+            return elements.map(function (element) { return element.size; })
+        }
+
+        // Supports touch events, but not multitouch, so only the first
+        // finger `touches[0]` is counted.
+        function getMousePosition(e) {
+            if ('touches' in e) { return e.touches[0][clientAxis] }
+            return e[clientAxis]
+        }
+
+        // Actually adjust the size of elements `a` and `b` to `offset` while dragging.
+        // calc is used to allow calc(percentage + gutterpx) on the whole split instance,
+        // which allows the viewport to be resized without additional logic.
+        // Element a's size is the same as offset. b's size is total size - a size.
+        // Both sizes are calculated from the initial parent percentage,
+        // then the gutter size is subtracted.
+        function adjust(offset) {
+            var a = elements[this.a];
+            var b = elements[this.b];
+            var percentage = a.size + b.size;
+
+            a.size = (offset / this.size) * percentage;
+            b.size = percentage - (offset / this.size) * percentage;
+
+            setElementSize(a.element, a.size, this[aGutterSize], a.i);
+            setElementSize(b.element, b.size, this[bGutterSize], b.i);
+        }
+
+        // drag, where all the magic happens. The logic is really quite simple:
+        //
+        // 1. Ignore if the pair is not dragging.
+        // 2. Get the offset of the event.
+        // 3. Snap offset to min if within snappable range (within min + snapOffset).
+        // 4. Actually adjust each element in the pair to offset.
+        //
+        // ---------------------------------------------------------------------
+        // |    | <- a.minSize               ||              b.minSize -> |    |
+        // |    |  | <- this.snapOffset      ||     this.snapOffset -> |  |    |
+        // |    |  |                         ||                        |  |    |
+        // |    |  |                         ||                        |  |    |
+        // ---------------------------------------------------------------------
+        // | <- this.start                                        this.size -> |
+        function drag(e) {
+            var offset;
+            var a = elements[this.a];
+            var b = elements[this.b];
+
+            if (!this.dragging) { return }
+
+            // Get the offset of the event from the first side of the
+            // pair `this.start`. Then offset by the initial position of the
+            // mouse compared to the gutter size.
+            offset =
+                getMousePosition(e) -
+                this.start +
+                (this[aGutterSize] - this.dragOffset);
+
+            if (dragInterval > 1) {
+                offset = Math.round(offset / dragInterval) * dragInterval;
+            }
+
+            // If within snapOffset of min or max, set offset to min or max.
+            // snapOffset buffers a.minSize and b.minSize, so logic is opposite for both.
+            // Include the appropriate gutter sizes to prevent overflows.
+            if (offset <= a.minSize + snapOffset + this[aGutterSize]) {
+                offset = a.minSize + this[aGutterSize];
+            } else if (
+                offset >=
+                this.size - (b.minSize + snapOffset + this[bGutterSize])
+            ) {
+                offset = this.size - (b.minSize + this[bGutterSize]);
+            }
+
+            // Actually adjust the size.
+            adjust.call(this, offset);
+
+            // Call the drag callback continously. Don't do anything too intensive
+            // in this callback.
+            getOption(options, 'onDrag', NOOP)();
+        }
+
+        // Cache some important sizes when drag starts, so we don't have to do that
+        // continously:
+        //
+        // `size`: The total size of the pair. First + second + first gutter + second gutter.
+        // `start`: The leading side of the first element.
+        //
+        // ------------------------------------------------
+        // |      aGutterSize -> |||                      |
+        // |                     |||                      |
+        // |                     |||                      |
+        // |                     ||| <- bGutterSize       |
+        // ------------------------------------------------
+        // | <- start                             size -> |
+        function calculateSizes() {
+            // Figure out the parent size minus padding.
+            var a = elements[this.a].element;
+            var b = elements[this.b].element;
+
+            var aBounds = a[getBoundingClientRect]();
+            var bBounds = b[getBoundingClientRect]();
+
+            this.size =
+                aBounds[dimension] +
+                bBounds[dimension] +
+                this[aGutterSize] +
+                this[bGutterSize];
+            this.start = aBounds[position];
+            this.end = aBounds[positionEnd];
+        }
+
+        function innerSize(element) {
+            // Return nothing if getComputedStyle is not supported (< IE9)
+            // Or if parent element has no layout yet
+            if (!getComputedStyle) { return null }
+
+            var computedStyle = getComputedStyle(element);
+
+            if (!computedStyle) { return null }
+
+            var size = element[clientSize];
+
+            if (size === 0) { return null }
+
+            if (direction === HORIZONTAL) {
+                size -=
+                    parseFloat(computedStyle.paddingLeft) +
+                    parseFloat(computedStyle.paddingRight);
+            } else {
+                size -=
+                    parseFloat(computedStyle.paddingTop) +
+                    parseFloat(computedStyle.paddingBottom);
+            }
+
+            return size
+        }
+
+        // When specifying percentage sizes that are less than the computed
+        // size of the element minus the gutter, the lesser percentages must be increased
+        // (and decreased from the other elements) to make space for the pixels
+        // subtracted by the gutters.
+        function trimToMin(sizesToTrim) {
+            // Try to get inner size of parent element.
+            // If it's no supported, return original sizes.
+            var parentSize = innerSize(parent);
+            if (parentSize === null) {
+                return sizesToTrim
+            }
+
+            if (minSizes.reduce(function (a, b) { return a + b; }, 0) > parentSize) {
+                return sizesToTrim
+            }
+
+            // Keep track of the excess pixels, the amount of pixels over the desired percentage
+            // Also keep track of the elements with pixels to spare, to decrease after if needed
+            var excessPixels = 0;
+            var toSpare = [];
+
+            var pixelSizes = sizesToTrim.map(function (size, i) {
+                // Convert requested percentages to pixel sizes
+                var pixelSize = (parentSize * size) / 100;
+                var elementGutterSize = getGutterSize(
+                    gutterSize,
+                    i === 0,
+                    i === sizesToTrim.length - 1,
+                    gutterAlign
+                );
+                var elementMinSize = minSizes[i] + elementGutterSize;
+
+                // If element is too smal, increase excess pixels by the difference
+                // and mark that it has no pixels to spare
+                if (pixelSize < elementMinSize) {
+                    excessPixels += elementMinSize - pixelSize;
+                    toSpare.push(0);
+                    return elementMinSize
+                }
+
+                // Otherwise, mark the pixels it has to spare and return it's original size
+                toSpare.push(pixelSize - elementMinSize);
+                return pixelSize
+            });
+
+            // If nothing was adjusted, return the original sizes
+            if (excessPixels === 0) {
+                return sizesToTrim
+            }
+
+            return pixelSizes.map(function (pixelSize, i) {
+                var newPixelSize = pixelSize;
+
+                // While there's still pixels to take, and there's enough pixels to spare,
+                // take as many as possible up to the total excess pixels
+                if (excessPixels > 0 && toSpare[i] - excessPixels > 0) {
+                    var takenPixels = Math.min(
+                        excessPixels,
+                        toSpare[i] - excessPixels
+                    );
+
+                    // Subtract the amount taken for the next iteration
+                    excessPixels -= takenPixels;
+                    newPixelSize = pixelSize - takenPixels;
+                }
+
+                // Return the pixel size adjusted as a percentage
+                return (newPixelSize / parentSize) * 100
+            })
+        }
+
+        // stopDragging is very similar to startDragging in reverse.
+        function stopDragging() {
+            var self = this;
+            var a = elements[self.a].element;
+            var b = elements[self.b].element;
+
+            if (self.dragging) {
+                getOption(options, 'onDragEnd', NOOP)(getSizes());
+            }
+
+            self.dragging = false;
+
+            // Remove the stored event listeners. This is why we store them.
+            global[removeEventListener]('mouseup', self.stop);
+            global[removeEventListener]('touchend', self.stop);
+            global[removeEventListener]('touchcancel', self.stop);
+            global[removeEventListener]('mousemove', self.move);
+            global[removeEventListener]('touchmove', self.move);
+
+            // Clear bound function references
+            self.stop = null;
+            self.move = null;
+
+            a[removeEventListener]('selectstart', NOOP);
+            a[removeEventListener]('dragstart', NOOP);
+            b[removeEventListener]('selectstart', NOOP);
+            b[removeEventListener]('dragstart', NOOP);
+
+            a.style.userSelect = '';
+            a.style.webkitUserSelect = '';
+            a.style.MozUserSelect = '';
+            a.style.pointerEvents = '';
+
+            b.style.userSelect = '';
+            b.style.webkitUserSelect = '';
+            b.style.MozUserSelect = '';
+            b.style.pointerEvents = '';
+
+            self.gutter.style.cursor = '';
+            self.parent.style.cursor = '';
+            document.body.style.cursor = '';
+        }
+
+        // startDragging calls `calculateSizes` to store the inital size in the pair object.
+        // It also adds event listeners for mouse/touch events,
+        // and prevents selection while dragging so avoid the selecting text.
+        function startDragging(e) {
+            // Right-clicking can't start dragging.
+            if ('button' in e && e.button !== 0) {
+                return
+            }
+
+            // Alias frequently used variables to save space. 200 bytes.
+            var self = this;
+            var a = elements[self.a].element;
+            var b = elements[self.b].element;
+
+            // Call the onDragStart callback.
+            if (!self.dragging) {
+                getOption(options, 'onDragStart', NOOP)(getSizes());
+            }
+
+            // Don't actually drag the element. We emulate that in the drag function.
+            e.preventDefault();
+
+            // Set the dragging property of the pair object.
+            self.dragging = true;
+
+            // Create two event listeners bound to the same pair object and store
+            // them in the pair object.
+            self.move = drag.bind(self);
+            self.stop = stopDragging.bind(self);
+
+            // All the binding. `window` gets the stop events in case we drag out of the elements.
+            global[addEventListener]('mouseup', self.stop);
+            global[addEventListener]('touchend', self.stop);
+            global[addEventListener]('touchcancel', self.stop);
+            global[addEventListener]('mousemove', self.move);
+            global[addEventListener]('touchmove', self.move);
+
+            // Disable selection. Disable!
+            a[addEventListener]('selectstart', NOOP);
+            a[addEventListener]('dragstart', NOOP);
+            b[addEventListener]('selectstart', NOOP);
+            b[addEventListener]('dragstart', NOOP);
+
+            a.style.userSelect = 'none';
+            a.style.webkitUserSelect = 'none';
+            a.style.MozUserSelect = 'none';
+            a.style.pointerEvents = 'none';
+
+            b.style.userSelect = 'none';
+            b.style.webkitUserSelect = 'none';
+            b.style.MozUserSelect = 'none';
+            b.style.pointerEvents = 'none';
+
+            // Set the cursor at multiple levels
+            self.gutter.style.cursor = cursor;
+            self.parent.style.cursor = cursor;
+            document.body.style.cursor = cursor;
+
+            // Cache the initial sizes of the pair.
+            calculateSizes.call(self);
+
+            // Determine the position of the mouse compared to the gutter
+            self.dragOffset = getMousePosition(e) - self.end;
+        }
+
+        // adjust sizes to ensure percentage is within min size and gutter.
+        sizes = trimToMin(sizes);
+
+        // 5. Create pair and element objects. Each pair has an index reference to
+        // elements `a` and `b` of the pair (first and second elements).
+        // Loop through the elements while pairing them off. Every pair gets a
+        // `pair` object and a gutter.
+        //
+        // Basic logic:
+        //
+        // - Starting with the second element `i > 0`, create `pair` objects with
+        //   `a = i - 1` and `b = i`
+        // - Set gutter sizes based on the _pair_ being first/last. The first and last
+        //   pair have gutterSize / 2, since they only have one half gutter, and not two.
+        // - Create gutter elements and add event listeners.
+        // - Set the size of the elements, minus the gutter sizes.
+        //
+        // -----------------------------------------------------------------------
+        // |     i=0     |         i=1         |        i=2       |      i=3     |
+        // |             |                     |                  |              |
+        // |           pair 0                pair 1             pair 2           |
+        // |             |                     |                  |              |
+        // -----------------------------------------------------------------------
+        var pairs = [];
+        elements = ids.map(function (id, i) {
+            // Create the element object.
+            var element = {
+                element: elementOrSelector(id),
+                size: sizes[i],
+                minSize: minSizes[i],
+                i: i,
+            };
+
+            var pair;
+
+            if (i > 0) {
+                // Create the pair object with its metadata.
+                pair = {
+                    a: i - 1,
+                    b: i,
+                    dragging: false,
+                    direction: direction,
+                    parent: parent,
+                };
+
+                pair[aGutterSize] = getGutterSize(
+                    gutterSize,
+                    i - 1 === 0,
+                    false,
+                    gutterAlign
+                );
+                pair[bGutterSize] = getGutterSize(
+                    gutterSize,
+                    false,
+                    i === ids.length - 1,
+                    gutterAlign
+                );
+
+                // if the parent has a reverse flex-direction, switch the pair elements.
+                if (
+                    parentFlexDirection === 'row-reverse' ||
+                    parentFlexDirection === 'column-reverse'
+                ) {
+                    var temp = pair.a;
+                    pair.a = pair.b;
+                    pair.b = temp;
+                }
+            }
+
+            // Determine the size of the current element. IE8 is supported by
+            // staticly assigning sizes without draggable gutters. Assigns a string
+            // to `size`.
+            //
+            // IE9 and above
+            if (!isIE8) {
+                // Create gutter elements for each pair.
+                if (i > 0) {
+                    var gutterElement = gutter(i, direction, element.element);
+                    setGutterSize(gutterElement, gutterSize, i);
+
+                    // Save bound event listener for removal later
+                    pair[gutterStartDragging] = startDragging.bind(pair);
+
+                    // Attach bound event listener
+                    gutterElement[addEventListener](
+                        'mousedown',
+                        pair[gutterStartDragging]
+                    );
+                    gutterElement[addEventListener](
+                        'touchstart',
+                        pair[gutterStartDragging]
+                    );
+
+                    parent.insertBefore(gutterElement, element.element);
+
+                    pair.gutter = gutterElement;
+                }
+            }
+
+            setElementSize(
+                element.element,
+                element.size,
+                getGutterSize(
+                    gutterSize,
+                    i === 0,
+                    i === ids.length - 1,
+                    gutterAlign
+                ),
+                i
+            );
+
+            // After the first iteration, and we have a pair object, append it to the
+            // list of pairs.
+            if (i > 0) {
+                pairs.push(pair);
+            }
+
+            return element
+        });
+
+        function adjustToMin(element) {
+            var isLast = element.i === pairs.length;
+            var pair = isLast ? pairs[element.i - 1] : pairs[element.i];
+
+            calculateSizes.call(pair);
+
+            var size = isLast
+                ? pair.size - element.minSize - pair[bGutterSize]
+                : element.minSize + pair[aGutterSize];
+
+            adjust.call(pair, size);
+        }
+
+        elements.forEach(function (element) {
+            var computedSize = element.element[getBoundingClientRect]()[dimension];
+
+            if (computedSize < element.minSize) {
+                if (expandToMin) {
+                    adjustToMin(element);
+                } else {
+                    // eslint-disable-next-line no-param-reassign
+                    element.minSize = computedSize;
+                }
+            }
+        });
+
+        function setSizes(newSizes) {
+            var trimmed = trimToMin(newSizes);
+            trimmed.forEach(function (newSize, i) {
+                if (i > 0) {
+                    var pair = pairs[i - 1];
+
+                    var a = elements[pair.a];
+                    var b = elements[pair.b];
+
+                    a.size = trimmed[i - 1];
+                    b.size = newSize;
+
+                    setElementSize(a.element, a.size, pair[aGutterSize], a.i);
+                    setElementSize(b.element, b.size, pair[bGutterSize], b.i);
+                }
+            });
+        }
+
+        function destroy(preserveStyles, preserveGutter) {
+            pairs.forEach(function (pair) {
+                if (preserveGutter !== true) {
+                    pair.parent.removeChild(pair.gutter);
+                } else {
+                    pair.gutter[removeEventListener](
+                        'mousedown',
+                        pair[gutterStartDragging]
+                    );
+                    pair.gutter[removeEventListener](
+                        'touchstart',
+                        pair[gutterStartDragging]
+                    );
+                }
+
+                if (preserveStyles !== true) {
+                    var style = elementStyle(
+                        dimension,
+                        pair.a.size,
+                        pair[aGutterSize]
+                    );
+
+                    Object.keys(style).forEach(function (prop) {
+                        elements[pair.a].element.style[prop] = '';
+                        elements[pair.b].element.style[prop] = '';
+                    });
+                }
+            });
+        }
+
+        if (isIE8) {
+            return {
+                setSizes: setSizes,
+                destroy: destroy,
+            }
+        }
+
+        return {
+            setSizes: setSizes,
+            getSizes: getSizes,
+            collapse: function collapse(i) {
+                adjustToMin(elements[i]);
+            },
+            destroy: destroy,
+            parent: parent,
+            pairs: pairs,
+        }
+    };
+
+    return Split;
+
+})));
diff --git a/docs/assets/style.css b/docs/assets/style.css
new file mode 100644
index 00000000..0618f437
--- /dev/null
+++ b/docs/assets/style.css
@@ -0,0 +1,147 @@
+.documentation {
+  font-family: Helvetica, sans-serif;
+  color: #666;
+  line-height: 1.5;
+  background: #f5f5f5;
+}
+
+.black {
+  color: #666;
+}
+
+.bg-white {
+  background-color: #fff;
+}
+
+h4 {
+  margin: 20px 0 10px 0;
+}
+
+.documentation h3 {
+  color: #000;
+}
+
+.border-bottom {
+  border-color: #ddd;
+}
+
+a {
+  color: #1184ce;
+  text-decoration: none;
+}
+
+.documentation a[href]:hover {
+  text-decoration: underline;
+}
+
+a:hover {
+  cursor: pointer;
+}
+
+.py1-ul li {
+  padding: 5px 0;
+}
+
+.max-height-100 {
+  max-height: 100%;
+}
+
+.height-viewport-100 {
+  height: 100vh;
+}
+
+section:target h3 {
+  font-weight: 700;
+}
+
+.documentation td,
+.documentation th {
+  padding: 0.25rem 0.25rem;
+}
+
+h1:hover .anchorjs-link,
+h2:hover .anchorjs-link,
+h3:hover .anchorjs-link,
+h4:hover .anchorjs-link {
+  opacity: 1;
+}
+
+.fix-3 {
+  width: 25%;
+  max-width: 244px;
+}
+
+.fix-3 {
+  width: 25%;
+  max-width: 244px;
+}
+
+@media (min-width: 52em) {
+  .fix-margin-3 {
+    margin-left: 25%;
+  }
+}
+
+.pre,
+pre,
+code,
+.code {
+  font-family: Source Code Pro, Menlo, Consolas, Liberation Mono, monospace;
+  font-size: 14px;
+}
+
+.fill-light {
+  background: #f9f9f9;
+}
+
+.width2 {
+  width: 1rem;
+}
+
+.input {
+  font-family: inherit;
+  display: block;
+  width: 100%;
+  height: 2rem;
+  padding: 0.5rem;
+  margin-bottom: 1rem;
+  border: 1px solid #ccc;
+  font-size: 0.875rem;
+  border-radius: 3px;
+  box-sizing: border-box;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+.prose table th,
+.prose table td {
+  text-align: left;
+  padding: 8px;
+  border: 1px solid #ddd;
+}
+
+.prose table th:nth-child(1) {
+  border-right: none;
+}
+.prose table th:nth-child(2) {
+  border-left: none;
+}
+
+.prose table {
+  border: 1px solid #ddd;
+}
+
+.prose-big {
+  font-size: 18px;
+  line-height: 30px;
+}
+
+.quiet {
+  opacity: 0.7;
+}
+
+.minishadow {
+  box-shadow: 2px 2px 10px #f3f3f3;
+}
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 00000000..3b4c7da8
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,898 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset='utf-8'>
+  <title>@docknetwork/react-native-sdk 0.1.0 | Documentation</title>
+  <meta name='viewport' content='width=device-width,initial-scale=1'>
+  <link href='assets/bass.css' rel='stylesheet'>
+  <link href='assets/style.css' rel='stylesheet'>
+  <link href='assets/github.css' rel='stylesheet'>
+  <link href='assets/split.css' rel='stylesheet'>
+</head>
+<body class='documentation m0'>
+    <div class='flex'>
+      <div id='split-left' class='overflow-auto fs0 height-viewport-100'>
+        <div class='py1 px2'>
+          <h3 class='mb0 no-anchor'>@docknetwork/react-native-sdk</h3>
+          <div class='mb1'><code>0.1.0</code></div>
+          <input
+            placeholder='Filter'
+            id='filter-input'
+            class='col12 block input'
+            spellcheck='false'
+            autocapitalize='off'
+            autocorrect='off'
+            type='text' />
+          <div id='toc'>
+            <ul class='list-reset h5 py1-ul'>
+              
+                
+                <li><a
+                  href='#isvalid'
+                  class="">
+                  isValid
+                  
+                </a>
+                
+                </li>
+              
+                
+                <li><a
+                  href='#synccredentialstatus'
+                  class="">
+                  syncCredentialStatus
+                  
+                </a>
+                
+                </li>
+              
+                
+                <li><a
+                  href='#getall'
+                  class="">
+                  getAll
+                  
+                </a>
+                
+                </li>
+              
+                
+                <li><a
+                  href='#resolveapinetwork'
+                  class="">
+                  resolveApiNetwork
+                  
+                </a>
+                
+                </li>
+              
+                
+                <li><a
+                  href='#tov1walletservice'
+                  class="">
+                  toV1WalletService
+                  
+                </a>
+                
+                </li>
+              
+                
+                <li><a
+                  href='#statusdata'
+                  class="">
+                  statusData
+                  
+                </a>
+                
+                </li>
+              
+                
+                <li><a
+                  href='#getfilteredcredentials'
+                  class="">
+                  getFilteredCredentials
+                  
+                </a>
+                
+                </li>
+              
+                
+                <li><a
+                  href='#evaluatepresentation'
+                  class="">
+                  evaluatePresentation
+                  
+                </a>
+                
+                </li>
+              
+                
+                <li><a
+                  href='#handlesubstratenetworkchange'
+                  class="">
+                  handleSubstrateNetworkChange
+                  
+                </a>
+                
+                </li>
+              
+                
+                <li><a
+                  href='#createwallet'
+                  class="">
+                  createWallet
+                  
+                </a>
+                
+                </li>
+              
+            </ul>
+          </div>
+          <div class='mt1 h6 quiet'>
+            <a href='https://documentation.js.org/reading-documentation.html'>Need help reading this?</a>
+          </div>
+        </div>
+      </div>
+      <div id='split-right' class='relative overflow-auto height-viewport-100'>
+        
+          
+          <section class='p2 mb2 clearfix bg-white minishadow'>
+
+  
+  <div class='clearfix'>
+    
+    <h3 class='fl m0' id='isvalid'>
+      isValid
+    </h3>
+    
+    
+  </div>
+  
+
+  <p>Uses Dock SDK to verify a credential</p>
+
+    <div class='pre p1 fill-light mt0'>isValid(credential: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</div>
+  
+  
+
+  
+  
+  
+  
+  
+  
+
+  
+    <div class='py1 quiet mt1 prose-big'>Parameters</div>
+    <div class='prose'>
+      
+        <div class='space-bottom0'>
+          <div>
+            <span class='code bold'>credential</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
+	    
+          </div>
+          
+          <table class='mt1 mb2 fixed-table h5 col-12'>
+            <colgroup>
+              <col width='30%' />
+              <col width='70%' />
+            </colgroup>
+            <thead>
+              <tr class='bold fill-light'>
+                <th>Name</th>
+                <th>Description</th>
+              </tr>
+            </thead>
+            <tbody class='mt1'>
+              
+                <tr>
+  <td class='break-word'><span class='code bold'>credential.credential</span> <code class='quiet'>any</code>
+  </td>
+  <td class='break-word'><span></span></td>
+</tr>
+
+
+              
+                <tr>
+  <td class='break-word'><span class='code bold'>credential.wallet</span> <code class='quiet'>any</code>
+  </td>
+  <td class='break-word'><span></span></td>
+</tr>
+
+
+              
+            </tbody>
+          </table>
+          
+        </div>
+      
+    </div>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+</section>
+
+          
+        
+          
+          <section class='p2 mb2 clearfix bg-white minishadow'>
+
+  
+  <div class='clearfix'>
+    
+    <h3 class='fl m0' id='synccredentialstatus'>
+      syncCredentialStatus
+    </h3>
+    
+    
+  </div>
+  
+
+  <p>Fetch credential status from the chain and update the wallet
+Store a new document #status in the wallet
+Returns a list of CredentialStatusDocument</p>
+
+    <div class='pre p1 fill-light mt0'>syncCredentialStatus(param0: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>): any</div>
+  
+  
+
+  
+  
+  
+  
+  
+  
+
+  
+    <div class='py1 quiet mt1 prose-big'>Parameters</div>
+    <div class='prose'>
+      
+        <div class='space-bottom0'>
+          <div>
+            <span class='code bold'>param0</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
+	    
+          </div>
+          
+          <table class='mt1 mb2 fixed-table h5 col-12'>
+            <colgroup>
+              <col width='30%' />
+              <col width='70%' />
+            </colgroup>
+            <thead>
+              <tr class='bold fill-light'>
+                <th>Name</th>
+                <th>Description</th>
+              </tr>
+            </thead>
+            <tbody class='mt1'>
+              
+                <tr>
+  <td class='break-word'><span class='code bold'>param0.wallet</span> <code class='quiet'>any</code>
+  </td>
+  <td class='break-word'><span></span></td>
+</tr>
+
+
+              
+                <tr>
+  <td class='break-word'><span class='code bold'>param0.credentialIds</span> <code class='quiet'>any</code>
+  </td>
+  <td class='break-word'><span></span></td>
+</tr>
+
+
+              
+                <tr>
+  <td class='break-word'><span class='code bold'>param0.forceFetch</span> <code class='quiet'>any</code>
+  </td>
+  <td class='break-word'><span></span></td>
+</tr>
+
+
+              
+            </tbody>
+          </table>
+          
+        </div>
+      
+    </div>
+  
+
+  
+
+  
+    
+      <div class='py1 quiet mt1 prose-big'>Returns</div>
+      <code>any</code>:
+        CredentialStatusDocument[]
+
+      
+    
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+</section>
+
+          
+        
+          
+          <section class='p2 mb2 clearfix bg-white minishadow'>
+
+  
+  <div class='clearfix'>
+    
+    <h3 class='fl m0' id='getall'>
+      getAll
+    </h3>
+    
+    
+  </div>
+  
+
+  <p>Get DIDs list</p>
+
+    <div class='pre p1 fill-light mt0'>getAll(param0: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</div>
+  
+  
+
+  
+  
+  
+  
+  
+  
+
+  
+    <div class='py1 quiet mt1 prose-big'>Parameters</div>
+    <div class='prose'>
+      
+        <div class='space-bottom0'>
+          <div>
+            <span class='code bold'>param0</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
+	    
+          </div>
+          
+          <table class='mt1 mb2 fixed-table h5 col-12'>
+            <colgroup>
+              <col width='30%' />
+              <col width='70%' />
+            </colgroup>
+            <thead>
+              <tr class='bold fill-light'>
+                <th>Name</th>
+                <th>Description</th>
+              </tr>
+            </thead>
+            <tbody class='mt1'>
+              
+                <tr>
+  <td class='break-word'><span class='code bold'>param0.wallet</span> <code class='quiet'>any</code>
+  </td>
+  <td class='break-word'><span></span></td>
+</tr>
+
+
+              
+            </tbody>
+          </table>
+          
+        </div>
+      
+    </div>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+</section>
+
+          
+        
+          
+          <section class='p2 mb2 clearfix bg-white minishadow'>
+
+  
+  <div class='clearfix'>
+    
+    <h3 class='fl m0' id='resolveapinetwork'>
+      resolveApiNetwork
+    </h3>
+    
+    
+  </div>
+  
+
+  <p>Given an Api URL, resolve the network ID
+For now it will be applied for creds and certs
+It can be extended to resolve other external URLs</p>
+
+    <div class='pre p1 fill-light mt0'>resolveApiNetwork($0: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</div>
+  
+  
+
+  
+  
+  
+  
+  
+  
+
+  
+    <div class='py1 quiet mt1 prose-big'>Parameters</div>
+    <div class='prose'>
+      
+        <div class='space-bottom0'>
+          <div>
+            <span class='code bold'>$0</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
+	    
+          </div>
+          
+          <table class='mt1 mb2 fixed-table h5 col-12'>
+            <colgroup>
+              <col width='30%' />
+              <col width='70%' />
+            </colgroup>
+            <thead>
+              <tr class='bold fill-light'>
+                <th>Name</th>
+                <th>Description</th>
+              </tr>
+            </thead>
+            <tbody class='mt1'>
+              
+                <tr>
+  <td class='break-word'><span class='code bold'>$0.url</span> <code class='quiet'>any</code>
+  </td>
+  <td class='break-word'><span></span></td>
+</tr>
+
+
+              
+                <tr>
+  <td class='break-word'><span class='code bold'>$0.dataStore</span> <code class='quiet'>any</code>
+  </td>
+  <td class='break-word'><span></span></td>
+</tr>
+
+
+              
+            </tbody>
+          </table>
+          
+        </div>
+      
+    </div>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+</section>
+
+          
+        
+          
+          <section class='p2 mb2 clearfix bg-white minishadow'>
+
+  
+  <div class='clearfix'>
+    
+    <h3 class='fl m0' id='tov1walletservice'>
+      toV1WalletService
+    </h3>
+    
+    
+  </div>
+  
+
+  <p>Wallet service methods</p>
+
+    <div class='pre p1 fill-light mt0'>toV1WalletService(wallet: any)</div>
+  
+  
+
+  
+  
+  
+  
+  
+  
+
+  
+    <div class='py1 quiet mt1 prose-big'>Parameters</div>
+    <div class='prose'>
+      
+        <div class='space-bottom0'>
+          <div>
+            <span class='code bold'>wallet</span> <code class='quiet'>(any)</code>
+	    
+          </div>
+          
+        </div>
+      
+    </div>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+</section>
+
+          
+        
+          
+          <section class='p2 mb2 clearfix bg-white minishadow'>
+
+  
+  <div class='clearfix'>
+    
+    <h3 class='fl m0' id='statusdata'>
+      statusData
+    </h3>
+    
+    
+  </div>
+  
+
+  <p>Extra data to give better context to the current state
+Can be used to show error messages, or more specific information about the state</p>
+
+    <div class='pre p1 fill-light mt0'>statusData</div>
+  
+  
+
+  
+  
+  
+  
+  
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+</section>
+
+          
+        
+          
+          <section class='p2 mb2 clearfix bg-white minishadow'>
+
+  
+  <div class='clearfix'>
+    
+    <h3 class='fl m0' id='getfilteredcredentials'>
+      getFilteredCredentials
+    </h3>
+    
+    
+  </div>
+  
+
+  <p>Filtered credentials</p>
+
+    <div class='pre p1 fill-light mt0'>getFilteredCredentials()</div>
+  
+  
+
+  
+  
+  
+  
+  
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+</section>
+
+          
+        
+          
+          <section class='p2 mb2 clearfix bg-white minishadow'>
+
+  
+  <div class='clearfix'>
+    
+    <h3 class='fl m0' id='evaluatepresentation'>
+      evaluatePresentation
+    </h3>
+    
+    
+  </div>
+  
+
+  <p>Use pex to evaluate presentation</p>
+
+    <div class='pre p1 fill-light mt0'>evaluatePresentation(presentation: any)</div>
+  
+  
+
+  
+  
+  
+  
+  
+  
+
+  
+    <div class='py1 quiet mt1 prose-big'>Parameters</div>
+    <div class='prose'>
+      
+        <div class='space-bottom0'>
+          <div>
+            <span class='code bold'>presentation</span> <code class='quiet'>(any)</code>
+	    
+          </div>
+          
+        </div>
+      
+    </div>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+</section>
+
+          
+        
+          
+          <section class='p2 mb2 clearfix bg-white minishadow'>
+
+  
+  <div class='clearfix'>
+    
+    <h3 class='fl m0' id='handlesubstratenetworkchange'>
+      handleSubstrateNetworkChange
+    </h3>
+    
+    
+  </div>
+  
+
+  <p>Update existing substrate network connection
+Compare connected substrate connection with the current walle network
+Disconnect and Establish a new connection if the network is different</p>
+
+    <div class='pre p1 fill-light mt0'>handleSubstrateNetworkChange(wallet: any)</div>
+  
+  
+
+  
+  
+  
+  
+  
+  
+
+  
+    <div class='py1 quiet mt1 prose-big'>Parameters</div>
+    <div class='prose'>
+      
+        <div class='space-bottom0'>
+          <div>
+            <span class='code bold'>wallet</span> <code class='quiet'>(any)</code>
+	    
+          </div>
+          
+        </div>
+      
+    </div>
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+</section>
+
+          
+        
+          
+          <section class='p2 mb2 clearfix bg-white minishadow'>
+
+  
+  <div class='clearfix'>
+    
+    <h3 class='fl m0' id='createwallet'>
+      createWallet
+    </h3>
+    
+    
+  </div>
+  
+
+  <p>Create wallet</p>
+
+    <div class='pre p1 fill-light mt0'>createWallet(createWalletProps: any): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a>&#x3C;IWallet></div>
+  
+  
+
+  
+  
+  
+  
+  
+  
+
+  
+    <div class='py1 quiet mt1 prose-big'>Parameters</div>
+    <div class='prose'>
+      
+        <div class='space-bottom0'>
+          <div>
+            <span class='code bold'>createWalletProps</span> <code class='quiet'>(any)</code>
+	    
+          </div>
+          
+        </div>
+      
+    </div>
+  
+
+  
+
+  
+    
+      <div class='py1 quiet mt1 prose-big'>Returns</div>
+      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a>&#x3C;IWallet></code>:
+        
+      
+    
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+</section>
+
+          
+        
+      </div>
+    </div>
+  <script src='assets/anchor.js'></script>
+  <script src='assets/split.js'></script>
+  <script src='assets/site.js'></script>
+</body>
+</html>