diff options
Fix LESS to SASS issues. Add Examples.
1 files changed, 37 insertions, 33 deletions
| -rw-r--r-- | docs/getting-started.html | 70 |
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 <head>. 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><<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">"stylesheet"</span> <span class="atn">href</span>=<span class="atv">"https://unpkg.com/spectre.css/dist/spectre.min.css"</span> /> +<<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">"stylesheet"</span> <span class="atn">href</span>=<span class="atv">"https://unpkg.com/spectre.css/dist/spectre-exp.min.css"</span> /> +<<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">"stylesheet"</span> <span class="atn">href</span>=<span class="atv">"https://unpkg.com/spectre.css/dist/spectre-icons.min.css"</span> /> </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 │ └── ... @@ -405,6 +409,26 @@ </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;"> <div class="color-title">#454d5d</div> <div class="color-subtitle">Dark</div> @@ -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"> |