Add Spectre Experimentals installation to the docs

4 files changed, 16 insertions, 11 deletions

diff --git a/docs/css/docs.css b/docs/css/docs.css
index b992717..b4798f0 100644
--- a/docs/css/docs.css
+++ b/docs/css/docs.css
@@ -171,7 +171,7 @@
     padding: 0 .5rem;
   }
   .docs-sidebar {
-    padding: 6rem 1rem;
+    padding: 8rem 1rem;
   }
   .docs-sidebar .docs-nav {
     position: relative;
@@ -180,7 +180,7 @@
     .docs-sidebar .docs-nav {
       position: sticky;
       position: -webkit-sticky;
-      top: 9rem;
+      top: 7rem;
     }
     .docs-sidebar .docs-nav .nav-item a:focus {
       box-shadow: none;
diff --git a/docs/css/docs.less b/docs/css/docs.less
index db7ebd5..11c7e4a 100644
--- a/docs/css/docs.less
+++ b/docs/css/docs.less
@@ -205,7 +205,7 @@
   }
 
   .docs-sidebar {
-    padding: 6rem 1rem;
+    padding: 8rem 1rem;
 
       .docs-nav {
         position: relative;
@@ -214,7 +214,7 @@
     @supports (position: sticky) {
       .docs-nav {
         position: sticky;
-        top: 9rem;
+        top: 7rem;
 
         // A position: sticky; bug casues box-shadow generates width to the elements
         .nav-item a:focus {
diff --git a/docs/css/docs.min.css b/docs/css/docs.min.css
index 1c42c7d..08353bf 100644
--- a/docs/css/docs.min.css
+++ b/docs/css/docs.min.css
@@ -1 +1 @@
-/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.2.6"}.bg-gray{background:#f6f6f6;color:#666;padding:1rem}.bg-dark{background:#333;color:#fff;padding:1rem}.bg-primary{background:#5764c6;color:#fff;padding:1rem}.section-header{padding:1rem .5rem;position:fixed;top:0;width:100%;z-index:499}.section-hero{position:relative;z-index:999}.grid-header .navbar{height:4rem}.grid-header .navbar-section{padding:0}.grid-header .navbar-brand{color:#444}.grid-header .btn-link{color:#666;padding-left:.6rem;padding-right:.6rem}.grid-header .btn-link:active,.grid-header .btn-link:focus,.grid-header .btn-link:hover{color:#444;opacity:.75}.grid-hero{margin-bottom:4rem;margin-top:10rem}.grid-hero h1{color:#555;font-size:3.2rem;font-weight:400}.grid-hero h2{color:#666;font-size:1.8rem;font-weight:400;line-height:3rem;margin-bottom:3rem}.grid-hero h2 u{border-bottom:.2rem solid #666;padding-bottom:.1rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#666;padding:1rem}.grid-hero .card .card-title{color:#5764c6;font-size:1.8rem;margin-bottom:0}.grid-footer{color:#888;margin-bottom:3rem;margin-top:4rem}.grid-footer a{color:#666}.grid-ads{border-radius:.2rem;display:block;height:12rem;margin:2rem auto;max-width:64rem;padding:1rem;width:100%}.docs-content .container{padding:1rem}.docs-content header{color:#444;padding-top:6rem}.docs-content .notes{color:#666;margin:4rem 0}.docs-content .docs-block{border-radius:.2rem;padding:1rem .5rem}.docs-content .docs-dot{border-radius:50%;display:inline-block;height:1rem;padding:0;width:1rem}.docs-content .docs-table td,.docs-content .docs-table th{padding:1.5rem .5rem}.docs-content h1,.docs-content h2,.docs-content h3,.docs-content h4,.docs-content h5,.docs-content h6{margin-bottom:2rem;margin-top:2rem}.docs-content .code .com{color:#c5c5c5}.docs-content .code .tag{color:#5764c6}.docs-content .code .atn{color:#666}.docs-content .code .atv{color:#e06870}.docs-content .empty .icon{font-size:4rem}.docs-content .example-tile-icon{-webkit-align-content:space-around;align-content:space-around;-webkit-align-items:center;align-items:center;background:#5764c6;border-radius:.2rem;color:#fff;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:2.4rem;height:4rem;width:4rem}@media screen and (min-width:601px){.navbar .navbar-section{padding:0 .5rem}.docs-sidebar{padding:6rem 1rem}.docs-sidebar .docs-nav{position:relative}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-sidebar .docs-nav{position:sticky;position:-webkit-sticky;top:9rem}.docs-sidebar .docs-nav .nav-item a:focus{box-shadow:none}}}.docs-nav-clear{display:none}@media screen and (max-width:600px){.grid-hero h2{font-size:1.8rem}.grid-hero .card{padding:0}.docs-sidebar{background:#fff;height:100%;left:0;overflow-y:auto;padding:6rem 3rem;position:fixed;top:0;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:24rem;z-index:999}.docs-sidebar:target{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease}.docs-sidebar:target+.docs-nav-clear{display:block}.docs-nav-clear{background:rgba(0,0,0,.15);display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:499}}
\ No newline at end of file
+/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.2.6"}.bg-gray{background:#f6f6f6;color:#666;padding:1rem}.bg-dark{background:#333;color:#fff;padding:1rem}.bg-primary{background:#5764c6;color:#fff;padding:1rem}.section-header{padding:1rem .5rem;position:fixed;top:0;width:100%;z-index:499}.section-hero{position:relative;z-index:999}.grid-header .navbar{height:4rem}.grid-header .navbar-section{padding:0}.grid-header .navbar-brand{color:#444}.grid-header .btn-link{color:#666;padding-left:.6rem;padding-right:.6rem}.grid-header .btn-link:active,.grid-header .btn-link:focus,.grid-header .btn-link:hover{color:#444;opacity:.75}.grid-hero{margin-bottom:4rem;margin-top:10rem}.grid-hero h1{color:#555;font-size:3.2rem;font-weight:400}.grid-hero h2{color:#666;font-size:1.8rem;font-weight:400;line-height:3rem;margin-bottom:3rem}.grid-hero h2 u{border-bottom:.2rem solid #666;padding-bottom:.1rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#666;padding:1rem}.grid-hero .card .card-title{color:#5764c6;font-size:1.8rem;margin-bottom:0}.grid-footer{color:#888;margin-bottom:3rem;margin-top:4rem}.grid-footer a{color:#666}.grid-ads{border-radius:.2rem;display:block;height:12rem;margin:2rem auto;max-width:64rem;padding:1rem;width:100%}.docs-content .container{padding:1rem}.docs-content header{color:#444;padding-top:6rem}.docs-content .notes{color:#666;margin:4rem 0}.docs-content .docs-block{border-radius:.2rem;padding:1rem .5rem}.docs-content .docs-dot{border-radius:50%;display:inline-block;height:1rem;padding:0;width:1rem}.docs-content .docs-table td,.docs-content .docs-table th{padding:1.5rem .5rem}.docs-content h1,.docs-content h2,.docs-content h3,.docs-content h4,.docs-content h5,.docs-content h6{margin-bottom:2rem;margin-top:2rem}.docs-content .code .com{color:#c5c5c5}.docs-content .code .tag{color:#5764c6}.docs-content .code .atn{color:#666}.docs-content .code .atv{color:#e06870}.docs-content .empty .icon{font-size:4rem}.docs-content .example-tile-icon{-webkit-align-content:space-around;align-content:space-around;-webkit-align-items:center;align-items:center;background:#5764c6;border-radius:.2rem;color:#fff;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:2.4rem;height:4rem;width:4rem}@media screen and (min-width:601px){.navbar .navbar-section{padding:0 .5rem}.docs-sidebar{padding:8rem 1rem}.docs-sidebar .docs-nav{position:relative}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-sidebar .docs-nav{position:sticky;position:-webkit-sticky;top:7rem}.docs-sidebar .docs-nav .nav-item a:focus{box-shadow:none}}}.docs-nav-clear{display:none}@media screen and (max-width:600px){.grid-hero h2{font-size:1.8rem}.grid-hero .card{padding:0}.docs-sidebar{background:#fff;height:100%;left:0;overflow-y:auto;padding:6rem 3rem;position:fixed;top:0;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:24rem;z-index:999}.docs-sidebar:target{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease}.docs-sidebar:target+.docs-nav-clear{display:block}.docs-nav-clear{background:rgba(0,0,0,.15);display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:499}}
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index f373bdf..51e2cb1 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -148,10 +148,11 @@
 <pre class="code"><code><span class="tag">$</span> bower install <span class="atv">spectre.css</span> --save
 </code></pre>
 
-            <p>And include it in your website or Web app <code>&lt;head&gt;</code></p>
+            <p>And include <code>spectre.css</code> in your website or Web app &lt;head&gt;. If you want the <a href="experimentals.html">Spectre Experimentals</a> components, you can add <code>spectre-exp.css</code> as well.</p>
 
 <!-- install manually example -->
 <pre class="code"><code>&lt;<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">&quot;stylesheet&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;dist/spectre.min.css&quot;</span> /&gt;
+&lt;<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">&quot;stylesheet&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;dist/spectre-exp.min.css&quot;</span> /&gt;
 </code></pre>
 
           </section>
@@ -202,16 +203,20 @@
           </section>
         </section>
 
+        <section id="accessibility" class="container">
+          <header class="text-center"><h3>Accessibility <small class="label">coming soon</small></h3></header>
+        </section>
+
         <section id="browsers" class="container">
           <header class="text-center"><h3>Browser support</h3></header>
           <section class="notes">
             <p>Spectre uses <a href="https://github.com/postcss/autoprefixer" target="_blank">Autoprefixer</a> to make most styles compatible with earlier browsers and <a href="https://necolas.github.io/normalize.css/" target="_blank">Normalize.css</a> for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:</p>
             <ul>
-              <li>Chrome (last three)</li>
-              <li>Microsoft Edge (last three)</li>
-              <li>Firefox (last three)</li>
-              <li>Safari (last three)</li>
-              <li>Opera (last three)</li>
+              <li>Chrome (last 4)</li>
+              <li>Microsoft Edge (last 4)</li>
+              <li>Firefox (last 4)</li>
+              <li>Safari (last 4)</li>
+              <li>Opera (last 4)</li>
               <li>Internet Explorer 10+</li>
             </ul>
           </section>