From 53ef83e087f7fc18dc92c4ff437f6d41fa2a6709 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Tue, 22 Nov 2016 21:00:19 +0200 Subject: [PATCH] Navigation module documentation complete --- docs/v2/DEVLOG.md | 2 ++ docs/v2/navigation.html | 67 +++++++++++++++++++---------------------- 2 files changed, 33 insertions(+), 36 deletions(-) diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index b404d94..3d7f987 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -526,3 +526,5 @@ - Added some extra styling to the `header` component, allowing `span` elements to be used as separators between links. - Added defaults to header at the very top. - Added description for the `header` component in the `navigation` doc page. +- Added description for the `nav` component in the `navigation` doc page. +- Added `footer` documentation in the `navigation` doc page. Finished the page. diff --git a/docs/v2/navigation.html b/docs/v2/navigation.html index 6e7ea51..fa7ec59 100644 --- a/docs/v2/navigation.html +++ b/docs/v2/navigation.html @@ -45,12 +45,12 @@ .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 { + .col-sm-12.col-sm-last.col-lg-4.col-lg-normal { box-sizing: border-box; border-right: 1px solid #bdbdbd; } @media (max-width: 800px){ - .col-sm-12.col-sm-last.col-md-4.col-md-normal { + .col-sm-12.col-sm-last.col-lg-4.col-lg-normal { border: 0; border-top: 1px solid #bdbdbd; } @@ -105,7 +105,7 @@

Quick overview

-

Menus and navigation are some of the most important elements for any website or web app and their design and ease-of-use are key factors that can determine a page's bounce rates. The navigation module takes a step back from all the complicated menu and navigation design paradigms of the modern web, like dropdown menus and hamburger buttons, and tries to reinvent the basics for page navigation using HTML5 elements (i.e. header, nav and footer). Instead of sticking to either horizontal navigation menus (headers) or vertical menus (sidebars), we opted to allow the use of both for different things. Header menus are designed to stand out and contain links to help users find new content, whereas vertical navigation aims to provide a more traditional navigation menu that maps out your website's structure. Finally, footers are also part of the navigation module, as they can often provide the user with useful information and/or links that are very important to enhancing their experience.


+

Menus and navigation are some of the most important elements for any website or web app and their design and ease-of-use are key factors that can determine a page's bounce rates. The navigation module takes a step back from all the complicated menu and navigation design paradigms of the modern web, like dropdown menus and hamburger buttons, and tries to reinvent the basics for page navigation using HTML5 elements (i.e. header, nav and footer) and make navigation fully accessible for screen readers. Instead of sticking to either horizontal navigation menus (headers) or vertical menus (sidebars), we opted to allow the use of both for different things. Header menus are designed to stand out and contain links to help users find new content, whereas vertical navigation aims to provide a more traditional navigation menu that maps out your website's structure. Finally, footers are also part of the navigation module, as they can often provide the user with useful information and/or links that are very important to enhancing their experience.


Quick start

@@ -189,7 +189,7 @@

Navigation Bar

-
+
-

+

To add vertical navigation to your websites, use the <nav> HTML element. Adding links is pretty simple, just use <a> elements, no lists or anything else required. In order to add subcategories to your vertical navigation, use any normal textual element as the title of the subcategory and follow it with its links as normal, adding the .sublink-1 class to them. Similarly, you can create a subcategory with a depth of 2, using a similar structure and the .sublink-2 class.

Sample code

- 

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

               

             

             

             
Notes

               
    
-                
  • 
-                
  • 
+                
  • Subcategories and their links support a depth of 2 by default. If, however, you need more than that, we recommend you check the customization page for instructions on how to add more depth to the vertical navigation.
    • 
+                
  • We strongly suggest you do not add irrelevant things inside your &nav; element, like images or text that are not part of the navigation menu.
    • 
               

               

               

-                

-                  

-                  
Do: 

-                

-                

-                  

-                  
Don't: 

+                

+                  
<div class="col-sm-12 col-sm-last col-md-3 col-md-first">
+      <nav>
+            <!-- navigation content -->
+      </nav>
+</div>

+                  
Do: We strongly recommend using the <nav> element in combination with the grid module to make your layouts more responsive. For example, you could make your sidebar appear on the left side of your content in medium-sized and larger screens, but move to the very bottom of your content on smaller screens.

                 

               

             

@@ -251,27 +262,11 @@
                 

               

               

-                

+                
The <footer> element is used to create your page's footer. As normal, add the <footer> at or near the end of your <body> element and add content to it like you would otherwise.

                 
Sample code

-                

-              

-            

-            

-            
Notes

-              
-              

-              

-                

-                  

-                  
Do: 

-                

-                

-                  

-                  
Don't: 

-                

+                
<footer>
+      <p>&copy; 2001-2016 Web Corporation | <a href="#">About</a> | <a href="#">Terms of use</a></p>
+</footer>