485 lines
38 KiB
HTML
485 lines
38 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<link rel="stylesheet" href="mini-default.min.css">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
<title>mini.css - Input Control</title>
|
|
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
|
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, input, control, form, button ">
|
|
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
|
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
|
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
|
<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.png">
|
|
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
|
|
<style>
|
|
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/erE3KsIWUumgD1j_Ca-V-xJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
|
|
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
|
|
#header-logo { background: -webkit-linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); background: linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); line-height:1; font-size: 39px; width: 48px; height: 48px; padding: 8px; margin-left: -9px; }
|
|
.box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; }
|
|
.box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; }
|
|
[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
|
|
.col-sm-12.col-sm-last.col-lg-4.col-lg-normal { box-sizing: border-box; border-right: 1px solid #bdbdbd;}
|
|
@media (max-width: 767px){.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {border: 0;border-top: 1px solid #bdbdbd;}}
|
|
.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
|
|
.box-colored {color: #f5f5f5;}
|
|
.responsive-label {align-items: center;} @media (min-width: 768px) { .responsive-label .col-md-3 {text-align: right;}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="sticky">
|
|
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
|
|
<a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
|
|
<a href="flavors.html" class="button">Flavors</a> <a href="templates.html" class="button">Templates</a> <a href="customization/index.html" class="button">Customization</a>
|
|
<a href="quick_reference.html" class="button">Quick Reference</a>
|
|
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i> Github</a>
|
|
</header>
|
|
<div class="container" style="padding-left: 0.25rem;">
|
|
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
|
|
<h4 style="text-align: center">Modules</h4> <a href="core.html#core-title">Core</a>
|
|
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
|
|
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
|
|
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness & captions</a>
|
|
<br/> <a href="grid.html#grid-title">Grid</a>
|
|
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
|
|
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
|
|
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
|
|
<br/> <a href="navigation.html#navigation-title">Navigation</a>
|
|
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
|
|
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers & footers</a>
|
|
<br/> <a href="input_control.html#input-control-title">Input Control</a>
|
|
<a href="input_control.html#forms-input" class="sublink-1">Forms & input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes & radio buttons</a>
|
|
<a href="input_control.html#buttons" class="sublink-1">Buttons & button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
|
|
<br/> <a href="table.html#table-title">Table</a>
|
|
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax & responsiveness</a>
|
|
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants & matrices</a>
|
|
<br/> <a href="card.html#card-title">Card</a>
|
|
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections & media</a>
|
|
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing & fluidity</a>
|
|
<br/> <a href="tab.html#tab-title">Tab</a>
|
|
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
|
|
<br/> <a href="contextual.html#contextual-title">Contextual</a>
|
|
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
|
|
<a href="contextual.html#animated-alerts" class="sublink-1">Animated alerts</a> <a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
|
|
<br/> <a href="progress.html#progress-title">Progress</a>
|
|
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
|
|
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
|
|
<br/> <a href="utility.html#utility-title">Utility</a>
|
|
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders & shadows</a>
|
|
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing & spacing classes</a>
|
|
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
|
|
<a href="utility.html#close-icon" class="sublink-1">Close icon</a> <br/>
|
|
</nav> </div>
|
|
<div class="col-sm-12 col-md-8 col-lg-10"><main>
|
|
<div class="row" style="padding-top: 40px;" id="input-control-title">
|
|
<div class="col-sm-12">
|
|
<h1>Input Control</h1>
|
|
<p>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>
|
|
<p><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>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section">
|
|
<h2>Quick overview</h2>
|
|
<p>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>
|
|
<div class="section">
|
|
<h2>Quick start</h2>
|
|
<p>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><br>
|
|
<pre><<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">"viewport"</span> <span class="fore-secondary">content</span>=<span class="fore-primary">"width=device-width, initial-scale=1"</span>></pre><br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="forms-input">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Forms & input</h2></div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal">
|
|
<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>
|
|
</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>
|
|
</fieldset>
|
|
</form>
|
|
<form>
|
|
<fieldset>
|
|
<legend>Aligned form (using grid)</legend>
|
|
<div class="row responsive-label">
|
|
<div class="col-sm-12 col-md-3">
|
|
<label for="number">Number</label>
|
|
</div>
|
|
<div class="col-sm-12 col-md">
|
|
<input type="number" value="4" id="number" style="width:85%;">
|
|
</div>
|
|
</div>
|
|
<div class="row responsive-label">
|
|
<div class="col-sm-12 col-md-3">
|
|
<label for="disabled">Disabled</label>
|
|
</div>
|
|
<div class="col-sm-12 col-md">
|
|
<input disabled value="disabled" id="disabled" style="width:85%;">
|
|
</div>
|
|
</div>
|
|
<div class="row responsive-label">
|
|
<div class="col-sm-12 col-md-3">
|
|
<label for="readonly">Readonly</label>
|
|
</div>
|
|
<div class="col-sm-12 col-md">
|
|
<input readonly value="readonly" id="readonly" style="width:85%;">
|
|
</div>
|
|
</div>
|
|
<div class="row responsive-label">
|
|
<div class="col-sm-12 col-md-3">
|
|
<label for="select">Select</label>
|
|
</div>
|
|
<div class="col-sm-12 col-md">
|
|
<select id="select"> <option>Apples</option> <option>Oranges</option> </select>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
</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>.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>
|
|
<h3>Sample code</h3>
|
|
<pre><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 fluid">
|
|
<label for="pwd">password</label>
|
|
<input type="password" value="" id="pwd" placeholder="password">
|
|
</div>
|
|
</fieldset>
|
|
</form></pre>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<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>
|
|
</ul><hr>
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-6">
|
|
<pre><form>
|
|
<fieldset>
|
|
<legend>Responsive form</legend>
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-4">
|
|
<label for="username">username</label>
|
|
</div>
|
|
<div class="col-sm-12 col-md">
|
|
<input type="email" value="" id="username" placeholder="username">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-4">
|
|
<label for="pwd">password</label>
|
|
</div>
|
|
<div class="col-sm-12 col-md-4">
|
|
<input type="password" value="" id="pwd" placeholder="password">
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</form></pre>
|
|
<p class="do"><mark class="tertiary">Do:</mark> You can use <code>.row</code> and <code>.col-<span class="fore-primary">SCR_SZ</span></code> or <code>.col-<span class="fore-primary">SCR_SZ</span>-<span class="fore-secondary">COL_WD</span></code> (replacing <code><span class="fore-primary">SCR_SZ</span></code> with one of the available screen size names (<code><span class="fore-tertiary">sm</span></code> for smaller screens, <code><span class="fore-tertiary">md</span></code> for medium-sized screens or <code><span class="fore-tertiary">lg</span></code> for larger screens and <code><span class="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>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<pre><form>
|
|
<fieldset>
|
|
<legend>Responsive form</legend>
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-10 col-md-offset-1">
|
|
<label for="username">username</label>
|
|
<input type="email" value="" id="username" placeholder="username">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-10 col-md-offset-1">
|
|
<label for="pwd">password</label>
|
|
<input type="password" value="" id="pwd" placeholder="password">
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</form></pre>
|
|
<p class="do"><mark class="tertiary">Do:</mark> Apart from using <code>.row</code> and <code>.col-<span class="fore-primary">SCR_SZ</span></code> or <code>.col-<span class="fore-primary">SCR_SZ</span>-<span class="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>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<pre><style>
|
|
.label-aligned {
|
|
align-items: center;
|
|
}
|
|
</style>
|
|
<form>
|
|
<fieldset>
|
|
<legend>Responsive form</legend>
|
|
<div class="row label-aligned">
|
|
<div class="col-sm-12 col-md-4">
|
|
<label for="username">username</label>
|
|
</div>
|
|
<div class="col-sm-12 col-md">
|
|
<input type="email" value="" id="username" placeholder="username">
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</form></pre>
|
|
<p class="do"><mark class="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>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
|
|
<pre><form>
|
|
<fieldset>
|
|
<legend>Responsive form</legend>
|
|
<div class="row input-group">
|
|
<div class="col-sm-12 col-md-4">
|
|
<label for="username">username</label>
|
|
</div>
|
|
<div class="col-sm-12 col-md">
|
|
<input type="email" value="" id="username" placeholder="username">
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</form></pre>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="checkbox-radio">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Checkboxes & radio buttons</h2></div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal">
|
|
<div class="box-centered">
|
|
<br>
|
|
<div class="input-group">
|
|
<input type="checkbox" id="chk1" tabindex="0"> <label for="chk1"> Checkbox</label>
|
|
</div>
|
|
<br><br>
|
|
<div class="input-group">
|
|
<input type="radio" name="radios" value="r1" id="r1" tabindex="0" checked> <label for="r1"> Value 1</label> <br>
|
|
<input type="radio" name="radios" value="r2" id="r2" tabindex="0"> <label for="r2"> Value 2</label> <br>
|
|
<input type="radio" name="radios" value="r3" id="r3" tabindex="0"> <label for="r3"> Value 3</label> <br>
|
|
</div>
|
|
<br><br>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-sm-first col-lg-8 col-lg-normal">
|
|
<p>Checkboxes and radio buttons come pre-styled, using the <a href="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><span class="secondary">type</span></code> inside it (<code><span class="fore-primary">"checkbox"</span></code> or <code><span class="fore-primary">"radio"</span></code>), followed immediately by a <code><label></code> linking to it. Remember to add <code><span class="fore-secondary">tabindex</span>=<span class="fore-primary">"0"</span></code> to your <code><input></code>, so that it will register properly for screen readers.</p>
|
|
<h3>Sample code</h3>
|
|
<pre><div class="input-group">
|
|
<input type="checkbox" id="check1" tabindex="0">
|
|
<label for="check1">Checkbox</label>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<input type="radio" id="rad1" tabindex="0" name="radio-group-1">
|
|
<label for="rad1">Radio</label>
|
|
</div></pre>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<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>
|
|
</ul><hr>
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-6 col-lg-4">
|
|
<pre><div class="input-group">
|
|
<input type="radio" id="rad1" tabindex="0" name="radio-group-1">
|
|
<label for="rad1">Value 1</label>
|
|
<input type="radio" id="rad2" tabindex="0" name="radio-group-1">
|
|
<label for="rad2">Value 2</label>
|
|
</div></pre>
|
|
<p class="do"><mark class="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>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
|
|
<pre><input type="checkbox" id="check1" tabindex="0">
|
|
<label for="check1">Checkbox</label></pre>
|
|
<p class="dont"><mark class="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>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
|
|
<pre><div class="input-group">
|
|
<input type="checkbox" id="check1"
|
|
<label for="check1">Checkbox</label>
|
|
</div></pre>
|
|
<p class="dont"><mark class="secondary">Don't:</mark> Remember to add <code><span class="fore-secondary">tabindex</span>=<span class="fore-primary">"0"</span></code> to all your checkboxes and radio buttons to make them accessible.</p>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
|
|
<pre><div class="input-group">
|
|
<label for="check1">Checkbox</label>
|
|
<input type="checkbox" id="check1" tabindex="0">
|
|
</div></pre>
|
|
<p class="dont"><mark class="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>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
|
|
<pre><div class="input-group">
|
|
<input type="radio" id="rad1" tabindex="0" name="radio-group-1">
|
|
<input type="radio" id="rad2" tabindex="0" name="radio-group-1">
|
|
<label for="rad2">Value 2</label>
|
|
<label for="rad1">Value 1</label>
|
|
</div></pre>
|
|
<p class="dont"><mark class="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>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
|
|
<pre><div class="input-group">
|
|
<input type="checkbox" id="check1" tabindex="0">
|
|
</div></pre>
|
|
<p class="dont"><mark class="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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="buttons">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Buttons & button groups</h2></div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal">
|
|
<button>Default button</button>
|
|
<button class="primary">Primary button</button>
|
|
<button class="secondary">Secondary button</button>
|
|
<button class="tertiary">Tertiary button</button>
|
|
<button class="inverse">Inverse button</button>
|
|
<button class="small">Small button</button>
|
|
<button class="large">Large button</button>
|
|
<button disabled>Disabled button</button>
|
|
<h4>Button group</h4>
|
|
<div class="button-group"> <button>Button</button> <button>Button</button> <button>Button</button> </div>
|
|
</div>
|
|
<div class="col-sm-12 col-sm-first col-lg-8 col-lg-normal">
|
|
<p>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><span class="secondary">type</span></code> (i.e. <code><span class="fore-primary">"button"</span></code>, <code><span class="fore-primary">"submit"</span></code> or <code><span class="fore-primary">"reset"</span></code>) and they will be styled accordingly. You can also use the <code>.button</code> class or the <code><span class="fore-secondary">role</span>=<span class="fore-primary">"<a href="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>
|
|
<p>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>
|
|
<p>Finally, you can create responsive groups of buttons by wrapping them inside a <code><div></code> with the <code>.button-group</code> class.</p>
|
|
<h3>Sample code</h3>
|
|
<pre><button>Default button</button>
|
|
<input type="button" class="primary" value="Primary button">
|
|
<input type="reset" class="secondary" value="Secondary button">
|
|
<input type="submit" class="tertiary" value="Tertiary button">
|
|
<button class="inverse">Inverse button</button>
|
|
<button class="small">Small button</button>
|
|
<button class="large">Large button</button>
|
|
<button disabled>Disabled button</button>
|
|
<a href="#" class="button">Link button</a>
|
|
<a href="#" role="button">Link button</a>
|
|
<label class="button">Label button</label>
|
|
<label role="button">Label button</label>
|
|
|
|
<div class="button-group">
|
|
<button>Button</button>
|
|
<button>Button</button>
|
|
<button>Button</button>
|
|
</div></pre>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<li>If you want more color or size variants for your buttons, check out the <a href="customization.html">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>
|
|
</ul><hr>
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-6">
|
|
<pre><button class="inverse small">Small inverse button</button></pre>
|
|
<p class="do"><mark class="tertiary">Do:</mark> You can mix and match button color and size variants to achieve the desired effect.</p>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
|
|
<pre><button class="secondary inverse">Problematic button</button>
|
|
<span class="fore-secondary"><!-- or --></span>
|
|
<button class="small large">Problematic button</button></pre>
|
|
<p class="dont"><mark class="secondary">Don't:</mark> Avoid mixing two or more button color or size variants, as these combinations might result in unexpected behavior.</p>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<pre><div class="button-group">
|
|
<button>Button</button>
|
|
<input type="reset" class="secondary" value="Secondary button">
|
|
<label class="button inverse">Label button</label>
|
|
</div></pre>
|
|
<p class="do"><mark class="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>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
|
|
<pre><div class="button-group">
|
|
<button class="large">Button</button>
|
|
<button>Button</button>
|
|
<button class="small">Button</button>
|
|
</div></pre>
|
|
<p class="dont"><mark class="secondary">Don't:</mark> Avoid using button size variants inside a <code>.button-group</code>, as this might result in unexpected behavior.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="file-upload">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>File upload buttons</h2></div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal">
|
|
<div class="input-group">
|
|
<br>
|
|
<input type="file" id="file-input-demo">
|
|
<label for="file-input-demo" class="button"><i class="fa fa-upload" aria-hidden="true"></i> Upload file</label>
|
|
<br>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-sm-first col-lg-8 col-lg-normal">
|
|
<p>File upload buttons are commonly a sore spot in CSS frameworks. We try to remedy this problem by hiding the <code><input <span class="fore-secondary">type</span>=<span class="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>
|
|
<h3>Sample code</h3>
|
|
<pre><input type="file" id="file-input">
|
|
<label for="file-input" class="button">Upload file...</label></pre>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<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>
|
|
</ul><hr>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<pre><div class="input-group">
|
|
<input type="file" id="file-input">
|
|
<label for="file-input" class="button">Upload file...</label>
|
|
</div></pre>
|
|
<p class="do"><mark class="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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
|
|
<div class="col-sm-12">
|
|
<p>If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
|
|
</div>
|
|
</div>
|
|
</main></div></div></div>
|
|
<footer><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>.</footer>
|
|
</body>
|
|
</html>
|