diff options
| author | Yan Zhu <picturepan2@hotmail.com> | 2017-09-04 11:16:24 +0300 |
|---|---|---|
| committer | Yan Zhu <picturepan2@hotmail.com> | 2017-09-04 11:16:24 +0300 |
| commit | cf654d89d4668dea4ac9b6e24781f2d8d40fe6e5 (patch) | |
| tree | 766d7691e834ad954af7fdff2882e57920a5e2e1 | |
| parent | c811cb46631e66772a108c393f6ef53a83ca010b (diff) | |
Remove slash in HTML coding
| -rw-r--r-- | README.md | 4 | ||||
| -rw-r--r-- | bower.json | 2 | ||||
| -rw-r--r-- | docs/components.html | 164 | ||||
| -rw-r--r-- | docs/css/docs.css | 2 | ||||
| -rw-r--r-- | docs/elements.html | 178 | ||||
| -rw-r--r-- | docs/examples/starter.html | 10 | ||||
| -rw-r--r-- | docs/experimentals.html | 78 | ||||
| -rw-r--r-- | docs/getting-started.html | 44 | ||||
| -rw-r--r-- | docs/index.html | 18 | ||||
| -rw-r--r-- | docs/layout.html | 42 | ||||
| -rw-r--r-- | docs/src/docs.scss | 2 | ||||
| -rw-r--r-- | docs/utilities.html | 40 | ||||
| -rw-r--r-- | package.json | 2 |
13 files changed, 293 insertions, 293 deletions
@@ -17,12 +17,12 @@ There are 5 ways to get started with Spectre CSS framework in your projects. You #### Install manually Download the compiled and minified [Spectre CSS file](https://github.com/picturepan2/spectre/tree/master/docs/dist). And include `spectre.css` located in `/docs/dist` in your website or Web app <head> part. -`<link rel="stylesheet" href="spectre.min.css" />` +`<link rel="stylesheet" href="spectre.min.css">` #### Install from CDN Alternatively, you can use the [unpkg](https://unpkg.com/) CDN to load compiled Spectre.css. -`<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css" />` +`<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">` #### Install with NPM `$ npm install spectre.css --save` @@ -1,6 +1,6 @@ { "name": "spectre.css", - "version": "0.4.0", + "version": "0.4.1", "description": "Spectre.css: a lightweight, responsive and modern CSS framework.", "homepage": "http://picturepan2.github.io/spectre", "repository": "picturepan2/spectre", diff --git a/docs/components.html b/docs/components.html index 98ceca1..2f12f90 100644 --- a/docs/components.html +++ b/docs/components.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>Components - 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 /> + <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-1"> Getting started </label> @@ -49,7 +49,7 @@ </div> </div> <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden /> + <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-2"> Elements </label> @@ -83,7 +83,7 @@ </div> </div> <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden /> + <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-3"> Layout </label> @@ -102,7 +102,7 @@ </div> </div> <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden checked /> + <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden checked> <label class="accordion-header c-hand" for="docs-accordion-4"> Components </label> @@ -172,7 +172,7 @@ </div> </div> <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden /> + <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-5"> Utilities </label> @@ -206,7 +206,7 @@ </div> </div> <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden /> + <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-6"> Experimentals </label> @@ -252,7 +252,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> @@ -269,7 +269,7 @@ <div class="column col-6 col-md-12"> <div class="accordion"> <div class="accordion-item"> - <input type="radio" id="accordion-1" name="accordion-radio" hidden checked /> + <input type="radio" id="accordion-1" name="accordion-radio" hidden checked> <label class="accordion-header c-hand" for="accordion-1"> <i class="icon icon-arrow-right mr-5"></i> Elements @@ -286,7 +286,7 @@ </div> </div> <div class="accordion-item"> - <input type="radio" id="accordion-2" name="accordion-radio" hidden /> + <input type="radio" id="accordion-2" name="accordion-radio" hidden> <label class="accordion-header c-hand" for="accordion-2"> <i class="icon icon-arrow-right mr-5"></i> Layout @@ -303,7 +303,7 @@ </div> </div> <div class="accordion-item"> - <input type="radio" id="accordion-3" name="accordion-radio" hidden /> + <input type="radio" id="accordion-3" name="accordion-radio" hidden> <label class="accordion-header c-hand" for="accordion-3"> <i class="icon icon-arrow-right mr-5"></i> Components @@ -324,7 +324,7 @@ <div class="column col-6 col-md-12"> <div class="accordion"> <div class="accordion-item"> - <input type="checkbox" id="accordion-4" name="accordion-checkbox" hidden checked /> + <input type="checkbox" id="accordion-4" name="accordion-checkbox" hidden checked> <label class="accordion-header c-hand" for="accordion-4"> <i class="icon icon-arrow-right mr-5"></i> Elements @@ -341,7 +341,7 @@ </div> </div> <div class="accordion-item"> - <input type="checkbox" id="accordion-5" name="accordion-checkbox" hidden /> + <input type="checkbox" id="accordion-5" name="accordion-checkbox" hidden> <label class="accordion-header c-hand" for="accordion-5"> <i class="icon icon-arrow-right mr-5"></i> Layout @@ -358,7 +358,7 @@ </div> </div> <div class="accordion-item"> - <input type="checkbox" id="accordion-6" name="accordion-checkbox" hidden /> + <input type="checkbox" id="accordion-6" name="accordion-checkbox" hidden> <label class="accordion-header c-hand" for="accordion-6"> <i class="icon icon-arrow-right mr-5"></i> Components @@ -382,7 +382,7 @@ <pre class="code" data-lang="HTML"><code><span class="com"><!-- standard Accordions examples --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"accordion"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"accordion-item"</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"checkbox"</span> <span class="atn">id</span>=<span class="atv">"accordion-1"</span> <span class="atn">name</span>=<span class="atv">"accordion-checkbox"</span> <span class="atn">hidden</span>/> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"checkbox"</span> <span class="atn">id</span>=<span class="atv">"accordion-1"</span> <span class="atn">name</span>=<span class="atv">"accordion-checkbox"</span> <span class="atn">hidden</span>> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"accordion-header"</span>> <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-right mr-5"</span>><<span class="tag">/i</span>> Title @@ -397,7 +397,7 @@ <span class="com"><!-- mutually exclusive Accordions examples --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"accordion"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"accordion-item"</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"accordion-1"</span> <span class="atn">name</span>=<span class="atv">"accordion-radio"</span> <span class="atn">hidden</span>/> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"accordion-1"</span> <span class="atn">name</span>=<span class="atv">"accordion-radio"</span> <span class="atn">hidden</span>> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"accordion-header"</span>> Title <<span class="tag">/label</span>> @@ -425,11 +425,11 @@ Bruce Banner </span> <span class="chip"> - <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Avatar" /> + <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Avatar"> Thor Odinson </span> <span class="chip"> - <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Avatar" /> + <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Avatar"> Steve Rogers </span> <span class="chip"> @@ -439,7 +439,7 @@ <span class="chip active"> Natasha Romanoff </span> - <input class="form-input" type="text" placeholder="" /> + <input class="form-input" type="text" placeholder=""> </div> </div> </div> @@ -453,12 +453,12 @@ <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a> </span> <span class="chip"> - <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson"/> + <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson"> Thor Odinson <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a> </span> <div class="has-icon-left"> - <input class="form-input" type="text" placeholder="" value="S" /> + <input class="form-input" type="text" placeholder="" value="S"> <i class="form-icon loading"></i> </div> </div> @@ -467,7 +467,7 @@ <a href="#autocomplete"> <div class="tile tile-centered"> <div class="tile-icon"> - <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers" /> + <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers"> </div> <div class="tile-content"> <mark>S</mark>teve Roger<mark>s</mark> @@ -504,13 +504,13 @@ <span class="com"><!-- autocomplete chips --></span> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-sm"</span> <span class="atn">alt</span>=<span class="atv">"Thor Odinson"</span> /> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-sm"</span> <span class="atn">alt</span>=<span class="atv">"Thor Odinson"</span>> Thor Odinson <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span> <span class="atn">aria-label</span>=<span class="atv">"Close"</span> <span class="atn">role</span>=<span class="atv">"button"</span>><<span class="tag">/a</span>> <<span class="tag">/label</span>> <span class="com"><!-- autocomplete real input box --></span> - <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">placeholder</span>=<span class="atv">"typing here"</span> /> + <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">placeholder</span>=<span class="atv">"typing here"</span>> <<span class="tag">/div</span>> <span class="com"><!-- autocomplete suggestion list --></span> @@ -520,7 +520,7 @@ <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile tile-centered"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-icon"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-4.png"</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-sm"</span> <span class="atn">alt</span>=<span class="atv">"Steve Rogers"</span> /> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-4.png"</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-sm"</span> <span class="atn">alt</span>=<span class="atv">"Steve Rogers"</span>> <<span class="tag">/div</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-content"</span>> Steve Rogers @@ -542,19 +542,19 @@ <div class="columns"> <div class="column col-6 col-xs-12"> <figure class="avatar avatar-xl"> - <img src="img/avatar-1.png" alt="Avatar XL" /> + <img src="img/avatar-1.png" alt="Avatar XL"> </figure> <figure class="avatar avatar-lg"> - <img src="img/avatar-2.png" alt="Avatar LG" /> + <img src="img/avatar-2.png" alt="Avatar LG"> </figure> <figure class="avatar"> - <img src="img/avatar-3.png" alt="Avatar" /> + <img src="img/avatar-3.png" alt="Avatar"> </figure> <figure class="avatar avatar-sm"> - <img src="img/avatar-4.png" alt="Avatar SM" /> + <img src="img/avatar-4.png" alt="Avatar SM"> </figure> <figure class="avatar avatar-xs"> - <img src="img/avatar-5.png" alt="Avatar XS" /> + <img src="img/avatar-5.png" alt="Avatar XS"> </figure> </div> <div class="column col-6 col-xs-12"> @@ -572,24 +572,24 @@ <div class="columns"> <div class="column col-6 col-xs-12"> <figure class="avatar avatar-xl"> - <img src="img/avatar-1.png" alt="Avatar" /> - <img src="img/avatar-2.png" class="avatar-icon" alt="Avatar" /> + <img src="img/avatar-1.png" alt="Avatar"> + <img src="img/avatar-2.png" class="avatar-icon" alt="Avatar"> </figure> <figure class="avatar avatar-lg"> - <img src="img/avatar-2.png" alt="Avatar" /> - <img src="img/avatar-3.png" class="avatar-icon" alt="Avatar" /> + <img src="img/avatar-2.png" alt="Avatar"> + <img src="img/avatar-3.png" class="avatar-icon" alt="Avatar"> </figure> <figure class="avatar"> - <img src="img/avatar-3.png" alt="Avatar" /> - <img src="img/avatar-4.png" class="avatar-icon" alt="Avatar" /> + <img src="img/avatar-3.png" alt="Avatar"> + <img src="img/avatar-4.png" class="avatar-icon" alt="Avatar"> </figure> <figure class="avatar avatar-sm"> - <img src="img/avatar-4.png" alt="Avatar" /> - <img src="img/avatar-5.png" class="avatar-icon" alt="Avatar" /> + <img src="img/avatar-4.png" alt="Avatar"> + <img src="img/avatar-5.png" class="avatar-icon" alt="Avatar"> </figure> <figure class="avatar avatar-xs"> - <img src="img/avatar-5.png" alt="Avatar" /> - <img src="img/avatar-1.png" class="avatar-icon" alt="Avatar" /> + <img src="img/avatar-5.png" alt="Avatar"> + <img src="img/avatar-1.png" class="avatar-icon" alt="Avatar"> </figure> </div> </div> @@ -597,19 +597,19 @@ <!-- avatars example --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- Basic avatar examples --></span> <<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">alt</span>=<span class="atv">"..."</span> /> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">alt</span>=<span class="atv">"..."</span>> <<span class="tag">/figure</span>> <<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">alt</span>=<span class="atv">"..."</span> /> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-5.png"</span> <span class="atn">class</span>=<span class="atv">"avatar-icon"</span> <span class="atn">alt</span>=<span class="atv">"..."</span> /> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">alt</span>=<span class="atv">"..."</span>> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-5.png"</span> <span class="atn">class</span>=<span class="atv">"avatar-icon"</span> <span class="atn">alt</span>=<span class="atv">"..."</span>> <<span class="tag">/figure</span>> <<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span> <span class="atn">data-initial</span>=<span class="atv">"YZ"</span> <span class="atn">style</span>=<span class="atv">"background-color: #5764c6;"</span>><<span class="tag">/figure</span>> <span class="com"><!-- Show initals when avatar image is unavailable or not fully loaded --></span> <<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span> <span class="atn">data-initial</span>=<span class="atv">"YZ"</span> <span class="atn">style</span>=<span class="atv">"background-color: #5764c6;"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">alt</span>=<span class="atv">"..."</span> /> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">alt</span>=<span class="atv">"..."</span>> <<span class="tag">/figure</span>> </code></pre> @@ -638,7 +638,7 @@ <!-- avatars example --> <pre class="code" data-lang="HTML"><code><<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">alt</span>=<span class="atv">"..."</span> /> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">alt</span>=<span class="atv">"..."</span>> <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"avatar-presence online"</span>><<span class="tag">/i</span>> <<span class="tag">/figure</span>> </code></pre> @@ -687,13 +687,13 @@ </div> <div class="column col-sm-12"> <figure class="avatar avatar-xl badge" data-badge="8" data-initial="YZ"> - <img src="img/avatar-1.png" alt="YZ" /> + <img src="img/avatar-1.png" alt="YZ"> </figure> <figure class="avatar avatar-lg badge" data-badge="8" data-initial="YZ"> - <img src="img/avatar-2.png" alt="YZ" /> + <img src="img/avatar-2.png" alt="YZ"> </figure> <figure class="avatar badge" data-badge="8" data-initial="YZ"> - <img src="img/avatar-3.png" alt="YZ" /> + <img src="img/avatar-3.png" alt="YZ"> </figure> </div> </div> @@ -715,7 +715,7 @@ <<span class="tag">/button</span>> <<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar badge"</span> <span class="atn">data-badge</span>=<span class="atv">"8"</span> <span class="atn">data-initial</span>=<span class="atv">"YZ"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-3.png"</span> <span class="atn">alt</span>=<span class="atv">"YZ"</span> /> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-3.png"</span> <span class="atn">alt</span>=<span class="atv">"YZ"</span>> <<span class="tag">/figure</span>> </code></pre> @@ -905,7 +905,7 @@ <div class="column col-6 col-xs-12"> <div class="card"> <div class="card-image"> - <img class="img-responsive" src="img/osx-el-capitan.jpg" alt="OS X El Capitan" /> + <img class="img-responsive" src="img/osx-el-capitan.jpg" alt="OS X El Capitan"> </div> <div class="card-header"> <div class="card-title h5">Microsoft</div> @@ -926,7 +926,7 @@ <div class="card-subtitle text-gray">Hardware and software</div> </div> <div class="card-image"> - <img class="img-responsive" src="img/osx-yosemite.jpg" alt="OS X Yosemite" /> + <img class="img-responsive" src="img/osx-yosemite.jpg" alt="OS X Yosemite"> </div> <div class="card-body"> To make a contribution to the world by making tools for the mind that advance humankind. @@ -943,7 +943,7 @@ <div class="column col-6 col-xs-12"> <div class="card"> <div class="card-image"> - <img class="img-responsive" src="img/macos-sierra-2.jpg" alt="macOS Sierra" /> + <img class="img-responsive" src="img/macos-sierra-2.jpg" alt="macOS Sierra"> </div> <div class="card-header"> <button class="btn btn-primary float-right"><i class="icon icon-plus"></i></button> @@ -958,7 +958,7 @@ <div class="column col-6 col-xs-12"> <div class="card"> <div class="card-image"> - <img class="img-responsive" src="img/osx-el-capitan-2.jpg" alt="OS X El Capitan" /> + <img class="img-responsive" src="img/osx-el-capitan-2.jpg" alt="OS X El Capitan"> </div> <div class="card-footer"> <a href="#cards" class="btn btn-primary">Buy</a> @@ -979,7 +979,7 @@ To make a contribution to the world by making tools for the mind that advance humankind. </div> <div class="card-image"> - <img class="img-responsive" src="img/macos-sierra.jpg" alt="macOS Sierra" /> + <img class="img-responsive" src="img/macos-sierra.jpg" alt="macOS Sierra"> </div> </div> </div> @@ -993,7 +993,7 @@ Organize the world’s information and make it universally accessible and useful. </div> <div class="card-image"> - <img class="img-responsive" src="img/osx-yosemite-2.jpg" alt="OS X Yosemite"/> + <img class="img-responsive" src="img/osx-yosemite-2.jpg" alt="OS X Yosemite"> </div> <div class="card-footer"> <a href="#cards" class="btn btn-primary">Search</a> @@ -1009,7 +1009,7 @@ <!-- cards example --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-image"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive"</span> /> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive"</span>> <<span class="tag">/div</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-header"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-title h5"</span>>Microsoft<<span class="tag">/div</span>> @@ -1056,11 +1056,11 @@ Tony Stark </span> <span class="chip"> - <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson"/> + <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson"> Thor Odinson </span> <span class="chip"> - <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers" /> + <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers"> Steve Rogers </span> </div> @@ -1076,7 +1076,7 @@ <<span class="tag">/span</span>> <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-sm"</span> /> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-sm"</span>> Yan Zhu <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span> <span class="atn">aria-label</span>=<span class="atv">"Close"</span> <span class="atn">role</span>=<span class="atv">"button"</span>><<span class="tag">/a</span>> <<span class="tag">/span</span>></code> @@ -1125,7 +1125,7 @@ <p class="empty-title h5">You are not following anyone</p> <p class="empty-subtitle">Start to meet new friends</p> <div class="empty-action input-group input-inline"> - <input type="text" class="form-input" placeholder="" /> + <input type="text" class="form-input" placeholder=""> <button class="btn btn-primary input-group-btn">Search</button> </div> </div> @@ -1162,7 +1162,7 @@ <li class="menu-item"> <div class="tile tile-centered"> <div class="tile-icon"> - <img src="img/avatar-4.png" class="avatar" alt="Avatar" /> + <img src="img/avatar-4.png" class="avatar" alt="Avatar"> </div> <div class="tile-content"> Steve Rogers @@ -1456,16 +1456,16 @@ <form> <div class="form-group"> <label class="form-label" for="input-example-7">Name</label> - <input class="form-input" type="text" id="input-example-7" placeholder="Name" /> + <input class="form-input" type="text" id="input-example-7" placeholder="Name"> </div> <div class="form-group"> <label class="form-label">Gender</label> <label class="form-radio"> - <input type="radio" name="gender" /> + <input type="radio" name="gender"> <i class="form-icon"></i> Male </label> <label class="form-radio"> - <input type="radio" name="gender" checked /> + <input type="radio" name="gender" checked> <i class="form-icon"></i> Female </label> </div> @@ -1636,7 +1636,7 @@ <div class="panel"> <div class="panel-header text-center"> <figure class="avatar avatar-lg"> - <img src="img/avatar-2.png" alt="Avatar" /> + <img src="img/avatar-2.png" alt="Avatar"> </figure> <div class="panel-title h5 mt-10">Bruce Banner</div> <div class="panel-subtitle">THE HULK</div> @@ -1703,7 +1703,7 @@ <div class="tile"> <div class="tile-icon"> <figure class="avatar"> - <img src="img/avatar-1.png" alt="Avatar" /> + <img src="img/avatar-1.png" alt="Avatar"> </figure> </div> <div class="tile-content"> @@ -1714,7 +1714,7 @@ <div class="tile"> <div class="tile-icon"> <figure class="avatar"> - <img src="img/avatar-2.png" alt="Avatar" /> + <img src="img/avatar-2.png" alt="Avatar"> </figure> </div> <div class="tile-content"> @@ -1734,7 +1734,7 @@ <div class="tile"> <div class="tile-icon"> <figure class="avatar"> - <img src="img/avatar-4.png" alt="Avatar" /> + <img src="img/avatar-4.png" alt="Avatar"> </figure> </div> <div class="tile-content"> @@ -1745,7 +1745,7 @@ <div class="tile"> <div class="tile-icon"> <figure class="avatar"> - <img src="img/avatar-3.png" alt="Avatar" /> + <img src="img/avatar-3.png" alt="Avatar"> </figure> </div> <div class="tile-content"> @@ -1756,7 +1756,7 @@ </div> <div class="panel-footer"> <div class="input-group"> - <input type="text" class="form-input" placeholder="Hello" /> + <input type="text" class="form-input" placeholder="Hello"> <button class="btn btn-primary input-group-btn">Send</button> </div> </div> @@ -2188,7 +2188,7 @@ </li> <li class="tab-item tab-action"> <div class="input-group input-inline"> - <input class="form-input input-sm" type="text" placeholder="search" /> + <input class="form-input input-sm" type="text" placeholder="search"> <button class="btn btn-primary btn-sm input-group-btn">Search</button> </div> </li> @@ -2208,7 +2208,7 @@ <<span class="tag">/li</span>> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item tab-action"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"input-group input-inline"</span>> - <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input input-sm"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">placeholder</span>=<span class="atv">"search"</span> /> + <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input input-sm"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">placeholder</span>=<span class="atv">"search"</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary btn-sm input-group-btn"</span>>Search<<span class="tag">/button</span>> <<span class="tag">/div</span>> <<span class="tag">/li</span>> @@ -2227,7 +2227,7 @@ <div class="tile"> <div class="tile-icon"> <figure class="avatar avatar-lg"> - <img src="img/avatar-3.png" alt="Avatar" /> + <img src="img/avatar-3.png" alt="Avatar"> </figure> </div> <div class="tile-content"> @@ -2244,7 +2244,7 @@ <div class="tile"> <div class="tile-icon"> <figure class="avatar avatar-lg"> - <img src="img/avatar-2.png" alt="Avatar" /> + <img src="img/avatar-2.png" alt="Avatar"> </figure> </div> <div class="tile-content"> diff --git a/docs/css/docs.css b/docs/css/docs.css index 0441f30..f649663 100644 --- a/docs/css/docs.css +++ b/docs/css/docs.css @@ -1,7 +1,7 @@ /*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */ /* Spectre version */ .version::after { - content: "0.4.0"; + content: "0.4.1"; } /* Spectre New Docs */ diff --git a/docs/elements.html b/docs/elements.html index 283174f..19239bf 100644 --- a/docs/elements.html +++ b/docs/elements.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>Elements - 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 /> + <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-1"> Getting started </label> @@ -49,7 +49,7 @@ </div> </div> <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden checked /> + <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden checked> <label class="accordion-header c-hand" for="docs-accordion-2"> Elements </label> @@ -83,7 +83,7 @@ </div> </div> <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden /> + <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-3"> Layout </label> @@ -102,7 +102,7 @@ </div> </div> <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden /> + <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-4"> Components </label> @@ -172,7 +172,7 @@ </div> </div> <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden /> + <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-5"> Utilities </label> @@ -206,7 +206,7 @@ </div> </div> <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden /> + <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> @@ -762,11 +762,11 @@ <div class="column col-6 col-xs-12"> <div class="form-group"> <label class="form-label" for="input-example-1">Name</label> - <input class="form-input" type="text" id="input-example-1" placeholder="Name" /> + <input class="form-input" type="text" id="input-example-1" placeholder="Name"> </div> <div class="form-group"> <label class="form-label" for="input-example-2">Email</label> - <input class="form-input" type="email" id="input-example-2" placeholder="Email" /> + <input class="form-input" type="email" id="input-example-2" placeholder="Email"> </div> </div> </div> @@ -774,7 +774,7 @@ <pre class="code" data-lang="HTML"><code><span class="com"><!-- form input control --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-label"</span> <span class="atn">for</span>=<span class="atv">"input-example-1"</span>>Name<<span class="tag">/label</span>> - <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">id</span>=<span class="atv">"input-example-1"</span> <span class="atn">placeholder</span>=<span class="atv">"Name"</span> /> + <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">id</span>=<span class="atv">"input-example-1"</span> <span class="atn">placeholder</span>=<span class="atv">"Name"</span>> <<span class="tag">/div</span>> </code></pre> @@ -832,11 +832,11 @@ <div class="form-group"> <label class="form-label">Gender</label> <label class="form-radio"> - <input type="radio" name="gender" checked /> + <input type="radio" name="gender" checked> <i class="form-icon"></i> Male </label> <label class="form-radio"> - <input type="radio" name="gender" /> + <input type="radio" name="gender"> <i class="form-icon"></i> Female </label> </div> @@ -848,11 +848,11 @@ <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-label"</span>>Gender<<span class="tag">/label</span>> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-radio"</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">name</span>=<span class="atv">"gender"</span> <span class="atn">checked</span> /> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">name</span>=<span class="atv">"gender"</span> <span class="atn">checked</span>> <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"form-icon"</span>><<span class="tag">/i</span>> Male <<span class="tag">/label</span>> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-radio"</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">name</span>=<span class="atv">"gender"</span> /> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">name</span>=<span class="atv">"gender"</span>> <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"form-icon"</span>><<span class="tag">/i</span>> Female <<span class="tag">/label</span>> <<span class="tag">/div</span>> @@ -862,13 +862,13 @@ <div class="column col-6 col-xs-12"> <div class="form-group"> <label class="form-switch"> - <input type="checkbox" /> + <input type="checkbox"> <i class="form-icon"></i> Send me emails with news and tips </label> </div> <div class="form-group"> <label class="form-switch"> - <input type="checkbox" checked /> + <input type="checkbox" checked> <i class="form-icon"></i> Send me emails with news and tips </label> </div> @@ -878,7 +878,7 @@ <pre class="code" data-lang="HTML"><code><span class="com"><!-- form switch control --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-switch"</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"checkbox"</span> /> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"checkbox"</span>> <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"form-icon"</span>><<span class="tag">/i</span>> Send me emails with news and tips <<span class="tag">/label</span>> <<span class="tag">/div</span>> @@ -888,13 +888,13 @@ <div class="column col-6 col-xs-12"> <div class="form-group"> <label class="form-checkbox"> - <input type="checkbox" /> + <input type="checkbox"> <i class="form-icon"></i> Remember me </label> </div> <div class="form-group"> <label class="form-checkbox"> - <input type="checkbox" checked /> + <input type="checkbox" checked> <i class="form-icon"></i> Remember me </label> </div> @@ -904,7 +904,7 @@ <pre class="code" data-lang="HTML"><code><span class="com"><!-- form checkbox control --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-checkbox"</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"checkbox"</span> /> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"checkbox"</span>> <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"form-icon"</span>><<span class="tag">/i</span>> Remember me <<span class="tag">/label</span>> <<span class="tag">/div</span>> @@ -926,7 +926,7 @@ <label class="form-label" for="input-example-4">Name</label> </div> <div class="col-9"> - <input class="form-input" type="text" id="input-example-4" placeholder="Name" /> + <input class="form-input" type="text" id="input-example-4" placeholder="Name"> </div> </div> <div class="form-group"> @@ -934,7 +934,7 @@ <label class="form-label" for="input-example-5">Email</label> </div> <div class="col-9"> - <input class="form-input" type="email" id="input-example-5" placeholder="Email" /> + <input class="form-input" type="email" id="input-example-5" placeholder="Email"> </div> </div> <div class="form-group"> @@ -943,11 +943,11 @@ </div> <div class="col-9"> <label class="form-radio"> - <input type="radio" name="gender" /> + <input type="radio" name="gender"> <i class="form-icon"></i> Male </label> <label class="form-radio"> - <input type="radio" name="gender" checked /> + <input type="radio" name="gender" checked> <i class="form-icon"></i> Female </label> </div> @@ -968,7 +968,7 @@ <div class="col-3"></div> <div class="col-9"> <label class="form-switch"> - <input type="checkbox" /> + <input type="checkbox"> <i class="form-icon"></i> Send me emails with news and tips </label> </div> @@ -985,7 +985,7 @@ <div class="col-3"></div> <div class="col-9"> <label class="form-checkbox"> - <input type="checkbox" /> + <input type="checkbox"> <i class="form-icon"></i> Remember me </label> </div> @@ -1008,7 +1008,7 @@ <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-label"</span> <span class="atn">for</span>=<span class="atv">"input-example-1"</span>>Name<<span class="tag">/label</span>> <<span class="tag">/div</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"col-9"</span>> - <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">id</span>=<span class="atv">"input-example-1"</span> <span class="atn">placeholder</span>=<span class="atv">"Name"</span> /> + <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">id</span>=<span class="atv">"input-example-1"</span> <span class="atn">placeholder</span>=<span class="atv">"Name"</span>> <<span class="tag">/div</span>> <<span class="tag">/div</span>> <span class="com"><!-- form structure --></span> @@ -1024,7 +1024,7 @@ <label class="form-label label-sm">Label</label> </div> <div class="column col-4 col-xs-12"> - <input class="form-input input-sm" type="text" placeholder="Name" /> + <input class="form-input input-sm" type="text" placeholder="Name"> </div> <div class="column col-4 col-xs-12"> <select class="form-select select-sm"> @@ -1040,7 +1040,7 @@ <label class="form-label label-lg">Label</label> </div> <div class="column col-4 col-xs-12"> - <input class="form-input input-lg" type="text" placeholder="Name" /> + <input class="form-input input-lg" type="text" placeholder="Name"> </div> <div class="column col-4 col-xs-12"> <select class="form-select select-lg"> @@ -1060,19 +1060,19 @@ <div class="columns"> <div class="column col-4 col-xs-12"> <div class="has-icon-left"> - <input class="form-input input-sm" type="text" placeholder="Name" /> + <input class="form-input input-sm" type="text" placeholder="Name"> <i class="form-icon icon icon-arrow-right"></i> </div> </div> <div class="column col-4 col-xs-12"> <div class="has-icon-left tooltip" data-tooltip="Lorem ipsum dolor sit amet"> - <input class="form-input" type="text" placeholder="Name" /> + <input class="form-input" type="text" placeholder="Name"> <i class="form-icon icon icon-arrow-right"></i> </div> </div> <div class="column col-4 col-xs-12"> <div class="has-icon-left"> - <input class="form-input input-lg" type="text" placeholder="Name" /> + <input class="form-input input-lg" type="text" placeholder="Name"> <i class="form-icon icon icon-arrow-right"></i> </div> </div> @@ -1080,19 +1080,19 @@ <div class="columns"> <div class="column col-4 col-xs-12"> <div class="has-icon-right"> - <input class="form-input input-sm" type="text" placeholder="Name" /> + <input class="form-input input-sm" type="text" placeholder="Name"> <i class="form-icon icon icon-check"></i> </div> </div> <div class="column col-4 col-xs-12"> <div class="has-icon-right"> - <input class="form-input" type="text" placeholder="Name" /> + <input class="form-input" type="text" placeholder="Name"> <i class="form-icon icon icon-check"></i> </div> </div> <div class="column col-4 col-xs-12"> <div class="has-icon-right"> - <input class="form-input input-lg" type="text" placeholder="Name" /> + <input class="form-input input-lg" type="text" placeholder="Name"> <i class="form-icon icon icon-check"></i> </div> </div> @@ -1101,7 +1101,7 @@ <!-- form icons example --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- form input with Spectre icon --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"has-icon-left"</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">placeholder</span>=<span class="atv">"..."</span> /> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">placeholder</span>=<span class="atv">"..."</span>> <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"form-icon icon icon-check"</span>><<span class="tag">/i</span>> <<span class="tag">/div</span>> </code></pre> @@ -1113,19 +1113,19 @@ <div class="columns"> <div class="column col-4 col-xs-12"> <div class="has-icon-right"> - <input class="form-input input-sm" type="text" placeholder="Name" /> + <input class="form-input input-sm" type="text" placeholder="Name"> <i class="form-icon loading"></i> </div> </div> <div class="column col-4 col-xs-12"> <div class="has-icon-right"> - <input class="form-input" type="text" placeholder="Name" /> + <input class="form-input" type="text" placeholder="Name"> <i class="form-icon loading"></i> </div> </div> <div class="column col-4 col-xs-12"> <div class="has-icon-right"> - <input class="form-input input-lg" type="text" placeholder="Name" /> + <input class="form-input input-lg" type="text" placeholder="Name"> <i class="form-icon loading"></i> </div> </div> @@ -1133,7 +1133,7 @@ <pre class="code" data-lang="HTML"><code><span class="com"><!-- form input with loading icon --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"has-icon-right"</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">placeholder</span>=<span class="atv">"..."</span> /> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">placeholder</span>=<span class="atv">"..."</span>> <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"form-icon loading"</span>><<span class="tag">/i</span>> <<span class="tag">/div</span>> </code></pre> @@ -1147,7 +1147,7 @@ <label class="form-label" for="input-example-8">Email</label> </div> <div class="col-9"> - <input class="form-input" type="email" id="input-example-8" placeholder="Email" value="spectre@example.com" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$" /> + <input class="form-input" type="email" id="input-example-8" placeholder="Email" value="spectre@example.com" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$"> </div> </div> <div class="form-group"> @@ -1163,7 +1163,7 @@ <label class="form-label" for="input-example-10">Search</label> </div> <div class="col-9"> - <input class="form-input" type="search" id="input-example-10" placeholder="Search" /> + <input class="form-input" type="search" id="input-example-10" placeholder="Search"> </div> </div> <div class="form-group"> @@ -1171,7 +1171,7 @@ <label class="form-label" for="input-example-11">Tel</label> </div> <div class="col-9"> - <input class="form-input" type="tel" id="input-example-11" placeholder="Tel" value="1-(888)-888-8888" /> + <input class="form-input" type="tel" id="input-example-11" placeholder="Tel" value="1-(888)-888-8888"> </div> </div> <div class="form-group"> @@ -1179,7 +1179,7 @@ <label class="form-label" for="input-example-12">Password</label> </div> <div class="col-9"> - <input class="form-input" type="password" id="input-example-12" placeholder="Password" value="123456789" /> + <input class="form-input" type="password" id="input-example-12" placeholder="Password" value="123456789"> </div> </div> <div class="form-group"> @@ -1187,7 +1187,7 @@ <label class="form-label" for="input-example-13">Number</label> </div> <div class="col-9"> - <input class="form-input" type="number" id="input-example-13" placeholder="00" value="66" /> + <input class="form-input" type="number" id="input-example-13" placeholder="00" value="66"> </div> </div> <div class="form-group"> @@ -1195,7 +1195,7 @@ <label class="form-label" for="input-example-14">Date</label> </div> <div class="col-9"> - <input class="form-input" type="date" id="input-example-14" value="2016-12-31" /> + <input class="form-input" type="date" id="input-example-14" value="2016-12-31"> </div> </div> <div class="form-group"> @@ -1203,7 +1203,7 @@ <label class="form-label" for="input-example-15">Color</label> </div> <div class="col-9"> - <input class="form-input" type="color" id="input-example-15" value="#5764c6" /> + <input class="form-input" type="color" id="input-example-15" value="#5764c6"> </div> </div> <div class="form-group"> @@ -1211,7 +1211,7 @@ <label class="form-label" for="input-example-16">File</label> </div> <div class="col-9"> - <input class="form-input" type="file" id="input-example-16" /> + <input class="form-input" type="file" id="input-example-16"> </div> </div> </form> @@ -1222,7 +1222,7 @@ <div class="columns"> <div class="column col-xs-12"> <div class="input-group"> - <input type="text" class="form-input input-sm" placeholder="username" /> + <input type="text" class="form-input input-sm" placeholder="username"> <select class="form-select select-sm"> <option>Slack</option> <option>Skype</option> @@ -1233,7 +1233,7 @@ <div class="column col-xs-12"> <div class="input-group"> <span class="input-group-addon addon-sm">slack.com/</span> - <input type="text" class="form-input input-sm" placeholder="site name" /> + <input type="text" class="form-input input-sm" placeholder="site name"> <button class="btn btn-primary input-group-btn btn-sm">Submit</button> </div> </div> @@ -1241,7 +1241,7 @@ <div class="columns"> <div class="column col-xs-12"> <div class="input-group"> - <input type="text" class="form-input" placeholder="username" /> + <input type="text" class="form-input" placeholder="username"> <select class="form-select"> <option>Slack</option> <option>Skype</option> @@ -1252,7 +1252,7 @@ <div class="column col-xs-12"> <div class="input-group"> <span class="input-group-addon">slack.com/</span> - <input type="text" class="form-input" placeholder="site name" /> + <input type="text" class="form-input" placeholder="site name"> <button class="btn btn-primary input-group-btn">Submit</button> </div> </div> @@ -1260,7 +1260,7 @@ <div class="columns"> <div class="column col-xs-12"> <div class="input-group"> - <input type="text" class="form-input input-lg" placeholder="username" /> + <input type="text" class="form-input input-lg" placeholder="username"> <select class="form-select select-lg"> <option>Slack</option> <option>Skype</option> @@ -1271,7 +1271,7 @@ <div class="column col-xs-12"> <div class="input-group"> <span class="input-group-addon addon-lg">slack.com/</span> - <input type="text" class="form-input input-lg" placeholder="site name" /> + <input type="text" class="form-input input-lg" placeholder="site name"> <button class="btn btn-primary input-group-btn btn-lg">Submit</button> </div> </div> @@ -1284,19 +1284,19 @@ <pre class="code" data-lang="HTML"><code><span class="com"><!-- normal input group --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"input-group"</span>> <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"input-group-addon"</span>>...<<span class="tag">/span</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">placeholder</span>=<span class="atv">"..."</span> /> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">placeholder</span>=<span class="atv">"..."</span>> <<span class="tag">/div</span>> <span class="com"><!-- large input group --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"input-group"</span>> <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"input-group-addon addon-lg"</span>>...<<span class="tag">/span</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">class</span>=<span class="atv">"form-input input-lg"</span> <span class="atn">placeholder</span>=<span class="atv">"..."</span> /> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">class</span>=<span class="atv">"form-input input-lg"</span> <span class="atn">placeholder</span>=<span class="atv">"..."</span>> <<span class="tag">/div</span>> <span class="com"><!-- normal input group with button --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"input-group"</span>> <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"input-group-addon"</span>>...<<span class="tag">/span</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">placeholder</span>=<span class="atv">"..."</span> /> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">placeholder</span>=<span class="atv">"..."</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary input-group-btn"</span>>Submit<<span class="tag">/button</span>> <<span class="tag">/div</span>> </code></pre> @@ -1311,17 +1311,17 @@ <legend>form-input</legend> <div class="form-group"> <label class="form-label" for="input-example-17">Name</label> - <input class="form-input is-success" type="text" id="input-example-17" placeholder="Name" /> + <input class="form-input is-success" type="text" id="input-example-17" placeholder="Name"> <p class="form-input-hint">The name is valid.</p> </div> <div class="form-group has-error"> <label class="form-label" for="input-example-18">Password</label> - <input class="form-input" type="password" id="input-example-18" placeholder="Password" /> + <input class="form-input" type="password" id="input-example-18" placeholder="Password"> <p class="form-input-hint">Passwords must have at least 8 characters.</p> </div> <div class="form-group"> <label class="form-label" for="input-example-21">Email</label> - <input class="form-input" type="text" id="input-example-21" placeholder="Email" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$" /> + <input class="form-input" type="text" id="input-example-21" placeholder="Email" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$"> <p class="form-input-hint">The Email address is unavailable.</p> </div> </fieldset> @@ -1350,23 +1350,23 @@ <legend>form-checkbox, radio and switch (Error status only)</legend> <div class="form-group"> <label class="form-checkbox is-error"> - <input type="checkbox" checked /> + <input type="checkbox" checked> <i class="form-icon"></i> I'm not a robot. </label> </div> <div class="form-group has-error"> <label class="form-radio"> - <input type="radio" name="gender" checked /> + <input type="radio" name="gender" checked> <i class="form-icon"></i> Male </label> <label class="form-radio"> - <input type="radio" name="gender" /> + <input type="radio" name="gender"> <i class="form-icon"></i> Female </label> </div> <div class="form-group"> <label class="form-switch is-error"> - <input type="checkbox" /> + <input type="checkbox"> <i class="form-icon"></i> Send me emails with news and tips </label> </div> @@ -1379,21 +1379,21 @@ <span class="com"><!-- form validation class: has-success --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group has-success"</span>> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-label"</span> <span class="atn">for</span>=<span class="atv">"input-example-1"</span>>Name<<span class="tag">/label</span>> - <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">id</span>=<span class="atv">"input-example-1"</span> <span class="atn">placeholder</span>=<span class="atv">"..."</span> /> + <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">id</span>=<span class="atv">"input-example-1"</span> <span class="atn">placeholder</span>=<span class="atv">"..."</span>> <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"form-input-hint"</span>>The name is invalid.<<span class="tag">/p</span>> <<span class="tag">/div</span>> <span class="com"><!-- form validation class: is-success --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-label"</span> <span class="atn">for</span>=<span class="atv">"input-example-1"</span>>Name<<span class="tag">/label</span>> - <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input is-success"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">id</span>=<span class="atv">"input-example-1"</span> <span class="atn">placeholder</span>=<span class="atv">"..."</span> /> + <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input is-success"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">id</span>=<span class="atv">"input-example-1"</span> <span class="atn">placeholder</span>=<span class="atv">"..."</span>> <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"form-input-hint"</span>>The name is invalid.<<span class="tag">/p</span>> <<span class="tag">/div</span>> <span class="com"><!-- form validation example for checkbox, radio and switch --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-checkbox is-error"</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"checkbox"</span> /> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"checkbox"</span>> <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"form-icon"</span>><<span class="tag">/i</span>> Remember me <<span class="tag">/label</span>> <<span class="tag">/div</span>> @@ -1410,16 +1410,16 @@ <fieldset disabled> <div class="form-group"> <label class="form-label" for="input-example-19">Name</label> - <input class="form-input" type="text" id="input-example-19" placeholder="Name" /> + <input class="form-input" type="text" id="input-example-19" placeholder="Name"> </div> <div class="form-group"> <label class="form-label">Gender</label> <label class="form-radio"> - <input type="radio" name="gender" disabled /> + <input type="radio" name="gender" disabled> <i class="form-icon"></i> Male </label> <label class="form-radio"> - <input type="radio" name="gender" disabled /> + <input type="radio" name="gender" disabled> <i class="form-icon"></i> Female </label> </div> @@ -1433,7 +1433,7 @@ </div> <div class="form-group"> <label class="form-switch"> - <input type="checkbox" disabled /> + <input type="checkbox" disabled> <i class="form-icon"></i> Send me emails with news and tips </label> </div> @@ -1443,7 +1443,7 @@ </div> <div class="form-group"> <label class="form-checkbox"> - <input type="checkbox" disabled /> + <input type="checkbox" disabled> <i class="form-icon"></i> Remember me </label> </div> @@ -1775,7 +1775,7 @@ </div> <div class="columns"> <div class="column col-12"> - <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" alt="macOS El Capitan Wallpaper" /> + <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" alt="macOS El Capitan Wallpaper"> </div> </div> @@ -1785,21 +1785,21 @@ <div class="columns"> <div class="column col-6 col-xs-12"> <figure class="figure"> - <img src="img/osx-yosemite.jpg" class="img-fit-contain rounded" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;"/> + <img src="img/osx-yosemite.jpg" class="img-fit-contain rounded" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;"> <figcaption class="figure-caption text-center">img-fit-contain</figcaption> </figure> </div> <div class="column col-6 col-xs-12"> <figure class="figure"> - <img src="img/osx-yosemite-2.jpg" class="img-fit-cover rounded" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;"/> + <img src="img/osx-yosemite-2.jpg" class="img-fit-cover rounded" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;"> <figcaption class="figure-caption text-center">img-fit-cover</figcaption> </figure> </div> </div> -<pre class="code" data-lang="HTML"><code><<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive ..."</span> <span class="atn">alt</span>=<span class="atv">"..."</span> /> -<<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-fit-contain ..."</span> <span class="atn">alt</span>=<span class="atv">"..."</span> /> -<<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-fit-cover ..."</span> <span class="atn">alt</span>=<span class="atv">"..."</span> /> +<pre class="code" data-lang="HTML"><code><<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive ..."</span> <span class="atn">alt</span>=<span class="atv">"..."</span>> +<<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-fit-contain ..."</span> <span class="atn">alt</span>=<span class="atv">"..."</span>> +<<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-fit-cover ..."</span> <span class="atn">alt</span>=<span class="atv">"..."</span>> </code></pre> <div class="docs-note"> @@ -1808,14 +1808,14 @@ <div class="columns"> <div class="column col-12"> <figure class="figure"> - <img src="img/osx-yosemite-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper"/> + <img src="img/osx-yosemite-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper"> <figcaption class="figure-caption text-center">macOS Yosemite wallpaper</figcaption> </figure> </div> </div> <pre class="code" data-lang="HTML"><code><<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"figure"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-yosemite-2.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive ..."</span> <span class="atn">alt</span>=<span class="atv">"..."</span> /> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-yosemite-2.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive ..."</span> <span class="atn">alt</span>=<span class="atv">"..."</span>> <<span class="tag">figcaption</span> <span class="atn">class</span>=<span class="atv">"figure-caption text-center"</span>>macOS Yosemite wallpaper<<span class="tag">/figcaption</span>> <<span class="tag">/figure</span>> </code></pre> diff --git a/docs/examples/starter.html b/docs/examples/starter.html index cbeca2d..b8b774f 100644 --- a/docs/examples/starter.html +++ b/docs/examples/starter.html @@ -1,13 +1,13 @@ <!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 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"> <title>Starter Page Example</title> <!-- Spectre.css CSS --> - <link rel="stylesheet" href="../dist/spectre.css" /> + <link rel="stylesheet" href="../dist/spectre.css"> </head> <body> <div class="bg-gray text-center p-2"> diff --git a/docs/experimentals.html b/docs/experimentals.html index 1a34fe8..6fe2ed0 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -1,16 +1,16 @@ <!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>Experimentals - Spectre.css CSS Framework</title> - <link rel="stylesheet" href="dist/spectre.css" /> - <link rel="stylesheet" href="dist/spectre-exp.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-exp.css"> + <link rel="stylesheet" href="dist/spectre-icons.css"> + <link rel="stylesheet" href="css/docs.css"> </head> <body> <div class="s-container container"> @@ -18,14 +18,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 /> + <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-1"> Getting started </label> @@ -50,7 +50,7 @@ </div> </div> <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden /> + <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-2"> Elements </label> @@ -84,7 +84,7 @@ </div> </div> <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden /> + <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-3"> Layout </label> @@ -103,7 +103,7 @@ </div> </div> <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden /> + <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-4"> Components </label> @@ -173,7 +173,7 @@ </div> </div> <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden /> + <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-5"> Utilities </label> @@ -207,7 +207,7 @@ </div> </div> <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden checked /> + <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden checked> <label class="accordion-header c-hand" for="docs-accordion-6"> Experimentals </label> @@ -252,7 +252,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> @@ -438,10 +438,10 @@ <div class="columns"> <div class="column col-12"> <div class="carousel"> - <input type="radio" id="slide-1" name="carousel-radio" hidden class="carousel-locator" checked /> - <input type="radio" id="slide-2" name="carousel-radio" hidden class="carousel-locator" /> - <input type="radio" id="slide-3" name="carousel-radio" hidden class="carousel-locator" /> - <input type="radio" id="slide-4" name="carousel-radio" hidden class="carousel-locator" /> + <input type="radio" id="slide-1" name="carousel-radio" hidden class="carousel-locator" checked> + <input type="radio" id="slide-2" name="carousel-radio" hidden class="carousel-locator"> + <input type="radio" id="slide-3" name="carousel-radio" hidden class="carousel-locator"> + <input type="radio" id="slide-4" name="carousel-radio" hidden class="carousel-locator"> <div class="carousel-container"> <figure class="carousel-item"> <label class="item-prev btn btn-action btn-lg" for="slide-4"> @@ -450,7 +450,7 @@ <label class="item-next btn btn-action btn-lg" for="slide-2"> <i class="icon icon-arrow-right"></i> </label> - <img src="img/osx-yosemite.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper" /> + <img src="img/osx-yosemite.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper"> </figure> <figure class="carousel-item"> @@ -460,7 +460,7 @@ <label class="item-next btn btn-action btn-lg" for="slide-3"> <i class="icon icon-arrow-right"></i> </label> - <img src="img/osx-yosemite-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper" /> + <img src="img/osx-yosemite-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper"> </figure> <figure class="carousel-item"> @@ -470,7 +470,7 @@ <label class="item-next btn btn-action btn-lg" for="slide-4"> <i class="icon icon-arrow-right"></i> </label> - <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper" /> + <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper"> </figure> <figure class="carousel-item"> @@ -480,7 +480,7 @@ <label class="item-next btn btn-action btn-lg" for="slide-1"> <i class="icon icon-arrow-right"></i> </label> - <img src="img/osx-el-capitan-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper" /> + <img src="img/osx-el-capitan-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper"> </figure> </div> <div class="carousel-nav"> @@ -504,11 +504,11 @@ <div class="column col-12"> <div class="comparison-slider"> <figure class="comparison-before"> - <img src="img/macos-sierra-2.jpg" class="rounded" alt="macOS Sierra Wallpaper" /> + <img src="img/macos-sierra-2.jpg" class="rounded" alt="macOS Sierra Wallpaper"> <div class="comparison-label">Before</div> </figure> <figure class="comparison-after"> - <img src="img/macos-sierra-2.jpg" class="filter-grayscale rounded" alt="macOS Sierra Wallpaper" /> + <img src="img/macos-sierra-2.jpg" class="filter-grayscale rounded" alt="macOS Sierra Wallpaper"> <div class="comparison-label">After</div> <textarea class="comparison-resizer" readonly></textarea> </figure> @@ -541,11 +541,11 @@ <div class="columns"> <div class="column col-12"> <div class="filter"> - <input type="radio" id="tag-all" class="filter-tag" name="filter-radio" hidden checked /> - <input type="radio" id="tag-action" class="filter-tag" name="filter-radio" hidden /> - <input type="radio" id="tag-roleplaying" class="filter-tag" name="filter-radio" hidden /> - <input type="radio" id="tag-shooter" class="filter-tag" name="filter-radio" hidden /> - <input type="radio" id="tag-sports" class="filter-tag" name="filter-radio" hidden /> + <input type="radio" id="tag-all" class="filter-tag" name="filter-radio" hidden checked> + <input type="radio" id="tag-action" class="filter-tag" name="filter-radio" hidden> + <input type="radio" id="tag-roleplaying" class="filter-tag" name="filter-radio" hidden> + <input type="radio" id="tag-shooter" class="filter-tag" name="filter-radio" hidden> + <input type="radio" id="tag-sports" class="filter-tag" name="filter-radio" hidden> <div class="filter-nav"> <label class="chip" for="tag-all">All</label> @@ -658,9 +658,9 @@ <!-- filters example --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"filter"</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"tag-all"</span> <span class="atn">class</span>=<span class="atv">"filter-tag"</span> <span class="atn">name</span>=<span class="atv">"filter-radio"</span> <span class="atn">hidden</span> <span class="atn">checked</span> /> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"tag-action"</span> <span class="atn">class</span>=<span class="atv">"filter-tag"</span> <span class="atn">name</span>=<span class="atv">"filter-radio"</span> <span class="atn">hidden</span> /> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"tag-roleplaying"</span> <span class="atn">class</span>=<span class="atv">"filter-tag"</span> <span class="atn">name</span>=<span class="atv">"filter-radio"</span> <span class="atn">hidden</span> /> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"tag-all"</span> <span class="atn">class</span>=<span class="atv">"filter-tag"</span> <span class="atn">name</span>=<span class="atv">"filter-radio"</span> <span class="atn">hidden</span> <span class="atn">checked</span>> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"tag-action"</span> <span class="atn">class</span>=<span class="atv">"filter-tag"</span> <span class="atn">name</span>=<span class="atv">"filter-radio"</span> <span class="atn">hidden</span>> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"tag-roleplaying"</span> <span class="atn">class</span>=<span class="atv">"filter-tag"</span> <span class="atn">name</span>=<span class="atv">"filter-radio"</span> <span class="atn">hidden</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"filter-nav"</span>> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"chip"</span> <span class="atn">for</span>=<span class="atv">"tag-all"</span>>All<<span class="tag">/label</span>> @@ -734,7 +734,7 @@ <h2>tvOS parallax demo</h2> </div> <div class="parallax-back"> - <img src="img/osx-yosemite-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper" /> + <img src="img/osx-yosemite-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper"> </div> </div> </div> @@ -752,7 +752,7 @@ <<span class="tag">h2</span>>tvOS parallax demo<<span class="tag">/h2</span>> <<span class="tag">/div</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"parallax-back"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive rounded"</span> ... /> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive rounded"</span> ...> <<span class="tag">/div</span>> <<span class="tag">/div</span>> <<span class="tag">/div</span>> @@ -794,10 +794,10 @@ </div> <div class="columns"> <div class="column col-6 col-xs-12"> - <input class="slider tooltip" data-tooltip="50" type="range" min="0" max="100" value="50" /> + <input class="slider tooltip" data-tooltip="50" type="range" min="0" max="100" value="50"> </div> <div class="column col-6 col-xs-12"> - <input class="slider" type="range" min="0" max="100" value="50" disabled /> + <input class="slider" type="range" min="0" max="100" value="50" disabled> </div> </div> diff --git a/docs/getting-started.html b/docs/getting-started.html index e7ae157..0a99d07 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 /> + <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> @@ -49,7 +49,7 @@ </div> </div> <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden /> + <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-2"> Elements </label> @@ -83,7 +83,7 @@ </div> </div> <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden /> + <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-3"> Layout </label> @@ -102,7 +102,7 @@ </div> </div> <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden /> + <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-4"> Components </label> @@ -172,7 +172,7 @@ </div> </div> <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden /> + <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-5"> Utilities </label> @@ -206,7 +206,7 @@ </div> </div> <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden /> + <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> @@ -280,9 +280,9 @@ </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> /> +<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> <div class="docs-note"> @@ -291,9 +291,9 @@ </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> /> +<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"> diff --git a/docs/index.html b/docs/index.html index 4eade3f..0859393 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,22 +1,22 @@ <!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>Spectre.css - A lightweight, responsive and modern 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="section section-hero bg-gray"> <div id="overview" class="grid-hero container grid-lg text-center"> <div class="s-brand"> <div 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> </div> </div> diff --git a/docs/layout.html b/docs/layout.html index ed964ef..abc59c7 100644 --- a/docs/layout.html +++ b/docs/layout.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>Layout - 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 /> + <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-1"> Getting started </label> @@ -49,7 +49,7 @@ </div> </div> <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden /> + <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-2"> Elements </label> @@ -83,7 +83,7 @@ </div> </div> <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden checked /> + <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden checked> <label class="accordion-header c-hand" for="docs-accordion-3"> Layout </label> @@ -102,7 +102,7 @@ </div> </div> <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden /> + <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-4"> Components </label> @@ -172,7 +172,7 @@ </div> </div> <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden /> + <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-5"> Utilities </label> @@ -206,7 +206,7 @@ </div> </div> <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden /> + <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> @@ -441,10 +441,10 @@ </div> <div class="columns"> <div class="column col-10 col-lg-8 col-md-6 col-sm-4"> - <div class="bg-gray docs-block">col-10 <br/> col-lg-8 <br/> col-md-6 <br/> col-sm-4</div> + <div class="bg-gray docs-block">col-10 <br> col-lg-8 <br> col-md-6 <br> col-sm-4</div> </div> <div class="column col-2 col-lg-4 col-md-6 col-sm-8"> - <div class="bg-gray docs-block">col-2 <br/> col-lg-4 <br/> col-md-6 <br/> col-sm-8</div> + <div class="bg-gray docs-block">col-2 <br> col-lg-4 <br> col-md-6 <br> col-sm-8</div> </div> </div> @@ -637,7 +637,7 @@ </div> <div class="navbar-section"> <div class="input-group input-inline"> - <input class="form-input" type="text" placeholder="search" /> + <input class="form-input" type="text" placeholder="search"> <button class="btn btn-primary input-group-btn">Search</button> </div> </div> @@ -657,7 +657,7 @@ <<span class="tag">/section</span>> <<span class="tag">section</span> <span class="atn">class</span>=<span class="atv">"navbar-section"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"input-group input-inline"</span>> - <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">placeholder</span>=<span class="atv">"search"</span> /> + <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">placeholder</span>=<span class="atv">"search"</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary input-group-btn"</span>>Search<<span class="tag">/button</span>> <<span class="tag">/div</span>> <<span class="tag">/section</span>> @@ -676,7 +676,7 @@ <a href="#navbar" class="btn btn-link">Examples</a> </div> <div class="navbar-center"> - <img src="img/spectre-logo.svg" alt="Spectre.css" /> + <img src="img/spectre-logo.svg" alt="Spectre.css"> </div> <div class="navbar-section"> <a href="https://twitter.com/spectrecss" class="btn btn-link">Twitter</a> diff --git a/docs/src/docs.scss b/docs/src/docs.scss index 4f4bbb4..2e19e39 100644 --- a/docs/src/docs.scss +++ b/docs/src/docs.scss @@ -1,7 +1,7 @@ /*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */ /* Spectre version */ .version::after { - content: "0.4.0"; + content: "0.4.1"; } // Core variables and mixins @import '../../src/variables'; diff --git a/docs/utilities.html b/docs/utilities.html index 5c45ae6..e2457a2 100644 --- a/docs/utilities.html +++ b/docs/utilities.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>Utilities - 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 /> + <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-1"> Getting started </label> @@ -49,7 +49,7 @@ </div> </div> <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden /> + <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-2"> Elements </label> @@ -83,7 +83,7 @@ </div> </div> <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden /> + <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-3"> Layout </label> @@ -102,7 +102,7 @@ </div> </div> <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden /> + <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-4"> Components </label> @@ -172,7 +172,7 @@ </div> </div> <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden checked /> + <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden checked> <label class="accordion-header c-hand" for="docs-accordion-5"> Utilities </label> @@ -206,7 +206,7 @@ </div> </div> <div class="accordion-item"> - <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden /> + <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> @@ -426,15 +426,15 @@ <form> <div class="form-group"> <label class="form-label" for="input-example-1">Email</label> - <input class="form-input" type="text" id="input-example-1" placeholder="Email" /> + <input class="form-input" type="text" id="input-example-1" placeholder="Email"> </div> <div class="form-group"> <label class="form-label" for="input-example-2">Password</label> - <input class="form-input" type="password" id="input-example-2" placeholder="Password" /> + <input class="form-input" type="password" id="input-example-2" placeholder="Password"> </div> <div class="form-group"> <label class="form-checkbox"> - <input type="checkbox" /> + <input type="checkbox"> <i class="form-icon"></i> Remember me </label> </div> @@ -448,7 +448,7 @@ <form> <div class="form-group"> <label class="form-label" for="input-example-3">Email</label> - <input class="form-input" type="text" id="input-example-3" placeholder="Email" /> + <input class="form-input" type="text" id="input-example-3" placeholder="Email"> </div> <div class="form-group"> <button class="btn btn-primary btn-block">Sign up</button> diff --git a/package.json b/package.json index 257b81a..3982d8b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "spectre.css", - "version": "0.4.0", + "version": "0.4.1", "homepage": "http://picturepan2.github.io/spectre", "author": "Yan Zhu <picturepan2@hotmail.com>", "description": "Spectre.css: a lightweight, responsive and modern CSS framework.", |