mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-05 13:27:25 +02:00
Initial commit of input_control documentation
This commit is contained in:
Angelos Chalaris
@@ -585,3 +585,9 @@
|
||||
- Added some base info on `table` module doc page and a basic example.
|
||||
- Full documentation for `table` module.
|
||||
- Updated all doc pages to use **2 spaces** per indentation.
|
||||
|
||||
## 20161205
|
||||
|
||||
- `playground` cleanup, readying for the rest of the modules to be tested and documented.
|
||||
- Added empty `input_control.html` documentation page for the module of the same name.
|
||||
- Basic structure for `input_control` module's doc page.
|
||||
|
||||
275
docs/v2/input_control.html
Normal file
275
docs/v2/input_control.html
Normal file
@@ -0,0 +1,275 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!-- Live demo styled as of 20161121 -->
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/021d634b90da1ee87f970e80322feacd904e3bdd/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: 2px; background: #558b2f; border-radius: 1px;
|
||||
margin-left: -3px; padding: 2px;
|
||||
}
|
||||
#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-md-4.col-md-normal {
|
||||
box-sizing: border-box;
|
||||
border-right: 1px solid #bdbdbd;
|
||||
}
|
||||
@media (max-width: 767px){
|
||||
.col-sm-12.col-sm-last.col-md-4.col-md-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>Card</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><!-- Input_control description --></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-md-4 col-md-normal">
|
||||
<!-- sample -->
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-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>Checkboxes & radio buttons</h2>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<!-- sample -->
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-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-md-4 col-md-normal">
|
||||
<!-- sample -->
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-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-md-4 col-md-normal">
|
||||
<!-- sample -->
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-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>
|
||||
@@ -75,394 +75,92 @@
|
||||
</div>
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container" style="padding-top: 20px;">
|
||||
<table class="striped">
|
||||
<caption>Hacker List</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Surname</th>
|
||||
<th>Email</th>
|
||||
<th>Handle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>Sum</td>
|
||||
<td>$180</td>
|
||||
<td>Sum</td>
|
||||
<td>$180</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Name">John</td>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Email">johnsmith@mail.com</td>
|
||||
<td data-label="Handle">SmithereensJohn</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Lisa</td>
|
||||
<td data-label="Surname">Cody</td>
|
||||
<td data-label="Email">codyl@mail.com</td>
|
||||
<td data-label="Handle">Codyl</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Max</td>
|
||||
<td data-label="Surname">Roberts</td>
|
||||
<td data-label="Email">terminus@mail.com</td>
|
||||
<td data-label="Handle">T3rm1nu5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Adam</td>
|
||||
<td data-label="Surname">Leeks</td>
|
||||
<td data-label="Email">leekt@mail.com</td>
|
||||
<td data-label="Handle">Leekt</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<br>
|
||||
|
||||
<table class="preset">
|
||||
<caption>Hacker List</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Surname</th>
|
||||
<th>Email</th>
|
||||
<th>Handle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>Sum</td>
|
||||
<td>$180</td>
|
||||
<td>Sum</td>
|
||||
<td>$180</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Name">John</td>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Email">johnsmith@mail.com</td>
|
||||
<td data-label="Handle">SmithereensJohn</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Lisa</td>
|
||||
<td data-label="Surname">Cody</td>
|
||||
<td data-label="Email">codyl@mail.com</td>
|
||||
<td data-label="Handle">Codyl</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Max</td>
|
||||
<td data-label="Surname">Roberts</td>
|
||||
<td data-label="Email">terminus@mail.com</td>
|
||||
<td data-label="Handle">T3rm1nu5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Adam</td>
|
||||
<td data-label="Surname">Leeks</td>
|
||||
<td data-label="Email">leekt@mail.com</td>
|
||||
<td data-label="Handle">Leekt</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<br>
|
||||
|
||||
<table class="horizontal striped">
|
||||
<caption>Hacker List</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Surname</th>
|
||||
<th>Email</th>
|
||||
<th>Handle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Name">John</td>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Email">johnsmith@mail.com</td>
|
||||
<td data-label="Handle">SmithereensJohn</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Lisa</td>
|
||||
<td data-label="Surname">Cody</td>
|
||||
<td data-label="Email">codyl@mail.com</td>
|
||||
<td data-label="Handle">Codyl</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Max</td>
|
||||
<td data-label="Surname">Roberts</td>
|
||||
<td data-label="Email">terminus@mail.com</td>
|
||||
<td data-label="Handle">T3rm1nu5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Adam</td>
|
||||
<td data-label="Surname">Leeks</td>
|
||||
<td data-label="Email">leekt@mail.com</td>
|
||||
<td data-label="Handle">Leekt</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">John</td>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Email">johnsmith@mail.com</td>
|
||||
<td data-label="Handle">SmithereensJohn</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Lisa</td>
|
||||
<td data-label="Surname">Cody</td>
|
||||
<td data-label="Email">codyl@mail.com</td>
|
||||
<td data-label="Handle">Codyl</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Max</td>
|
||||
<td data-label="Surname">Roberts</td>
|
||||
<td data-label="Email">terminus@mail.com</td>
|
||||
<td data-label="Handle">T3rm1nu5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Adam</td>
|
||||
<td data-label="Surname">Leeks</td>
|
||||
<td data-label="Email">leekt@mail.com</td>
|
||||
<td data-label="Handle">Leekt</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">John</td>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Email">johnsmith@mail.com</td>
|
||||
<td data-label="Handle">SmithereensJohn</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Lisa</td>
|
||||
<td data-label="Surname">Cody</td>
|
||||
<td data-label="Email">codyl@mail.com</td>
|
||||
<td data-label="Handle">Codyl</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Max</td>
|
||||
<td data-label="Surname">Roberts</td>
|
||||
<td data-label="Email">terminus@mail.com</td>
|
||||
<td data-label="Handle">T3rm1nu5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Adam</td>
|
||||
<td data-label="Surname">Leeks</td>
|
||||
<td data-label="Email">leekt@mail.com</td>
|
||||
<td data-label="Handle">Leekt</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">John</td>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Email">johnsmith@mail.com</td>
|
||||
<td data-label="Handle">SmithereensJohn</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Lisa</td>
|
||||
<td data-label="Surname">Cody</td>
|
||||
<td data-label="Email">codyl@mail.com</td>
|
||||
<td data-label="Handle">Codyl</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Max</td>
|
||||
<td data-label="Surname">Roberts</td>
|
||||
<td data-label="Email">terminus@mail.com</td>
|
||||
<td data-label="Handle">T3rm1nu5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Adam</td>
|
||||
<td data-label="Surname">Leeks</td>
|
||||
<td data-label="Email">leekt@mail.com</td>
|
||||
<td data-label="Handle">Leekt</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<br>
|
||||
|
||||
<table class="horizontal preset">
|
||||
<caption>Hacker List</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Surname</th>
|
||||
<th>Email</th>
|
||||
<th>Handle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Name">John</td>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Email">johnsmith@mail.com</td>
|
||||
<td data-label="Handle">SmithereensJohn</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Lisa</td>
|
||||
<td data-label="Surname">Cody</td>
|
||||
<td data-label="Email">codyl@mail.com</td>
|
||||
<td data-label="Handle">Codyl</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Max</td>
|
||||
<td data-label="Surname">Roberts</td>
|
||||
<td data-label="Email">terminus@mail.com</td>
|
||||
<td data-label="Handle">T3rm1nu5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Adam</td>
|
||||
<td data-label="Surname">Leeks</td>
|
||||
<td data-label="Email">leekt@mail.com</td>
|
||||
<td data-label="Handle">Leekt</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">John</td>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Email">johnsmith@mail.com</td>
|
||||
<td data-label="Handle">SmithereensJohn</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Lisa</td>
|
||||
<td data-label="Surname">Cody</td>
|
||||
<td data-label="Email">codyl@mail.com</td>
|
||||
<td data-label="Handle">Codyl</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Max</td>
|
||||
<td data-label="Surname">Roberts</td>
|
||||
<td data-label="Email">terminus@mail.com</td>
|
||||
<td data-label="Handle">T3rm1nu5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Adam</td>
|
||||
<td data-label="Surname">Leeks</td>
|
||||
<td data-label="Email">leekt@mail.com</td>
|
||||
<td data-label="Handle">Leekt</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">John</td>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Email">johnsmith@mail.com</td>
|
||||
<td data-label="Handle">SmithereensJohn</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Lisa</td>
|
||||
<td data-label="Surname">Cody</td>
|
||||
<td data-label="Email">codyl@mail.com</td>
|
||||
<td data-label="Handle">Codyl</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Max</td>
|
||||
<td data-label="Surname">Roberts</td>
|
||||
<td data-label="Email">terminus@mail.com</td>
|
||||
<td data-label="Handle">T3rm1nu5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Adam</td>
|
||||
<td data-label="Surname">Leeks</td>
|
||||
<td data-label="Email">leekt@mail.com</td>
|
||||
<td data-label="Handle">Leekt</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">John</td>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Email">johnsmith@mail.com</td>
|
||||
<td data-label="Handle">SmithereensJohn</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Lisa</td>
|
||||
<td data-label="Surname">Cody</td>
|
||||
<td data-label="Email">codyl@mail.com</td>
|
||||
<td data-label="Handle">Codyl</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Max</td>
|
||||
<td data-label="Surname">Roberts</td>
|
||||
<td data-label="Email">terminus@mail.com</td>
|
||||
<td data-label="Handle">T3rm1nu5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Adam</td>
|
||||
<td data-label="Surname">Leeks</td>
|
||||
<td data-label="Email">leekt@mail.com</td>
|
||||
<td data-label="Handle">Leekt</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
<style> .border-fix > td, .border-fix > th { border-top: 0; } </style>
|
||||
|
||||
<table class="preset">
|
||||
<caption>Hacker List</caption>
|
||||
<tbody>
|
||||
<tr class="border-fix">
|
||||
<th data-label="Name"></th>
|
||||
<th data-label="Surname">Surname</td>
|
||||
<th data-label="Email">Email</td>
|
||||
<th data-label="Handle">Handle</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th data-label="Name">John</th>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Email">johnsmith@mail.com</td>
|
||||
<td data-label="Handle">SmithereensJohn</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th data-label="Name">Lisa</th>
|
||||
<td data-label="Surname">Cody</td>
|
||||
<td data-label="Email">codyl@mail.com</td>
|
||||
<td data-label="Handle">Codyl</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th data-label="Name">Max</th>
|
||||
<td data-label="Surname">Roberts</td>
|
||||
<td data-label="Email">terminus@mail.com</td>
|
||||
<td data-label="Handle">T3rm1nu5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th data-label="Name">Adam</th>
|
||||
<td data-label="Surname">Leeks</td>
|
||||
<td data-label="Email">leekt@mail.com</td>
|
||||
<td data-label="Handle">Leekt</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
<table class="preset">
|
||||
<caption>Hacker List</caption>
|
||||
<tbody>
|
||||
<tr class="border-fix">
|
||||
<th data-label="Name">John</th>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Email">johnsmith@mail.com</td>
|
||||
<td data-label="Handle">SmithereensJohn</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th data-label="Name">Lisa</th>
|
||||
<td data-label="Surname">Cody</td>
|
||||
<td data-label="Email">codyl@mail.com</td>
|
||||
<td data-label="Handle">Codyl</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th data-label="Name">Max</th>
|
||||
<td data-label="Surname">Roberts</td>
|
||||
<td data-label="Email">terminus@mail.com</td>
|
||||
<td data-label="Handle">T3rm1nu5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th data-label="Name">Adam</th>
|
||||
<td data-label="Surname">Leeks</td>
|
||||
<td data-label="Email">leekt@mail.com</td>
|
||||
<td data-label="Handle">Leekt</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Inline form (default style):</legend>
|
||||
<div class="input-group"><label for="username">Username</label> <input type="text" value="" id="username" placeholder="username"> </div>
|
||||
<div class="input-group"><label for="mail">Email</label> <input type="email" value="" id="mail" placeholder="mail@server.com"> </div>
|
||||
<div class="input-group"><label for="pwd">Password</label> <input type="password" value="" id="pwd" placeholder="password"></div>
|
||||
</fieldset><br>
|
||||
<fieldset class="container">
|
||||
<legend>Aligned form (using <code>width</code> and grid):</legend>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-2" style="text-align:right;">
|
||||
<label for="website" style="vertical-align: text-top;">Website</label>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md">
|
||||
<input type="text" value="" id="website" placeholder="website" style="width:85%;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-2" style="text-align:right;">
|
||||
<label for="weburl" style="vertical-align: text-top;">URL</label>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md">
|
||||
<input type="url" value="" id="weburl" placeholder="https://www.mywebsite.com" style="width:85%;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-2" style="text-align:right;">
|
||||
<label for="desc" style="vertical-align: text-top;">Description</label>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md">
|
||||
<textarea type="url" value="" id="desc" placeholder="description" style="width:85%;"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset><br>
|
||||
<fieldset>
|
||||
<legend>More inputs</legend>
|
||||
<input disabled value="Disabled">
|
||||
<input readonly value="Readonly">
|
||||
<input type="number" value="4">
|
||||
<select>
|
||||
<option>Test</option>
|
||||
<option>Demo</option>
|
||||
</select>
|
||||
<input type="search" placeholder="search..." value="">
|
||||
</fieldset>
|
||||
</form>
|
||||
<form>
|
||||
<fieldset>
|
||||
<div class="input-group">
|
||||
<input type="checkbox" id="c1" tabindex="0"> <label for="c1">Checkbox</label>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="checkbox" id="c2" disabled> <label for="c2" disabled>Disabled</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<div class="input-group">
|
||||
<input type="radio" name="radios" value="r1" checked id="r1" tabindex="0"> <label for="r1">Value 1</label>
|
||||
<input type="radio" name="radios" value="r2" id="r2" tabindex="0"> <label for="r2">Value 2</label>
|
||||
<input type="radio" name="radios" value="r3"checked id="r3" tabindex="0"> <label for="r3">Value 3</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
<button>Normal button</button>
|
||||
<input type="button" value="Input button">
|
||||
<input type="submit" value="Submit button">
|
||||
<input type="reset" value="Reset button">
|
||||
<a href="#" class="button">Link button</a>
|
||||
<button disabled>Disabled button</button><br>
|
||||
<p>Button groups can also be created, utilising the <code>.button-group</code> class. Simply add a set of buttons in it and you're good to go. Check it out below:</p>
|
||||
<div class="button-group">
|
||||
<input type="button" value="Input button">
|
||||
<input type="submit" value="Submit button">
|
||||
<input type="reset" value="Reset button">
|
||||
<button>Normal button</button>
|
||||
<a href="#" class="button">Link button</a>
|
||||
</div>
|
||||
<p>File inputs are a sore spot in most frameworks, as they cannot be easily stylized using CSS. <strong>mini.css</strong> deals with the problem, using a workaround involving labels that use the <code>button</code> class, which applies the exact same style to those labels. Just link it to the <code><input type="file"></code> element of your choice and you're good to go. For example:</p>
|
||||
<span style="margin:3px;"></span><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>
|
||||
<p>There are also different kinds of buttons, specifically <code>primary</code>, <code>secondary</code> and <code>tertiary</code>, as well as <code>small</code> and <code>large</code> buttons. All of these types can be specified as classes. For example:</p>
|
||||
<span style="margin:3px;"></span>
|
||||
<button class="primary">Primary normal button</button>
|
||||
<input type="button" value="Secondary input button" class="secondary">
|
||||
<input type="reset" value="Tertiary reset button" class="tertiary">
|
||||
<input type="submit" value="Large submit button" class="large">
|
||||
<label disabled class="button small primary">Small primary disabled label button</label>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user