From dd03f84e2ad7cffa517bee412d1e15e8de47f88d Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Wed, 30 Aug 2017 20:52:53 +0800
Subject: Fix LESS to SASS issues. Add Examples.

---
 docs/getting-started.html | 70 +++++++++++++++++++++++++----------------------
 1 file changed, 37 insertions(+), 33 deletions(-)

(limited to 'docs/getting-started.html')

diff --git a/docs/getting-started.html b/docs/getting-started.html
index d82d7f6..cbe0e3d 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8" />
+  <meta charset="utf-8" />
   <meta name="robots" content="index, follow" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta http-equiv="x-ua-compatible" content="ie=edge" />
   <meta name="author" content="https://github.com/picturepan2/" />
   <title>Getting started - Spectre.css CSS Framework</title>
   <link rel="stylesheet" href="dist/spectre.css" />
@@ -16,7 +16,7 @@
     <div class="columns">
       <div id="sidebar" class="s-sidebar">
         <div class="s-brand">
-          <a href="index.html" class="s-logo tooltip tooltip-bottom" data-tooltip="Spectre.css CSS Framework">
+          <a href="index.html" class="s-logo">
             <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" />
             <h2>Spectre.css</h2>
           </a>
@@ -270,7 +270,7 @@
             <p>There are 5 ways to get started with Spectre CSS framework in your projects. You can either install manually, from CDN or use NPM, Yarn and Bower.</p>
           </div>
           <div class="docs-note">
-            <h5>Install manually</h5>
+            <p class="h5">Install manually</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>
@@ -283,45 +283,47 @@
 </code></pre>
 
           <div class="docs-note">
-            <h5>Install from CDN</h5>
-            <p>Alternatively, you can use the <a href="https://unpkg.com/" target="_blank">unpkg</a> CDN to load compiled Spectre.css.</p>
+            <p class="h5">Install from CDN</p>
+            <p>Alternatively, you can use the <a href="https://unpkg.com/" target="_blank">unpkg</a> or <a href="https://cdnjs.com/libraries/spectre.css" target="_blank">cdnjs</a> CDN to load compiled Spectre.css.</p>
           </div>
 
 <!-- install from CDN 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;https://unpkg.com/spectre.css/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;https://unpkg.com/spectre.css/dist/spectre-exp.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;https://unpkg.com/spectre.css/dist/spectre-icons.min.css&quot;</span> /&gt;
 </code></pre>
 
           <div class="docs-note">
-            <h5>Install with NPM</h5>
+            <p class="h5">Install with NPM</p>
+          </div>
 
 <!-- install with npm example -->
 <pre class="code"><code><span class="tag">$</span> npm install <span class="atv">spectre.css</span> --save
 </code></pre>
 
-          </div>
           <div class="docs-note">
-            <h5>Install with Yarn</h5>
+            <p class="h5">Install with Yarn</p>
+          </div>
 
 <!-- install with yarn example -->
 <pre class="code"><code><span class="tag">$</span> yarn add <span class="atv">spectre.css</span>
 </code></pre>
 
-          </div>
           <div class="docs-note">
-            <h5>Install with Bower</h5>
+            <p class="h5">Install with Bower</p>
+          </div>
 
 <!-- install with bower example -->
 <pre class="code"><code><span class="tag">$</span> bower install <span class="atv">spectre.css</span> --save
 </code></pre>
 
-          </div>
         </div>
 
         <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>You can customize your version of Spectre.css by editing SASS files in <code>/src</code> directory or removing unneeded components from <code>.scss</code> source files.</p>
-            <p><a href="https://github.com/picturepan2/spectre/" target="_blank" class="btn btn-primary">Spectre.css Source Code</a></p>
+            <p><a href="https://github.com/picturepan2/spectre/" target="_blank" class="btn btn-primary">SASS Source Code</a></p>
             <p>If you are looking for LESS version of Spectre.css, please switch to <code>LESS</code> branch.</p>
             <p><a href="https://github.com/picturepan2/spectre/tree/less" target="_blank" class="btn">LESS Branch</a></p>
           </div>
@@ -367,6 +369,8 @@
 │   │   └── docs.css
 |   ├── src/
 │   │   └── docs.scss
+│   ├── examples/                   <span class="com">// Example tempalte</span>
+│   │   └── starter.html
 │   ├── ../
 │   ├── index.html
 │   └── ...
@@ -403,6 +407,26 @@
               </div>
             </div>
           </div>
+          <div class="columns">
+            <div class="column col-3 col-md-6">
+              <div class="docs-color" style="background:#32b643;color:#fff;">
+                <div class="color-title">#32b643</div>
+                <div class="color-subtitle">Success</div>
+              </div>
+            </div>
+            <div class="column col-3 col-md-6">
+              <div class="docs-color" style="background:#ffb700;color:#fff;">
+                <div class="color-title">#ffb700</div>
+                <div class="color-subtitle">Warning</div>
+              </div>
+            </div>
+            <div class="column col-3 col-md-6">
+              <div class="docs-color" style="background:#e85600;color:#fff;">
+                <div class="color-title">#e85600</div>
+                <div class="color-subtitle">Error</div>
+              </div>
+            </div>
+          </div>
           <div class="columns">
             <div class="column col-3 col-md-6">
               <div class="docs-color" style="background:#454d5d;color:#fff;">
@@ -447,26 +471,6 @@
               </div>
             </div>
           </div>
-          <div class="columns">
-            <div class="column col-3 col-md-6">
-              <div class="docs-color" style="background:#32b643;color:#fff;">
-                <div class="color-title">#32b643</div>
-                <div class="color-subtitle">Success</div>
-              </div>
-            </div>
-            <div class="column col-3 col-md-6">
-              <div class="docs-color" style="background:#ffb700;color:#fff;">
-                <div class="color-title">#ffb700</div>
-                <div class="color-subtitle">Warning</div>
-              </div>
-            </div>
-            <div class="column col-3 col-md-6">
-              <div class="docs-color" style="background:#e85600;color:#fff;">
-                <div class="color-title">#e85600</div>
-                <div class="color-subtitle">Error</div>
-              </div>
-            </div>
-          </div>
 
           <h5 id="variables-buttons" class="s-subtitle">Buttons</h5>
           <div class="docs-note">
-- 
cgit v1.3.1-23-gd82d