mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-07-31 19:10:25 +02:00
Code Issues Releases Wiki Activity

Housekeeping

Browse Source
This commit is contained in:
Angelos Chalaris
2017-02-07 12:23:53 +02:00
parent 74a815642f
commit 9d002418c2
16 changed files with 730 additions and 1832 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
docs/input_control.html
View File

@@ -1,103 +1,46 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.1.0/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 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:type" content="website"/>
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<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>
/* 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: #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; }
/* 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: #689f38; }
.do {
border-top: 15px solid #689f38;
padding-top: 10px;
}
.dont {
border-top: 15px solid #e53935;
padding-top: 10px;
}
.box-colored {
color: #f5f5f5;
}
header.sticky a.button {
padding: 4px 6px; font-size: 0.95em;
}
</style>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.1.0/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 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>
#header-logo { display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; padding: 4px; }
.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;} header.sticky a.button {padding: 4px 6px; font-size: 0.95em;}
.responsive-label {align-items: center;} @media (min-width: 768px) { .responsive-label .col-md-3 {text-align: right;}}
</style>
</head>
<body>
<header>
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo">&nbsp;<span style="vertical-align: top; position: relative; top:-12px;"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></span></a><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="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.4em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</div>
</header>
<header class="sticky" style="box-shadow: 0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); height: 36px;">
<a href="core.html" class="button">Core</a>
<a href="grid.html" class="button">Grid</a>
<a href="navigation.html" class="button">Navigation</a>
<a href="input_control.html" class="button">Input Control</a>
<a href="table.html" class="button">Table</a>
<a href="card.html" class="button">Card</a>
<a href="tab.html" class="button">Tab</a>
<a href="contextual.html" class="button">Contextual</a>
<a href="progress.html" class="button">Progress</a>
<a href="utility.html" class="button">Utility</a>
</div>
</header>
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo">&nbsp;<span style="vertical-align: top; position: relative; top:-12px;"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></span></a>
<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="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.4em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</div>
</header>
<header class="sticky" style="height:36px;">
<a href="core.html" class="button">Core</a> <a href="grid.html" class="button">Grid</a>
<a href="navigation.html" class="button">Navigation</a> <a href="input_control.html" class="button">Input Control</a>
<a href="table.html" class="button">Table</a> <a href="card.html" class="button">Card</a>
<a href="tab.html" class="button">Tab</a> <a href="contextual.html" class="button">Contextual</a>
<a href="progress.html" class="button">Progress</a> <a href="utility.html" class="button">Utility</a>
</header>
<!-- Insert your page content here-->
<main><div class="container">
<div class="row" style="padding-top: 40px;">
@@ -126,9 +69,7 @@
<div class="row">
<div class="col-sm">
<div class="card fluid">
<div class="section">
<h2>Forms &amp; input</h2>
</div>
<div class="section"><h2>Forms &amp; input</h2></div>
<div class="section row">
<div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal">
<form>
@@ -138,16 +79,6 @@
<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>
@@ -180,10 +111,7 @@
<label for="select">Select</label>
</div>
<div class="col-sm-12 col-md">
<select id="select">
<option>Apples</option>
<option>Oranges</option>
</select>
<select id="select"> <option>Apples</option> <option>Oranges</option> </select>
</div>
</div>
</fieldset>
@@ -214,8 +142,7 @@
<li>Using the <code>&lt;fieldset&gt;</code> and <code>&lt;legend&gt;</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>&lt;input&gt;</code> elements, such as date &amp; 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>
</ul><hr>
<div class="row">
<div class="col-sm-12 col-md-6">
<pre>&lt;form&gt;
@@ -306,9 +233,7 @@
<div class="row">
<div class="col-sm">
<div class="card fluid">
<div class="section">
<h2>Checkboxes &amp; radio buttons</h2>
</div>
<div class="section"><h2>Checkboxes &amp; 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">
@@ -343,8 +268,7 @@
<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>
</ul><hr>
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4">
<pre>&lt;div class=&quot;input-group&quot;&gt;
@@ -397,9 +321,7 @@
<div class="row">
<div class="col-sm">
<div class="card fluid">
<div class="section">
<h2>Buttons &amp; button groups</h2>
</div>
<div class="section"><h2>Buttons &amp; 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>
@@ -411,11 +333,7 @@
<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 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>&lt;button&gt;</code> or an <code>&lt;input&gt;</code> with a button <code><span class="secondary">type</span></code> (i.e. <code><span class="fore-primary">&quot;button&quot;</span></code>, <code><span class="fore-primary">&quot;submit&quot;</span></code> or <code><span class="fore-primary">&quot;reset&quot;</span></code>) and they will be styled accordingly. You can also use the <code>.button</code> class for links, labels and other elements of your choice to make them look like buttons.</p>
@@ -446,8 +364,7 @@
<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>
</ul><hr>
<div class="row">
<div class="col-sm-12 col-md-6">
<pre>&lt;button class=&quot;inverse small&quot;&gt;Small inverse button&lt;/button&gt;</pre>
@@ -483,9 +400,7 @@
<div class="row">
<div class="col-sm">
<div class="card fluid">
<div class="section">
<h2>File upload buttons</h2>
</div>
<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">
@@ -507,8 +422,7 @@
<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>
</ul>
<hr>
</ul><hr>
<div class="row">
<div class="col-sm-12">
<pre>&lt;div class=&quot;input-group&quot;&gt;