<ahref="input_control#forms-input"class="sublink-1">Forms & input</a><ahref="input_control#checkbox-radio"class="sublink-1">Checkboxes & radio buttons</a><ahref="input_control#switches"class="sublink-1">Switches</a>
<ahref="input_control#buttons"class="sublink-1">Buttons & button groups</a><ahref="input_control#file-upload"class="sublink-1">File upload buttons</a>
<ahref="navigation#footer"class="sublink-1">Footer</a><ahref="navigation#sticky"class="sublink-1">Sticky headers & footers</a>
<br/><ahref="table#table-title">Table</a>
<ahref="table#syntax-responsiveness"class="sublink-1">Basic syntax & responsiveness</a><ahref="table#scrollable-tables"class="sublink-1">Scrollable tables</a>
<ahref="table#horizontal-tables"class="sublink-1">Horizontal tables</a><ahref="table#variants-matrices"class="sublink-1">Table variants & matrices</a>
<br/><ahref="card#card-title">Card</a>
<ahref="card#basic-syntax"class="sublink-1">Basic syntax</a><ahref="card#sections-media"class="sublink-1">Sections & media</a>
<ahref="card#sizing-fluidity"class="sublink-1">Card sizing & fluidity</a><ahref="card#color-variants"class="sublink-1">Card color variants</a>
<ahref="progress#basic-progress-bar"class="sublink-1">Basic progress bar</a><ahref="progress#progress-variants"class="sublink-1">Progress bar variants</a>
<ahref="utility#visibility-helpers"class="sublink-1">Visibility helpers</a><ahref="utility#borders-shadows"class="sublink-1">Generic borders & shadows</a>
<ahref="utility#responsive-sizing"class="sublink-1">Responsive sizing & spacing classes</a>
<pstyle="text-align: justify;">The <strong>input_control</strong> module contains rules that affect forms, input elements, buttons, checkboxes and radio buttons. All of these elements' styles are predefined, allowing you to create modern, responsive forms quickly. Layout alternatives are also provided if you want your forms to look a certain way.</p>
<pstyle="text-align: justify;"><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p><br/>
</div>
</div>
<divclass="row">
<divclass="col-sm-12">
<divclass="card fluid">
<divclass="section">
<h2>Quick overview</h2>
<pstyle="text-align: justify;">The presentation of forms, input fields, buttons and other interactive elements is always very important for any website or app. The <strong>input_control</strong> module provides you with much needed styling improvements for all of these elements, while keeping everything simple to use and understand, as well as combine with the other modules. Forms and input elements have a clean, modern design, while some elements like checkoxes and radio buttons get a much needed facelift. Buttons have also been stylized to look the same in all browsers, while keeping their design clean and allowing for a few color and size variants. Grouping inputs and labels or buttons is also part of this module and, as always, responsiveness is an important feature. Finally, all of the components are accessible, with a few minor caveats, that are discussed in their respective section in this page.</p><br>
</div>
<divclass="section">
<h2>Quick start</h2>
<pstyle="text-align: justify;">To use the <strong>input_control</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <code><head></code> to utilize the viewport meta tag:</p>
<pstyle="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>
<pstyle="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 <ahref="grid"><strong>grid</strong></a> module's rows and columns.</p>
<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> 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>
<pclass="do"style="text-align: justify;"><markclass="tertiary">Do:</mark> You can use <code>.row</code> and <code>.col-<spanclass="fore-primary">SCR_SZ</span></code> or <code>.col-<spanclass="fore-primary">SCR_SZ</span>-<spanclass="fore-secondary">COL_WD</span></code> (replacing <code><spanclass="fore-primary">SCR_SZ</span></code> with one of the available screen size names (<code><spanclass="fore-tertiary">sm</span></code> for smaller screens, <code><spanclass="fore-tertiary">md</span></code> for medium-sized screens or <code><spanclass="fore-tertiary">lg</span></code> for larger screens and <code><spanclass="fore-secondary">COL_WD</span></code> with a number from <code>1</code> to <code>12</code> specifying the width of the column) to set specific layouts for your aligned forms. You can also use the same column classes to make them responsive for different screen sizes.</p>
<pclass="do"style="text-align: justify;"><markclass="tertiary">Do:</mark> Apart from using <code>.row</code> and <code>.col-<spanclass="fore-primary">SCR_SZ</span></code> or <code>.col-<spanclass="fore-primary">SCR_SZ</span>-<spanclass="fore-secondary">COL_WD</span></code> for responsiveness, you can also use other classes from the <strong>grid</strong> module such as the offset classes to make your form layouts more interesting.</p>
<pclass="do"style="text-align: justify;"><markclass="tertiary">Do:</mark> When creating aligned forms using the <strong>grid</strong> module's classes, labels might be off-center vertically compared to their inline counterparts. Use a simple styling for their parent <code>.row</code> element, if you want to adjust their vertical alignment.</p>
<pclass="dont"style="text-align: justify;"><markclass="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>
</div>
</div>
</div>
<divclass="row"id="checkbox-radio">
<divclass="col-sm-12">
<divclass="card fluid">
<divclass="section"><h2>Checkboxes & radio buttons</h2></div>
<pstyle="text-align: justify;">Checkboxes and radio buttons come pre-styled, using the <ahref="https://css-tricks.com/the-checkbox-hack/">checkbox hack</a>, while remaining fully accessible. To create a checkbox or radio button, start using a <code><div></code> that implements the <code>.input-group</code> class, and then add an <code><input></code> of the proper <code><spanclass="secondary">type</span></code> inside it (<code><spanclass="fore-primary">"checkbox"</span></code> or <code><spanclass="fore-primary">"radio"</span></code>), followed immediately by a <code><label></code> linking to it. Remember to add <code><spanclass="fore-secondary">tabindex</span>=<spanclass="fore-primary">"0"</span></code> to your <code><input></code>, so that it will register properly for screen readers.</p>
<li>Checkboxes and radio buttons are fully accessible. However, if not provided with a label, they are not visible to users, but only to screen readers.</li>
<pclass="do"style="text-align: justify;"><markclass="tertiary">Do:</mark> You can add multiple <code>radio</code> buttons inside one <code>.input-group</code>, as long as they follow the syntax shown above. In fact, we strongly recommend grouping controls that are relevant to each other in this manner.</p>
<pclass="dont"style="text-align: justify;"><markclass="secondary">Don't:</mark> Always use an <code>.input-group</code> for your checkboxes and radio buttons. Not doing so will cause the checkbox or radio button to not display properly.</p>
<pclass="dont"style="text-align: justify;"><markclass="secondary">Don't:</mark> Remember to add <code><spanclass="fore-secondary">tabindex</span>=<spanclass="fore-primary">"0"</span></code> to all your checkboxes and radio buttons to make them accessible.</p>
<pclass="dont"style="text-align: justify;"><markclass="secondary">Don't:</mark> The structure of checkboxes and radio buttons is very strict, meaning that the <code><label></code> should always be after the <code><input></code> and never before, otherwise the checkbox or radio button will not display properly.</p>
<pclass="dont"style="text-align: justify;"><markclass="secondary">Don't:</mark> When using multiple radio buttons inside an <code>.input-group</code>, remember to use the usual structure of the radio button component for each radio button (i.e. the <code><input></code> and <code><label></code>). Not doing so will cause the radio buttons to not display properly.</p>
<pclass="dont"style="text-align: justify;"><markclass="secondary">Don't:</mark> Never leave a checkbox or radio button without a <code><label></code>. The <code><label></code> is essential to properly display the checkbox or radio button.</p>
<pstyle="text-align: justify;">Switches are almost identical in structure to checkboxes and radio buttons (an <code>.input-group</code> containing an <code><input></code> of the proper <code><spanclass="secondary">type</span></code> inside it (<code><spanclass="fore-primary">"checkbox"</span></code> or <code><spanclass="fore-primary">"radio"</span></code>), followed immediately by a <code><label></code> linking to it), their only difference being that you need to add the <code>.switch</code> class to <code><label></code> element to turn your input into a switch. Remember to apply <code><spanclass="fore-secondary">tabindex</span>=<spanclass="fore-primary">"0"</span></code> to your <code><input></code> to make it accessible.</p>
<li>You can create your own color variants for the <code>.switch</code> component. For more information, check out the <ahref="customization">customization page</a>.</li>
</ul><hr>
<divclass="row">
<divclass="col-sm-12">
<pre><div class="input-group">
<label for="switch1">Switch with text on its left</label>
<pclass="do"style="text-align: justify;"><markclass="tertiary">Do:</mark> By using two <code><label></code> elements, you can move the actual <code>.switch</code> to the right of the label's text, effectively allowing you to change the layout. Remember to not add any text to your second <code><label></code> that implements the <code>.switch</code> class. You might want, however, to add a few trailing spaces to the first <code><label></code> element to make sure the text does not get covered by the component.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<divclass="row"id="buttons">
<divclass="col-sm-12">
<divclass="card fluid">
<divclass="section"><h2>Buttons & button groups</h2></div>
<pstyle="text-align: justify;">All button types have been stylized by default, while maintaining accessiblity. Simply add any <code><button></code> or an <code><input></code> with a button <code><spanclass="secondary">type</span></code> (i.e. <code><spanclass="fore-primary">"button"</span></code>, <code><spanclass="fore-primary">"submit"</span></code> or <code><spanclass="fore-primary">"reset"</span></code>) and they will be styled accordingly. You can also use the <code>.button</code> class or the <code><spanclass="fore-secondary">role</span>=<spanclass="fore-primary">"<ahref="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role">button</a>"</span></code> attribute for links, labels and other elements of your choice to make them look like buttons.</p>
<pstyle="text-align: justify;">Color variants are available in the form of the <code>.primary</code>, <code>.secondary</code>, <code>.tertiary</code> and <code>.inverse</code> classes. Size variants are available as well in the form of <code>.small</code> and <code>.large</code> classes.</p>
<pstyle="text-align: justify;">Finally, you can create responsive groups of buttons by wrapping them inside a <code><div></code> with the <code>.button-group</code> class.</p>
<li>If you want more color or size variants for your buttons, check out the <ahref="customization">customization</a> page.</li>
<li>The <code>.button-group</code> component is compatible with modern browsers, but might not display properly in older browsers.</li>
<li><code>.button-group</code>s will display as a horizontal container with all their buttons in one row on medium-sized and larger displays, however they will collapse into a column view for smaller displays.</li>
<pclass="do"style="text-align: justify;"><markclass="tertiary">Do:</mark> You can mix and match button color and size variants to achieve the desired effect.</p>
<pclass="dont"style="text-align: justify;"><markclass="secondary">Don't:</mark> Avoid mixing two or more button color or size variants, as these combinations might result in unexpected behavior.</p>
<pclass="do"style="text-align: justify;"><markclass="tertiary">Do:</mark> You can use button color variants inside the same <code>.button-group</code>. You can also use any component styled like a button inside a <code>.button-group</code>.</p>
<pclass="dont"style="text-align: justify;"><markclass="secondary">Don't:</mark> Avoid using button size variants inside a <code>.button-group</code>, as this might result in unexpected behavior.</p>
<pstyle="text-align: justify;">File upload buttons are commonly a sore spot in CSS frameworks. We try to remedy this problem by hiding the <code><input <spanclass="fore-secondary">type</span>=<spanclass="fore-primary">"file"</span>></code>, while maintaining accessibility and using a linked <code><label></code> of the <code>.button</code> class to display it in a modern way.</p>
<li>The icon displayed in the example above is not part of the button styling.</li>
<li>File upload buttons do not change their text to the name of the file after the user has selected a file to upload. You can, however, add this functionality using a few lines of Javascript.</li>
<li>File upload buttons cannot be focused (i.e. have a <code>:focus</code> state) using the keyboard and this applies to linked labels, too. You can use Javascript to add this functionality, if you wish.</li>
<pclass="do"style="text-align: justify;"><markclass="tertiary">Do:</mark> You can use an <code>.input-group</code> to wrap the file upload <code><input></code> and its linked <code><label></code>, if you wish.</p>
<pstyle="text-align: justify;">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <ahref="modules">modules page</a> and choose another module to see its documentation.</p>
</div>
</div>
</main></div></div></div>
<footerstyle="text-align: justify;"><strong>mini.css</strong> was designed and built with <iclass="fa fa-heart-o"aria-hidden="true"></i> by <ahref="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <ahref="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <ahref="https://github.com/Chalarangelo/mini.css">GitHub</a>.</footer>
