Input control quick reference
This commit is contained in:
Angelos Chalaris
parent
1ef0d63300
commit
7b74682140
3 changed files with 32 additions and 8 deletions
|
|
@ -183,7 +183,7 @@
|
|||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-lg-8 col-lg-normal">
|
||||
<p>Forms are structured the same way you would structure a normal form in HTML5. Simply create a root <code><form></code> element and add your <code><input></code> elements inside. Link them to <code><label></code> elements for ease of acces and you are pretty much set. We highly recommend using the <code><fieldset></code> and <code><legend></code> elements to annotate your forms as well, but you can skip them if you wish.</p>
|
||||
<p>Forms are inline by default. Use the <code>.button-group</code> class on a <code><div></code> wrapping inside it an <code><input></code> and <code><label></code> pair to make sure they always display together in one line. If you want to create aligned forms with a preset layout, you can utilize the <a href="grid.html"><strong>grid</strong></a> module's rows and columns.</p>
|
||||
<p>Forms are inline by default. Use the <code>.input-group</code> class on a <code><div></code> wrapping inside it an <code><input></code> and <code><label></code> pair to make sure they always display together in one line. If you want to create aligned forms with a preset layout, you can utilize the <a href="grid.html"><strong>grid</strong></a> module's rows and columns.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre><form>
|
||||
<fieldset>
|
||||
|
|
@ -288,7 +288,7 @@
|
|||
</div>
|
||||
</fieldset>
|
||||
</form></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> Avoid using the <code>.button-group</code> class when creating aligned forms. This might cause unexpected behavior.</p>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> Avoid using the <code>.input-group</code> class when creating aligned forms. This might cause unexpected behavior.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -473,8 +473,14 @@
|
|||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li></li>
|
||||
<ul>
|
||||
<li>Link <code><label></code> elements to their respective <code><input></code> elements for ease-of-use</li>
|
||||
<li>Use of the <code><fieldset></code> and <code><legend></code> elements is highly recommended</li>
|
||||
<li>Forms are inline by default, use <code>.input-group</code> to align elements inside them</li>
|
||||
<li>Non-standard input types are not stylized like the rest</li>
|
||||
<li>Checkboxes and radio buttons are stylized differently, as shown below</li>
|
||||
<li>You can use the grid module's column classes to align form elements or make them responsive</li>
|
||||
<li>Avoid using <code>.input-group</code> in aligned forms</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -494,7 +500,12 @@
|
|||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li>Pre-styled using the <a href="https://css-tricks.com/the-checkbox-hack/">checkbox hack</a>, fully accessible</li>
|
||||
<li>Create a <code><div <span class="fore-secondary">class</span>=<span class="fore-primary">"input-group"</span>></code> containing the checkbox or radio button along with its linked label</li>
|
||||
<li>Add <code><span class="fore-secondary">tabindex</span>=<span class="fore-primary">"0"</span></code> to the <code><input></code> element to make full accessible</li>
|
||||
<li>Add multiple radio buttons in the same group inside the same <code>.input-group</code> wrapper</li>
|
||||
<li>Always use <code>.input-group</code> and follow the code structure provided in the examples</li>
|
||||
<li>Remember to use <code><label></code> elements for every single one of your checkbox or radio buttons</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -521,7 +532,14 @@
|
|||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li>All button types have been stylized</li>
|
||||
<li>Button styles are available for other elements, using the <code>.button</code> class</li>
|
||||
<li><code>.primary</code>, <code>.secondary</code>, <code>.tertiary</code> and <code>.inverse</code> color variants</li>
|
||||
<li><code>.small</code> and <code>.large</code> size variants</li>
|
||||
<li>Create responsive button groups by wrapping multiple button elements inside a <code>.button-group</code> wrapper</li>
|
||||
<li>Button groups are responsive, but might display incorrectly in older browsers</li>
|
||||
<li>Mix size and color variants, don't mix two variants of the same type</li>
|
||||
<li>Avoid using different size variants inside a <code>.button-group</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -534,7 +552,9 @@
|
|||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li>Link an <code><input <span class="fore-secondary">type</span>=<span class="fore-primary">"file"</span>></code> element to a <code><label></code></li>
|
||||
<li>The file button will not change text when uploading a file, Javascript may be required</li>
|
||||
<li>Compatible with <code>.input-group</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -678,4 +678,8 @@
|
|||
- *TODO* Notes for `quick reference`.
|
||||
- *TODO* Readme, demo image etc.
|
||||
- Extensive proofreading and fixes.
|
||||
- Finished Codepens.
|
||||
- Finished Codepens.
|
||||
|
||||
## 20161220
|
||||
|
||||
- Added notes for `input_control` in `quick reference`.
|
||||
|
|
|
|||
Loading…
Reference in a new issue