diff options
1 files changed, 15 insertions, 15 deletions
| -rw-r--r-- | docs/getting-started.html | 30 |
diff --git a/docs/getting-started.html b/docs/getting-started.html index 2abc29e..efe7487 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -22,8 +22,8 @@ </a> </div> <div class="s-nav"> - <div class="accordion"> - <div class="accordion-item"> + <div class="accordion-container"> + <div class="accordion"> <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden checked> <label class="accordion-header c-hand" for="docs-accordion-1"> Getting started @@ -48,7 +48,7 @@ </ul> </div> </div> - <div class="accordion-item"> + <div class="accordion"> <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-2"> Elements @@ -82,7 +82,7 @@ </ul> </div> </div> - <div class="accordion-item"> + <div class="accordion"> <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-3"> Layout @@ -101,7 +101,7 @@ </ul> </div> </div> - <div class="accordion-item"> + <div class="accordion"> <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-4"> Components @@ -171,7 +171,7 @@ </ul> </div> </div> - <div class="accordion-item"> + <div class="accordion"> <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-5"> Utilities @@ -205,7 +205,7 @@ </ul> </div> </div> - <div class="accordion-item"> + <div class="accordion"> <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-6"> Experimentals @@ -279,7 +279,7 @@ <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> </div> -<!-- install manually example --> +<!-- install manually --> <pre class="code" data-lang="HTML"><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>> @@ -290,7 +290,7 @@ <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 --> +<!-- install from CDN --> <pre class="code" data-lang="HTML"><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>> @@ -300,7 +300,7 @@ <p class="h5">Install with NPM</p> </div> -<!-- install with npm example --> +<!-- install with npm --> <pre class="code" data-lang="Bash"><code><span class="tag">$</span>npm install <span class="atv">spectre.css</span> --save </code></pre> @@ -308,7 +308,7 @@ <p class="h5">Install with Yarn</p> </div> -<!-- install with yarn example --> +<!-- install with yarn --> <pre class="code" data-lang="Bash"><code><span class="tag">$</span>yarn add <span class="atv">spectre.css</span> </code></pre> @@ -316,7 +316,7 @@ <p class="h5">Install with Bower</p> </div> -<!-- install with bower example --> +<!-- install with bower --> <pre class="code" data-lang="Bash"><code><span class="tag">$</span>bower install <span class="atv">spectre.css</span> --save </code></pre> @@ -483,7 +483,7 @@ <li>@mixin button-outline-variant(<code>$color</code>: $primary-color);</li> </ul> -<!-- button variables example --> +<!-- button variables --> <pre class="code" data-lang="SASS"><code><span class="com"><!-- filled button with the success color --></span> <span class="tag">.btn-success</span> { <span class="tag">@include</span> button-variant(<span class="atv">$success-color</span>); @@ -508,7 +508,7 @@ <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> </div> -<!-- custom prefix example --> +<!-- custom prefix --> <pre class="code"><code><span class="tag">$</span> npm install <span class="atv">gulp-css-prefix</span> </code></pre> @@ -516,7 +516,7 @@ <p>To add <code>spectre-</code> to all classes, you can add the Gulp task to <code>gulpfile.js</code> file.</p> </div> -<!-- custom prefix example --> +<!-- custom prefix --> <pre class="code"><code>var cssPrefix = require('<span class="atv">gulp-css-prefix</span>'); gulp.task('prefix', function() { |