Add more Docs content

4 files changed, 88 insertions, 44 deletions

diff --git a/docs/elements.html b/docs/elements.html
index d141b5e..f552950 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -564,41 +564,10 @@
             <p>Add the <code>btn</code> class to &lt;a&gt;, &lt;input&gt; or &lt;button&gt; elements for a default button. There are classes <code>btn-primary</code> and <code>btn-link</code> for predefined primary and link buttons. </p>
           </div>
 
-          <div class="docs-note">
-            <p>Add the <code>disabled</code> class or the <code>disabled</code> attribute for a disabled button.</p>
-          </div>
-
-          <div class="columns">
-            <div class="column col-xs-12">
-              <button class="btn disabled" tabindex="-1">default disabled</button>
-              <button class="btn btn-primary" disabled tabindex="-1">primary disabled</button>
-              <button class="btn btn-link" disabled tabindex="-1">link disabled</button>
-            </div>
-          </div>
-
-          <div class="docs-note">
-            <p>A button with the <code>loading</code> class can show loading indicator.</p>
-          </div>
-
-          <div class="columns">
-            <div class="column col-xs-12">
-              <button class="btn loading">default button</button>
-              <button class="btn btn-primary loading">primary button</button>
-              <button class="btn btn-link loading">link button</button>
-            </div>
-          </div>
-
 <!-- buttons example -->
 <pre class="code" data-lang="HTML"><code>&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;default button&lt;<span class="tag">/button</span>&gt;
 &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary&quot;</span>&gt;primary button&lt;<span class="tag">/button</span>&gt;
 &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-link&quot;</span>&gt;link button&lt;<span class="tag">/button</span>&gt;
-
-<span class="com">&lt;!-- buttons with disabled state --&gt;</span>
-&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn disabled&quot;</span> <span class="atn">tabindex</span>=<span class="atv">&quot;-1&quot;</span>&gt;disabled button&lt;<span class="tag">/button</span>&gt;
-&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span> <span class="atn">disabled</span> <span class="atn">tabindex</span>=<span class="atv">&quot;-1&quot;</span>&gt;disabled button&lt;<span class="tag">/button</span>&gt;
-
-<span class="com">&lt;!-- a button with loading state --&gt;</span>
-&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn loading&quot;</span>&gt;button&lt;<span class="tag">/button</span>&gt;
 </code></pre>
 
           <h4 id="buttons-sizes" class="s-subtitle">Button sizes</h4>
@@ -653,13 +622,70 @@
 &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-action circle&quot;</span>&gt;&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-left&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;&lt;<span class="tag">/button</span>&gt;
 </code></pre>
 
+          <h4 id="buttons-states" class="s-subtitle">Button states</h4>
+
+          <div class="docs-note">
+            <p>Add the <code>active</code> class for active button state style.</p>
+          </div>
+
+          <div class="columns">
+            <div class="column col-xs-12">
+              <button class="btn active">default active</button>
+              <button class="btn btn-primary active">primary active</button>
+              <button class="btn btn-link active">link active</button>
+            </div>
+          </div>
+
+<!-- buttons example -->
+<pre class="code" data-lang="HTML"><code>
+<span class="com">&lt;!-- buttons with disabled state --&gt;</span>
+&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn disabled&quot;</span> <span class="atn">tabindex</span>=<span class="atv">&quot;-1&quot;</span>&gt;disabled button&lt;<span class="tag">/button</span>&gt;
+&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span> <span class="atn">disabled</span> <span class="atn">tabindex</span>=<span class="atv">&quot;-1&quot;</span>&gt;disabled button&lt;<span class="tag">/button</span>&gt;
+</code></pre>
+          
+          <div class="docs-note">
+            <p>Add the <code>disabled</code> class or the <code>disabled</code> attribute for disabled button state style.</p>
+          </div>
+
+          <div class="columns">
+            <div class="column col-xs-12">
+              <button class="btn disabled" tabindex="-1">default disabled</button>
+              <button class="btn btn-primary" disabled tabindex="-1">primary disabled</button>
+              <button class="btn btn-link" disabled tabindex="-1">link disabled</button>
+            </div>
+          </div>
+
+<!-- buttons example -->
+<pre class="code" data-lang="HTML"><code>
+<span class="com">&lt;!-- buttons with disabled state --&gt;</span>
+&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn disabled&quot;</span> <span class="atn">tabindex</span>=<span class="atv">&quot;-1&quot;</span>&gt;disabled button&lt;<span class="tag">/button</span>&gt;
+&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span> <span class="atn">disabled</span> <span class="atn">tabindex</span>=<span class="atv">&quot;-1&quot;</span>&gt;disabled button&lt;<span class="tag">/button</span>&gt;
+</code></pre>
+
+          <div class="docs-note">
+            <p>A button with the <code>loading</code> class can show loading indicator.</p>
+          </div>
+
+          <div class="columns">
+            <div class="column col-xs-12">
+              <button class="btn loading">default button</button>
+              <button class="btn btn-primary loading">primary button</button>
+              <button class="btn btn-link loading">link button</button>
+            </div>
+          </div>
+
+<!-- buttons example -->
+<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- a button with loading state --&gt;</span>
+&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn loading&quot;</span>&gt;button&lt;<span class="tag">/button</span>&gt;
+</code></pre>
+
           <h4 id="buttons-groups" class="s-subtitle">Button groups</h4>
           <div class="columns">
             <div class="column col-md-12">
               <div class="btn-group">
