diff options
1 files changed, 41 insertions, 41 deletions
| -rw-r--r-- | docs/getting-started.html | 82 |
diff --git a/docs/getting-started.html b/docs/getting-started.html index e7ae157..efe7487 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -1,15 +1,15 @@ <!DOCTYPE html> <html lang="en"> <head> - <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 name="author" content="https://github.com/picturepan2/" /> + <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 name="author" content="https://github.com/picturepan2/"> <title>Getting started - Spectre.css CSS Framework</title> - <link rel="stylesheet" href="dist/spectre.css" /> - <link rel="stylesheet" href="dist/spectre-icons.css" /> - <link rel="stylesheet" href="css/docs.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> <div class="s-container container"> @@ -17,14 +17,14 @@ <div id="sidebar" class="s-sidebar"> <div class="s-brand"> <a href="index.html" class="s-logo"> - <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" /> + <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> <h2>Spectre.css</h2> </a> </div> <div class="s-nav"> - <div class="accordion"> - <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden checked /> + <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 </label> @@ -48,8 +48,8 @@ </ul> </div> </div> - <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden /> + <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 </label> @@ -82,8 +82,8 @@ </ul> </div> </div> - <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden /> + <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 </label> @@ -101,8 +101,8 @@ </ul> </div> </div> - <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden /> + <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 </label> @@ -171,8 +171,8 @@ </ul> </div> </div> - <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden /> + <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 </label> @@ -205,8 +205,8 @@ </ul> </div> </div> - <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden /> + <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 </label> @@ -251,7 +251,7 @@ <a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a> </div> <a href="index.html" class="s-logo"> - <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" /> + <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> </a> <div class="float-btn"> <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> @@ -279,10 +279,10 @@ <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 --> -<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> /> +<!-- 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>> </code></pre> <div class="docs-note"> @@ -290,34 +290,34 @@ <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> /> +<!-- 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>> </code></pre> <div class="docs-note"> <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 +<!-- 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> <div class="docs-note"> <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> +<!-- install with yarn --> +<pre class="code" data-lang="Bash"><code><span class="tag">$</span>yarn add <span class="atv">spectre.css</span> </code></pre> <div class="docs-note"> <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 +<!-- 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> </div> @@ -393,7 +393,7 @@ <h4 id="variables" class="s-subtitle"><a href="#variables" class="anchor" aria-hidden="true">#</a>Variables</h4> <div class="docs-note"> - <p>Spectre.css is designed with consistent design language. You can modify <code>_variables.scss</code> to create your new or match existing design.</p> + <p>Spectre.css is designed with consistent design language. You can use your own variables to create your new or match existing design. All variables in <code>_variables.scss</code> include <code>!default</code> flag. You can redefine the variables to override the values.</p> </div> <h5 id="variables-colors" class="s-subtitle">Colors</h5> <div class="columns"> @@ -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() { |