From a2f1864da01e76c59d682b897398b100eb3bc25a Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Thu, 3 Aug 2017 19:08:54 +0800 Subject: Update the Docs HTML structure --- docs/layout.html | 146 +++++++++++++++++++++++++++---------------------------- 1 file changed, 73 insertions(+), 73 deletions(-) (limited to 'docs/layout.html') diff --git a/docs/layout.html b/docs/layout.html index c910811..c90809a 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -12,22 +12,22 @@ -
-
+
+
+
GitHub -
+ -
- + + -
-
+
+
+ -
+

Responsive grid

Spectre provides a neat responsive layout grid system and responsive visibility utilities.

@@ -389,7 +389,7 @@
-
+

There are col-xs-[1-12], col-sm-[1-12], col-md-[1-12], col-lg-[1-12] and col-xl-[1-12] available for flexible grid across mobile, tablet and desktop viewport usage.

  • col-xs-[1-12] apply to window width smaller than or equal to 480px.
    • @@ -398,7 +398,7 @@
  • col-lg-[1-12] apply to window width smaller than or equal to 960px.
  • col-xl-[1-12] apply to window width smaller than or equal to 1280px.
-
+ 
<div class="container">
@@ -482,7 +482,7 @@
             
           
 
-          

+          

             
For hiding elements on specific viewport sizes, there are classes hide-xs, hide-sm, hide-md, hide-lg and hide-xl available.

             
    
               
  • hide-xs hides elements when the window width is smaller than or equal to 480px. 
    • 
@@ -491,7 +491,7 @@
               
  • hide-lg hides elements when the window width is smaller than or equal to 960px. 
    • 
               
  • hide-xl hides elements when the window width is smaller than or equal to 1280px. 
    • 
             

-          

+          
 
           
@@ -548,7 +548,7 @@
             

             
           

 
-          

+          

             
For showing elements on specific viewport sizes, there are classes show-xs, show-sm, show-md, show-lg and show-xl available.

             
    
               
  • show-xs shows elements when the window width is smaller than or equal to 480px. 
    • 
@@ -559,34 +559,34 @@
             

             
Spectre also has a responsive web test tool Responsive Resizer. You can clone the GitHub Repo to use it locally or use it online.

             
Responsive Resizer

-          

-
+ + - -
+ + -
+

The navbar component can include logo brand, nav links and buttons, search box or any combination of those elements. Each section with the navbar-section class will be evenly distributed in the container.

-
+ 
<header class="navbar">
@@ -606,24 +606,24 @@
 
           

             

-              

-                

+              

+                

                   Docs
                   Examples
-                

-                

+                

+                

                   

-                
-                

+                

+                

                   Twitter
                   GitHub
-                
-              
+                

+              

             
           
-          

+          

             
You can use navbar-center class to have a centered section.

-          

+          
 
 
 
<header class="navbar">
@@ -641,13 +641,13 @@
 </header>
 

 
-        
+        
 
-        

+        

           
Panels

-          

+          

             
Panels are flexible view container layout with auto-expand content section.

-          

+          

           

             

               

@@ -781,9 +781,9 @@
             

           

 
-          

+          

             
Add a container element with the panel class. And add child elements with the panel-header, panel-nav, panel-body and/or panel-footer class. The panel-body can be auto expanded and vertically scrollable. 

-          

+          

 
 
 
<div class="panel">
@@ -802,16 +802,16 @@
 </div>
 

 
-        

+        
 
-        

+        

           
Empty states / blank slates

-          

+          

             
Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.

-          

+          

           

             

-              

+              

                 

                   
                 

@@ -820,10 +820,10 @@
                 

                   
                 

-              

+              

             

             

-              

+              

                 

                   
                 

@@ -835,10 +835,10 @@
                 

                   
                 

-              

+              

             
             

-              

+              

                 

                   
                 

@@ -848,13 +848,13 @@
                   
                   
                 

-              

+              

             
           
 
-          

+          

             
An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements. Add empty-icon, empty-title, empty-subtitle or empty-action to the elements. HTML structure is exampled below. 

-          

+          
 
 
 
<div class="empty">
@@ -869,9 +869,9 @@
 </div>
 

 
-        

+        
 
-        

+        

           

           
    
             
  • 
@@ -887,18 +887,18 @@
               
             
    • 
           

-        

+        
       
-    
-  
+    
+  
 
-