Summary Files Commits Branches @commit @diff @stats
path: root / docs / elements.html
diff options
context:
space:
mode:
Commit388fcd4107498400f05ccfe1dde682f6b09c0546 (patch)
Author
 Yan Zhu <picturepan2@hotmail.com>
2017-09-11 09:14:29 -0500
Committer
 GitHub <noreply@github.com>
2017-09-11 09:14:29 -0500
Files4655749d16323dd98ee4d8ae3e000c3237b4f649 /docs/elements.html
Spectre-Dark-Gruvbox-388fcd4107498400f05ccfe1dde682f6b09c0546.tar
Spectre-Dark-Gruvbox-388fcd4107498400f05ccfe1dde682f6b09c0546.tar.gz
Spectre-Dark-Gruvbox-388fcd4107498400f05ccfe1dde682f6b09c0546.zip
Parentc811cb46631e66772a108c393f6ef53a83ca010b (diff)
Parent4f15bc0c787fb87d19e26e665d5e1eadbe89b560 (diff)
Merge pull request #282 from picturepan2/0.4.1 v0.4.1
0.4.1
1 files changed, 142 insertions, 136 deletions
-rw-r--r--docs/elements.html278
diff --git a/docs/elements.html b/docs/elements.html
index 283174f..97ec58e 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 />
+ <div class="accordion-container">
+ <div class="accordion">
+ <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>
@@ -48,8 +48,8 @@
</ul>
</div>
</div>
- <div class="accordion-item">
- <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden checked />
+ <div class="accordion">
+ <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>
@@ -82,8 +82,8 @@
</ul>
</div>
</div>
- <div class="accordion-item">
- <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden />
+ <div class="accordion">
+ <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden>
<label class="accordion-header c-hand" for="docs-accordion-3">
Layout
</label>
@@ -101,8 +101,8 @@
</ul>
</div>
</div>
- <div class="accordion-item">
- <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden />
+ <div class="accordion">
+ <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden>
<label class="accordion-header c-hand" for="docs-accordion-4">
Components
</label>
@@ -171,8 +171,8 @@
</ul>
</div>
</div>
- <div class="accordion-item">
- <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden />
+ <div class="accordion">
+ <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden>
<label class="accordion-header c-hand" for="docs-accordion-5">
Utilities
</label>
@@ -205,8 +205,8 @@
</ul>
</div>
</div>
- <div class="accordion-item">
- <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden />
+ <div class="accordion">
+ <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden>
<label class="accordion-header c-hand" for="docs-accordion-6">
Experimentals
</label>
@@ -251,7 +251,7 @@
<a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a>
</div>
<a href="index.html" class="s-logo">
- <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" />
+ <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework">
</a>
<div class="float-btn">
<a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a>
@@ -286,7 +286,7 @@
</div>
</div>
-<!-- headings example -->
+<!-- headings -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">h1</span>&gt;H1 Heading&lt;<span class="tag">/h1</span>&gt;
&lt;<span class="tag">h1</span>&gt;H1 Heading &lt;<span class="tag">small</span> <span class="atn">class</span>=<span class="atv">&quot;label&quot;</span>&gt;40px&lt;<span class="tag">/small</span>&gt;&lt;<span class="tag">/h1</span>&gt;
&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;h1&quot;</span>&gt;H1 Heading&lt;<span class="tag">/span</span>&gt;
@@ -298,7 +298,7 @@
<p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p>
</div>
-<!-- paragraphs example -->
+<!-- paragraphs -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">p</span>&gt;Lorem ipsum dolor sit amet, ...&lt;<span class="tag">/p</span>&gt;
&lt;<span class="tag">p</span>&gt;...&lt;<span class="tag">/p</span>&gt;
</code></pre>
@@ -307,78 +307,78 @@
<div class="columns">
<div class="column col-6 col-xs-12">
<abbr title="Internationalization">I18N</abbr>
- <code class="ml-10">&lt;abbr&gt;</code>
+ <code class="ml-2">&lt;abbr&gt;</code>
</div>
<div class="column col-6 col-xs-12">
<strong>Bold</strong>
- <code class="ml-10">&lt;strong&gt;</code> <code>&lt;b&gt;</code>
+ <code class="ml-2">&lt;strong&gt;</code> <code>&lt;b&gt;</code>
</div>
<div class="column col-6 col-xs-12">
<cite>Citation</cite>
- <code class="ml-10">&lt;cite&gt;</code>
+ <code class="ml-2">&lt;cite&gt;</code>
</div>
<div class="column col-6 col-xs-12">
<code>Hello World!</code>
- <code class="ml-10">&lt;code&gt;</code>
+ <code class="ml-2">&lt;code&gt;</code>
</div>
<div class="column col-6 col-xs-12">
<del>Deleted</del>
- <code class="ml-10">&lt;del&gt;</code>
+ <code class="ml-2">&lt;del&gt;</code>
</div>
<div class="column col-6 col-xs-12">
<em>Emphasis</em>
- <code class="ml-10">&lt;em&gt;</code>
+ <code class="ml-2">&lt;em&gt;</code>
</div>
<div class="column col-6 col-xs-12">
<i>Italic</i>
- <code class="ml-10">&lt;i&gt;</code>
+ <code class="ml-2">&lt;i&gt;</code>
</div>
<div class="column col-6 col-xs-12">
<ins>Inserted</ins>
- <code class="ml-10">&lt;ins&gt;</code>
+ <code class="ml-2">&lt;ins&gt;</code>
</div>
<div class="column col-6 col-xs-12">
<kbd>Ctrl + S</kbd>
- <code class="ml-10">&lt;kbd&gt;</code>
+ <code class="ml-2">&lt;kbd&gt;</code>
</div>
<div class="column col-6 col-xs-12">
<mark>Highlighted</mark>
- <code class="ml-10">&lt;mark&gt;</code>
+ <code class="ml-2">&lt;mark&gt;</code>
</div>
<div class="column col-6 col-xs-12">
<ruby>
漢 <rt>kan</rt>
字 <rt>ji</rt>
</ruby>
- <code class="ml-10">&lt;ruby&gt;</code>
+ <code class="ml-2">&lt;ruby&gt;</code>
</div>
<div class="column col-6 col-xs-12">
<s>Strikethrough</s>
- <code class="ml-10">&lt;s&gt;</code>
+ <code class="ml-2">&lt;s&gt;</code>
</div>
<div class="column col-6 col-xs-12">
<samp>Sample</samp>
- <code class="ml-10">&lt;samp&gt;</code>
+ <code class="ml-2">&lt;samp&gt;</code>
</div>
<div class="column col-6 col-xs-12">
Text <sub>Subscripted</sub>
- <code class="ml-10">&lt;sub&gt;</code>
+ <code class="ml-2">&lt;sub&gt;</code>
</div>
<div class="column col-6 col-xs-12">
Text <sup>Superscripted</sup>
- <code class="ml-10">&lt;sup&gt;</code>
+ <code class="ml-2">&lt;sup&gt;</code>
</div>
<div class="column col-6 col-xs-12">
<time>20:00</time>
- <code class="ml-10">&lt;time&gt;</code>
+ <code class="ml-2">&lt;time&gt;</code>
</div>
<div class="column col-6 col-xs-12">
<u>Underline</u>
- <code class="ml-10">&lt;u&gt;</code>
+ <code class="ml-2">&lt;u&gt;</code>
</div>
<div class="column col-6 col-xs-12">
<var>x</var> = <var>y</var> + 2
- <code class="ml-10">&lt;var&gt;</code>
+ <code class="ml-2">&lt;var&gt;</code>
</div>
</div>
@@ -398,7 +398,7 @@
<p>Use the <code>lang</code> attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support. </p>
</div>
-<!-- east asian example -->
+<!-- east asian -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">p</span> <span class="atn">lang</span>=<span class="atv">&quot;zh-Hans&quot;</span>&gt;革命不是请客吃饭,不是做文章……&lt;<span class="tag">/p</span>&gt;
&lt;<span class="tag">p</span> <span class="atn">lang</span>=<span class="atv">&quot;ja&quot;</span>&gt;祇園精舎の鐘の声、諸行無常の響きあり……&lt;<span class="tag">/p</span>&gt;
&lt;<span class="tag">p</span> <span class="atn">lang</span>=<span class="atv">&quot;ko&quot;</span>&gt;나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……&lt;<span class="tag">/p</span>&gt;
@@ -412,7 +412,7 @@
<p lang="ja"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。</p>
</div>
-<!-- east asian example -->
+<!-- east asian -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;cjk&quot;</span>&gt;&lt;<span class="tag">u</span>&gt;祇園&lt;<span class="tag">/u</span>&gt;&lt;<span class="tag">u</span>&gt;精舎&lt;<span class="tag">/u</span>&gt;の鐘の声、諸行無常の響きあり。……&lt;<span class="tag">/p</span>&gt;
&lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;cjk&quot;</span>&gt;&lt;<span class="tag">del</span>&gt;祇園&lt;<span class="tag">/del</span>&gt;&lt;<span class="tag">del</span>&gt;精舎&lt;<span class="tag">/del</span>&gt;の鐘の声、諸行無常の響きあり。……&lt;<span class="tag">/p</span>&gt;
</code></pre>
@@ -442,7 +442,7 @@
<cite>- Bill Gates</cite>
</blockquote>
-<!-- blockquote example -->
+<!-- blockquote -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">blockquote</span>&gt;
&lt;<span class="tag">p</span>&gt;The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. &lt;<span class="tag">/p</span>&gt;
&lt;<span class="tag">cite</span>&gt;- Bill Gates&lt;<span class="tag">/cite</span>&gt;
@@ -489,7 +489,7 @@
</div>
</div>
-<!-- lists example -->
+<!-- lists -->
<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- unordered list --&gt;</span>
&lt;<span class="tag">ul</span>&gt;
&lt;<span class="tag">li</span>&gt;list item 1&lt;<span class="tag">/li</span>&gt;
@@ -553,7 +553,7 @@
<p>Use the <code>active</code> class to make &lt;tr&gt; element highlighted. </p>
</div>
-<!-- tables example -->
+<!-- tables -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">table</span> <span class="atn">class</span>=<span class="atv">&quot;table table-striped table-hover&quot;</span>&gt;
&lt;<span class="tag">thead</span>&gt;
&lt;<span class="tag">tr</span>&gt;
@@ -591,7 +591,7 @@
<p>Add the <code>btn</code> class to &lt;a&gt;, &lt;input&gt; or &lt;button&gt; elements for a default button. There are classes <code>btn-primary</code> and <code>btn-link</code> for predefined primary and link buttons. </p>
</div>
-<!-- buttons example -->
+<!-- buttons -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;default button&lt;<span class="tag">/button</span>&gt;
&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary&quot;</span>&gt;primary button&lt;<span class="tag">/button</span>&gt;
&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-link&quot;</span>&gt;link button&lt;<span class="tag">/button</span>&gt;
@@ -616,7 +616,7 @@
<p>Add the <code>btn-sm</code> or <code>btn-lg</code> class for small or large button size. Also, you can add the <code>btn-block</code> class for a full-width button. </p>
</div>
-<!-- buttons example -->
+<!-- buttons -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-lg&quot;</span>&gt;large button&lt;<span class="tag">/button</span>&gt;
&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-sm&quot;</span>&gt;small button&lt;<span class="tag">/button</span>&gt;
@@ -644,7 +644,7 @@
</div>
</div>
-<!-- buttons example -->
+<!-- buttons -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-action&quot;</span>&gt;&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-left&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;&lt;<span class="tag">/button</span>&gt;
&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-action circle&quot;</span>&gt;&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-left&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;&lt;<span class="tag">/button</span>&gt;
</code></pre>
@@ -663,7 +663,7 @@
</div>
</div>
-<!-- buttons example -->
+<!-- buttons -->
<pre class="code" data-lang="HTML"><code>
<span class="com">&lt;!-- buttons with disabled state --&gt;</span>
&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn disabled&quot;</span> <span class="atn">tabindex</span>=<span class="atv">&quot;-1&quot;</span>&gt;disabled button&lt;<span class="tag">/button</span>&gt;
@@ -682,7 +682,7 @@
</div>
</div>
-<!-- buttons example -->
+<!-- buttons -->
<pre class="code" data-lang="HTML"><code>
<span class="com">&lt;!-- buttons with disabled state --&gt;</span>
&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn disabled&quot;</span> <span class="atn">tabindex</span>=<span class="atv">&quot;-1&quot;</span>&gt;disabled button&lt;<span class="tag">/button</span>&gt;
@@ -701,7 +701,7 @@
</div>
</div>
-<!-- buttons example -->
+<!-- buttons -->
<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- a button with loading state --&gt;</span>
&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn loading&quot;</span>&gt;button&lt;<span class="tag">/button</span>&gt;
</code></pre>
@@ -743,7 +743,7 @@
<p>If you want to use buttons as a group, add the <code>btn-group</code> class to the container. You can add the <code>btn-group-block</code> class for a full-width button group.</p>
</div>
-<!-- button groups example -->
+<!-- button groups -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;btn-group btn-group-block&quot;</span>&gt;
&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;first button&lt;<span class="tag">/button</span>&gt;
&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;second button&lt;<span class="tag">/button</span>&gt;
@@ -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">&lt;!-- form input control --&gt;</span>
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
&lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-label&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;input-example-1&quot;</span>&gt;Name&lt;<span class="tag">/label</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;input-example-1&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;Name&quot;</span> /&gt;
+ &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;input-example-1&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;Name&quot;</span>&gt;
&lt;<span class="tag">/div</span>&gt;
</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 @@
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
&lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-label&quot;</span>&gt;Gender&lt;<span class="tag">/label</span>&gt;
&lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-radio&quot;</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;radio&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;gender&quot;</span> <span class="atn">checked</span> /&gt;
+ &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;radio&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;gender&quot;</span> <span class="atn">checked</span>&gt;
&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;form-icon&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Male
&lt;<span class="tag">/label</span>&gt;
&lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-radio&quot;</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;radio&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;gender&quot;</span> /&gt;
+ &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;radio&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;gender&quot;</span>&gt;
&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;form-icon&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Female
&lt;<span class="tag">/label</span>&gt;
&lt;<span class="tag">/div</span>&gt;
@@ -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">&lt;!-- form switch control --&gt;</span>
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
&lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-switch&quot;</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;checkbox&quot;</span> /&gt;
+ &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;checkbox&quot;</span>&gt;
&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;form-icon&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Send me emails with news and tips
&lt;<span class="tag">/label</span>&gt;
&lt;<span class="tag">/div</span>&gt;
@@ -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">&lt;!-- form checkbox control --&gt;</span>
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
&lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-checkbox&quot;</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;checkbox&quot;</span> /&gt;
+ &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;checkbox&quot;</span>&gt;
&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;form-icon&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Remember me
&lt;<span class="tag">/label</span>&gt;
&lt;<span class="tag">/div</span>&gt;
@@ -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>
@@ -1001,14 +1001,14 @@
</div>
</div>
-<!-- forms example -->
+<!-- forms -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">form</span> <span class="atn">class</span>=<span class="atv">&quot;form-horizontal&quot;</span>&gt;
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;col-3&quot;</span>&gt;
&lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-label&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;input-example-1&quot;</span>&gt;Name&lt;<span class="tag">/label</span>&gt;
&lt;<span class="tag">/div</span>&gt;
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;col-9&quot;</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;input-example-1&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;Name&quot;</span> /&gt;
+ &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;input-example-1&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;Name&quot;</span>&gt;
&lt;<span class="tag">/div</span>&gt;
&lt;<span class="tag">/div</span>&gt;
<span class="com">&lt;!-- form structure --&gt;</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,28 +1080,28 @@
<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>
</div>
-<!-- form icons example -->
+<!-- form icons -->
<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- form input with Spectre icon --&gt;</span>
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;has-icon-left&quot;</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;...&quot;</span> /&gt;
+ &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;...&quot;</span>&gt;
&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;form-icon icon icon-check&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
&lt;<span class="tag">/div</span>&gt;
</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">&lt;!-- form input with loading icon --&gt;</span>
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;has-icon-right&quot;</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;...&quot;</span> /&gt;
+ &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;...&quot;</span>&gt;
&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;form-icon loading&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
&lt;<span class="tag">/div</span>&gt;
</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>
@@ -1280,23 +1280,23 @@
<p>If you want to attach text and button along with an input, add the <code>input-group</code> class to the input container. And add the <code>input-group-addon</code> class to the text element and <code>input-group-btn</code> to the button element.</p>
</div>
-<!-- input groups example -->
+<!-- input groups -->
<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- normal input group --&gt;</span>
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;input-group&quot;</span>&gt;
&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;input-group-addon&quot;</span>&gt;...&lt;<span class="tag">/span</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;...&quot;</span> /&gt;
+ &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;...&quot;</span>&gt;
&lt;<span class="tag">/div</span>&gt;
<span class="com">&lt;!-- large input group --&gt;</span>
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;input-group&quot;</span>&gt;
&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;input-group-addon addon-lg&quot;</span>&gt;...&lt;<span class="tag">/span</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;form-input input-lg&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;...&quot;</span> /&gt;
+ &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;form-input input-lg&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;...&quot;</span>&gt;
&lt;<span class="tag">/div</span>&gt;
<span class="com">&lt;!-- normal input group with button --&gt;</span>
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;input-group&quot;</span>&gt;
&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;input-group-addon&quot;</span>&gt;...&lt;<span class="tag">/span</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;...&quot;</span> /&gt;
+ &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;...&quot;</span>&gt;
&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary input-group-btn&quot;</span>&gt;Submit&lt;<span class="tag">/button</span>&gt;
&lt;<span class="tag">/div</span>&gt;
</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>
@@ -1374,26 +1374,26 @@
</div>
</div>
-<!-- forms example -->
+<!-- forms -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">form</span>&gt;
<span class="com">&lt;!-- form validation class: has-success --&gt;</span>
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group has-success&quot;</span>&gt;
&lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-label&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;input-example-1&quot;</span>&gt;Name&lt;<span class="tag">/label</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;input-example-1&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;...&quot;</span> /&gt;
+ &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;input-example-1&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;...&quot;</span>&gt;
&lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;form-input-hint&quot;</span>&gt;The name is invalid.&lt;<span class="tag">/p</span>&gt;
&lt;<span class="tag">/div</span>&gt;
<span class="com">&lt;!-- form validation class: is-success --&gt;</span>
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
&lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-label&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;input-example-1&quot;</span>&gt;Name&lt;<span class="tag">/label</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input is-success&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;input-example-1&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;...&quot;</span> /&gt;
+ &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input is-success&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;input-example-1&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;...&quot;</span>&gt;
&lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;form-input-hint&quot;</span>&gt;The name is invalid.&lt;<span class="tag">/p</span>&gt;
&lt;<span class="tag">/div</span>&gt;
<span class="com">&lt;!-- form validation example for checkbox, radio and switch --&gt;</span>
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
&lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-checkbox is-error&quot;</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;checkbox&quot;</span> /&gt;
+ &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;checkbox&quot;</span>&gt;
&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;form-icon&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Remember me
&lt;<span class="tag">/label</span>&gt;
&lt;<span class="tag">/div</span>&gt;
@@ -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>
@@ -1696,7 +1696,7 @@
</div>
</div>
-<!-- icons example -->
+<!-- icons -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-menu&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
</code></pre>
@@ -1734,7 +1734,7 @@
<p>Add the <code>label-rounded</code> class to have rounded labels.</p>
</div>
-<!-- labels example -->
+<!-- labels -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;label&quot;</span>&gt;default label&lt;<span class="tag">/span</span>&gt;
&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;label label-primary&quot;</span>&gt;primary label&lt;<span class="tag">/span</span>&gt;
</code></pre>
@@ -1754,7 +1754,7 @@
&lt;<span class="tag">/button</span>&gt;
</code></pre>
-<!-- codes example -->
+<!-- codes -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">pre</span> <span class="atn">class</span>=<span class="atv">&quot;code&quot;</span> <span class="atn">data-lang</span>=<span class="atv">&quot;HTML&quot;</span>&gt;&lt;<span class="tag">code</span>&gt;&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;com&quot;</span>&gt;&amp;lt;!-- code snippets --&amp;gt;&lt;<span class="tag">/span</span>&gt;
&amp;lt;&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;tag&quot;</span>&gt;button&lt;<span class="tag">/span</span>&gt; &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;atn&quot;</span>&gt;class&lt;<span class="tag">/span</span>&gt;=&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;atv&quot;</span>&gt;&amp;quot;btn&amp;quot;&lt;<span class="tag">/span</span>&gt;&amp;gt;
Submit
@@ -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>&lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/osx-el-capitan.jpg&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;img-responsive ...&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;...&quot;</span> /&gt;
-&lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/osx-el-capitan.jpg&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;img-fit-contain ...&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;...&quot;</span> /&gt;
-&lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/osx-el-capitan.jpg&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;img-fit-cover ...&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;...&quot;</span> /&gt;
+<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/osx-el-capitan.jpg&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;img-responsive ...&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;...&quot;</span>&gt;
+&lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/osx-el-capitan.jpg&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;img-fit-contain ...&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;...&quot;</span>&gt;
+&lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/osx-el-capitan.jpg&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;img-fit-cover ...&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;...&quot;</span>&gt;
</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>&lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;figure&quot;</span>&gt;
- &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/osx-yosemite-2.jpg&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;img-responsive ...&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;...&quot;</span> /&gt;
+ &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/osx-yosemite-2.jpg&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;img-responsive ...&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;...&quot;</span>&gt;
&lt;<span class="tag">figcaption</span> <span class="atn">class</span>=<span class="atv">&quot;figure-caption text-center&quot;</span>&gt;macOS Yosemite wallpaper&lt;<span class="tag">/figcaption</span>&gt;
&lt;<span class="tag">/figure</span>&gt;
</code></pre>
@@ -1832,10 +1832,16 @@
</div>
</div>
-<!-- media example -->
+ <div class="docs-note">
+ <p>For responsive <code>video</code> elements, you can add the <code>video-responsive</code> class directly to the <code>video</code>.</p>
+ </div>
+
+<!-- media -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;video-responsive video-responsive-4-3&quot;</span>&gt;
&lt;<span class="tag">iframe</span> <span class="atn">src</span>=<span class="atv">&quot;...&quot;</span> <span class="atn">width</span>=<span class="atv">&quot;...&quot;</span> <span class="atn">height</span>=<span class="atv">&quot;...&quot;</span> <span class="atn">frameborder</span>=<span class="atv">&quot;0&quot;</span> <span class="atn">allowfullscreen</span>&gt;&lt;<span class="tag">/iframe</span>&gt;
&lt;<span class="tag">/div</span>&gt;
+
+&lt;<span class="tag">video</span> <span class="atn">class</span>=<span class="atv">&quot;video-responsive&quot;</span> <span class="atn">src</span>=<span class="atv">&quot;...&quot;</span>&gt;...&lt;<span class="tag">/video</span>&gt;
</code></pre>
</div>