diff options
| author | Yan Zhu <picturepan2@hotmail.com> | 2017-06-09 10:55:20 +0300 |
|---|---|---|
| committer | Yan Zhu <picturepan2@hotmail.com> | 2017-06-09 10:55:20 +0300 |
| commit | 123cfa15980c6579411f74df2865ca96c379e2ca (patch) | |
| tree | 874a8b68388a02d1abb8794db80786849995e72f | |
| parent | 73ee932bbed529d5e3b9eae79a20bbe4fc4fa4db (diff) | |
Add Install from CDN
| -rw-r--r-- | docs/index.html | 28 |
1 files changed, 18 insertions, 10 deletions
diff --git a/docs/index.html b/docs/index.html index 0951255..263d6ce 100644 --- a/docs/index.html +++ b/docs/index.html @@ -127,13 +127,30 @@ <section id="installation" class="container"> <header class="text-center"><h3><a href="#installation" class="anchor" aria-hidden="true">#</a>Installation</h3></header> <section class="notes"> - <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> + <p>There are 4 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> </section> <section class="notes"> <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>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> </section> + +<!-- install manually 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">"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">"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">"spectre-icons.min.css"</span> /> +</code></pre> + + <section class="notes"> + <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> + </section> + +<!-- 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> /> +</code></pre> + <section class="notes"> <h5>Install with NPM</h5> @@ -158,16 +175,7 @@ </code></pre> </section> - <section class="notes"> - <p>And include <code>spectre.css</code> located in <strong>/docs/dist</strong> in your website or Web app <head>. If you want the <a href="elements.html#icons">Spectre Icons</a> and <a href="experimentals.html">Experimentals</a>, you can add <code>spectre-icons.css</code> and <code>spectre-exp.css</code> accordingly.</p> - -<!-- install manually 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">"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">"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">"spectre-icons.min.css"</span> /> -</code></pre> - </section> </section> <section id="compiling" class="container"> |