From 5ca1ca6ba07798dd6eb2cd717642f919d17619ec Mon Sep 17 00:00:00 2001 From: Glen Cheney Date: Tue, 29 Aug 2017 23:40:09 -0700 Subject: [PATCH] Add ajax demo --- docs/_data/demos.json | 5 + .../_posts/2017-06-29-shuffle-with-react.html | 4 +- docs/_posts/2017-08-28-ajax.html | 74 ++++++++++++ docs/_scss/components/_buttons.scss | 12 ++ docs/css/style.css | 2 +- docs/img/demos/ajax.jpg | Bin 0 -> 21613 bytes docs/img/demos/ajax.webp | Bin 0 -> 8596 bytes docs/js/demos/ajax.js | 106 ++++++++++++++++++ 8 files changed, 200 insertions(+), 3 deletions(-) create mode 100644 docs/_posts/2017-08-28-ajax.html create mode 100644 docs/img/demos/ajax.jpg create mode 100644 docs/img/demos/ajax.webp create mode 100644 docs/js/demos/ajax.js diff --git a/docs/_data/demos.json b/docs/_data/demos.json index 2cc1643..f19befc 100644 --- a/docs/_data/demos.json +++ b/docs/_data/demos.json @@ -44,6 +44,11 @@ "slug": "shuffle-with-react", "label": "Shuffle with React" }, + { + "url": "demos/2017-08-28-ajax", + "slug": "ajax", + "label": "Loading ajax content" + }, { "external": true, "url": "http://codepen.io/pen?template=qrjOpX", diff --git a/docs/_posts/2017-06-29-shuffle-with-react.html b/docs/_posts/2017-06-29-shuffle-with-react.html index 05f2a2c..571a46b 100644 --- a/docs/_posts/2017-06-29-shuffle-with-react.html +++ b/docs/_posts/2017-06-29-shuffle-with-react.html @@ -1,7 +1,7 @@ --- layout: default title: Shuffle with React -description: TODO +description: An example using the React framework with Shuffle. image: /demos/flexbox-grid.jpg extraJS: [ "demos/react.js" ] externalJS: ["https://unpkg.com/react@latest/dist/react.js", "https://unpkg.com/react-dom@latest/dist/react-dom.js", "https://unpkg.com/babel-standalone@6.15.0/babel.min.js"] @@ -54,7 +54,7 @@ prism: true

Shuffle with React

And other view-based libraries like Vue and Preact.

-

The simplest way is to use shuffleInstance.resetItems(); inside the componentDidUpdate() lifecycle method.

+

The simplest way is to use shuffleInstance.resetItems(); inside the componentDidUpdate() lifecycle method.

diff --git a/docs/_posts/2017-08-28-ajax.html b/docs/_posts/2017-08-28-ajax.html new file mode 100644 index 0000000..d22097d --- /dev/null +++ b/docs/_posts/2017-08-28-ajax.html @@ -0,0 +1,74 @@ +--- +layout: default +title: Loading ajax content +description: Fetch data from an api, then add it to Shuffle. +image: /demos/ajax.jpg +extraJS: ["demos/ajax.js"] +externalJS: ["https://unpkg.com/whatwg-fetch"] +prism: true +photoCredit: false +--- + + + +
+
+
+

Shuffle with Ajax Content

+

This demo builds off the adding and removing demo to append new items after fetching them from an API and follows the same pattern:

+
    +
  1. Insert the elements into the shuffle container element (in this case, #grid) however you like. You could use insertAdjacentHTML, jQuery.append, or any other method of inserting new content.
    2. +
  2. Make an array of the newly added items.
    3. +
  3. Call add(newItemsArray) on your shuffle instance.
    4. +
+

The data comes from https://reqres.in.

+
+
+
+ +
+
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+
+

Source code for this demo

+

Link to demo source

+
+ 

+      

+    

+  

+

+
diff --git a/docs/_scss/components/_buttons.scss b/docs/_scss/components/_buttons.scss
index bfc397d..1df5e11 100644
--- a/docs/_scss/components/_buttons.scss
+++ b/docs/_scss/components/_buttons.scss
@@ -61,6 +61,13 @@
   &:focus.active {
     box-shadow: inset 0 1px 2px rgba(0,0,0,.3), 0 0 0 2px rgba($gray20, 0.4);
   }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.7;
+    color: $gray20;
+    background-color: rgba($gray20, 0);
+  }
 }
 
 $btn-variants: (
@@ -94,6 +101,11 @@ $btn-variants: (
     &:focus.active {
       box-shadow: inset 0 1px 2px rgba(0,0,0,.3), 0 0 0 2px rgba($color, 0.4);
     }
+
+    &:disabled {
+      color: $color;
+      background-color: rgba($color, 0);
+    }
   }
 }
 
