418 lines
22 KiB
HTML
418 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!-- Live demo styled as of 20161121 -->
|
|
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/21ca8d498f0ff51cdeab7c16606fc06502c7de29/dist/mini-default.min.css">
|
|
<!-- Local stylesheet -->
|
|
<link rel="stylesheet" href="../../dist/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 toolkit">
|
|
<meta name="keywords" content="mini, mini.css, CSS, framework, toolkit, minimal, responsive, style-agnostic, Sass, module, input, control, form, button">
|
|
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
|
<link rel="icon" type="image/png" href="favicon.png">
|
|
<style>
|
|
/* Classes and ids used in multiple pages - page top and utilities */
|
|
#header-logo {
|
|
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
|
|
padding: 4px;
|
|
}
|
|
#top-logo {
|
|
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
|
|
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
|
}
|
|
#top-heading {
|
|
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
|
|
}
|
|
#top-version-tag {
|
|
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
|
}
|
|
.box-centered { text-align: center; }
|
|
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
|
|
.box-colored.red { background: #b71c1c; }
|
|
.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; }
|
|
/* Local classes and ids for this page */
|
|
.fore-primary { color: #0d47a1; font-family: monospace, monospace; }
|
|
.fore-secondary { color: #b71c1c; font-family: monospace, monospace; }
|
|
.fore-tertiary { color: #1b5e20; font-family: monospace, monospace; }
|
|
.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: #1b5e20; }
|
|
.do {
|
|
border-top: 15px solid #558b2f;
|
|
padding-top: 10px;
|
|
}
|
|
.dont {
|
|
border-top: 15px solid #f44336;
|
|
padding-top: 10px;
|
|
}
|
|
.box-colored {
|
|
color: #f5f5f5;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<img class="logo" src="mini-logo.svg" id="header-logo"><div style="display: inline; overflow: auto;">
|
|
<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="customization.html" class="button">Customization</a>
|
|
<a href="https://github.com/Chalarangelo/mini.css" class="button">Github</a>
|
|
</div>
|
|
</header>
|
|
<div class="container" style="height: 320px; background: -webkit-linear-gradient(#455a64,#263238); background: linear-gradient(#455a64,#263238); box-shadow: 0 3px 9px rgba(0,0,0,0.26), 0 3px 6px rgba(0,0,0,0.35);">
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<div class="box-centered">
|
|
<img src="mini-logo.svg" id="top-logo">
|
|
<h1 id="top-heading"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></h1>
|
|
<mark class="tertiary" id="top-version-tag">v2.0</mark>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Insert your page content here-->
|
|
<main><div class="container">
|
|
<div class="row" style="padding-top: 40px;">
|
|
<div class="col-sm">
|
|
<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's 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>
|
|
<ul class="breadcrumbs"><li><a href="index.html">Home</a></li><li><a href="modules.html">Modules</a></li><li>Input Control</li></ul>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<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">
|
|
<div class="col-sm">
|
|
<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>
|
|
<style>
|
|
.responsive-label {
|
|
align-items: center;
|
|
}
|
|
@media (min-width: 768px) {
|
|
.responsive-label .col-md-3 {
|
|
text-align: right;
|
|
}
|
|
}
|
|
</style>
|
|
<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>.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>
|
|
<h3>Sample code</h3>
|
|
<pre><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></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>
|
|
</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>.button-group</code> class when creating aligned forms. This might cause unexpected behavior.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<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">
|
|
<!-- sample -->
|
|
</div>
|
|
<div class="col-sm-12 col-sm-first col-lg-8 col-lg-normal">
|
|
<p></p>
|
|
<h3>Sample code</h3>
|
|
<pre></pre>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<li></li>
|
|
<li></li>
|
|
</ul>
|
|
<hr>
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-6 col-lg-4">
|
|
<pre><!-- do code --></pre>
|
|
<p class="do"><mark class="tertiary">Do:</mark> </p>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
|
|
<pre><!-- don't code --></pre>
|
|
<p class="dont"><mark class="secondary">Don't:</mark> </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<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">
|
|
<!-- sample -->
|
|
</div>
|
|
<div class="col-sm-12 col-sm-first col-lg-8 col-lg-normal">
|
|
<p></p>
|
|
<h3>Sample code</h3>
|
|
<pre></pre>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<li></li>
|
|
<li></li>
|
|
</ul>
|
|
<hr>
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-6 col-lg-4">
|
|
<pre><!-- do code --></pre>
|
|
<p class="do"><mark class="tertiary">Do:</mark> </p>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
|
|
<pre><!-- don't code --></pre>
|
|
<p class="dont"><mark class="secondary">Don't:</mark> </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<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">
|
|
<!-- sample -->
|
|
</div>
|
|
<div class="col-sm-12 col-sm-first col-lg-8 col-lg-normal">
|
|
<p></p>
|
|
<h3>Sample code</h3>
|
|
<pre></pre>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<li></li>
|
|
<li></li>
|
|
</ul>
|
|
<hr>
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-6 col-lg-4">
|
|
<pre><!-- do code --></pre>
|
|
<p class="do"><mark class="tertiary">Do:</mark> </p>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
|
|
<pre><!-- don't code --></pre>
|
|
<p class="dont"><mark class="secondary">Don't:</mark> </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
|
|
<div class="col-sm">
|
|
<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>
|
|
</div></main>
|
|
<!-- End of page content-->
|
|
<footer><strong>mini.css</strong> was designed and built 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> |