mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-20 12:41:37 +02:00
Added and documented vertical input groups
Added vertical input-groups for easier form alignment, added relevant documentation, updated all flavors. Pretty much all of the features of this update have been completed, so after some housekeeping it'll be ready to release.
This commit is contained in:
Angelos Chalaris
@@ -243,6 +243,14 @@
|
||||
<td data-label="Variable">$input-group-mobile-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">Breakpoint for fluid input groups on mobile devices<sup><a href="#forms-note-one">1</a></sup></td><td data-label="Sample value">767px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$include-vertical-input-group</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">Enables vertical input groups<sup><a href="#forms-note-two">1</a></sup></td><td data-label="Sample value">true</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$input-group-vertical-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for vertical input groups<sup><a href="#forms-note-two">1</a></sup></td><td data-label="Sample value">'fluid'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$hide-file-inputs</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">Hides all <code><input <span class="fore-secondary">type</span>="<span class="fore-primary">file</span>"></code> elements, allowing access only via the use of labels</td><td data-label="Sample value">true</td>
|
||||
@@ -254,6 +262,7 @@
|
||||
<h3>Notes:</h3>
|
||||
<ol style="text-align:justify">
|
||||
<li id="forms-note-one">The values of <code>$input-group-fluid-name</code> and <code>$input-group-mobile-breakpoint</code> will only be used if <code>$include-fluid-input-group</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
<li id="forms-note-two">The value of <code>$input-group-vertical-name</code> will only be used if <code>$include-vertical-input-group</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -77,26 +77,19 @@
|
||||
<!-- Insert your page content here-->
|
||||
<main>
|
||||
<br />
|
||||
<div class="tabs">
|
||||
<input type="radio" name="tab-group" id="tab1" checked aria-hidden="true">
|
||||
<label for="tab1" aria-hidden="true">Tab 1</label>
|
||||
<div>
|
||||
<h3>Tab 1</h3>
|
||||
<p>This is the first tab's content.</p>
|
||||
</div>
|
||||
<input type="radio" name="tab-group" id="tab2" aria-hidden="true">
|
||||
<label for="tab2" aria-hidden="true">Tab 2</label>
|
||||
<div>
|
||||
<h3>Tab 2</h3>
|
||||
<p>This is the second tab's content.</p>
|
||||
</div>
|
||||
<input type="radio" name="tab-group" id="tab3" aria-hidden="true">
|
||||
<label for="tab3" aria-hidden="true">Tab 3</label>
|
||||
<div>
|
||||
<h3>Tab 3</h3>
|
||||
<p>This is the third tab's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Simple form</legend>
|
||||
<div class="input-group fluid">
|
||||
<label for="username">username</label>
|
||||
<input type="email" value="" id="username" placeholder="username">
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="pwd">password</label>
|
||||
<input type="password" value="" id="pwd" placeholder="password">
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</main>
|
||||
<!-- End of page content-->
|
||||
<footer style="text-align: justify;"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.<br/>
|
||||
|
||||
@@ -111,17 +111,24 @@
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Inline form (default style)</legend>
|
||||
<div class="input-group"><label for="username">username</label> <input type="email" value="" id="username" placeholder="username"> </div>
|
||||
<div class="input-group"><label for="pwd">password</label> <input type="password" value="" id="pwd" placeholder="password"></div>
|
||||
<div class="input-group"><label for="username">Username</label> <input type="email" value="" id="username" placeholder="username"> </div>
|
||||
<div class="input-group"><label for="pwd">Password</label> <input type="password" value="" id="pwd" placeholder="password"></div>
|
||||
</fieldset>
|
||||
</form>
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Fluid form</legend>
|
||||
<div class="input-group fluid"><label for="username2">username</label> <input type="email" value="" id="username2" placeholder="username"></div>
|
||||
<div class="input-group fluid"><label for="pwd2">password</label> <input type="password" value="" id="pwd2" placeholder="password"></div>
|
||||
<div class="input-group fluid"><label for="username2">Username</label> <input type="email" value="" id="username2" placeholder="username"></div>
|
||||
<div class="input-group fluid"><label for="pwd2">Password</label> <input type="password" value="" id="pwd2" placeholder="password"></div>
|
||||
</fieldset>
|
||||
</form>
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Vertical form</legend>
|
||||
<div class="input-group vertical"><label for="username2">Username</label> <input type="email" value="" id="username2" placeholder="username"></div>
|
||||
<div class="input-group vertical"><label for="pwd2">Password</label> <input type="password" value="" id="pwd2" placeholder="password"></div>
|
||||
</fieldset>
|
||||
</form>
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Aligned form (using grid)</legend>
|
||||
@@ -162,19 +169,23 @@
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-lg-8 col-md-normal">
|
||||
<p style="text-align: justify;">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 access 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 style="text-align: justify;">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. You can make your <code>.input-group</code>s respond to viewport changes, by adding the <code>.fluid</code> class to them. Finally, 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 style="text-align: justify;">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. You can make your <code>.input-group</code>s respond to viewport changes, by adding the <code>.fluid</code> class to them or you can align them vertically by adding the <code>.vertical</code> class. Finally, 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>
|
||||
<legend>Simple form</legend>
|
||||
<div class="input-group fluid">
|
||||
<label for="username">username</label>
|
||||
<label for="username">Username</label>
|
||||
<input type="email" value="" id="username" placeholder="username">
|
||||
</div>
|
||||
<div class="input-group fluid">
|
||||
<label for="pwd">password</label>
|
||||
<label for="pwd">Password</label>
|
||||
<input type="password" value="" id="pwd" placeholder="password">
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="nmbr">Number</label>
|
||||
<input type="number" id="nmbr" value="5">
|
||||
</div>
|
||||
</fieldset>
|
||||
</form></pre>
|
||||
</div>
|
||||
@@ -185,7 +196,7 @@
|
||||
<li>Using the <code><fieldset></code> and <code><legend></code> elements is highly recommended for a better presentational effect. Using these elements is a matter of personal preference, however try to keep your forms consistent (i.e. either use them in all forms or no forms as to not confuse users).</li>
|
||||
<li>Some <code><input></code> elements, such as date & time, color and range types, are not supported and, as a result, do not have a default style defined for them. You can define said styles manually if you need to use them in your website or app.</li>
|
||||
<li>Checkboxes and radio buttons are not stylized the same way as most of the other elements, nor do they follow the exact same stucture for layout. Please refer to the next section for information on how to use those.</li>
|
||||
<li>Try not to combine the <strong>grid</strong> module's classes with <code>.fluid</code><code>.input-group</code>s, as this might cause certain styles to overlap and not display exactly like you want them to.</li>
|
||||
<li>Try not to combine the <strong>grid</strong> module's classes with <code>.fluid</code> or <code>.vertical</code> <code>.input-group</code>s, as this might cause certain styles to overlap and not display exactly like you want them to.</li>
|
||||
</ul><hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
|
||||
2
docs/mini-default.min.css
vendored
2
docs/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
@@ -386,13 +386,17 @@
|
||||
<fieldset>
|
||||
<legend>Simple form</legend>
|
||||
<div class="input-group fluid">
|
||||
<label for="username">username</label>
|
||||
<label for="username">Username</label>
|
||||
<input type="email" value="" id="username" placeholder="username">
|
||||
</div>
|
||||
<div class="input-group fluid">
|
||||
<label for="pwd">password</label>
|
||||
<label for="pwd">Password</label>
|
||||
<input type="password" value="" id="pwd" placeholder="password">
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="nmbr">Number</label>
|
||||
<input type="number" id="nmbr" value="5">
|
||||
</div>
|
||||
</fieldset>
|
||||
</form></pre>
|
||||
</div>
|
||||
@@ -406,7 +410,8 @@
|
||||
<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>
|
||||
<li>Make <code>.input-group</code>s responsive by adding the <code>.fluid</code> class</li>
|
||||
<li>Make <code>.input-group</code>s responsive by adding the <code>.fluid</code> class</li>
|
||||
<li>Vertically align <code>.input-group</code>s using the <code>.vertical</code> class</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1252,3 +1252,5 @@
|
||||
- Added customization documentation for `.scrollable` `table`s.
|
||||
- Documented `.scrollable` `table`s everywhere.
|
||||
- Added `$tab-selected-border-color` to imbue `tabs` with a little extra style (applies only to non-`.stacked` tabs).
|
||||
- Altered `$label-padding` from `0.25rem` to `0.25rem 0.5rem` to make it align properly with everything else.
|
||||
- Added code for `.vertical` `.input-group`, documented it, updated flavors. Everything is ready, size is `6.70KB`, which is pretty good I might add.
|
||||
|
||||
Reference in New Issue
Block a user