mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-07-31 19:10:25 +02:00
Updated navigation documentation
This commit is contained in:
Angelos Chalaris
@@ -44,7 +44,7 @@
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container">
|
||||
<div class="row" style="padding-top: 40px;">
|
||||
<div class="col-sm">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<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>
|
||||
@@ -52,7 +52,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Quick overview</h2>
|
||||
@@ -67,7 +67,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Forms & input</h2></div>
|
||||
<div class="section row">
|
||||
@@ -231,7 +231,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Checkboxes & radio buttons</h2></div>
|
||||
<div class="section row">
|
||||
@@ -319,7 +319,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Buttons & button groups</h2></div>
|
||||
<div class="section row">
|
||||
@@ -398,7 +398,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>File upload buttons</h2></div>
|
||||
<div class="section row">
|
||||
@@ -437,7 +437,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
|
||||
<div class="col-sm">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<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>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<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 - navigation</title>
|
||||
<title>mini.css - Navigation</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, navigation ">
|
||||
@@ -43,7 +43,7 @@
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container">
|
||||
<div class="row" style="padding-top: 40px;">
|
||||
<div class="col-sm">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<h1>Navigation</h1>
|
||||
<p>The <strong>navigation</strong> module seeks to remedy the problems of vertical and horizontal navigation design paradigms, by combining the two for a better presentational effect. HTML5 navigational elements are at the heart of the module, allowing you to quickly build your navigation without complicated structures and hacks.</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>
|
||||
@@ -51,7 +51,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Quick overview</h2>
|
||||
@@ -66,7 +66,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Header</h2></div>
|
||||
<div class="section row">
|
||||
@@ -80,7 +80,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
<p>The <code><header></code> HTML element is used for a page's top horizontal navigation menu. It can contain a unique <code>.logo</code> element as its first child (this structure is not mandatory, but still recommended as a best practice), which can be either text (with or without a link) or an image. The rest of the elements inside the <code><header></code> must be <code><button></code>, <code><label class="button"></code> or <code><a class="button"></code> elements in order to be styled properly. Textual separators between those can be added using <code><span></code> elements.</p>
|
||||
<p>The <code><header></code> HTML element is used for a page's top horizontal navigation menu. It can contain a unique <code>.logo</code> element as its first child (this structure is not mandatory, but still recommended as a best practice), which can be either text (with or without a link) or an image. 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>) in order to be styled properly. Textual separators between those can be added using <code><span></code> elements.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre><header>
|
||||
<a href="#" class="logo">Logo</a>
|
||||
@@ -88,7 +88,7 @@
|
||||
<a href="#" class="button">News</a>
|
||||
<span>|</span>
|
||||
<button>About</button>
|
||||
<button>Contact</button>
|
||||
<a href="#" role="button">Contact</a>
|
||||
</header></pre>
|
||||
</div>
|
||||
</div>
|
||||
@@ -117,7 +117,7 @@
|
||||
<a href="#" class="logo">Logo</a>
|
||||
<a href="#">Link</a>
|
||||
</header></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> The <code>.logo</code> element should not be a <code><button></code> or a <code>.button</code> element. On the other hand, links and labels in the <code><header></code> should not be without a <code>.button</code> class. Ignoring this rule might cause unexpected behavior.</p>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> The <code>.logo</code> element should neither be a <code><button></code> or a <code>.button</code> element nor have 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. On the other hand, links and labels in the <code><header></code> should not be without a <code>.button</code> class or a <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. Ignoring this rule might cause unexpected behavior.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -125,7 +125,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Navigation bar</h2></div>
|
||||
<div class="section row">
|
||||
@@ -178,7 +178,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Footer</h2></div>
|
||||
<div class="section row">
|
||||
@@ -197,9 +197,35 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Sticky headers and footers</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12">
|
||||
<p>You can create sticky headers and footers, using the <code>.sticky</code> class on either of these elements.</p>
|
||||
<h3>Sample code</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>
|
||||
<div class="section">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Sticky headers and footers are compatible with modern browsers, but might not display properly in older browsers. Support is being added over time, so be sure to check out if your target platforms support <a href="http://caniuse.com/#feat=css-sticky"><code>position:sticky</code></a>.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
|
||||
<div class="col-sm">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<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>
|
||||
|
||||
@@ -858,3 +858,5 @@
|
||||
- Added accessibility guidelines for `breadcrumbs`.
|
||||
- Added accessibility guidelines for `alert`s.
|
||||
- Documented `tooltip`. No *dos* and *don'ts* seem to be required, as the use cases are really really simple.
|
||||
- Added accessibility guidelines for using `role="button"` in `navigation`.
|
||||
- Added `sticky` documentation in `navigation`. No *dos* and *dont's* either, I'm afraid, can't find any troublesome things with this.
|
||||
|
||||
Reference in New Issue
Block a user