diff --git a/docs/css/style.css b/docs/css/style.css
index 4726e0f..d4ba1e4 100644
--- a/docs/css/style.css
+++ b/docs/css/style.css
@@ -1 +1 @@
-@charset "UTF-8";*,:after,:before{box-sizing:border-box}main{overflow:hidden}pre.max-height{max-height:30em}img,picture{display:block}img{height:auto;max-width:100%}figure,ul ul{margin:0}ul ul{list-style-type:circle;padding-left:1.25em}li{line-height:1.4}li+li{margin-top:4px}nav>a{display:block;margin:5px 0}#demos{margin-top:1em}body{color:#5d6d77;font-family:Open Sans,Helvetica Neue,Helvetica,sans-serif}a{text-decoration:none}a,a:visited{color:#3498db}a:hover{text-decoration:underline}a:active{color:#2ecc71}h1,h2,h3,h4,h5,h6{color:#34495e;font-weight:700}h1{font-size:10vw;font-weight:400;line-height:1}h1,h2{margin:3vw 0}h2{font-size:7vw;position:relative}h3{font-size:6vw;margin:2vw 0}h4{font-size:1.25em}p{line-height:1.4;margin:1em 0}.intro-text{font-size:1.125em;margin:.7em 0}@media screen and (min-width:768px){h1{font-size:3.5em;margin:.5em 0 .25em}h2{font-size:2.5em;margin:.45em 0}h3{font-size:1.5em;margin:.8em 0 .5em}h1>a,h2>a,h3>a{display:none}h1:hover>a,h2:hover>a,h3:hover>a{background:url(../img/link.svg) no-repeat;display:inline-block;height:50px;overflow:hidden;position:absolute;text-indent:-999em;top:0;width:50px}.intro-text{font-size:1.25em}}.unstyled{list-style-type:none;margin:0;padding:0}.type--underline{text-decoration:underline}code:not([class*=language]){background-color:rgba(27,31,35,.05);border-radius:3px;color:#2c3e50;font-family:Menlo,Consolas,Liberation Mono,Courier,monospace;font-size:85%;margin:0;padding:.2em 0}code:not([class*=language]):after,code:not([class*=language]):before{content:"\00a0";letter-spacing:-.2em}.container{padding-left:3.5%;padding-right:3.5%}.container:after,.container:before{content:" ";display:table}.container:after{clear:both}.row{margin-left:auto;margin-right:auto}.row:after,.row:before{content:" ";display:table}.row:after{clear:both}.row .row{margin-left:-8px;margin-right:-8px}.row--centered{-ms-flex-pack:center;-ms-flex-wrap:wrap;-webkit-box-pack:center;display:-webkit-box;display:-ms-flexbox;display:flex;flex-wrap:wrap;justify-content:center}.aspect{height:0;overflow:hidden;padding-bottom:100%;position:relative;width:100%}.aspect--16x9{padding-bottom:56.25%}.aspect--9x16{padding-bottom:177.77778%}.aspect--4x3{padding-bottom:75%}.aspect--3x4{padding-bottom:133.33333%}.aspect--3x2{padding-bottom:66.66667%}.aspect--3x1{padding-bottom:33.33333%}.aspect--2x3{padding-bottom:150%}.aspect--2x1{padding-bottom:50%}.aspect--1x2{padding-bottom:200%}.aspect--1x1{padding-bottom:100%}.aspect--none{height:auto;overflow:visible;padding-bottom:0}.aspect--none>.aspect__inner{position:static}.aspect>div,.aspect__inner{bottom:0;left:0;position:absolute;right:0;top:0}.col-1\@lg,.col-1\@md,.col-1\@sm,.col-1\@xs,.col-2\@lg,.col-2\@md,.col-2\@sm,.col-2\@xs,.col-3\@lg,.col-3\@md,.col-3\@sm,.col-3\@xs,.col-4\@lg,.col-4\@md,.col-4\@sm,.col-4\@xs,.col-5\@lg,.col-5\@md,.col-5\@sm,.col-5\@xs,.col-6\@lg,.col-6\@md,.col-6\@sm,.col-6\@xs,.col-7\@lg,.col-7\@md,.col-7\@sm,.col-7\@xs,.col-8\@lg,.col-8\@md,.col-8\@sm,.col-8\@xs,.col-9\@lg,.col-9\@md,.col-9\@sm,.col-9\@xs,.col-10\@lg,.col-10\@md,.col-10\@sm,.col-10\@xs,.col-11\@lg,.col-11\@md,.col-11\@sm,.col-11\@xs,.col-12\@lg,.col-12\@md,.col-12\@sm,.col-12\@xs{box-sizing:border-box;min-height:1px;padding-left:8px;padding-right:8px;position:relative}.col-1\@xs,.col-2\@xs,.col-3\@xs,.col-4\@xs,.col-5\@xs,.col-6\@xs,.col-7\@xs,.col-8\@xs,.col-9\@xs,.col-10\@xs,.col-11\@xs,.col-12\@xs{float:left}.aspect--16x9\@xs{padding-bottom:56.25%}.aspect--9x16\@xs{padding-bottom:177.77778%}.aspect--4x3\@xs{padding-bottom:75%}.aspect--3x4\@xs{padding-bottom:133.33333%}.aspect--3x2\@xs{padding-bottom:66.66667%}.aspect--3x1\@xs{padding-bottom:33.33333%}.aspect--2x3\@xs{padding-bottom:150%}.aspect--2x1\@xs{padding-bottom:50%}.aspect--1x2\@xs{padding-bottom:200%}.aspect--1x1\@xs{padding-bottom:100%}.aspect--none\@xs{height:auto;overflow:visible;padding-bottom:0}.aspect--none\@xs>.aspect__inner{position:static}.col-1\@xs{width:16.66667%}.col-2\@xs{width:33.33333%}.col-3\@xs{width:50%}.col-4\@xs{width:66.66667%}.col-5\@xs{width:83.33333%}.col-6\@xs{width:100%}.col-pull-0\@xs{right:auto}.col-pull-1\@xs{right:16.66667%}.col-pull-2\@xs{right:33.33333%}.col-pull-3\@xs{right:50%}.col-pull-4\@xs{right:66.66667%}.col-pull-5\@xs{right:83.33333%}.col-pull-6\@xs{right:100%}.col-push-0\@xs{left:auto}.col-push-1\@xs{left:16.66667%}.col-push-2\@xs{left:33.33333%}.col-push-3\@xs{left:50%}.col-push-4\@xs{left:66.66667%}.col-push-5\@xs{left:83.33333%}.col-push-6\@xs{left:100%}.col-offset-0\@xs{margin-left:0}.col-offset-1\@xs{margin-left:16.66667%}.col-offset-2\@xs{margin-left:33.33333%}.col-offset-3\@xs{margin-left:50%}.col-offset-4\@xs{margin-left:66.66667%}.col-offset-5\@xs{margin-left:83.33333%}.col-offset-6\@xs{margin-left:100%}@media screen and (min-width:768px){.col-1\@sm,.col-2\@sm,.col-3\@sm,.col-4\@sm,.col-5\@sm,.col-6\@sm,.col-7\@sm,.col-8\@sm,.col-9\@sm,.col-10\@sm,.col-11\@sm,.col-12\@sm{float:left}.aspect--16x9\@sm{padding-bottom:56.25%}.aspect--9x16\@sm{padding-bottom:177.77778%}.aspect--4x3\@sm{padding-bottom:75%}.aspect--3x4\@sm{padding-bottom:133.33333%}.aspect--3x2\@sm{padding-bottom:66.66667%}.aspect--3x1\@sm{padding-bottom:33.33333%}.aspect--2x3\@sm{padding-bottom:150%}.aspect--2x1\@sm{padding-bottom:50%}.aspect--1x2\@sm{padding-bottom:200%}.aspect--1x1\@sm{padding-bottom:100%}.aspect--none\@sm{height:auto;overflow:visible;padding-bottom:0}.aspect--none\@sm>.aspect__inner{position:static}.col-1\@sm{width:8.33333%}.col-2\@sm{width:16.66667%}.col-3\@sm{width:25%}.col-4\@sm{width:33.33333%}.col-5\@sm{width:41.66667%}.col-6\@sm{width:50%}.col-7\@sm{width:58.33333%}.col-8\@sm{width:66.66667%}.col-9\@sm{width:75%}.col-10\@sm{width:83.33333%}.col-11\@sm{width:91.66667%}.col-12\@sm{width:100%}.col-pull-0\@sm{right:auto}.col-pull-1\@sm{right:8.33333%}.col-pull-2\@sm{right:16.66667%}.col-pull-3\@sm{right:25%}.col-pull-4\@sm{right:33.33333%}.col-pull-5\@sm{right:41.66667%}.col-pull-6\@sm{right:50%}.col-pull-7\@sm{right:58.33333%}.col-pull-8\@sm{right:66.66667%}.col-pull-9\@sm{right:75%}.col-pull-10\@sm{right:83.33333%}.col-pull-11\@sm{right:91.66667%}.col-pull-12\@sm{right:100%}.col-push-0\@sm{left:auto}.col-push-1\@sm{left:8.33333%}.col-push-2\@sm{left:16.66667%}.col-push-3\@sm{left:25%}.col-push-4\@sm{left:33.33333%}.col-push-5\@sm{left:41.66667%}.col-push-6\@sm{left:50%}.col-push-7\@sm{left:58.33333%}.col-push-8\@sm{left:66.66667%}.col-push-9\@sm{left:75%}.col-push-10\@sm{left:83.33333%}.col-push-11\@sm{left:91.66667%}.col-push-12\@sm{left:100%}.col-offset-0\@sm{margin-left:0}.col-offset-1\@sm{margin-left:8.33333%}.col-offset-2\@sm{margin-left:16.66667%}.col-offset-3\@sm{margin-left:25%}.col-offset-4\@sm{margin-left:33.33333%}.col-offset-5\@sm{margin-left:41.66667%}.col-offset-6\@sm{margin-left:50%}.col-offset-7\@sm{margin-left:58.33333%}.col-offset-8\@sm{margin-left:66.66667%}.col-offset-9\@sm{margin-left:75%}.col-offset-10\@sm{margin-left:83.33333%}.col-offset-11\@sm{margin-left:91.66667%}.col-offset-12\@sm{margin-left:100%}.container{padding-left:7%;padding-right:7%}.row{max-width:1200px}}@media screen and (min-width:1024px){.col-1\@md,.col-2\@md,.col-3\@md,.col-4\@md,.col-5\@md,.col-6\@md,.col-7\@md,.col-8\@md,.col-9\@md,.col-10\@md,.col-11\@md,.col-12\@md{float:left}.aspect--16x9\@md{padding-bottom:56.25%}.aspect--9x16\@md{padding-bottom:177.77778%}.aspect--4x3\@md{padding-bottom:75%}.aspect--3x4\@md{padding-bottom:133.33333%}.aspect--3x2\@md{padding-bottom:66.66667%}.aspect--3x1\@md{padding-bottom:33.33333%}.aspect--2x3\@md{padding-bottom:150%}.aspect--2x1\@md{padding-bottom:50%}.aspect--1x2\@md{padding-bottom:200%}.aspect--1x1\@md{padding-bottom:100%}.aspect--none\@md{height:auto;overflow:visible;padding-bottom:0}.aspect--none\@md>.aspect__inner{position:static}.col-1\@md{width:8.33333%}.col-2\@md{width:16.66667%}.col-3\@md{width:25%}.col-4\@md{width:33.33333%}.col-5\@md{width:41.66667%}.col-6\@md{width:50%}.col-7\@md{width:58.33333%}.col-8\@md{width:66.66667%}.col-9\@md{width:75%}.col-10\@md{width:83.33333%}.col-11\@md{width:91.66667%}.col-12\@md{width:100%}.col-pull-0\@md{right:auto}.col-pull-1\@md{right:8.33333%}.col-pull-2\@md{right:16.66667%}.col-pull-3\@md{right:25%}.col-pull-4\@md{right:33.33333%}.col-pull-5\@md{right:41.66667%}.col-pull-6\@md{right:50%}.col-pull-7\@md{right:58.33333%}.col-pull-8\@md{right:66.66667%}.col-pull-9\@md{right:75%}.col-pull-10\@md{right:83.33333%}.col-pull-11\@md{right:91.66667%}.col-pull-12\@md{right:100%}.col-push-0\@md{left:auto}.col-push-1\@md{left:8.33333%}.col-push-2\@md{left:16.66667%}.col-push-3\@md{left:25%}.col-push-4\@md{left:33.33333%}.col-push-5\@md{left:41.66667%}.col-push-6\@md{left:50%}.col-push-7\@md{left:58.33333%}.col-push-8\@md{left:66.66667%}.col-push-9\@md{left:75%}.col-push-10\@md{left:83.33333%}.col-push-11\@md{left:91.66667%}.col-push-12\@md{left:100%}.col-offset-0\@md{margin-left:0}.col-offset-1\@md{margin-left:8.33333%}.col-offset-2\@md{margin-left:16.66667%}.col-offset-3\@md{margin-left:25%}.col-offset-4\@md{margin-left:33.33333%}.col-offset-5\@md{margin-left:41.66667%}.col-offset-6\@md{margin-left:50%}.col-offset-7\@md{margin-left:58.33333%}.col-offset-8\@md{margin-left:66.66667%}.col-offset-9\@md{margin-left:75%}.col-offset-10\@md{margin-left:83.33333%}.col-offset-11\@md{margin-left:91.66667%}.col-offset-12\@md{margin-left:100%}}.code-block{margin:.5em calc(-3.5vw - 8px);overflow:visible;position:relative}.code-block pre{margin:0;min-height:56px;padding:1em calc(3.5vw + 8px);position:relative;z-index:1}@media screen and (min-width:768px){.code-block{margin-left:calc(-7vw - 8px);margin-right:calc(-7vw - 8px)}.code-block pre{padding-left:calc(7vw + 8px);padding-right:calc(7vw + 8px);position:relative;z-index:1}}@media (min-width:1395px){.code-block{margin-left:calc(-50vw + 592px);margin-right:calc(-50vw + 592px)}.code-block pre{padding-left:calc(50vw - 592px);padding-right:calc(50vw - 592px)}}.textfield{-webkit-appearance:none;border:2px solid #95a5a6;border-radius:4px;box-sizing:border-box;color:#34495e;font-size:1rem;padding:.5em;transition:.15s;width:100%}.textfield::-webkit-input-placeholder{color:#95a5a6;transition:.15s}.textfield:-ms-input-placeholder{color:#95a5a6;transition:.15s}.textfield::placeholder{color:#95a5a6;transition:.15s}.textfield:hover{border-color:#5d6d77;color:#5d6d77;outline-width:0}.textfield:hover::-webkit-input-placeholder{color:#5d6d77}.textfield:hover:-ms-input-placeholder{color:#5d6d77}.textfield:hover::placeholder{color:#5d6d77}.textfield:focus{border-color:#34495e;outline-width:0}.textfield:focus::-webkit-input-placeholder{color:#34495e}.textfield:focus:-ms-input-placeholder{color:#34495e}.textfield:focus::placeholder{color:#34495e}.textfield--large{font-size:1.125em}.text-center{text-align:center}.ib{display:inline-block}@media screen and (max-width:767px){.hidden\@xs{display:none}}@media screen and (min-width:768px){.visible\@xs{display:none}}.hidden{display:none!important;visibility:hidden}.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.clearfix,.clearfix:after{clear:both;content:" ";display:table}.pull-left{float:left}.pull-right{float:right}.full-width{width:100%}.full-height{height:100%}.hide-text{background-color:transparent;border:0;color:transparent;font:0/0 a;text-shadow:none}.table-center-wrap{display:table;table-layout:fixed}.table-center{display:table-cell;vertical-align:middle}.btn-group:after,.btn-group:before{content:" ";display:table}.btn-group:after{clear:both}.btn-group .btn{border-radius:0;float:left}.btn-group .btn:first-child{border-radius:3px 0 0 3px}.btn-group .btn:not(:first-child){margin-left:-1px}.btn-group .btn:last-child{border-radius:0 3px 3px 0}.btn-group label.btn input[type=radio]{clip:rect(0,0,0,0);pointer-events:none;position:absolute}.btn{-webkit-appearance:none;background-color:rgba(52,73,94,0);border:1px solid #34495e;border-radius:3px;color:#34495e;cursor:pointer;display:inline-block;font-size:1rem;padding:.75em .8em;text-align:center;transition:.2s ease-out}@media (-moz-touch-enabled:0),(pointer:fine){.btn:hover{background-color:#34495e;color:#fff;text-decoration:none}}.btn:focus{box-shadow:0 0 0 2px rgba(52,73,94,.4);outline-width:0}.btn.active,.btn:active{background-color:#34495e;box-shadow:inset 0 1px 2px rgba(0,0,0,.3);color:#fff}.btn:focus.active{box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 2px rgba(52,73,94,.4)}.btn--warning{background-color:rgba(230,126,34,0);border-color:#e67e22;color:#e67e22}@media (-moz-touch-enabled:0),(pointer:fine){.btn--warning:hover{background-color:#e67e22}}.btn--warning:focus{box-shadow:0 0 0 2px rgba(230,126,34,.4)}.btn--warning.active,.btn--warning:active{background-color:#e67e22}.btn--warning:focus.active{box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 2px rgba(230,126,34,.4)}.btn--primary{background-color:rgba(52,152,219,0);border-color:#3498db;color:#3498db}@media (-moz-touch-enabled:0),(pointer:fine){.btn--primary:hover{background-color:#3498db}}.btn--primary:focus{box-shadow:0 0 0 2px rgba(52,152,219,.4)}.btn--primary.active,.btn--primary:active{background-color:#3498db}.btn--primary:focus.active{box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 2px rgba(52,152,219,.4)}.btn--danger{background-color:rgba(231,76,60,0);border-color:#e74c3c;color:#e74c3c}@media (-moz-touch-enabled:0),(pointer:fine){.btn--danger:hover{background-color:#e74c3c}}.btn--danger:focus{box-shadow:0 0 0 2px rgba(231,76,60,.4)}.btn--danger.active,.btn--danger:active{background-color:#e74c3c}.btn--danger:focus.active{box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 2px rgba(231,76,60,.4)}.btn--go{background-color:rgba(46,204,113,0);border-color:#2ecc71;color:#2ecc71}@media (-moz-touch-enabled:0),(pointer:fine){.btn--go:hover{background-color:#2ecc71}}.btn--go:focus{box-shadow:0 0 0 2px rgba(46,204,113,.4)}.btn--go.active,.btn--go:active{background-color:#2ecc71}.btn--go:focus.active{box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 2px rgba(46,204,113,.4)}@media screen and (max-width:767px){.btn{font-size:.875rem}}.filter-group .btn{position:relative}.filter-group .btn.active:after,.filter-group .btn.active:before{content:"";height:20px;left:50%;margin-left:-10px;margin-top:-10px;opacity:0;position:absolute;top:50%;transition:.2s;width:20px}.filter-group .btn:before{background-color:#2c3e50;border-radius:50%}.filter-group .btn:after{background-image:url(../img/check.svg);background-position:50%;background-repeat:no-repeat;background-size:60%}.filter-group .btn.active:after,.filter-group .btn.active:before{opacity:1}.demo-list .figure-wrap{position:relative;z-index:1}.demo-list .figure-wrap,.demo-list .figure-wrap img{-webkit-transform:translateZ(0);transform:translateZ(0);transition:.1s ease}.demo-list:hover .figure-wrap{-webkit-transform:scaleX(1);transform:scaleX(1)}.demo-list:hover .figure-wrap img{-webkit-filter:grayscale(1);filter:grayscale(1)}.demo-list:hover .figure-wrap:hover{-webkit-transform:scale3d(1.05,1.05,1);transform:scale3d(1.05,1.05,1);z-index:2}.demo-list:hover .figure-wrap:hover img{-webkit-filter:none;filter:none}.demo-list .figure-wrap:nth-child(4n+1){margin-left:0}.demo-list .figure-wrap>a{display:block}.demo-list .figure-wrap figcaption{height:2em;margin-bottom:1em;margin-top:.5em}.demo-link-container:before{color:#2ecc71;content:"➜";margin-right:5px}span.demo-link-container:before{margin-left:5px}@media screen and (max-width:47.9375em){.demo-list+.demo-list{margin-top:1em}.figure-wrap:nth-child(odd){margin-left:0}.figure-wrap:nth-child(n+3){margin-top:1em}}.site-nav{background:#ecf0f1;border-bottom:1px solid #e1e5e6;margin-bottom:28px;padding:10px 0}.site-nav__content{-ms-flex-pack:justify;-webkit-box-pack:justify;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:space-between}.site-nav__logo{font-size:20px}.site-nav__logo,.site-nav__logo:visited{color:#34495e}.site-nav__logo:hover,.site-nav__logo:visited:hover{text-decoration:none}.site-nav__links,.site-nav__logo{-ms-flex-align:center;-webkit-box-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.site-nav__logo svg{display:block;height:24px;margin-right:4px;width:24px}.site-nav__logo rect{transition:.18s cubic-bezier(.4,0,.2,1)}.site-nav__link{position:relative;z-index:3}.site-nav__link:not(:last-of-type){margin-right:8px}.site-nav__dropdown{-webkit-transform:translateY(10px);background-color:#fff;box-shadow:0 7px 10px -1px rgba(0,0,0,.12);max-height:100vh;opacity:0;position:absolute;right:0;top:40px;transform:translateY(10px);transition:.3s cubic-bezier(.165,.84,.44,1);visibility:hidden;z-index:2}.site-nav__dropdown:before{border-bottom:8px solid #fff;border-left:9px solid transparent;border-right:9px solid transparent;content:"";display:block;position:absolute;right:32px;top:-8px}.site-nav__dropdown li+li{margin-top:8px}.site-nav__dropdown a{color:#5d6d77;display:block}.site-nav__dropdown a:hover{background-color:#ecf0f1;color:#5d6d77;text-decoration:none}.site-nav__dropdown figure{-ms-flex-align:center;-webkit-box-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.site-nav__dropdown picture{-ms-flex-negative:0;flex-shrink:0;height:75px;width:100px}.site-nav__dropdown figcaption{padding-left:8px;padding-right:8px}.site-nav__dropdown--simple-links a{padding:8px 16px}.site-nav__dropdown--simple-links li+li{margin-top:0}.site-nav__link-toggle{padding:6px 8px}.site-nav__link-toggle:after{border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid;content:"";display:inline-block;margin-left:4px;margin-top:-1px;transition:-webkit-transform .18s cubic-bezier(.4,0,.2,1);transition:transform .18s cubic-bezier(.4,0,.2,1);transition:transform .18s cubic-bezier(.4,0,.2,1),-webkit-transform .18s cubic-bezier(.4,0,.2,1);vertical-align:middle}.site-nav__link--dropdown-active .site-nav__link-toggle:after{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.site-nav__link--dropdown-active .site-nav__dropdown{-webkit-transform:translateY(0);opacity:1;transform:translateY(0);visibility:visible}@media (-moz-touch-enabled:0),(pointer:fine){.site-nav__logo:hover rect:first-of-type{-webkit-transform:translate(20px,10px);transform:translate(20px,10px);transition-delay:0ms}.site-nav__logo:hover rect:nth-of-type(2){-webkit-transform:translateY(20px);transform:translateY(20px);transition-delay:10ms}.site-nav__logo:hover rect:nth-of-type(3){-webkit-transform:translate(-20px,6px);transform:translate(-20px,6px);transition-delay:20ms}.site-nav__logo:hover rect:nth-of-type(4){-webkit-transform:translate(10px,-10px);transform:translate(10px,-10px);transition-delay:30ms}.site-nav__logo:hover rect:nth-of-type(5){-webkit-transform:translate(-10px,10px);transform:translate(-10px,10px);transition-delay:40ms}.site-nav__logo:hover rect:nth-of-type(6){-webkit-transform:translate(-20px,-14px);transform:translate(-20px,-14px);transition-delay:50ms}.site-nav__logo:hover rect:nth-of-type(7){-webkit-transform:translateY(-20px);transform:translateY(-20px);transition-delay:60ms}.site-nav__link-toggle:hover{border-color:#34495e}}@media screen and (max-width:767px){body.site-nav--open{padding-top:51px}body.site-nav--open .site-nav{left:0;position:fixed;top:0;width:100%;z-index:4}.site-nav__dropdown{-webkit-overflow-scrolling:touch;left:0;overflow:auto;padding:8px calc(3.5vw + 8px);position:fixed;right:0;top:51px;width:100vw}}@media screen and (min-width:768px){.site-nav{padding:16px 0}.site-nav__logo{font-size:24px}.site-nav__logo svg{height:32px;width:32px}.site-nav__link:not(:last-child){margin-right:16px}.site-nav__link--dropdown:not(:last-child){margin-right:12px}.site-nav__dropdown{box-shadow:0 0 10px rgba(0,0,0,.12);max-height:none!important;padding:16px;right:-100px}.site-nav__dropdown:before{right:132px}.site-nav__dropdown ul{-webkit-column-count:2;-webkit-column-gap:16px;column-count:2;column-gap:16px}.site-nav__dropdown li{-webkit-column-break-inside:avoid;break-inside:avoid}.site-nav__dropdown figcaption{white-space:nowrap}@supports ((-webkit-filter:drop-shadow(0 0 5px rgba(0,0,0,0.12))) or (filter:drop-shadow(0 0 5px rgba(0,0,0,0.12)))){.site-nav__dropdown{-webkit-filter:drop-shadow(0 0 5px rgba(0,0,0,.12));box-shadow:none;filter:drop-shadow(0 0 5px rgba(0,0,0,.12))}}.site-nav__link-img{height:24px;width:24px}.site-nav__dropdown--simple-links{padding:0;right:0}.site-nav__dropdown--simple-links:before{right:24px}.site-nav__dropdown--simple-links a{width:200px}}@media screen and (min-width:1024px){.site-nav__dropdown{right:0}.site-nav__dropdown:before{right:32px}.site-nav__dropdown--simple-links:before{right:24px}}.site-footer{background-color:#34495e;margin-top:2em;padding:1em 0}.site-footer p{color:#ecf0f1}.site-footer a{color:#fff;text-decoration:underline}.site-footer a:hover{color:#3498db}.has-code-block .code-block pre{margin-bottom:0}.has-code-block+.site-footer{margin-top:0}@media screen and (min-width:768px){.site-footer__credit{text-align:right}}.filter-label{color:#95a5a6;display:block;margin-top:0}.filter-label,.filters-group{margin-bottom:4px}@media screen and (min-width:768px){.filters-group-wrap{-ms-flex-pack:justify;-webkit-box-pack:justify;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:space-between}}.compound-filter-options{margin-bottom:40px;margin-top:20px}.filter-group--compound button{background-color:currentColor;height:40px;padding:0;width:40px}.filter-group--compound label{cursor:pointer}.filter-group--compound .ib+.ib{margin-left:8px}.shape-shuffle-container{overflow:hidden;position:relative}.shape{margin-left:0;margin-top:10px;position:relative}.shape .shape__space{background-color:#000;border:0 solid transparent;height:100%;width:100%}.shape--blue .shape__space{background-color:#3498db;border-bottom-color:#3498db}.shape--red .shape__space{background-color:#e74c3c;border-bottom-color:#e74c3c}.shape--orange .shape__space{background-color:#f39c12;border-bottom-color:#f39c12}.shape--green .shape__space{background-color:#2ecc71;border-bottom-color:#2ecc71}.shape--circle .shape__space{border-radius:50%}.shape--diamond .shape__space{-webkit-transform:rotate(45deg) scale(.70711);transform:rotate(45deg) scale(.70711)}.shape--triangle .shape__space{background-color:transparent;border-width:0 66px 114px;height:0;margin:auto;padding-top:9px;width:0}@media (min-width:425px){.shape--triangle .shape__space{border-width:0 90px 156px;height:0;padding-top:12px;width:0}}@media (min-width:600px){.shape--triangle .shape__space{border-width:0 131px 227px;height:0;padding-top:17.5px;width:0}}@media (min-width:768px){.shape--triangle .shape__space{border-width:0 74px 128px;height:0;padding-top:10px;width:0}}@media (min-width:1024px){.shape--triangle .shape__space{border-width:0 102px 177px;height:0;padding-top:13.5px;width:0}}@media (min-width:1200px){.shape--triangle .shape__space{border-width:0 135px 234px;height:0;padding-top:18px;width:0}}@media (min-width:1392px){.shape--triangle .shape__space{border-width:0 142px 246px;height:0;padding-top:19px;width:0}}.search-section{margin-bottom:1em;margin-top:1em}.question{float:none;margin:2em 0;overflow:hidden;transition:.2s ease-out}.question--collapsed{border-width:0;height:0!important;margin:0}.question--collapsed+.question{margin-top:0}.question--unanswered{border-top:2px solid #2ecc71;padding-top:1.25em}.question__title{margin-top:0}.question__answer{margin-bottom:0;padding-bottom:1px}
\ No newline at end of file
+@charset "UTF-8";*,:after,:before{box-sizing:border-box}main{overflow:hidden}pre.max-height{max-height:30em}img,picture{display:block}img{height:auto;max-width:100%}figure,ul ul{margin:0}ul ul{list-style-type:circle;padding-left:1.25em}li{line-height:1.4}li+li{margin-top:4px}nav>a{display:block;margin:5px 0}#demos{margin-top:1em}body{color:#5d6d77;font-family:Open Sans,Helvetica Neue,Helvetica,sans-serif}a{text-decoration:none}a,a:visited{color:#3498db}a:hover{text-decoration:underline}a:active{color:#2ecc71}h1,h2,h3,h4,h5,h6{color:#34495e;font-weight:700}h1{font-size:10vw;font-weight:400;line-height:1}h1,h2{margin:3vw 0}h2{font-size:7vw;position:relative}h3{font-size:6vw;margin:2vw 0}h4{font-size:1.25em}p{line-height:1.4;margin:1em 0}.intro-text{font-size:1.125em;margin:.7em 0}@media screen and (min-width:768px){h1{font-size:3.5em;margin:.5em 0 .25em}h2{font-size:2.5em;margin:.45em 0}h3{font-size:1.5em;margin:.8em 0 .5em}h1>a,h2>a,h3>a{display:none}h1:hover>a,h2:hover>a,h3:hover>a{background:url(../img/link.svg) no-repeat;display:inline-block;height:50px;overflow:hidden;position:absolute;text-indent:-999em;top:0;width:50px}.intro-text{font-size:1.25em}}.unstyled{list-style-type:none;margin:0;padding:0}.type--underline{text-decoration:underline}code:not([class*=language]){background-color:rgba(27,31,35,.05);border-radius:3px;color:#2c3e50;font-family:Menlo,Consolas,Liberation Mono,Courier,monospace;font-size:85%;margin:0;padding:.2em 0}code:not([class*=language]):after,code:not([class*=language]):before{content:"\00a0";letter-spacing:-.2em}.container{padding-left:3.5%;padding-right:3.5%}.container:after,.container:before{content:" ";display:table}.container:after{clear:both}.row{margin-left:auto;margin-right:auto}.row:after,.row:before{content:" ";display:table}.row:after{clear:both}.row .row{margin-left:-8px;margin-right:-8px}.row--centered{-ms-flex-pack:center;-ms-flex-wrap:wrap;-webkit-box-pack:center;display:-webkit-box;display:-ms-flexbox;display:flex;flex-wrap:wrap;justify-content:center}.aspect{height:0;overflow:hidden;padding-bottom:100%;position:relative;width:100%}.aspect--16x9{padding-bottom:56.25%}.aspect--9x16{padding-bottom:177.77778%}.aspect--4x3{padding-bottom:75%}.aspect--3x4{padding-bottom:133.33333%}.aspect--3x2{padding-bottom:66.66667%}.aspect--3x1{padding-bottom:33.33333%}.aspect--2x3{padding-bottom:150%}.aspect--2x1{padding-bottom:50%}.aspect--1x2{padding-bottom:200%}.aspect--1x1{padding-bottom:100%}.aspect--none{height:auto;overflow:visible;padding-bottom:0}.aspect--none>.aspect__inner{position:static}.aspect>div,.aspect__inner{bottom:0;left:0;position:absolute;right:0;top:0}.col-1\@lg,.col-1\@md,.col-1\@sm,.col-1\@xs,.col-2\@lg,.col-2\@md,.col-2\@sm,.col-2\@xs,.col-3\@lg,.col-3\@md,.col-3\@sm,.col-3\@xs,.col-4\@lg,.col-4\@md,.col-4\@sm,.col-4\@xs,.col-5\@lg,.col-5\@md,.col-5\@sm,.col-5\@xs,.col-6\@lg,.col-6\@md,.col-6\@sm,.col-6\@xs,.col-7\@lg,.col-7\@md,.col-7\@sm,.col-7\@xs,.col-8\@lg,.col-8\@md,.col-8\@sm,.col-8\@xs,.col-9\@lg,.col-9\@md,.col-9\@sm,.col-9\@xs,.col-10\@lg,.col-10\@md,.col-10\@sm,.col-10\@xs,.col-11\@lg,.col-11\@md,.col-11\@sm,.col-11\@xs,.col-12\@lg,.col-12\@md,.col-12\@sm,.col-12\@xs{box-sizing:border-box;min-height:1px;padding-left:8px;padding-right:8px;position:relative}.col-1\@xs,.col-2\@xs,.col-3\@xs,.col-4\@xs,.col-5\@xs,.col-6\@xs,.col-7\@xs,.col-8\@xs,.col-9\@xs,.col-10\@xs,.col-11\@xs,.col-12\@xs{float:left}.aspect--16x9\@xs{padding-bottom:56.25%}.aspect--9x16\@xs{padding-bottom:177.77778%}.aspect--4x3\@xs{padding-bottom:75%}.aspect--3x4\@xs{padding-bottom:133.33333%}.aspect--3x2\@xs{padding-bottom:66.66667%}.aspect--3x1\@xs{padding-bottom:33.33333%}.aspect--2x3\@xs{padding-bottom:150%}.aspect--2x1\@xs{padding-bottom:50%}.aspect--1x2\@xs{padding-bottom:200%}.aspect--1x1\@xs{padding-bottom:100%}.aspect--none\@xs{height:auto;overflow:visible;padding-bottom:0}.aspect--none\@xs>.aspect__inner{position:static}.col-1\@xs{width:16.66667%}.col-2\@xs{width:33.33333%}.col-3\@xs{width:50%}.col-4\@xs{width:66.66667%}.col-5\@xs{width:83.33333%}.col-6\@xs{width:100%}.col-pull-0\@xs{right:auto}.col-pull-1\@xs{right:16.66667%}.col-pull-2\@xs{right:33.33333%}.col-pull-3\@xs{right:50%}.col-pull-4\@xs{right:66.66667%}.col-pull-5\@xs{right:83.33333%}.col-pull-6\@xs{right:100%}.col-push-0\@xs{left:auto}.col-push-1\@xs{left:16.66667%}.col-push-2\@xs{left:33.33333%}.col-push-3\@xs{left:50%}.col-push-4\@xs{left:66.66667%}.col-push-5\@xs{left:83.33333%}.col-push-6\@xs{left:100%}.col-offset-0\@xs{margin-left:0}.col-offset-1\@xs{margin-left:16.66667%}.col-offset-2\@xs{margin-left:33.33333%}.col-offset-3\@xs{margin-left:50%}.col-offset-4\@xs{margin-left:66.66667%}.col-offset-5\@xs{margin-left:83.33333%}.col-offset-6\@xs{margin-left:100%}@media screen and (min-width:768px){.col-1\@sm,.col-2\@sm,.col-3\@sm,.col-4\@sm,.col-5\@sm,.col-6\@sm,.col-7\@sm,.col-8\@sm,.col-9\@sm,.col-10\@sm,.col-11\@sm,.col-12\@sm{float:left}.aspect--16x9\@sm{padding-bottom:56.25%}.aspect--9x16\@sm{padding-bottom:177.77778%}.aspect--4x3\@sm{padding-bottom:75%}.aspect--3x4\@sm{padding-bottom:133.33333%}.aspect--3x2\@sm{padding-bottom:66.66667%}.aspect--3x1\@sm{padding-bottom:33.33333%}.aspect--2x3\@sm{padding-bottom:150%}.aspect--2x1\@sm{padding-bottom:50%}.aspect--1x2\@sm{padding-bottom:200%}.aspect--1x1\@sm{padding-bottom:100%}.aspect--none\@sm{height:auto;overflow:visible;padding-bottom:0}.aspect--none\@sm>.aspect__inner{position:static}.col-1\@sm{width:8.33333%}.col-2\@sm{width:16.66667%}.col-3\@sm{width:25%}.col-4\@sm{width:33.33333%}.col-5\@sm{width:41.66667%}.col-6\@sm{width:50%}.col-7\@sm{width:58.33333%}.col-8\@sm{width:66.66667%}.col-9\@sm{width:75%}.col-10\@sm{width:83.33333%}.col-11\@sm{width:91.66667%}.col-12\@sm{width:100%}.col-pull-0\@sm{right:auto}.col-pull-1\@sm{right:8.33333%}.col-pull-2\@sm{right:16.66667%}.col-pull-3\@sm{right:25%}.col-pull-4\@sm{right:33.33333%}.col-pull-5\@sm{right:41.66667%}.col-pull-6\@sm{right:50%}.col-pull-7\@sm{right:58.33333%}.col-pull-8\@sm{right:66.66667%}.col-pull-9\@sm{right:75%}.col-pull-10\@sm{right:83.33333%}.col-pull-11\@sm{right:91.66667%}.col-pull-12\@sm{right:100%}.col-push-0\@sm{left:auto}.col-push-1\@sm{left:8.33333%}.col-push-2\@sm{left:16.66667%}.col-push-3\@sm{left:25%}.col-push-4\@sm{left:33.33333%}.col-push-5\@sm{left:41.66667%}.col-push-6\@sm{left:50%}.col-push-7\@sm{left:58.33333%}.col-push-8\@sm{left:66.66667%}.col-push-9\@sm{left:75%}.col-push-10\@sm{left:83.33333%}.col-push-11\@sm{left:91.66667%}.col-push-12\@sm{left:100%}.col-offset-0\@sm{margin-left:0}.col-offset-1\@sm{margin-left:8.33333%}.col-offset-2\@sm{margin-left:16.66667%}.col-offset-3\@sm{margin-left:25%}.col-offset-4\@sm{margin-left:33.33333%}.col-offset-5\@sm{margin-left:41.66667%}.col-offset-6\@sm{margin-left:50%}.col-offset-7\@sm{margin-left:58.33333%}.col-offset-8\@sm{margin-left:66.66667%}.col-offset-9\@sm{margin-left:75%}.col-offset-10\@sm{margin-left:83.33333%}.col-offset-11\@sm{margin-left:91.66667%}.col-offset-12\@sm{margin-left:100%}.container{padding-left:7%;padding-right:7%}.row{max-width:1200px}}@media screen and (min-width:1024px){.col-1\@md,.col-2\@md,.col-3\@md,.col-4\@md,.col-5\@md,.col-6\@md,.col-7\@md,.col-8\@md,.col-9\@md,.col-10\@md,.col-11\@md,.col-12\@md{float:left}.aspect--16x9\@md{padding-bottom:56.25%}.aspect--9x16\@md{padding-bottom:177.77778%}.aspect--4x3\@md{padding-bottom:75%}.aspect--3x4\@md{padding-bottom:133.33333%}.aspect--3x2\@md{padding-bottom:66.66667%}.aspect--3x1\@md{padding-bottom:33.33333%}.aspect--2x3\@md{padding-bottom:150%}.aspect--2x1\@md{padding-bottom:50%}.aspect--1x2\@md{padding-bottom:200%}.aspect--1x1\@md{padding-bottom:100%}.aspect--none\@md{height:auto;overflow:visible;padding-bottom:0}.aspect--none\@md>.aspect__inner{position:static}.col-1\@md{width:8.33333%}.col-2\@md{width:16.66667%}.col-3\@md{width:25%}.col-4\@md{width:33.33333%}.col-5\@md{width:41.66667%}.col-6\@md{width:50%}.col-7\@md{width:58.33333%}.col-8\@md{width:66.66667%}.col-9\@md{width:75%}.col-10\@md{width:83.33333%}.col-11\@md{width:91.66667%}.col-12\@md{width:100%}.col-pull-0\@md{right:auto}.col-pull-1\@md{right:8.33333%}.col-pull-2\@md{right:16.66667%}.col-pull-3\@md{right:25%}.col-pull-4\@md{right:33.33333%}.col-pull-5\@md{right:41.66667%}.col-pull-6\@md{right:50%}.col-pull-7\@md{right:58.33333%}.col-pull-8\@md{right:66.66667%}.col-pull-9\@md{right:75%}.col-pull-10\@md{right:83.33333%}.col-pull-11\@md{right:91.66667%}.col-pull-12\@md{right:100%}.col-push-0\@md{left:auto}.col-push-1\@md{left:8.33333%}.col-push-2\@md{left:16.66667%}.col-push-3\@md{left:25%}.col-push-4\@md{left:33.33333%}.col-push-5\@md{left:41.66667%}.col-push-6\@md{left:50%}.col-push-7\@md{left:58.33333%}.col-push-8\@md{left:66.66667%}.col-push-9\@md{left:75%}.col-push-10\@md{left:83.33333%}.col-push-11\@md{left:91.66667%}.col-push-12\@md{left:100%}.col-offset-0\@md{margin-left:0}.col-offset-1\@md{margin-left:8.33333%}.col-offset-2\@md{margin-left:16.66667%}.col-offset-3\@md{margin-left:25%}.col-offset-4\@md{margin-left:33.33333%}.col-offset-5\@md{margin-left:41.66667%}.col-offset-6\@md{margin-left:50%}.col-offset-7\@md{margin-left:58.33333%}.col-offset-8\@md{margin-left:66.66667%}.col-offset-9\@md{margin-left:75%}.col-offset-10\@md{margin-left:83.33333%}.col-offset-11\@md{margin-left:91.66667%}.col-offset-12\@md{margin-left:100%}}.code-block{margin:.5em calc(-3.5vw - 8px);overflow:visible;position:relative}.code-block pre{margin:0;min-height:56px;padding:1em calc(3.5vw + 8px);position:relative;z-index:1}@media screen and (min-width:768px){.code-block{margin-left:calc(-7vw - 8px);margin-right:calc(-7vw - 8px)}.code-block pre{padding-left:calc(7vw + 8px);padding-right:calc(7vw + 8px);position:relative;z-index:1}}@media (min-width:1395px){.code-block{margin-left:calc(-50vw + 592px);margin-right:calc(-50vw + 592px)}.code-block pre{padding-left:calc(50vw - 592px);padding-right:calc(50vw - 592px)}}.textfield{-webkit-appearance:none;border:2px solid #95a5a6;border-radius:4px;box-sizing:border-box;color:#34495e;font-size:1rem;padding:.5em;transition:.15s;width:100%}.textfield::-webkit-input-placeholder{color:#95a5a6;transition:.15s}.textfield:-ms-input-placeholder{color:#95a5a6;transition:.15s}.textfield::placeholder{color:#95a5a6;transition:.15s}.textfield:hover{border-color:#5d6d77;color:#5d6d77;outline-width:0}.textfield:hover::-webkit-input-placeholder{color:#5d6d77}.textfield:hover:-ms-input-placeholder{color:#5d6d77}.textfield:hover::placeholder{color:#5d6d77}.textfield:focus{border-color:#34495e;outline-width:0}.textfield:focus::-webkit-input-placeholder{color:#34495e}.textfield:focus:-ms-input-placeholder{color:#34495e}.textfield:focus::placeholder{color:#34495e}.textfield--large{font-size:1.125em}.text-center{text-align:center}.ib{display:inline-block}@media screen and (max-width:767px){.hidden\@xs{display:none}}@media screen and (min-width:768px){.visible\@xs{display:none}}.hidden{display:none!important;visibility:hidden}.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.clearfix,.clearfix:after{clear:both;content:" ";display:table}.pull-left{float:left}.pull-right{float:right}.full-width{width:100%}.full-height{height:100%}.hide-text{background-color:transparent;border:0;color:transparent;font:0/0 a;text-shadow:none}.table-center-wrap{display:table;table-layout:fixed}.table-center{display:table-cell;vertical-align:middle}.btn-group:after,.btn-group:before{content:" ";display:table}.btn-group:after{clear:both}.btn-group .btn{border-radius:0;float:left}.btn-group .btn:first-child{border-radius:3px 0 0 3px}.btn-group .btn:not(:first-child){margin-left:-1px}.btn-group .btn:last-child{border-radius:0 3px 3px 0}.btn-group label.btn input[type=radio]{clip:rect(0,0,0,0);pointer-events:none;position:absolute}.btn{-webkit-appearance:none;background-color:rgba(52,73,94,0);border:1px solid #34495e;border-radius:3px;color:#34495e;cursor:pointer;display:inline-block;font-size:1rem;padding:.75em .8em;text-align:center;transition:.2s ease-out}@media (-moz-touch-enabled:0),(pointer:fine){.btn:hover{background-color:#34495e;color:#fff;text-decoration:none}}.btn:focus{box-shadow:0 0 0 2px rgba(52,73,94,.4);outline-width:0}.btn.active,.btn:active{background-color:#34495e;box-shadow:inset 0 1px 2px rgba(0,0,0,.3);color:#fff}.btn:focus.active{box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 2px rgba(52,73,94,.4)}.btn:disabled{background-color:rgba(52,73,94,0);color:#34495e;cursor:not-allowed;opacity:.7}.btn--warning{background-color:rgba(230,126,34,0);border-color:#e67e22;color:#e67e22}@media (-moz-touch-enabled:0),(pointer:fine){.btn--warning:hover{background-color:#e67e22}}.btn--warning:focus{box-shadow:0 0 0 2px rgba(230,126,34,.4)}.btn--warning.active,.btn--warning:active{background-color:#e67e22}.btn--warning:focus.active{box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 2px rgba(230,126,34,.4)}.btn--warning:disabled{background-color:rgba(230,126,34,0);color:#e67e22}.btn--primary{background-color:rgba(52,152,219,0);border-color:#3498db;color:#3498db}@media (-moz-touch-enabled:0),(pointer:fine){.btn--primary:hover{background-color:#3498db}}.btn--primary:focus{box-shadow:0 0 0 2px rgba(52,152,219,.4)}.btn--primary.active,.btn--primary:active{background-color:#3498db}.btn--primary:focus.active{box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 2px rgba(52,152,219,.4)}.btn--primary:disabled{background-color:rgba(52,152,219,0);color:#3498db}.btn--danger{background-color:rgba(231,76,60,0);border-color:#e74c3c;color:#e74c3c}@media (-moz-touch-enabled:0),(pointer:fine){.btn--danger:hover{background-color:#e74c3c}}.btn--danger:focus{box-shadow:0 0 0 2px rgba(231,76,60,.4)}.btn--danger.active,.btn--danger:active{background-color:#e74c3c}.btn--danger:focus.active{box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 2px rgba(231,76,60,.4)}.btn--danger:disabled{background-color:rgba(231,76,60,0);color:#e74c3c}.btn--go{background-color:rgba(46,204,113,0);border-color:#2ecc71;color:#2ecc71}@media (-moz-touch-enabled:0),(pointer:fine){.btn--go:hover{background-color:#2ecc71}}.btn--go:focus{box-shadow:0 0 0 2px rgba(46,204,113,.4)}.btn--go.active,.btn--go:active{background-color:#2ecc71}.btn--go:focus.active{box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 2px rgba(46,204,113,.4)}.btn--go:disabled{background-color:rgba(46,204,113,0);color:#2ecc71}@media screen and (max-width:767px){.btn{font-size:.875rem}}.filter-group .btn{position:relative}.filter-group .btn.active:after,.filter-group .btn.active:before{content:"";height:20px;left:50%;margin-left:-10px;margin-top:-10px;opacity:0;position:absolute;top:50%;transition:.2s;width:20px}.filter-group .btn:before{background-color:#2c3e50;border-radius:50%}.filter-group .btn:after{background-image:url(../img/check.svg);background-position:50%;background-repeat:no-repeat;background-size:60%}.filter-group .btn.active:after,.filter-group .btn.active:before{opacity:1}.demo-list .figure-wrap{position:relative;z-index:1}.demo-list .figure-wrap,.demo-list .figure-wrap img{-webkit-transform:translateZ(0);transform:translateZ(0);transition:.1s ease}.demo-list:hover .figure-wrap{-webkit-transform:scaleX(1);transform:scaleX(1)}.demo-list:hover .figure-wrap img{-webkit-filter:grayscale(1);filter:grayscale(1)}.demo-list:hover .figure-wrap:hover{-webkit-transform:scale3d(1.05,1.05,1);transform:scale3d(1.05,1.05,1);z-index:2}.demo-list:hover .figure-wrap:hover img{-webkit-filter:none;filter:none}.demo-list .figure-wrap:nth-child(4n+1){margin-left:0}.demo-list .figure-wrap>a{display:block}.demo-list .figure-wrap figcaption{height:2em;margin-bottom:1em;margin-top:.5em}.demo-link-container:before{color:#2ecc71;content:"➜";margin-right:5px}span.demo-link-container:before{margin-left:5px}@media screen and (max-width:47.9375em){.demo-list+.demo-list{margin-top:1em}.figure-wrap:nth-child(odd){margin-left:0}.figure-wrap:nth-child(n+3){margin-top:1em}}.site-nav{background:#ecf0f1;border-bottom:1px solid #e1e5e6;margin-bottom:28px;padding:10px 0}.site-nav__content{-ms-flex-pack:justify;-webkit-box-pack:justify;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:space-between}.site-nav__logo{font-size:20px}.site-nav__logo,.site-nav__logo:visited{color:#34495e}.site-nav__logo:hover,.site-nav__logo:visited:hover{text-decoration:none}.site-nav__links,.site-nav__logo{-ms-flex-align:center;-webkit-box-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.site-nav__logo svg{display:block;height:24px;margin-right:4px;width:24px}.site-nav__logo rect{transition:.18s cubic-bezier(.4,0,.2,1)}.site-nav__link{position:relative;z-index:3}.site-nav__link:not(:last-of-type){margin-right:8px}.site-nav__dropdown{-webkit-transform:translateY(10px);background-color:#fff;box-shadow:0 7px 10px -1px rgba(0,0,0,.12);max-height:100vh;opacity:0;position:absolute;right:0;top:40px;transform:translateY(10px);transition:.3s cubic-bezier(.165,.84,.44,1);visibility:hidden;z-index:2}.site-nav__dropdown:before{border-bottom:8px solid #fff;border-left:9px solid transparent;border-right:9px solid transparent;content:"";display:block;position:absolute;right:32px;top:-8px}.site-nav__dropdown li+li{margin-top:8px}.site-nav__dropdown a{color:#5d6d77;display:block}.site-nav__dropdown a:hover{background-color:#ecf0f1;color:#5d6d77;text-decoration:none}.site-nav__dropdown figure{-ms-flex-align:center;-webkit-box-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.site-nav__dropdown picture{-ms-flex-negative:0;flex-shrink:0;height:75px;width:100px}.site-nav__dropdown figcaption{padding-left:8px;padding-right:8px}.site-nav__dropdown--simple-links a{padding:8px 16px}.site-nav__dropdown--simple-links li+li{margin-top:0}.site-nav__link-toggle{padding:6px 8px}.site-nav__link-toggle:after{border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid;content:"";display:inline-block;margin-left:4px;margin-top:-1px;transition:-webkit-transform .18s cubic-bezier(.4,0,.2,1);transition:transform .18s cubic-bezier(.4,0,.2,1);transition:transform .18s cubic-bezier(.4,0,.2,1),-webkit-transform .18s cubic-bezier(.4,0,.2,1);vertical-align:middle}.site-nav__link--dropdown-active .site-nav__link-toggle:after{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.site-nav__link--dropdown-active .site-nav__dropdown{-webkit-transform:translateY(0);opacity:1;transform:translateY(0);visibility:visible}@media (-moz-touch-enabled:0),(pointer:fine){.site-nav__logo:hover rect:first-of-type{-webkit-transform:translate(20px,10px);transform:translate(20px,10px);transition-delay:0ms}.site-nav__logo:hover rect:nth-of-type(2){-webkit-transform:translateY(20px);transform:translateY(20px);transition-delay:10ms}.site-nav__logo:hover rect:nth-of-type(3){-webkit-transform:translate(-20px,6px);transform:translate(-20px,6px);transition-delay:20ms}.site-nav__logo:hover rect:nth-of-type(4){-webkit-transform:translate(10px,-10px);transform:translate(10px,-10px);transition-delay:30ms}.site-nav__logo:hover rect:nth-of-type(5){-webkit-transform:translate(-10px,10px);transform:translate(-10px,10px);transition-delay:40ms}.site-nav__logo:hover rect:nth-of-type(6){-webkit-transform:translate(-20px,-14px);transform:translate(-20px,-14px);transition-delay:50ms}.site-nav__logo:hover rect:nth-of-type(7){-webkit-transform:translateY(-20px);transform:translateY(-20px);transition-delay:60ms}.site-nav__link-toggle:hover{border-color:#34495e}}@media screen and (max-width:767px){body.site-nav--open{padding-top:51px}body.site-nav--open .site-nav{left:0;position:fixed;top:0;width:100%;z-index:4}.site-nav__dropdown{-webkit-overflow-scrolling:touch;left:0;overflow:auto;padding:8px calc(3.5vw + 8px);position:fixed;right:0;top:51px;width:100vw}}@media screen and (min-width:768px){.site-nav{padding:16px 0}.site-nav__logo{font-size:24px}.site-nav__logo svg{height:32px;width:32px}.site-nav__link:not(:last-child){margin-right:16px}.site-nav__link--dropdown:not(:last-child){margin-right:12px}.site-nav__dropdown{box-shadow:0 0 10px rgba(0,0,0,.12);max-height:none!important;padding:16px;right:-100px}.site-nav__dropdown:before{right:132px}.site-nav__dropdown ul{-webkit-column-count:2;-webkit-column-gap:16px;column-count:2;column-gap:16px}.site-nav__dropdown li{-webkit-column-break-inside:avoid;break-inside:avoid}.site-nav__dropdown figcaption{white-space:nowrap}@supports ((-webkit-filter:drop-shadow(0 0 5px rgba(0,0,0,0.12))) or (filter:drop-shadow(0 0 5px rgba(0,0,0,0.12)))){.site-nav__dropdown{-webkit-filter:drop-shadow(0 0 5px rgba(0,0,0,.12));box-shadow:none;filter:drop-shadow(0 0 5px rgba(0,0,0,.12))}}.site-nav__link-img{height:24px;width:24px}.site-nav__dropdown--simple-links{padding:0;right:0}.site-nav__dropdown--simple-links:before{right:24px}.site-nav__dropdown--simple-links a{width:200px}}@media screen and (min-width:1024px){.site-nav__dropdown{right:0}.site-nav__dropdown:before{right:32px}.site-nav__dropdown--simple-links:before{right:24px}}.site-footer{background-color:#34495e;margin-top:2em;padding:1em 0}.site-footer p{color:#ecf0f1}.site-footer a{color:#fff;text-decoration:underline}.site-footer a:hover{color:#3498db}.has-code-block .code-block pre{margin-bottom:0}.has-code-block+.site-footer{margin-top:0}@media screen and (min-width:768px){.site-footer__credit{text-align:right}}.filter-label{color:#95a5a6;display:block;margin-top:0}.filter-label,.filters-group{margin-bottom:4px}@media screen and (min-width:768px){.filters-group-wrap{-ms-flex-pack:justify;-webkit-box-pack:justify;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:space-between}}.compound-filter-options{margin-bottom:40px;margin-top:20px}.filter-group--compound button{background-color:currentColor;height:40px;padding:0;width:40px}.filter-group--compound label{cursor:pointer}.filter-group--compound .ib+.ib{margin-left:8px}.shape-shuffle-container{overflow:hidden;position:relative}.shape{margin-left:0;margin-top:10px;position:relative}.shape .shape__space{background-color:#000;border:0 solid transparent;height:100%;width:100%}.shape--blue .shape__space{background-color:#3498db;border-bottom-color:#3498db}.shape--red .shape__space{background-color:#e74c3c;border-bottom-color:#e74c3c}.shape--orange .shape__space{background-color:#f39c12;border-bottom-color:#f39c12}.shape--green .shape__space{background-color:#2ecc71;border-bottom-color:#2ecc71}.shape--circle .shape__space{border-radius:50%}.shape--diamond .shape__space{-webkit-transform:rotate(45deg) scale(.70711);transform:rotate(45deg) scale(.70711)}.shape--triangle .shape__space{background-color:transparent;border-width:0 66px 114px;height:0;margin:auto;padding-top:9px;width:0}@media (min-width:425px){.shape--triangle .shape__space{border-width:0 90px 156px;height:0;padding-top:12px;width:0}}@media (min-width:600px){.shape--triangle .shape__space{border-width:0 131px 227px;height:0;padding-top:17.5px;width:0}}@media (min-width:768px){.shape--triangle .shape__space{border-width:0 74px 128px;height:0;padding-top:10px;width:0}}@media (min-width:1024px){.shape--triangle .shape__space{border-width:0 102px 177px;height:0;padding-top:13.5px;width:0}}@media (min-width:1200px){.shape--triangle .shape__space{border-width:0 135px 234px;height:0;padding-top:18px;width:0}}@media (min-width:1392px){.shape--triangle .shape__space{border-width:0 142px 246px;height:0;padding-top:19px;width:0}}.search-section{margin-bottom:1em;margin-top:1em}.question{float:none;margin:2em 0;overflow:hidden;transition:.2s ease-out}.question--collapsed{border-width:0;height:0!important;margin:0}.question--collapsed+.question{margin-top:0}.question--unanswered{border-top:2px solid #2ecc71;padding-top:1.25em}.question__title{margin-top:0}.question__answer{margin-bottom:0;padding-bottom:1px}
\ No newline at end of file
diff --git a/docs/img/demos/ajax.jpg b/docs/img/demos/ajax.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..332f67b5a2cdd42725f579d033a599224cb4ab9a
GIT binary patch
literal 21613
zcmeIZWk4QFvH&``y9RfHy9aj?+}+*XEx0>Df@dv-|em
zyXVUL^LB>msV?j8>YD0eroYFf$1MO=MnYNw00RR6FwhA+Zo`pSxVSj*GBMdXGa8!M
z8<{d1+uJgE7&mA&LtjJ>Rlc}&Oz1xQ|a@Os!f*qXW+l6ctK*g5lh@RR*i&I^K{&`e|`KUrL?
z`N=e76-Y$wolHqM7&#c3$w1OhCT6@!ViLc}f@=I^zje~x-JQ{$jnUr8oQZ{phlh!o
zm5G&=0mQ-J>}ls>=)qv;O#ZtDF;iz_CrbwxOM5$#CyjLVaoj<<%;PaYuV7*CV()BW??A%F
z$P93cNXtS}0#66(JYn>598d@OIRGy0=(~vD;|{oqw5X`Qf|9(1^ege7i59qujj^pW
zBr^cm+POF>Ns5qYXljwbYy+?W5daO!!iWrwogIV~6kh$*`A>_h#iwiy0OlB;bp2D7
z{}_p20?LFy2_GzoMZnm>$pr*Uf#6r}E)Gv{G6=>rwlFjS!6hJ=-U-w}5Ip~cH~IyC
zdVQ=ct9m5zyPoUjG!9uAILxHCII9BdyuR#sB{240Vlu`
zFb6CE7l0mwbp>fR1>Ma+cvH}619(2!A0!7l{;;dF85`?Q6d0li06=X#K3;<67$yk-
z?&BXHZ}T1>@AClwVhsR#?Ea9q&jkSPZy>Gywo(8UWz6f7uK~d!hpc9{@nb8#GlD0Fa&m08}7;6rIOa
zAQ*rK9Wc-^u&^-j2%r-M84(c~1sfF&bYhcXJ;MV1kr7c45r8gES}H19P62jSc7a!7
zVz2bI^nHAa!TzTT9^V6KuwZ52+z?=705}>L1RB_5KR^g_R4^zoFtDfY|2m){AfaGj
z!NK4jR{+>wgvBl7_Dsi^TmX>r+QlaX0BCbAto{He2Z*YVYsMA;fKJphI3xssrB4hv
zlHfW(_l|ub2Dzkb?I)0>z(1Z6+kmD2t{)-_Ae3g>`vIb-e?HPt07(;ELyEhkk`g4%xe@V-x^2LPi=`qY98T?)9Fe2D_tYVOsskg5Uo|KDess7I%7^^3AAQG6
zDpjQ)ns0Whr-Xm@hz-Y6&+%8Mz;=p9Bv*T+;wR=5~~+93;n=
zV{jxyx`h;#a(7Y>0C4)A;@=zqfZF+pFdXs)Sglic)}jFbMtAzWs|qw1C%!?oKv)1L
zqxxmrH~>)k?&B=<06^AMjT;FXiocI1^uXwYyJm10F>PLGDOFV6BHGkz^$kT|9fVbx
zE?;lOmTLpJwObe?lpMdU7s}O9U-5D1Zr084PZx9~@ZRYYvxE*e;Pn1%4%)4XoI!5%
zDnx6h+wiHM@~Ire{9>IQ>c1L^jzLhM^w4qm)rkUEnVjOB9AEFBeZ;);RgV7W-9$b6
zB_04kR(It8XaPOLtyjqX;6%VutN!E{W&lXJPS#fkIjp-t?^1wR06qfU&AAoGh5Qbq
ztx*9$&OD8d8BXeVQ{ys2t996K0f2XcmNCfTyc25j!HRnD!+6Hog#ZY)8Ak@t8i5p4
zYmi0)I}PD*z!Mq{0A^l{l%*j1*SOJRK!V``b_55^GoT1NCEni%>H;V7z-xm5av`L?
zw;%CHK#$0$mQ>JeL-#J#yh4SvR47&+8r+_AMnb=u+V-?{HK`Q)B?+bVvRo^tw
zr@Jr3I`e2b7ya_o(}=^%*_<3KE8X2v-4(S4HhvuR`QC5(Q*BGDZzA0}w|{mYg(#s0
z`l&Y{~G$9T7
zeV71%a970{01aCA{x~#tg-|@Ff7K!VgaCuffL|5ZyVq>avA17fY_ngUE%*G+A&gSf
z@A*coI#pW~Fa?KW`m7$=>VJ976Q*rQD^uR=hC@fo(X+r&J_Z{zgC*^B420n
z#JgQ-ZNB8`cn+vwFo$2i>>=2|1Zd$DB)p+|U@4RW-~%mmNlGBb7hAyW)3<|zIR##K
zfQ|3+2_X_pg~7~i*M7y?LN}(QpQWk%e5m>5mJx(Es!P#N2}(cP
zI~*tM010=E>RBDDf)t3;K51a|B9?d(3E+8aZUF}3+xijDDqjY~+_VDN5_yI!D0UbY
z;Nl#cfR!Y3uny(hjA_Wt3U3k=PPj6(=~O3c`??>yZL{`^{0TB@#hH)`C|rc|vmm_h
zTH}Y6A^Y@Vt}jGmlZ)>r@$c0^WYz*O`n|;fs(a&Qz_UhHAvU-^NejsQ7H0zXv6n;C
zfXy=C+0`ka9e@Qu3FU&OK-H_EE&%j+Dm?#VK45;EC2)wpTlzp%NGQ-E{d1NeKu!%D
zggyeF5CCHKi#GwZAFZLM<*NWo>pie=1HRtDn+Jd>t`dMO*6?!J_Spqcwjhrjb4|p`8DtT%^(0`0w60&
z_;DTYD1?Zjicmon-oRoKaMpMTv^1}?3!FVL@#_HE0vEpRJ*Hvss8c{y;*$&A=WLO?
zQggTo@#{PSbBv5KF0GrX!eJ0MT7vj>+AxS;bOt8An*^Sz156b^&%lW~9?EST4E_`u
zaOsMOhe=;t0Te%afVB`l0xhq=F7J^8Amn?#Pk-ZK*}M(@Qis;WD&U_tjca20ofwa3
z5q+@Q{{-W5!Ps1G`5RXkh+;JtRi63A31cpDijCoV}%R`82pW+gYhl+ww~HoNpWRNr^4BqmlxVu+U9I0dbCG<<1a%*H97
zlSdJs;9n((elEwuDosg5kvAN$TTg!XOvdmp7Y6C1($~!*sk4~R`nxG)Sj7tdv3U6i
zz<#7yaz?k|iQpvY&qOwo4P&9|OG`2wm#+CmAc;z0ieRTz!JMQ_rB$|VJJI7<>#%P1
z_~3M2wZE%7HrW0q#+?c8UqSEiFejD!TgrL3bI&R+Uers1WpE?T^q9p$usb{}2$&#%
zw%B6(SCGaUxsQOea`5uE?atGHBn|1onxq&*YP|Py9Kmm`;kXyk9V;kyHKZQ_{db#^
zM!n`5<%8k(d2uisuTP11?lrt(t^_gW>MK-t#r&p+f=-3q;|Lxq_$6+MBR)6J
zEY)Z((w^rFS{V0U=e7^U`l}HY_{Q~rUHx>VLH`BIV}`haW$SiYcXvpz97VBf=tskt
z(eRqa*(;?l%TZ!RoDeGUpL_@Up27MiHff#osm+&QW1asl?USZZ)EQ{Bnyra9*Y#Z5
zRO6++FmL4q+UIgviraksvdV1W)Gv#Jaa|+Fb*^zqv+nVYlgk90qi!QzV@IZ9>YB9w
z7-f9-+l^r>v5--XPu`{bFGi=U7*0~9-Y%_}oX}aQgkZ%v7WD=$^BMn8$Ji|_EWfmj
zez_-Aa!itE>*P|RSWnFy277C17ecD>QTWJa;>yS9x7pa!T#V1Hw~~p}(8N|r;gA(e
zZfefUx1Pf?PEcFR^xCJz#7-;xa>DrS!;*T7xE5L7Kqc!OMyBuJyL{_mIj7){xNSS1
z{m!LjiU)u5g$(yb*i1ON_zx0nmyp->&-1U7zfynmvi<5tkL?=SE&CzeccJZ$fqj+6
z7omt#*;G(W@)*%W;46+_d*w!M-55es>gtbzoQ1HGP2+ox%G<`eobvx&_iE*0A;?UN
zl^vI)`beJSj5g95zPHxzWM{P(f1Q5c=Z=Df7IPM$*8)nuAh!
z0Nzhnhvo*#p?DALeNMdk|FnvGZ&hC2=j?`j!sEnSg12OCSQ*;%U)&5vuQSfi6zU2$
zTi8g`5r@r0S)av^hnlc4El#Z}ZEb&GI0wZg$JlL#W1R12Ij6n;iaTsq^DW%2V?Gvw
zYsM`vy~Q71P~V>E&wE7QH!>miT;ragZ_N0|!9CpJd?O+kw0#*ArqetabU(-!
z+}xnQ``*7B>R$42oz2!#4?JdcgI3iYU2PQGc2Q-_@6~TwlI}c>*%H6HV=nGleja8L
zCs0IuLoW>L_2MIbGH)#}=Z2|@V({(mKnG^^T(MYUFug>Pfs=xvI(!W;L9HV!4T4)|
z;zChwWOud9Rvw3CT|3>`@9kf!QT-9{D09V55-k@i`(pYkA9G%<
z>^&H4T&I!EX~zYf%<@I>BjAVdBQE9FLnDq|_Ubh#IMQ+)2k;AP@+vs0!Y{cmGSPN0dkE{?IR?s`AJ
zZ>gAVM7K@B%aP&vxsyltWj3ze82DXD4HKI~zY>fgKBe*ZN|
z@AGdzo9^2awiuRG*7UjEM%g}}7*ocECHsPS)tGNYk^CHq$PRyDg)@0imDzXAU_r-IE2=*ktRQ%dh7BVSun<87hQt2Y%;@NXG%
zNWF@Ba7PvYV6Rq&Ql@Wh%TSk6X(<9k0yRmAe+frQjW3b2=FD2UQuY&Kn*y-HwYxsMgK|4%LtV-Ceu({1-Hbt*Dm>m~z**sd*#jW@B-s56rE^$N0N`09@CZj`^>}l<=~;Z&D~zXVMEdr
zB8tB#KwLNbs-r%-DLCDcitr^I^O#&)k0up?r76xM&}jY2I4cDko;T?MPWvs^vi6*=
z?V`RmQ-3n;RNdHUshPq`GGfAYIiazcd+!O9^ay+1jj{H
zR-a=O~NwW}i99&!wNhGjgt^2o+88_zv8q(8d%=`NsCw421KHm2xiXNNNmjgcDob8U
zjO4qJj{s?KSc}g{QF9@4Tbe0id96_+sqWXS#cF5zzVW&NJIWFk+2#^0+aZ-%RYuwF
z<7ghk=4`{(sAl-!=^{HQbVbTl$EH+6m-jr&iUtLxg4?bi*Ro5?wA))HbzGA@y>{n+
zEPef|8JcP3PHobh_iu&ooGV}H?Klp-
zwJlR!7MrL4@FppiWEWPYmOr^BM2?ZJL>0^UH=lb1=e>N%bEz+hk?4jiM8O9Ub#Ai;s(!TSczConm@9U3s
zQ_*;SD1TmXe_jt4XWBjV+CToi=-LaZzbYZ9YIMG>(cz)SM1&PJ6!K3hRIikj5J(bS
zSovKS+S+Kj*;O1YO15Scd-Dr|#3i94W09~3@ctEaKzI@wOtPb}6XuxIR>^F%s0<6z
z^M3XM)V~ZuUllUk$y;GIk*WG3a*^9U!?ze-m5^9r<(x@qijHY8u`M9CeFPG#bd)f|
zXgH(xAU367y5doMNr-+3@qZ2Q{tR5tf}IxrLWAq3Y8COicApg9r>Gyfov@r4
z!%$1G5v^|Y
zTlVCP;*5N=4M`l20tEJUM26Ltq3-pOTiOZ=q$%jOdT!2)P*rtIxvk-Xhi&Mz4_NVy
zx0H~B_&U=|$KH{{bhV#H>iUf3MpALNQioUDLYlbCT*InaM%Ma2D^CXpqggjQ#`(7=
zU8(BV{?y!-cRh?ED|@3ivE5CLf8qGg3bEKx?0g>gN1)ZVWL2@Lz*b^q_h%W?_}#X8
z$kq?vigW&Nq?pDb5JOBO2>Ai&sr)nP7qahf41|sN)}brgAZ;Kef}r;q%BZ0C7~tR#
zu!soIkWf!AG(ax{0Z24-DAFWU3>M{t+TIyV5;7rSMJ1KQyxDDNW%NDsV
zM%_$1ajc%&*ziT+Ub`6bzT3!}BK4y^mHJ_Mw6Kxzb#A%5ll*gWy}Fm=oV;1p*SL4t
z6S|*?W%)DOX9Y66Iou0<*{`hr#Qx4L5^}UCmZ2}Ub1Z62BhkU-igxGLB6~nb-xg!3
zJnA^#8_UtRLEfl}sVU+}b>M1-KeDB3g}PQ9XI1Qfi*;f<5f0*=xekkRY}bK9Hi4_M
zAOqXQ++Qwcj5EUs2OS*x6pNFRU6n^hc}w^92~{qfV#_>vBvoI$Ehx*DQ(Tazet!7G
z;6H=sc91|Pw{}5kxtc9j$>%(rQf%jm-f%ocrk2&ZCo|XlB0}qTmRF|P8WHX<=$#2C
zSeOy$0+?k*@#d5-s8uaXZ!pRl=I|veUK{t~JM0W>I-s?NX;Jx|L<;1g)|8qa_q&xTZ0sryA^yP`C^~NK>R_r`M
zdMZcq;M_XY&2wrm5SHUSrgwdl#g}b~GN8Y-B=2&K)-Ky+{37$C$`(?9qJkuLl6~-f
zfSIkQ#AR>f!Wx>mu_GcIUzp$y&nxxkTRJS2D$dtF7IV8U1?L5`!CiTuf74j__HCBjIyE)O^IoDNYN!tv?%XjDL;
zTOWHy{V}ktNJW^Hl$ubpY=@OJj^H?a0*2Of`Y>)$o^C7(M0N_2%)LSbl9)iU6Q4#e6nWBX}Gq}(k$7C$f+($lc)rA{rf30rFBF(EqBE=u3OpmPF`ZX
z^fH}YVbq|E*cD26)eDR|F7jnaqOa)a3?B&%i}f46Y1%($T<
z$~e0EP`uwB`A`+JH`m9LZjvIw
zZ~=6HC(}DXD}eQz8>io!!@oY@Z|Q4Q5WV)S*>%#
zt{+lIk`%m~wMNc0_1W(5!3?%1Q;^=`$>DNd_4yeAniDOm$Y=SJ(&b=B;u%G&^=f<7
zt{t>=$FPQ3g54rrVYvGUEf&m~?x^UX>su_jqY>UXwFM685##(8A_UQojyyDDDIS5Y
zqgfKiAV?!N6b#et@6|s8gnpEneu^A)DBz?2)6x8>)L}O}^1_ksMf=WugzpZV^0B-sK7Z+9fq5gpip^DVSxol)
zH^usu>@rSo<%Rz?OFM?w>wUtr_@via<7{Ryy11Q8uKyR8=}Fyo;LuQOhrRc>^?DZ!
zR@J}?QQ47h-r;`%RR18GJH9RZ7p_vL109DU!l|I{R&u6?gMR-z*E8pH{bGF>L98GD
zpMhF1-bbag^!Ev|ItM?v$ftq=-w<$H^_}uB7+z-|*4$3HYWNTxQlyrRhfiiZe+{L{aj+Z!&e_1TL+81?{VY~!rhCL=66
z&>|~7*SbUadGG6qi3xL1N^sE?%gvkCmvw~JEg
zL9X>PIlai3Q6>Z^Zj|feyX>q<{+lV==n;!^`ucprqi3kxxC_b0^q;CRt)DTFae*mr
z6EnzjR5ZW8exal-rN`KRQ(p10+|#ge)+xW@cE%9bd>G*jEDk=hwp9vpGGT&39#1+s
z%Sv0VgI3jr>ppx2a4z4QM7doUCp}@fK7IuB#Ka-Hsk9o}w9OJpK9Io?Vo`9zoJiDc
zpb%=V>rpmL#!x6o`MYdKA+qTBNK~8>eW~AAK1y95565P{nXvf0rddZnN^Wzrv_A}u
zH+q(^h1Iw62%t6J?K;QEty9FmL~|Pr4jz>`tG*~QAlBLu^#0-FYRlw=+w9#F
zMfL(&VPEi6Z8jMKy%!nRycpa*Zmd0>%4;~?pxO4lYgrI$wwh1qjW=w4s
zE8?PN)N$y>XY*1?>iksdqwup)HpC_4)t^)2);2RlY19weRuXrLXemb?Y*?W{+976L
zWcpwXpUrS$ZRws!fPPbBD@tJX>GY)~Ud_}R%JN%L4{j?(tp3zVY##}TtB~fV3uhE0
zVf=8C;q9vC+_-9Pmo1(S-|k=2eq0z;Pti7$G=MOifFreYa>l4)RY`5Z9_545+|ZOx
z{i^+kl=EPn12jirP?5IoRC4LD0>XigJFH0qf>6EkG
z8QsVuutw+z%|T09gR1||3D~6Hdgt-^VrvtweY{J=apQmCtq^$@Mq5O-II&C5N8
zH?~H1nziAT^1^3kR*=7S-E5#U$
z>SSpPr-j?PywOu%Mx4y}d3@RPlT89w=+d1*gfBsip5Ueu4!yV4&}FSqF^5vQGB~*N
z1TtSfsGECeQ@mn(n7Shmw}(OUXt&S*ympQ}zl*R6nTB$4Z4Pnw0nd<}-Z4Zq(;KD4
zXz4D6`GYz9PF!q<>%IV9CN$?ISvzN=kE@vgk}Au6g9o_2fV$o%m6vgG@QQ&&cn>nd
z;WvE#)WuKh*GgJ{87$PUw500=x1mzHS<0o<@q1aM-jz?C_}*9rJWX7RI4t&IED$t0
z61-;|R5y-%AKm(pg|~1Oj(-mdb^$p=nDIksv^x3MPNpZJ#zIDx&;l=LB%lMx2c)0{
zDM`3}l7rNt%M`=xe}6dFq(OZlf8Bz?(Ys~-ZQ>N6L3U2*XXUwuNW3-&mCiAnz(
z#9~cW!%P%tz9ceE+%2p9e?0w|hClPYHNL!V&Jv#jtx$qLmniH`{?B_ZS(7X`x2u!+
z2Wz{^Ih_wt#m-TB*=R@%>W^xpx^Ukix&R%XBU>o;h4X3jgr?Xf$lp2+Yo%sTLzePWYZ2L%N!
zE!oS8!4=_v*%VW5EW<#UhTyu6FW~VKt@r^-7$iQeLjAkFA(|7Y&adByum~{B)04#%
z`Us9jZGVsBjmiP78vc>Wo%ZQ$K6h+}Bkgc;f&hi_$kv+DEKjeBhkU;;X!!+=t%XOp
zCkNmwHz#axrm(UTi-o9z8P4O##@j#@nWlvc>X7cHqS(rK5RPHC$iNqI3WFyWsA02y
zU%8tWaeSu9GK}15o0^CA>?`f7nOG>kExay?KDb_Th!%j<1kWOQsXlN@sJX%=W6e+KUFm|`fHSCm#`k5mjGgqEDs?RS=<1R!#Z<$7U(X^Cx
zD&WB3A<~3piAbgBVHQcyOI+JSSFZWsp>Fh&PL_6xu*0cPmPn-M+K)ioVkuXOJ^K0k
zO;jy7FbaYp&4oT`gGF1uGFiK-SmbAQGO?}%eDc4h&TnPiRHMQynH(L=wGSD7M$Pl&
zz~Z1!0H6y#f#!{Eiyanaxa~!LsC!X`brB!PEtp;a8s*4KfD3^lK$1AXWJ{2y+~dRm
zPaW3%Y#GzuhufWc?}J(|qt?d83FbD56zd4_BQVK5&(ffFLE*v7Ev4S-w0Wvl0~44;
zmme=@37)v}-J#sX!9}(Is2DA4ml|S3ZMu(6|0O=GFuce+0|%oG-Wby+k8EcrIR1DQ
zY!cHgcvr(dC2jl!8f1pu6!ML;h1=aQqSa4r?%a)^k5`|2-?~x{Wa2f%lG;Siuo~yI
z`m_kx5iBg-$927r2{6s3A3{FG0A=p#6?jGni6xG-tU*CYk|;>}0{0~FM?D1F-U(@(
z1?u#xpM)86Az;4?x{s8*C)RNze`ejZI?KwA^sFv_R{;zypQokir@0M2-SF5
zZ-NIHBFFxDmaE?sO`I3y3@+vnCoWnTl78YvyiOe*qPoH;?82M9@(&YyW|_>$gdHZ#
zhB3NbcEdQhTY`hS!ry6~lEN6e43L|)Z(eYC?dRE??JET04+6Nx>V+@KpnTArTJ#Xr
z5s`Gd&2$>OG{H%A5_ZGMgAh@mvD}U+rcagLLbu#Szks+=oy%=@^I$z3)()=zruumb
zj*6@{f1jQ;X)O**hxK_1MGx5RmmaGF9~Fu+DEQp(X9{h%e{&*{^j#C17thzo-r3Zk
zPsix?8fRjG_713@1nx0<$4j|w(>g36xIM5qpR~&%@ytnsH|4zKs`g&cQFze1e
zbZ~0_+Y@vBgE4E8!OMH@uLbd($Ohj6*M)*({HjV~i*;9vTZu2_k}F)gS^_g|hcj0(
zAJpO+?Ardu^oHJoS+Os4Kef(Lu)(jbmJhTrV*H;0B6SkI$)~XnCdKx&QytF)lG9(}Ba3K0G-nDd}
zFb#Ts-TXf5UwPx`zot8+h&0{C`kEu_GZ-%3Ywyg=*Y0Vg3bV|580%O7$}ECW=(g4a^2Kzg3^O>-lJhXFgOxw0(to&lBdnUBt!bcZVY0
ziDM^D&?6Qg+U~eTUtpDF75kDIHZ}*cxFO+o$b6xVA|!VyKT^dRZMJ(FFdMl{Zw08`kRbbN4yuld$&14rr%qdxEyqqR|$s
zENL|1jnKT1Rb3qy>JUTwD*bW7P7)mq@<_>RI?oo?jddNp<;t;MG|vFl-gzStFomU#
zrZ;cwNHlRJ&U76@=vkDI?7^+euUp0tu*DH0^BfIcsJ@WWx;oO?8fvd^&*YIm5Lw=j
zk{NMEq~BNFPQ?m;$L-FvQ#B;LKYOP8626vi_
zaRu6CWmm~=zi9HXu4S=VF>>G5Fw?D>bn9wa;8#z5bvP$+Zzg}d@Gj=Zc+P6MEdIB2
z!Dh7#t}m?q{~)HVvD@gLfQ@5`z(*=;64GO^`H8`XIUzAAkDWtU)zHz&Ik2F1W*f()j_magxsV8js6p@h
zU%TMJzyyJ%6+gC|`*Hof^d9>XJFmjCaH35RbqKwmdx&=U1Q9!wKeiv3??P!SJ3x+ZU}bWW;|2B$+w{j~k7a
zk&yN4tOn}v2)a!cqDYeOmbYlFs;re!NUg`zQgMCU#zpXCv}XekCWy<{={A!xW0g
z-y4!-Bo8(2RC3^*fB)3Ank)d}n^47IX+y;h{vimt(Ulfyf=))|Mxlv9nj=D30W2>M
z6S+FqUn$ILwEs=av&Kh2x@gKi87R;~kGJ-TT$~Q@Bm43xUmN{Zm>ZF9qY@q*iLTCZ
z3EK8hC^6E4Wz}Z6zFOBaniKg2!f~7NLRQ(AvCAvfw7sM^Iy-4SJwp4`#d?B-IIB)!
zJ@$1RyGwNm(URzA2W?d(r>8_QMd7A>Y0uDhaE*g9^{_-GAA#qZi948525oU6-h6&C
zNub>(k+?T+#9~l8^i~EB?AKKaOkV1C_MSs6m-q0=ajE+&Id?H~@c#Il
zMO@;B#IM%!&hU?7rvB*RS*x9A79B$BLHcaXKY+9}(DWk6GoGZZt97E0BXb7dUJs?pWx`Zozo>Ir;y0+>PkPt;1uBj{ixWkI-qYlBjo04`
zX;r*U$;?P~=`a&R3K7w=-hTwl-8NMJ^rvfBYV8u>Aec7QHlpnlVmcDU*G3R3QO4GWuQgFZfsP2QZmj9UlvT4=3hDRXv5oj8A5D6Qo
zU&ha_^5K+UBQ8tY>Ee4kg}z_@2%yHTv3+u9>4hi8o&x!A>)EoPgI}3^p0$8d>|GHu^&V~3k)3+Zvnjv3#fhfX>LTRb|BB;kU!Ji
z=qT>`YMq
zrVDmwv#PUfuXE{`%CYPS>_=$aFI`v`&$WG8iYvL4>MviRQIPT+ms+p2=)W*SQDaf9X#f*I+N#pdz=9!BAqW&nNC|p2qX`Ss)+kV~
z6ae92eR$Aka^L%-RDf=`20;3=wO#wxxFXc;Dy@_myd?-YMZ?(8Vk}mW9PQ^!xJgBK
zmO;;lx&S`)3Ce=>xjy0KpT@yQw^^ijPka4Yy<4X9hihheacE%FY6H*I`?2Pm&d%a(
z)786;jk&YB;|F_t%kP?Qj{sM5!ySFQf9C3nAGU7y#PP8p0^{b#tE-%lH};p_-tzw-
zS=nx~GLt*N49OR&GkbVghS(cCmYGq({t+tlZBNZy8aAFYc%PhshUGW{5>KFEF*E%y
zQvRzqHBCE_o3$ae#W-|&1vYlxSKw_{JMyfMY!yrc+U}XAnB&R*DY)4
zIkW!e=5GvmgX2bnwe`5Q6*hzP*7z(@Pl({1?>3H`3{ZTk7=itIhVB(5Ss(wqWjWqV
zlpr+S4ofA2FBDd$X;0>xF8)*KPm%ES!gP}ZCmOHSv!d2&A*=atT8-fJ+?bsD(L0Xx
z_QNSXmpaE#WiD&IQ%O<|jIRI8UR)85K3hvxM?PZ98S~;@#0i6~>dji9e%3J7-)=#s
zO#LEP;O)53*
z_Qha4JWRc5t=TQO4T1)-(AUzr_y>m8-@62_9s!a92TlH*KSR-sWP&RGp(2#i24TCsIj1F
zrlD{wV-C7zaGg=&ewyYAw2KiO-%gq$Gk~rEP(II-NMj6!wS`H{SV=k4jPs~q0uwl2
zIWIC2i#&jdN1~BLdjyEvTnaCvMj}QUKyMVX7}#L>dlIb`B{5vwn&10W2zxo}sK801X}k7p@e^f>>-MBHXq$?AZ}Pz>Hy1hKgRThRMeioC>vPJVoMPutMc56}<-j
zC4%xtGridlL*ZLKA^pKZeA_zp>~yJSAx`7dRhk)CV{8&9P*U1DfwoRijlf4WJVU?UIt9#F(Z)8Yw@i6VZ{gNSg6gIyTU-wLh$V;hw{k;(K-z5emu)l92b5#ImwG1tww}8aXD_LX!zQzYZc7qA=*4
z`SrWNr@ZxJbKPcQSdw|LtA8xtKE_qty5fbOuZ~YrvfdEyLa4R0Hp2R3T%
zS5|laPGEsH^JP(MRiT87$P9`6CsglHvP$AY)q<~)4Soq~akI2DKg6{JrOG8gV_Dq)
zPGa&zXJi$Fh^CF6fiGYeDVabmV-tI-jA945(>>QhTC2#j;Bu-9$z30PLOp-2NW4Qc
zUnXn(;F0z(?b;Kd&ZP^fyYOGT^!TwKl@~k!Fos2n;GS6uGq{^hzJLhZ{oq{`YzJ}BE
z!xLl?u4vz+TU~8FVL=?;<+mnT&tha99MT5HaGrxc)yW<6ee|^FZh93COFH}Mra+`n
zN;>%Kv*>k-m#kxE?amrwaWz?4ii!`ZVVMl*g>lAm6c{0~!o=V8e1|cbogbsuR
z8;#6azl?w+Sekk$cp0fTah2Uu8qG$j-h<@o|9CZy-r5O#0)4&_!Nv|
z2I26Ap?6r~Jg&~)IvI;Yqx5THITqXK_jOM+2&EMrG|R
zs=8@qRpY8Z37FH?$idspWp77I$A2rvV3av@M0)2Z)KP0(*;M=K312NZBK$-;FgRKg
zk_?w~(Q%dkzs`Kv!AztR3^0v>88sFc)o5KTV;u2+Qc=$1&o`lJXc?x1ZKHk97+DjQ
zUqSY%9JcMnryGwAF4Cy-m}pu7`Kj`lM5hAN7jf#uO!$L)EUu2VA(A6E-yG}YRBVb9
z4)o*5YzL+ON0U7`EE_A+J+Lms}i{PZkmF4etxp3m1>_
zy-(-rce2>!4^&aAj{t^v*&`5}J>R!K!!FnwlzQqPX=`+hQ^^NXhLY051K6{Mwz06IabqF6>xOrcgNAQw|kIO{B6R0hC<87x!gm_FhSqOxd
z4~EnWf923)XUIUwD?87#nf66ek3ldC`ed)?i1o4KL&l|^#khZmHzlu=So>F@js)gF
augsZ&kAfTAkvT1;x4#z!kATMG^8W++6E7P8

