diff options
Diffstat (limited to 'docs/elements.html')
| -rw-r--r-- | docs/elements.html | 178 |
1 files changed, 89 insertions, 89 deletions
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> |