-                <button class="btn tooltip" data-tooltip="Tooltip text">first button</button>
-                <button class="btn tooltip" data-tooltip="Tooltip text">second button</button>
-                <button class="btn tooltip" data-tooltip="Tooltip text">third button</button>
+                <button class="btn">first button</button>
+                <button class="btn">second button</button>
+                <button class="btn">third button</button>
               </div>
             </div>
             <div class="column col-md-12">
diff --git a/docs/getting-started.html b/docs/getting-started.html
index c74b0a2..0ae3376 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -254,7 +254,7 @@
         <div id="introduction" class="container">
           <h3 class="s-title"><a href="#introduction" class="anchor" aria-hidden="true">#</a>Introduction</h3>
           <div class="docs-note">
-            <p><strong>Spectre.css</strong> is a lightweight and responsive and modern CSS framework for faster and extensible development.</p>
+            <p><strong>Spectre.css</strong> is a lightweight, responsive and modern CSS framework for faster and extensible development.</p>
             <p>Spectre provides basic styles for typography and elements, flexbox based responsive layout system, CSS components and utilities with best practice coding and consistent design language.</p>
           </div>
         </div>
@@ -266,8 +266,8 @@
           </div>
           <div class="docs-note">
             <h5>Install manually</h5>
-            <p>Download the compiled and minified <a href="https://github.com/picturepan2/spectre/tree/master/docs/dist" target="_blank">Spectre CSS file</a> (~10KB min+gzip):</p>
-            <p><a href="https://github.com/picturepan2/spectre/tree/master/docs/dist" target="_blank" class="btn btn-primary">Download Spectre.css</a></p>
+            <p>Download the compiled and minified <a href="https://github.com/picturepan2/spectre/releases" target="_blank">Spectre CSS file</a> (core ~10KB min+gzip):</p>
+            <p><a href="https://github.com/picturepan2/spectre/releases" target="_blank" class="btn btn-primary">Download Spectre.css</a></p>
             <p>Include <code>spectre.css</code> located in <strong>/docs/dist</strong> in your website or Web app &lt;head&gt;. Also, you can add <code>spectre-icons.css</code> and <code>spectre-exp.css</code> accordingly.</p>
           </div>
 
@@ -315,18 +315,29 @@
         <div id="compiling" class="container">
           <h3 class="s-title"><a href="#comiling" class="anchor" aria-hidden="true">#</a>Custom version</h3>
           <div class="docs-note">
