Change Gulp building process and ignore /dist

1 files changed, 26 insertions, 10 deletions

diff --git a/docs/index.html b/docs/index.html
index 1f05e3c..ee9c5ca 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -7,8 +7,8 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="author" content="https://github.com/picturepan2/" />
   <title>Spectre.css - The lightweight, responsive and modern CSS framework</title>
-  <link rel="stylesheet" href="css/spectre.css" />
-  <link rel="stylesheet" href="css/spectre-icons.css" />
+  <link rel="stylesheet" href="dist/spectre.css" />
+  <link rel="stylesheet" href="dist/spectre-icons.css" />
   <link rel="stylesheet" href="css/docs.css" />
 </head>
 <body>
@@ -131,27 +131,35 @@
           </section>
           <section class="notes">
             <h5>Install manually</h5>
-            <p>Download the compiled and minified <a href="https://github.com/picturepan2/spectre/tree/master/dist" target="_blank">Spectre CSS file</a> (~10KB min+gzip):</p>
-            <p><a href="https://github.com/picturepan2/spectre/tree/master/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/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>
+          </section>
+          <section class="notes">
             <h5>Install with NPM</h5>
 
 <!-- install with npm example -->
 <pre class="code"><code><span class="tag">$</span> npm install <span class="atv">spectre.css</span> --save
 </code></pre>
 
+          </seciton>
+          <section class="notes">
             <h5>Install with Yarn</h5>
 
 <!-- install with yarn example -->
 <pre class="code"><code><span class="tag">$</span> yarn add <span class="atv">spectre.css</span>
 </code></pre>
 
+          </section>
+          <section class="notes">
             <h5>Install with Bower</h5>
 
 <!-- install with bower example -->
 <pre class="code"><code><span class="tag">$</span> bower install <span class="atv">spectre.css</span> --save
 </code></pre>
 
-            <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>
+          </seciton>
+          <section class="notes">
+            <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> and <a href="elements.html#icons">Spectre Icons</a>, you can add <code>spectre-exp.css</code> and <code>spectre-icons.css</code> accordingly.</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;
@@ -165,7 +173,7 @@
         <section id="compiling" class="container">
           <header class="text-center"><h3>Custom version</h3></header>
           <section class="notes">
-            <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>.</p>
+            <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>Then, you can build the CSS file from the command line:</p>
             <ol>
               <li>Navigate to the root directory of Spectre where you can find <code>package.json</code> file.</li>
@@ -178,7 +186,7 @@
 
 <!-- file structure -->
 <pre class="code"><code>spectre/
-├── dist/
+├── dist/                               <span class="com">// Build folder (Git ignored)</span>
 │   ├── spectre-exp.css
 │   ├── spectre-exp.min.css
 │   ├── spectre-icons.css
@@ -187,14 +195,22 @@
 │   └── spectre.min.css
 │
 ├── docs/
+│   ├── dist/                           <span class="com">// Pre-built CSS folder</span>
+│   │   ├── spectre-exp.css
+│   │   ├── spectre-exp.min.css
+│   │   ├── spectre-icons.css
+│   │   ├── spectre-icons.min.css
+│   │   ├── spectre.css
+│   │   └── spectre.min.css
+|   ├── css/                            <span class="com">// Docs CSS file</span>
+│   │   └── docs.css
 |   ├── src/
-│   │   ├── docs.less
-│   │   └── ...
+│   │   └── docs.less
 │   ├── ../
 │   ├── index.html
 │   └── ...
 │
-├── src/
+├── src/                                <span class="com">// Source LESS files</span>
 │   ├── mixins.less
 │   ├── variables.less
 │   └── ...