From dc16eadae87b4c0d5b2cf213e9de7e74ddaab035 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Tue, 22 Nov 2016 11:22:26 +0200 Subject: [PATCH] Navigation documentation initial commit --- docs/v2/DEVLOG.md | 3 + docs/v2/navigation.html | 238 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 241 insertions(+) create mode 100644 docs/v2/navigation.html diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index 659ebf4..20019f9 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -515,3 +515,6 @@ - Added side `padding` to the `horizontal` `table`s. - Fixed the way `th` elements display on `vertical` `table`s that contain `th` elements inside the `tbody` by adding a semi-specific rule for the `thead` `th` elements. More specificity caused problems. - Tested `table` module changes on mobile, Firefox and Chrome. +- Created `navigation.html`. +- Added basic info for `navigation` doc page. +- Added basic structure for `navigation` doc page. diff --git a/docs/v2/navigation.html b/docs/v2/navigation.html new file mode 100644 index 0000000..951029d --- /dev/null +++ b/docs/v2/navigation.html @@ -0,0 +1,238 @@ + + + + + + + + + mini.css - Navigation + + + + + + + + + +
+
+ Introduction + Modules + Flavors + Customization + Github +
+
+
+
+
+
+ +

mini.css

+ v2.0 +
+
+
+
+ +
+
+
+

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.

+ +
+
+
+
+
+
+

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.


+
+
+

Quick start

+

To use the navigation 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 <head> to utilize the viewport meta tag:


+ 
<meta name="viewport" content="width=device-width, initial-scale=1">

+
+
+
+
+
+
+
+
+

Header

+
+
+
+ +
+
+

+

Sample code

+ 

+              

+            

+            

+            
Notes

+              
    
+                
  • 
+                
  • 
+              

+              

+              

+                

+                  

+                  
Do: 

+                

+                

+                  

+                  
Don't: 

+                

+              

+            

+          

+        

+      

+      

+        

+          

+            

+              
Navigation Bar

+            

+            

+              

+              
+              

+              

+                

+                
Sample code

+                

+              

+            

+            

+            
Notes

+              
    
+                
  • 
+                
  • 
+              

+              

+              

+                

+                  

+                  
Do: 

+                

+                

+                  

+                  
Don't: 

+                

+              

+            

+          

+        

+      

+      

+        

+          

+            

+              
Footer

+            

+            

+              

+              
+              

+              

+                

+                
Sample code

+                

+              

+            

+            

+            
Notes

+              
    
+                
  • 
+                
  • 
+              

+              

+              

+                

+                  

+                  
Do: 

+                

+                

+                  

+                  
Don't: 

+                

+              

+            

+          

+        

+      
    
+      

+        

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

+        

+      

+    

+    
+    
+  
+
\ No newline at end of file