mirror of
https://github.com/jdan/98.css.git
synced 2025-08-25 23:06:23 +02:00
Jordan Scales
GitHub
824
docs/index.html
824
docs/index.html
@@ -127,12 +127,12 @@
|
|||||||
They are given 12px of horizontal padding by default.
|
They are given 12px of horizontal padding by default.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="example">
|
<div class="example">
|
||||||
<button>Click me</button>
|
<button>Click me</button>
|
||||||
<details>
|
<details>
|
||||||
<summary>Show code</summary>
|
<summary>Show code</summary>
|
||||||
<pre><code><span class="hljs-tag"><<span class="hljs-name">button</span>></span>Click me<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
|
<pre><code><span class="hljs-tag"><<span class="hljs-name">button</span>></span>Click me<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
|
||||||
</details>
|
</details>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
@@ -141,12 +141,12 @@
|
|||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
|
||||||
<div class="example">
|
<div class="example">
|
||||||
<button class="active">I am being pressed</button>
|
<button class="active">I am being pressed</button>
|
||||||
<details>
|
<details>
|
||||||
<summary>Show code</summary>
|
<summary>Show code</summary>
|
||||||
<pre><code><span class="hljs-tag"><<span class="hljs-name">button</span>></span>I am being pressed<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
|
<pre><code><span class="hljs-tag"><<span class="hljs-name">button</span>></span>I am being pressed<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
|
||||||
</details>
|
</details>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
@@ -154,12 +154,12 @@
|
|||||||
appearance in their label.
|
appearance in their label.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="example">
|
<div class="example">
|
||||||
<button disabled>I cannot be clicked</button>
|
<button disabled>I cannot be clicked</button>
|
||||||
<details>
|
<details>
|
||||||
<summary>Show code</summary>
|
<summary>Show code</summary>
|
||||||
<pre><code><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">disabled</span>></span>I cannot be clicked<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
|
<pre><code><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">disabled</span>></span>I cannot be clicked<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
|
||||||
</details>
|
</details>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
@@ -167,12 +167,12 @@
|
|||||||
The following example is simulated to be focused.
|
The following example is simulated to be focused.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="example">
|
<div class="example">
|
||||||
<button class="focused">I am focused</button>
|
<button class="focused">I am focused</button>
|
||||||
<details>
|
<details>
|
||||||
<summary>Show code</summary>
|
<summary>Show code</summary>
|
||||||
<pre><code><span class="hljs-tag"><<span class="hljs-name">button</span>></span>I am focused<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
|
<pre><code><span class="hljs-tag"><<span class="hljs-name">button</span>></span>I am focused<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
|
||||||
</details>
|
</details>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -198,14 +198,14 @@
|
|||||||
being able to click the entire label to select the box).
|
being able to click the entire label to select the box).
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="example">
|
<div class="example">
|
||||||
<input type="checkbox" id="example1">
|
<input type="checkbox" id="example1">
|
||||||
<label for="example1">This is a checkbox</label>
|
<label for="example1">This is a checkbox</label>
|
||||||
<details>
|
<details>
|
||||||
<summary>Show code</summary>
|
<summary>Show code</summary>
|
||||||
<pre><code><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example1"</span>></span>
|
<pre><code><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example1"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"example1"</span>></span>This is a checkbox<span class="hljs-tag"></<span class="hljs-name">label</span>></span></code></pre>
|
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"example1"</span>></span>This is a checkbox<span class="hljs-tag"></<span class="hljs-name">label</span>></span></code></pre>
|
||||||
</details>
|
</details>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
@@ -218,34 +218,34 @@
|
|||||||
a consistent spacing between inputs.
|
a consistent spacing between inputs.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="example">
|
<div class="example">
|
||||||
<div class="field-row">
|
<div class="field-row">
|
||||||
<input checked type="checkbox" id="example2">
|
<input checked type="checkbox" id="example2">
|
||||||
<label for="example2">I am checked</label>
|
<label for="example2">I am checked</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="field-row">
|
<div class="field-row">
|
||||||
<input disabled type="checkbox" id="example3">
|
<input disabled type="checkbox" id="example3">
|
||||||
<label for="example3">I am inactive</label>
|
<label for="example3">I am inactive</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="field-row">
|
<div class="field-row">
|
||||||
<input checked disabled type="checkbox" id="example4">
|
<input checked disabled type="checkbox" id="example4">
|
||||||
<label for="example4">I am inactive but still checked</label>
|
<label for="example4">I am inactive but still checked</label>
|
||||||
</div>
|
</div>
|
||||||
<details>
|
<details>
|
||||||
<summary>Show code</summary>
|
<summary>Show code</summary>
|
||||||
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">checked</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example2"</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">checked</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example2"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"example2"</span>></span>I am checked<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"example2"</span>></span>I am checked<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example3"</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example3"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"example3"</span>></span>I am inactive<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"example3"</span>></span>I am inactive<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">checked</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example4"</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">checked</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example4"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"example4"</span>></span>I am inactive but still checked<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"example4"</span>></span>I am inactive but still checked<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
||||||
</details>
|
</details>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -271,26 +271,26 @@
|
|||||||
<code>field-row</code> class to ensure a consistent spacing between inputs.
|
<code>field-row</code> class to ensure a consistent spacing between inputs.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="example">
|
<div class="example">
|
||||||
<div class="field-row">
|
<div class="field-row">
|
||||||
<input id="radio5" type="radio" name="first-example">
|
<input id="radio5" type="radio" name="first-example">
|
||||||
<label for="radio5">Yes</label>
|
<label for="radio5">Yes</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="field-row">
|
<div class="field-row">
|
||||||
<input id="radio6" type="radio" name="first-example">
|
<input id="radio6" type="radio" name="first-example">
|
||||||
<label for="radio6">No</label>
|
<label for="radio6">No</label>
|
||||||
</div>
|
</div>
|
||||||
<details>
|
<details>
|
||||||
<summary>Show code</summary>
|
<summary>Show code</summary>
|
||||||
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio5"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"first-example"</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio5"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"first-example"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio5"</span>></span>Yes<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio5"</span>></span>Yes<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio6"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"first-example"</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio6"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"first-example"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio6"</span>></span>No<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio6"</span>></span>No<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
||||||
</details>
|
</details>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
@@ -298,34 +298,34 @@
|
|||||||
HTML attributes.
|
HTML attributes.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="example">
|
<div class="example">
|
||||||
<div class="field-row">
|
<div class="field-row">
|
||||||
<input id="radio7" type="radio" name="second-example">
|
<input id="radio7" type="radio" name="second-example">
|
||||||
<label for="radio7">Peanut butter should be smooth</label>
|
<label for="radio7">Peanut butter should be smooth</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="field-row">
|
<div class="field-row">
|
||||||
<input checked disabled id="radio8" type="radio" name="second-example">
|
<input checked disabled id="radio8" type="radio" name="second-example">
|
||||||
<label for="radio8">I understand why people like crunchy peanut butter</label>
|
<label for="radio8">I understand why people like crunchy peanut butter</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="field-row">
|
<div class="field-row">
|
||||||
<input disabled id="radio9" type="radio" name="second-example">
|
<input disabled id="radio9" type="radio" name="second-example">
|
||||||
<label for="radio9">Crunchy peanut butter is good</label>
|
<label for="radio9">Crunchy peanut butter is good</label>
|
||||||
</div>
|
</div>
|
||||||
<details>
|
<details>
|
||||||
<summary>Show code</summary>
|
<summary>Show code</summary>
|
||||||
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio7"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"second-example"</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio7"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"second-example"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio7"</span>></span>Peanut butter should be smooth<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio7"</span>></span>Peanut butter should be smooth<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">checked</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio8"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"second-example"</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">checked</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio8"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"second-example"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio8"</span>></span>I understand why people like crunchy peanut butter<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio8"</span>></span>I understand why people like crunchy peanut butter<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio9"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"second-example"</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio9"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"second-example"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio9"</span>></span>Crunchy peanut butter is good<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio9"</span>></span>Crunchy peanut butter is good<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
||||||
</details>
|
</details>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -347,40 +347,40 @@
|
|||||||
around your controls.
|
around your controls.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="example">
|
<div class="example">
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<div class="field-row">Select one:</div>
|
<div class="field-row">Select one:</div>
|
||||||
<div class="field-row">
|
<div class="field-row">
|
||||||
<input id="radio10" type="radio" name="fieldset-example">
|
<input id="radio10" type="radio" name="fieldset-example">
|
||||||
<label for="radio10">Diners</label>
|
<label for="radio10">Diners</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="field-row">
|
<div class="field-row">
|
||||||
<input id="radio11" type="radio" name="fieldset-example">
|
<input id="radio11" type="radio" name="fieldset-example">
|
||||||
<label for="radio11">Drive-Ins</label>
|
<label for="radio11">Drive-Ins</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="field-row">
|
<div class="field-row">
|
||||||
<input id="radio12" type="radio" name="fieldset-example">
|
<input id="radio12" type="radio" name="fieldset-example">
|
||||||
<label for="radio12">Dives</label>
|
<label for="radio12">Dives</label>
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<details>
|
<details>
|
||||||
<summary>Show code</summary>
|
<summary>Show code</summary>
|
||||||
<pre><code><span class="hljs-tag"><<span class="hljs-name">fieldset</span>></span>
|
<pre><code><span class="hljs-tag"><<span class="hljs-name">fieldset</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>Select one:<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>Select one:<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio10"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fieldset-example"</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio10"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fieldset-example"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio10"</span>></span>Diners<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio10"</span>></span>Diners<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio11"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fieldset-example"</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio11"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fieldset-example"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio11"</span>></span>Drive-Ins<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio11"</span>></span>Drive-Ins<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio12"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fieldset-example"</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio12"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fieldset-example"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio12"</span>></span>Dives<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio12"</span>></span>Dives<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span></code></pre>
|
<span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span></code></pre>
|
||||||
</details>
|
</details>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
@@ -388,48 +388,48 @@
|
|||||||
within the <code>fieldset</code>.
|
within the <code>fieldset</code>.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="example">
|
<div class="example">
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend>Today's mood</legend>
|
<legend>Today's mood</legend>
|
||||||
<div class="field-row">
|
<div class="field-row">
|
||||||
<input id="radio13" type="radio" name="fieldset-example2">
|
<input id="radio13" type="radio" name="fieldset-example2">
|
||||||
<label for="radio13">Claire Saffitz</label>
|
<label for="radio13">Claire Saffitz</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="field-row">
|
<div class="field-row">
|
||||||
<input id="radio14" type="radio" name="fieldset-example2">
|
<input id="radio14" type="radio" name="fieldset-example2">
|
||||||
<label for="radio14">Brad Leone</label>
|
<label for="radio14">Brad Leone</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="field-row">
|
<div class="field-row">
|
||||||
<input id="radio15" type="radio" name="fieldset-example2">
|
<input id="radio15" type="radio" name="fieldset-example2">
|
||||||
<label for="radio15">Chris Morocco</label>
|
<label for="radio15">Chris Morocco</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="field-row">
|
<div class="field-row">
|
||||||
<input id="radio16" type="radio" name="fieldset-example2">
|
<input id="radio16" type="radio" name="fieldset-example2">
|
||||||
<label for="radio16">Carla Lalli Music</label>
|
<label for="radio16">Carla Lalli Music</label>
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<details>
|
<details>
|
||||||
<summary>Show code</summary>
|
<summary>Show code</summary>
|
||||||
<pre><code><span class="hljs-tag"><<span class="hljs-name">fieldset</span>></span>
|
<pre><code><span class="hljs-tag"><<span class="hljs-name">fieldset</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">legend</span>></span>Today's mood<span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">legend</span>></span>Today's mood<span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio13"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fieldset-example2"</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio13"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fieldset-example2"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio13"</span>></span>Claire Saffitz<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio13"</span>></span>Claire Saffitz<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio14"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fieldset-example2"</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio14"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fieldset-example2"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio14"</span>></span>Brad Leone<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio14"</span>></span>Brad Leone<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio15"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fieldset-example2"</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio15"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fieldset-example2"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio15"</span>></span>Chris Morocco<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio15"</span>></span>Chris Morocco<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio16"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fieldset-example2"</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio16"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fieldset-example2"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio16"</span>></span>Carla Lalli Music<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio16"</span>></span>Carla Lalli Music<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span></code></pre>
|
<span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span></code></pre>
|
||||||
</details>
|
</details>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -452,18 +452,18 @@
|
|||||||
attribute, and wrap both in a container with the <code>field-row</code> class.
|
attribute, and wrap both in a container with the <code>field-row</code> class.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="example">
|
<div class="example">
|
||||||
<div class="field-row">
|
<div class="field-row">
|
||||||
<label for="text17">Occuptation</label>
|
<label for="text17">Occupation</label>
|
||||||
<input id="text17" type="text" />
|
<input id="text17" type="text" />
|
||||||
</div>
|
</div>
|
||||||
<details>
|
<details>
|
||||||
<summary>Show code</summary>
|
<summary>Show code</summary>
|
||||||
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"text17"</span>></span>Occuptation<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"text17"</span>></span>Occuptation<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"text17"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> /></span>
|
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"text17"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> /></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
||||||
</details>
|
</details>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
@@ -471,26 +471,26 @@
|
|||||||
to position your label above the input instead of beside it.
|
to position your label above the input instead of beside it.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="example">
|
<div class="example">
|
||||||
<div class="field-row-stacked" style="width: 200px">
|
<div class="field-row-stacked" style="width: 200px">
|
||||||
<label for="text18">Address (Line 1)</label>
|
<label for="text18">Address (Line 1)</label>
|
||||||
<input id="text18" type="text" />
|
<input id="text18" type="text" />
|
||||||
</div>
|
</div>
|
||||||
<div class="field-row-stacked" style="width: 200px">
|
<div class="field-row-stacked" style="width: 200px">
|
||||||
<label for="text19">Address (Line 2)</label>
|
<label for="text19">Address (Line 2)</label>
|
||||||
<input id="text19" type="text" />
|
<input id="text19" type="text" />
|
||||||
</div>
|
</div>
|
||||||
<details>
|
<details>
|
||||||
<summary>Show code</summary>
|
<summary>Show code</summary>
|
||||||
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row-stacked"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 200px"</span>></span>
|
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row-stacked"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 200px"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"text18"</span>></span>Address (Line 1)<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"text18"</span>></span>Address (Line 1)<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"text18"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> /></span>
|
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"text18"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> /></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row-stacked"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 200px"</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row-stacked"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 200px"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"text19"</span>></span>Address (Line 2)<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"text19"</span>></span>Address (Line 2)<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"text19"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> /></span>
|
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"text19"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> /></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
||||||
</details>
|
</details>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
@@ -498,18 +498,18 @@
|
|||||||
element instead.
|
element instead.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="example">
|
<div class="example">
|
||||||
<div class="field-row-stacked" style="width: 200px">
|
<div class="field-row-stacked" style="width: 200px">
|
||||||
<label for="text20">Additional notes</label>
|
<label for="text20">Additional notes</label>
|
||||||
<textarea id="text20" rows="8"></textarea>
|
<textarea id="text20" rows="8"></textarea>
|
||||||
</div>
|
</div>
|
||||||
<details>
|
<details>
|
||||||
<summary>Show code</summary>
|
<summary>Show code</summary>
|
||||||
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row-stacked"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 200px"</span>></span>
|
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row-stacked"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 200px"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"text20"</span>></span>Additional notes<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"text20"</span>></span>Additional notes<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"text20"</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"8"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"text20"</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"8"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
||||||
</details>
|
</details>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -533,24 +533,24 @@
|
|||||||
elements.
|
elements.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="example">
|
<div class="example">
|
||||||
<select>
|
<select>
|
||||||
<option>5 - Incredible!</option>
|
<option>5 - Incredible!</option>
|
||||||
<option>4 - Great!</option>
|
<option>4 - Great!</option>
|
||||||
<option>3 - Pretty good</option>
|
<option>3 - Pretty good</option>
|
||||||
<option>2 - Not so great</option>
|
<option>2 - Not so great</option>
|
||||||
<option>1 - Unfortunate</option>
|
<option>1 - Unfortunate</option>
|
||||||
</select>
|
</select>
|
||||||
<details>
|
<details>
|
||||||
<summary>Show code</summary>
|
<summary>Show code</summary>
|
||||||
<pre><code><span class="hljs-tag"><<span class="hljs-name">select</span>></span>
|
<pre><code><span class="hljs-tag"><<span class="hljs-name">select</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>5 - Incredible!<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>5 - Incredible!<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>4 - Great!<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>4 - Great!<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>3 - Pretty good<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>3 - Pretty good<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>2 - Not so great<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>2 - Not so great<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>1 - Unfortunate<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>1 - Unfortunate<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">select</span>></span></code></pre>
|
<span class="hljs-tag"></<span class="hljs-name">select</span>></span></code></pre>
|
||||||
</details>
|
</details>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
@@ -559,24 +559,24 @@
|
|||||||
attribute.
|
attribute.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="example">
|
<div class="example">
|
||||||
<select>
|
<select>
|
||||||
<option>5 - Incredible!</option>
|
<option>5 - Incredible!</option>
|
||||||
<option>4 - Great!</option>
|
<option>4 - Great!</option>
|
||||||
<option selected>3 - Pretty good</option>
|
<option selected>3 - Pretty good</option>
|
||||||
<option>2 - Not so great</option>
|
<option>2 - Not so great</option>
|
||||||
<option>1 - Unfortunate</option>
|
<option>1 - Unfortunate</option>
|
||||||
</select>
|
</select>
|
||||||
<details>
|
<details>
|
||||||
<summary>Show code</summary>
|
<summary>Show code</summary>
|
||||||
<pre><code><span class="hljs-tag"><<span class="hljs-name">select</span>></span>
|
<pre><code><span class="hljs-tag"><<span class="hljs-name">select</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>5 - Incredible!<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>5 - Incredible!<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>4 - Great!<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>4 - Great!<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">selected</span>></span>3 - Pretty good<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">selected</span>></span>3 - Pretty good<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>2 - Not so great<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>2 - Not so great<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>1 - Unfortunate<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>1 - Unfortunate<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">select</span>></span></code></pre>
|
<span class="hljs-tag"></<span class="hljs-name">select</span>></span></code></pre>
|
||||||
</details>
|
</details>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -616,22 +616,22 @@
|
|||||||
<code>title-bar</code>, <code>title-bar-text</code>, and <code>title-bar-controls</code>.
|
<code>title-bar</code>, <code>title-bar-text</code>, and <code>title-bar-controls</code>.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="example">
|
<div class="example">
|
||||||
<div class="title-bar">
|
<div class="title-bar">
|
||||||
<div class="title-bar-text">A Title Bar</div>
|
<div class="title-bar-text">A Title Bar</div>
|
||||||
<div class="title-bar-controls">
|
<div class="title-bar-controls">
|
||||||
<button aria-label="Close"></button>
|
<button aria-label="Close"></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<details>
|
<details>
|
||||||
<summary>Show code</summary>
|
<summary>Show code</summary>
|
||||||
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar"</span>></span>
|
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-text"</span>></span>A Title Bar<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-text"</span>></span>A Title Bar<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-controls"</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-controls"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
||||||
</details>
|
</details>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
@@ -640,26 +640,26 @@
|
|||||||
"Minimize" and "Maximize" like so:
|
"Minimize" and "Maximize" like so:
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="example">
|
<div class="example">
|
||||||
<div class="title-bar">
|
<div class="title-bar">
|
||||||
<div class="title-bar-text">A Title Bar</div>
|
<div class="title-bar-text">A Title Bar</div>
|
||||||
<div class="title-bar-controls">
|
<div class="title-bar-controls">
|
||||||
<button aria-label="Minimize"></button>
|
<button aria-label="Minimize"></button>
|
||||||
<button aria-label="Maximize"></button>
|
<button aria-label="Maximize"></button>
|
||||||
<button aria-label="Close"></button>
|
<button aria-label="Close"></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<details>
|
<details>
|
||||||
<summary>Show code</summary>
|
<summary>Show code</summary>
|
||||||
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar"</span>></span>
|
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-text"</span>></span>A Title Bar<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-text"</span>></span>A Title Bar<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-controls"</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-controls"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Minimize"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Minimize"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Maximize"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Maximize"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
||||||
</details>
|
</details>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -682,30 +682,30 @@
|
|||||||
container style.
|
container style.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="example">
|
<div class="example">
|
||||||
<div class="window" style="width: 300px">
|
<div class="window" style="width: 300px">
|
||||||
<div class="title-bar">
|
<div class="title-bar">
|
||||||
<div class="title-bar-text">A Complete Window</div>
|
<div class="title-bar-text">A Complete Window</div>
|
||||||
<div class="title-bar-controls">
|
<div class="title-bar-controls">
|
||||||
<button aria-label="Minimize"></button>
|
<button aria-label="Minimize"></button>
|
||||||
<button aria-label="Maximize"></button>
|
<button aria-label="Maximize"></button>
|
||||||
<button aria-label="Close"></button>
|
<button aria-label="Close"></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<details>
|
<details>
|
||||||
<summary>Show code</summary>
|
<summary>Show code</summary>
|
||||||
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"window"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 300px"</span>></span>
|
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"window"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 300px"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar"</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-text"</span>></span>A Complete Window<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-text"</span>></span>A Complete Window<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-controls"</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-controls"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Minimize"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Minimize"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Maximize"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Maximize"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
||||||
</details>
|
</details>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
@@ -713,36 +713,36 @@
|
|||||||
class under the title bar.
|
class under the title bar.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="example">
|
<div class="example">
|
||||||
<div class="window" style="width: 300px">
|
<div class="window" style="width: 300px">
|
||||||
<div class="title-bar">
|
<div class="title-bar">
|
||||||
<div class="title-bar-text">A Window With Stuff In It</div>
|
<div class="title-bar-text">A Window With Stuff In It</div>
|
||||||
<div class="title-bar-controls">
|
<div class="title-bar-controls">
|
||||||
<button aria-label="Minimize"></button>
|
<button aria-label="Minimize"></button>
|
||||||
<button aria-label="Maximize"></button>
|
<button aria-label="Maximize"></button>
|
||||||
<button aria-label="Close"></button>
|
<button aria-label="Close"></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="window-body">
|
<div class="window-body">
|
||||||
<p>There's so much room for activities!</p>
|
<p>There's so much room for activities!</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<details>
|
<details>
|
||||||
<summary>Show code</summary>
|
<summary>Show code</summary>
|
||||||
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"window"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 300px"</span>></span>
|
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"window"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 300px"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar"</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-text"</span>></span>A Window With Stuff In It<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-text"</span>></span>A Window With Stuff In It<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-controls"</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-controls"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Minimize"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Minimize"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Maximize"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Maximize"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"window-body"</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"window-body"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>There's so much room for activities!<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>There's so much room for activities!<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
||||||
</details>
|
</details>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -766,20 +766,20 @@
|
|||||||
elements), can contain whatever you'd like.
|
elements), can contain whatever you'd like.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="example">
|
<div class="example">
|
||||||
<ul class="tree-view">
|
<ul class="tree-view">
|
||||||
<li>We can put</li>
|
<li>We can put</li>
|
||||||
<li><strong style="color: purple">✨ Whatever ✨</strong></li>
|
<li><strong style="color: purple">✨ Whatever ✨</strong></li>
|
||||||
<li>We want in here</li>
|
<li>We want in here</li>
|
||||||
</ul>
|
</ul>
|
||||||
<details>
|
<details>
|
||||||
<summary>Show code</summary>
|
<summary>Show code</summary>
|
||||||
<pre><code><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tree-view"</span>></span>
|
<pre><code><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tree-view"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>We can put<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>We can put<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">strong</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"color: purple"</span>></span>✨ Whatever ✨<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">strong</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"color: purple"</span>></span>✨ Whatever ✨<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>We want in here<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>We want in here<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre>
|
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre>
|
||||||
</details>
|
</details>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
@@ -788,50 +788,50 @@
|
|||||||
border and indentation to illustrate the structure of the tree.
|
border and indentation to illustrate the structure of the tree.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="example">
|
<div class="example">
|
||||||
<ul class="tree-view">
|
<ul class="tree-view">
|
||||||
<li>Table of Contents</li>
|
<li>Table of Contents</li>
|
||||||
<li>What is web development?</li>
|
<li>What is web development?</li>
|
||||||
<li>
|
<li>
|
||||||
CSS
|
CSS
|
||||||
<ul>
|
<ul>
|
||||||
<li>Selectors</li>
|
<li>Selectors</li>
|
||||||
<li>Specificity</li>
|
<li>Specificity</li>
|
||||||
<li>Properties</li>
|
<li>Properties</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
JavaScript
|
JavaScript
|
||||||
<ul>
|
<ul>
|
||||||
<li>Avoid at all costs</li>
|
<li>Avoid at all costs</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li>HTML</li>
|
<li>HTML</li>
|
||||||
<li>Special Thanks</li>
|
<li>Special Thanks</li>
|
||||||
</ul>
|
</ul>
|
||||||
<details>
|
<details>
|
||||||
<summary>Show code</summary>
|
<summary>Show code</summary>
|
||||||
<pre><code><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tree-view"</span>></span>
|
<pre><code><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tree-view"</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>Table of Contents<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>Table of Contents<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>What is web development?<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>What is web development?<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>
|
||||||
CSS
|
CSS
|
||||||
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>Selectors<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>Selectors<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>Specificity<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>Specificity<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>Properties<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>Properties<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>
|
||||||
JavaScript
|
JavaScript
|
||||||
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>Avoid at all costs<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>Avoid at all costs<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>HTML<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>HTML<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>Special Thanks<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>Special Thanks<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre>
|
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre>
|
||||||
</details>
|
</details>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
Reference in New Issue
Block a user