Merge pull request #147 from picturepan2/feature/bars v0.2.3

Feature/bars

1 files changed, 15 insertions, 4 deletions

diff --git a/docs/index.html b/docs/index.html
index c875c51..51c5e2b 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -22,7 +22,6 @@
           <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a>
         </div>
       </div>
-
       <div class="columns">
         <div class="column col-4 col-xs-12">
           <div class="card text-center">
@@ -55,6 +54,7 @@
           </div>
         </div>
       </div>
+
     </section>
   </section>
 
@@ -125,7 +125,7 @@
         <section id="installation" class="container">
           <header class="text-center"><h3>Installation</h3></header>
           <section class="notes">
-            <p>There are 3 ways to get started with Spectre CSS framework in your projects. You can either manually install or use NPM and Bower.</p>
+            <p>There are 4 ways to get started with Spectre CSS framework in your projects. You can either manually install or use NPM, Yarn and Bower.</p>
           </section>
           <section class="notes">
             <h5>Install manually</h5>
@@ -136,6 +136,11 @@
 <pre>
 <code class="code"><span class="tag">$</span> npm install <span class="atv">spectre.css</span> --save</code>
 </pre>
+            <h5>Install with Yarn</h5>
+<!-- install with yarn example -->
+<pre>
+<code class="code"><span class="tag">$</span> yarn add <span class="atv">spectre.css</span></code>
+</pre>
             <h5>Install with Bower</h5>
 <!-- install with bower example -->
 <pre>
@@ -185,13 +190,19 @@
           <section class="notes">
             <p><strong>February 2017</strong></p>
             <ul>
-              <li>New Documents experience</li>
+              <li>New Documents experience <small class="label label-primary">NEW</small></li>
               <li>
-                <a href="components.html#tiles">Tiles</a>: repeatable or embeddable information blocks <small class="label label-primary">NEW</small>
+                <a href="components.html#bars">Bars</a>: represent the progress of a task or the value within the known range <small class="label label-primary">NEW</small>
               </li>
               <li>
                 <a href="components.html#steps">Steps</a>: progress indicators of a sequence of task steps <small class="label label-primary">NEW</small>
               </li>
+              <li>
+                <a href="components.html#tiles">Tiles</a>: repeatable or embeddable information blocks <small class="label label-primary">NEW</small>
+              </li>
+              <li>
+                <a href="experimentals.html">Experimentals</a>: experimental elements and features, mostly are not yet ready for wide use <small class="label label-primary">NEW</small>
+              </li>
             </ul>
             <p><strong>March 2016</strong></p>
             <ul>