mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-21 21:15:13 +02:00
Reordered modules
Switched the ordering of input_control and navigation. Now input_control comes before navigation, improving certain aspects of the code.
This commit is contained in:
Angelos Chalaris
@@ -75,7 +75,7 @@
|
||||
</div>
|
||||
<div class="col-sm-6 hidden-md hidden-lg" style="padding: 0;">
|
||||
<div class="button-group" style="border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; margin: 0; height: 100%;">
|
||||
<a href="core.html" class="button small">Core</a><a href="grid.html" class="button small">Grid</a><a href="navigation.html" class="button small">Navigation</a><a href="input_control.html" class="button small">Input Control</a><a href="table.html" class="button small">Table</a>
|
||||
<a href="core.html" class="button small">Core</a><a href="grid.html" class="button small">Grid</a><a href="input_control.html" class="button small">Input Control</a><a href="navigation.html" class="button small">Navigation</a><a href="table.html" class="button small">Table</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 hidden-md hidden-lg" style="padding: 0;">
|
||||
|
||||
2
docs/mini-default.min.css
vendored
2
docs/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
@@ -99,6 +99,17 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row box-centered">
|
||||
<div class="col-sm-12 col-lg-6 row">
|
||||
<div class="card fluid">
|
||||
<h2 class="section"><mark class="tertiary"><i class="fa fa-keyboard-o fa-fw" aria-hidden="true"></i></mark> Input Control</h2>
|
||||
<div class="section box-left"><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. More specifically, the <strong>input_control</strong> module contains:</p><ul>
|
||||
<li><a href="input_control.html#forms-input" class="sublink-1">Styling for forms and input elements</a></li>
|
||||
<li><a href="input_control.html#checkbox-radio" class="sublink-1">Styling for checkboxes and radio buttons</a></li>
|
||||
<li><a href="input_control.html#buttons" class="sublink-1">Styling and groupping classes for buttons</a></li>
|
||||
<li><a href="input_control.html#file-upload" class="sublink-1">Workarounds for styling file upload buttons</a></li>
|
||||
</ul></div><a href="input_control.html" class="button section">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-lg-6 row">
|
||||
<div class="card fluid">
|
||||
<h2 class="section"><mark class="primary"><i class="fa fa-compass fa-fw" aria-hidden="true"></i></mark> Navigation</h2>
|
||||
@@ -111,17 +122,6 @@
|
||||
</ul></div><a href="navigation.html" class="button section">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-lg-6 row">
|
||||
<div class="card fluid">
|
||||
<h2 class="section"><mark class="tertiary"><i class="fa fa-keyboard-o fa-fw" aria-hidden="true"></i></mark> Input Control</h2>
|
||||
<div class="section box-left"><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. More specifically, the <strong>input_control</strong> module contains:</p><ul>
|
||||
<li><a href="input_control.html#forms-input" class="sublink-1">Styling for forms and input elements</a></li>
|
||||
<li><a href="input_control.html#checkbox-radio" class="sublink-1">Styling for checkboxes and radio buttons</a></li>
|
||||
<li><a href="input_control.html#buttons" class="sublink-1">Styling and groupping classes for buttons</a></li>
|
||||
<li><a href="input_control.html#file-upload" class="sublink-1">Workarounds for styling file upload buttons</a></li>
|
||||
</ul></div><a href="input_control.html" class="button section">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row box-centered">
|
||||
<div class="col-sm-12 col-lg-6 row">
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
</header>
|
||||
<header class="sticky" style="height:36px;">
|
||||
<a href="#core" class="button">Core</a> <a href="#grid" class="button">Grid</a>
|
||||
<a href="#navigation" class="button">Navigation</a> <a href="#input_control" class="button">Input Control</a>
|
||||
<a href="#input_control" class="button">Input Control</a> <a href="#navigation" class="button">Navigation</a>
|
||||
<a href="#table" class="button">Table</a> <a href="#card" class="button">Card</a>
|
||||
<a href="#tab" class="button">Tab</a> <a href="#contextual" class="button">Contextual</a>
|
||||
<a href="#progress" class="button">Progress</a> <a href="#utility" class="button">Utility</a>
|
||||
@@ -367,95 +367,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="navigation">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2><a href="navigation.html" target="_blank" class="button primary small"><i class="fa fa-compass fa-fw" aria-hidden="true"></i></a> Navigation</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Header <a href="https://codepen.io/chalarangelo/pen/NbewvB" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre><header>
|
||||
<a href="#" class="logo">Logo</a>
|
||||
<button>Home</button>
|
||||
<a href="#" class="button">News</a>
|
||||
<span>|</span>
|
||||
<button>About</button>
|
||||
<button>Contact</button>
|
||||
</header></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Use the <code>.logo</code> class for the first child (either textual element or image)</li>
|
||||
<li>The rest of the elements inside the <code><header></code> must be button elements (i.e. <code><button></code>, <code><input <span class="fore-secondary">type</span>=<span class="fore-primary">"button"</span>></code>, <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> or <code>.button</code>)</li>
|
||||
<li>Use <code><span></code> elements as separators</li>
|
||||
<li>You can mix buttons, links and labels inside the header, as long as all of them are styled as buttons</li>
|
||||
<li>The logo element should not be a <code><button></code> element or of the <code>.button</code> class</li>
|
||||
<li>Header is not displayed as fixed by default</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Navigation bar <a href="https://codepen.io/chalarangelo/pen/ENGbwa" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre><nav>
|
||||
<a href="#">Home</a>
|
||||
<span>News</span>
|
||||
<a href="#" class="sublink-1">New Courses</a>
|
||||
<a href="#" class="sublink-1">Certifications</a>
|
||||
<span class="sublink-1">Events</span>
|
||||
<a href="#" class="sublink-2">Course Showcase - 12th, Dec</a>
|
||||
<a href="#" class="sublink-2">Staff AMA - 16th, Dec</a>
|
||||
<a href="#" class="sublink-1">Policy Update</a>
|
||||
<a href="#">About</a>
|
||||
<a href="#">Contact</a>
|
||||
</nav></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Use <code><nav></code> element, populate it with links</li>
|
||||
<li>Use <code>.sublink-1</code> and <code>.sublink-2</code> classes to create subcategories in your navigation menu</li>
|
||||
<li>Combine the navigation bar with grid reordering to display aside from text on larger displays or at the bottom on smaller displays</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Footer <a href="https://codepen.io/chalarangelo/pen/dOwZVO" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre><footer>
|
||||
<p>&copy; 2001-2016 Web Corporation | <a href="#">About</a> | <a href="#">Terms of use</a></p>
|
||||
</footer></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Simple syntax and structure, add content as normal</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Sticky headers and footers <a href="https://codepen.io/chalarangelo/pen/ZLVMzX" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre><header class="sticky">
|
||||
<a href="#" class="logo">Logo</a> <button>Home</button> <button>About</button>
|
||||
</header>
|
||||
|
||||
<footer class="sticky">
|
||||
<p>&copy; 2001-2016 Web Corporation | <a href="#">About</a> | <a href="#">Terms of use</a></p>
|
||||
</footer></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Use <code>.sticky</code> class to create</li>
|
||||
<li>Compatible with modern browsers, support for <a href="http://caniuse.com/#feat=css-sticky"><code>position:sticky</code></a> is growing</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="input_control">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
@@ -572,6 +483,95 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="navigation">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2><a href="navigation.html" target="_blank" class="button primary small"><i class="fa fa-compass fa-fw" aria-hidden="true"></i></a> Navigation</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Header <a href="https://codepen.io/chalarangelo/pen/NbewvB" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre><header>
|
||||
<a href="#" class="logo">Logo</a>
|
||||
<button>Home</button>
|
||||
<a href="#" class="button">News</a>
|
||||
<span>|</span>
|
||||
<button>About</button>
|
||||
<button>Contact</button>
|
||||
</header></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Use the <code>.logo</code> class for the first child (either textual element or image)</li>
|
||||
<li>The rest of the elements inside the <code><header></code> must be button elements (i.e. <code><button></code>, <code><input <span class="fore-secondary">type</span>=<span class="fore-primary">"button"</span>></code>, <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> or <code>.button</code>)</li>
|
||||
<li>Use <code><span></code> elements as separators</li>
|
||||
<li>You can mix buttons, links and labels inside the header, as long as all of them are styled as buttons</li>
|
||||
<li>The logo element should not be a <code><button></code> element or of the <code>.button</code> class</li>
|
||||
<li>Header is not displayed as fixed by default</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Navigation bar <a href="https://codepen.io/chalarangelo/pen/ENGbwa" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre><nav>
|
||||
<a href="#">Home</a>
|
||||
<span>News</span>
|
||||
<a href="#" class="sublink-1">New Courses</a>
|
||||
<a href="#" class="sublink-1">Certifications</a>
|
||||
<span class="sublink-1">Events</span>
|
||||
<a href="#" class="sublink-2">Course Showcase - 12th, Dec</a>
|
||||
<a href="#" class="sublink-2">Staff AMA - 16th, Dec</a>
|
||||
<a href="#" class="sublink-1">Policy Update</a>
|
||||
<a href="#">About</a>
|
||||
<a href="#">Contact</a>
|
||||
</nav></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Use <code><nav></code> element, populate it with links</li>
|
||||
<li>Use <code>.sublink-1</code> and <code>.sublink-2</code> classes to create subcategories in your navigation menu</li>
|
||||
<li>Combine the navigation bar with grid reordering to display aside from text on larger displays or at the bottom on smaller displays</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Footer <a href="https://codepen.io/chalarangelo/pen/dOwZVO" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre><footer>
|
||||
<p>&copy; 2001-2016 Web Corporation | <a href="#">About</a> | <a href="#">Terms of use</a></p>
|
||||
</footer></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Simple syntax and structure, add content as normal</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Sticky headers and footers <a href="https://codepen.io/chalarangelo/pen/ZLVMzX" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre><header class="sticky">
|
||||
<a href="#" class="logo">Logo</a> <button>Home</button> <button>About</button>
|
||||
</header>
|
||||
|
||||
<footer class="sticky">
|
||||
<p>&copy; 2001-2016 Web Corporation | <a href="#">About</a> | <a href="#">Terms of use</a></p>
|
||||
</footer></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Use <code>.sticky</code> class to create</li>
|
||||
<li>Compatible with modern browsers, support for <a href="http://caniuse.com/#feat=css-sticky"><code>position:sticky</code></a> is growing</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="table">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
|
||||
@@ -1136,3 +1136,4 @@
|
||||
- `mini-lite` does not support it (in keeping with tradition of the lite flavor's decisions).
|
||||
- `mini-nord` still uses `.alert`s instead of `.toast`s, maintainer should address after update, otherwise I will in the next patch or so.
|
||||
- `mini-sucroa` does not support it (or `.alert` for that matter), might be addressed with author later down the line, for now it's ok to not have either.
|
||||
- Changed order of `input_control` and `navigation` for all flavors and documentation pages.
|
||||
|
||||
Reference in New Issue
Block a user