-            <p>Spectre uses <a href="http://gulpjs.com/" target="_blank">Gulp</a> for compiling CSS. You can customize your version of Spectre.css by editing LESS files in <code>/src</code> directory or removing unneeded components from <code>spectre.less</code>, <code>spectre-exp.less</code> and <code>spectre-icons.less</code>.</p>
+            <p>You can customize your version of Spectre.css by editing LESS files in <code>/src</code> directory or removing unneeded components from <code>.less</code> source files.</p>
+            <p><a href="https://github.com/picturepan2/spectre/" target="_blank" class="btn btn-primary">Spectre.css Source Code</a></p>
+          </div>
+          <h4 id="compiling-steps" class="s-subtitle">Compiling CSS</h4>
+          <div class="docs-note">
+            <p>Spectre uses <a href="http://gulpjs.com/" target="_blank">Gulp</a> for compiling CSS. Firstly you need to <a href="https://www.npmjs.com/get-npm" target="_blank">install NPM</a>, which is used to manage Gulp and other dependencies.</p>
             <p>Then, you can build the CSS file from the command line:</p>
             <ol>
               <li>Navigate to the root directory of Spectre.</li>
               <li>Run <code>npm install</code>. NPM will install all dev dependencies as listed in package.json.</li>
-              <li>When completed, run <code>gulp build</code> to compile LESS to CSS and minify files.</li>
+              <li>When completed, run <code>gulp build</code> task to compile LESS to CSS and minify files.</li>
               <li>You can find compiled CSS files in <code>/dist</code> directory.</li>
             </ol>
-            <p>You can watch file changes and rebuild CSS files by using <code>gulp watch</code>.</p>
+            <p>All available Gulp tasks:</p>
+            <ul>
+              <li><code>gulp build</code> - compile LESS to CSS and minify files (default)</li>
+              <li><code>gulp docs</code> - compile Docs related files</li>
+              <li><code>gulp watch</code> - watch file changes and re-compile CSS files</li>
+            </ul>
           </div>
 
-<!-- file structure -->
+          <h4 id="compiling-gulptasks" class="s-subtitle">Folder Structure</h4>
+<!-- folder structure -->
 <pre class="code"><code>spectre/
 ├── dist/                               <span class="com">// Build folder (Git ignored)</span>
 │   ├── spectre-exp.css
@@ -445,12 +456,14 @@
               </div>
             </div>
           </div>
+          
           <h5 id="variables-sizes" class="s-subtitle">Sizes</h5>
           <div class="docs-note">
             <p>The default REM (root em) size in Spectre.css is <code>20px</code>. </p>
             <p>Please note in the Chinese/Japanese/Korean version, Chrome uses 12px as default minimum font size. That is why Spectre sets rem default html font size to <code>20px</code>, which is relatively easy to calculate. </p>
             <p>Spectre uses <code>4px</code> as the unit size. Sizes of components are based on the unit size. </p>
           </div>
+          
           <h5 id="variables-custom-prefix" class="s-subtitle">Custom prefix</h5>
           <div class="docs-note">
             <p>There is also a way to add custom prefix to all CSS classes. You can use <a href="https://www.npmjs.com/package/gulp-css-prefix" target="_blank">gulp-css-prefix</a> plugin and add a new Gulp task to enable it. </p>
diff --git a/docs/index.html b/docs/index.html
index 2629b7b..5ce7572 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -67,11 +67,11 @@
     <div class="container grid-lg">
       <h2>Installation</h2>
       <div class="columns">
-        <div class="column col-10 col-sm-12 centered">
+        <div class="column col-10 col-sm-12 col-mx-auto text-left">
           <p class="text-large text-secondary">There are 5 ways to get started with Spectre.css CSS framework in your projects. You can either install manually, from CDN or use NPM, Yarn and Bower.</p>
         </div>
-        <div class="column col-10 col-sm-12 centered">
-          <a href="getting-started.html#installation" class="btn btn-lg">Get started</a>
+        <div class="column col-10 col-sm-12 col-mx-auto">
+          <a href="getting-started.html#installation" class="btn btn-lg">Install Spectre.css</a>
         </div>
       </div>
     </div>
diff --git a/docs/layout.html b/docs/layout.html
index d4c99da..15a9dec 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -409,6 +409,11 @@
               <div class="bg-gray docs-block">col-2</div>
             </div>
           </div>
+          <div class="columns">
+            <div class="column col-4 col-mx-auto">
+              <div class="bg-gray docs-block">col-4 col-mx-auto</div>
+            </div>
+          </div>
 
 <!-- layout example -->
 <pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;container&quot;</span>&gt;