From 18d0823b55dab1380b1f61156fb13b073a51ecbe Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Sun, 12 Feb 2017 20:56:21 +0200 Subject: [PATCH] Updated navigation documentation --- docs/input_control.html | 14 ++++++------ docs/navigation.html | 48 +++++++++++++++++++++++++++++++---------- docs/v2/DEVLOG.md | 2 ++ 3 files changed, 46 insertions(+), 18 deletions(-) diff --git a/docs/input_control.html b/docs/input_control.html index 9a1f2d5..45becb7 100644 --- a/docs/input_control.html +++ b/docs/input_control.html @@ -44,7 +44,7 @@
-
+

Input Control

The input_control 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.

All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.

@@ -52,7 +52,7 @@
-
+

Quick overview

@@ -67,7 +67,7 @@
-
+

Forms & input

@@ -231,7 +231,7 @@
-
+

Checkboxes & radio buttons

@@ -319,7 +319,7 @@
-
+

Buttons & button groups

@@ -398,7 +398,7 @@
-
+

File upload buttons

@@ -437,7 +437,7 @@
-
+

If you want to learn more about mini.css's modules, go back to the modules page and choose another module to see its documentation.

diff --git a/docs/navigation.html b/docs/navigation.html index 667648e..99e5d88 100644 --- a/docs/navigation.html +++ b/docs/navigation.html @@ -3,7 +3,7 @@ - mini.css - navigation + mini.css - Navigation @@ -43,7 +43,7 @@
-
+

Navigation

The navigation 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.

All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.

@@ -51,7 +51,7 @@
-
+

Quick overview

@@ -66,7 +66,7 @@
-
+

Header

@@ -80,7 +80,7 @@
-

The <header> HTML element is used for a page's top horizontal navigation menu. It can contain a unique .logo 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 <header> must be <button>, <label class="button"> or <a class="button"> elements in order to be styled properly. Textual separators between those can be added using <span> elements.

+

The <header> HTML element is used for a page's top horizontal navigation menu. It can contain a unique .logo 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 <header> must be button elements (i.e. <button>, <input type="button">, role="button" or .button) in order to be styled properly. Textual separators between those can be added using <span> elements.

Sample code

<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>
@@ -115,9 +115,9 @@ <!-- or --> <header> <a href="#" class="logo">Logo</a> - <a href="#">Link</a> + <a href="#">Link</a> </header> -

Don't: The .logo element should not be a <button> or a .button element. On the other hand, links and labels in the <header> should not be without a .button class. Ignoring this rule might cause unexpected behavior.

+

Don't: The .logo element should neither be a <button> or a .button element nor have the role="button" attribute. On the other hand, links and labels in the <header> should not be without a .button class or a role="button" attribute. Ignoring this rule might cause unexpected behavior.

@@ -125,7 +125,7 @@
-
+

Navigation bar

@@ -178,7 +178,7 @@
-
+

Footer

@@ -197,9 +197,35 @@
+
+
+
+
+

Sticky headers and footers

+
+
+

You can create sticky headers and footers, using the .sticky class on either of these elements.

+

Sample code

+ 
<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>
+
+
+
+

Notes

+
    +
  • 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 position:sticky.
    • +
+
+
+
-
+

If you want to learn more about mini.css's modules, go back to the modules page and choose another module to see its documentation.

diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index e15baad..86c7fed 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -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.