literal 0
HcmV?d00001

diff --git a/docs/img/demos/ajax.webp b/docs/img/demos/ajax.webp
new file mode 100644
index 0000000000000000000000000000000000000000..7238d11f730a17ea7df04b619f8b65032177d323
GIT binary patch
literal 8596
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
aR260rwQU9fX6pf{0000L00030p!J;q

literal 0
HcmV?d00001

diff --git a/docs/js/demos/ajax.js b/docs/js/demos/ajax.js
new file mode 100644
index 0000000..10e1c91
--- /dev/null
+++ b/docs/js/demos/ajax.js
@@ -0,0 +1,106 @@
+var Shuffle = window.Shuffle;
+var currentPage = 1;
+var totalPages;
+var gridContainerElement = document.getElementById('grid');
+var loadMoreButton = document.getElementById('load-more-button');
+var shuffleInstance;
+
+// Fetch first page of results from the API.
+// You should probably polyfill `fetch` if you're going to copy this demo.
+// https://github.com/github/fetch
+fetch('https://reqres.in/api/users?page=' + currentPage)
+  .then(function (response) {
+    return response.json();
+  })
+  .then(function (response) {
+    // Store the total number of pages so we know when to disable the "load more" button.
+    totalPages = response.total_pages;
+
+    // Create and insert the markup.
+    var markup = getItemMarkup(response.data);
+    appendMarkupToGrid(markup);
+
+    // Add click listener to button to load the next page.
+    loadMoreButton.addEventListener('click', fetchNextPage);
+
+    // Initialize Shuffle now that there are items.
+    shuffleInstance = new Shuffle(gridContainerElement, {
+      itemSelector: '.js-item',
+      sizer: '.my-sizer-element',
+    });
+  });
+
+function fetchNextPage() {
+  currentPage += 1;
+  fetch('https://reqres.in/api/users?page=' + currentPage)
+    .then(function (response) {
+      return response.json();
+    })
+    .then(function (response) {
+      // Create and insert the markup.
+      var markup = getItemMarkup(response.data);
+      appendMarkupToGrid(markup);
+
+      // Check if there are any more pages to load.
+      if (currentPage === totalPages) {
+        replaceLoadMoreButton();
+      }
+
+      // Save the total number of new items returned from the API.
+      var itemsFromResponse = response.data.length;
+      // Get an array of elements that were just added to the grid above.
+      var allItemsInGrid = Array.from(gridContainerElement.children);
+      // Use negative beginning index to extract items from the end of the array.
+      var newItems = allItemsInGrid.slice(-itemsFromResponse);
+
+      // Notify the shuffle instance that new items were added.
+      shuffleInstance.add(newItems);
+    });
+}
+
+/**
+ * Convert an object to HTML markup for an item.
+ * @param {object} dataForSingleItem Data object.
+ * @return {string}
+ */
+function getMarkupFromData(dataForSingleItem) {
+  var name = dataForSingleItem.first_name + ' ' + dataForSingleItem.last_name;
+  // https://www.paulirish.com/2009/random-hex-color-code-snippets/
+  var randomColor = ('000000' + Math.random().toString(16).slice(2, 8)).slice(-6);
+  return [
+    '
',
+    '
',
+    '' + name + '',
+    '
',
+    '
',
+  ].join('');
+}
+
+/**
+ * Convert an array of item objects to HTML markup.
+ * @param {object[]} items Items array.
+ * @return {string}
+ */
+function getItemMarkup(items) {
+  return items.reduce(function (str, item) {
+    return str + getMarkupFromData(item);
+  }, '');
+}
+
+/**
+ * Append HTML markup to the main Shuffle element.
+ * @param {string} markup A string of HTML.
+ */
+function appendMarkupToGrid(markup) {
+  gridContainerElement.insertAdjacentHTML('beforeend', markup);
+}
+
+/**
+ * Remove the load more button so that the user cannot click it again.
+ */
+function replaceLoadMoreButton() {
+  var text = document.createTextNode('All users loaded');
+  var replacement = document.createElement('p');
+  replacement.appendChild(text);
+  loadMoreButton.parentNode.replaceChild(replacement, loadMoreButton);
+}