From f3f58b3e5212edef28d575bf445acc6e6b24a22d Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sun, 10 Apr 2016 14:57:45 +0800 Subject: update doc and code cleanup --- index.html | 140 +++++++++++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 128 insertions(+), 12 deletions(-) (limited to 'index.html') diff --git a/index.html b/index.html index a3f627c..c8028a5 100644 --- a/index.html +++ b/index.html @@ -30,7 +30,7 @@ margin: 4rem 0; } .notes { - margin: 2rem 0; + margin: 4rem 0; color: #666; } .code { @@ -144,13 +144,24 @@
H5 Title 2rem
H6 Title 1.6rem
+ +
+<h1>H1 Title</h1>
+<h2>H2 Title <small class="label">4rem</small></h2>
+
+
paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+ +
+<p>Lorem ipsum dolor sit amet, <span class="highlight">consectetur</span> adipiscing elit. <a href="#">Integer</a> posuere erat a ante.</p>
+<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+
+
blockquote
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

- Source
@@ -581,10 +592,12 @@ 
 <form>
+    <!-- form input control -->
     <div class="form-group">
         <label class="form-label" for="input-example-1">Name</label>
         <input class="form-input" type="text" id="input-example-1" placeholder="Name" />
     </div>
+    <!-- form radio control -->
     <div class="form-group">
         <label class="form-label">Gender</label>
         <label class="form-radio">
@@ -594,6 +607,7 @@
             <input type="radio" name="gender" checked /> Female
         </label>
     </div>
+    <!-- form select control -->
     <div class="form-group">
         <select class="form-select">
             <option>Choose an option</option>
@@ -602,16 +616,19 @@
             <option>Hipchat</option>
         </select>
     </div>
+    <!-- form switch control -->
     <div class="form-group">
         <label class="form-switch">
             <input type="checkbox" />
             Send me emails with news and tips
         </label>
     </div>
+    <!-- form textarea control -->
     <div class="form-group">
         <label class="form-label" for="input-example-3">Message</label>
         <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
     </div>
+    <!-- form checkbox control -->
     <div class="form-group">
         <label class="form-checkbox">
             <input type="checkbox" />
@@ -795,11 +812,11 @@
             

                 

                     

-                        
                         Crime
                         
                     

                     

+                        
                         Drama
                         
                     

@@ -814,17 +831,17 @@
                 

                 

                     

-                        
+                        
                         Yan Zhu
                         
                     

                     

-                        
+                        
                         Yan Zhu
                         
                     

                     

-                        
+                        
                         Yan Zhu
                         
                     

@@ -833,6 +850,27 @@
             

                 
Add a container element with the class chip. And add child text elements with chip-name or icons with  icon.

             

+
+            
+
+<div class="chip">
+    <span class="chip-name">Crime</span>
+    <button class="btn btn-clear"></button>
+</div>
+
+<div class="chip">
+    <span class="icon icon-favorite_border"></span>
+    <span class="chip-name">Drama</span>
+    <button class="btn btn-clear"></button>
+</div>
+
+<div class="chip">
+    <img src="img/avatar-1.png" class="avatar" />
+    <span class="chip-name">Yan Zhu</span>
+    <button class="btn btn-clear"></button>
+</div>
+

+
         
 
         

@@ -856,8 +894,8 @@
             

                 
Tooltips provide context information labels that appear on hover and focus.

             

-            

-                

+            

+                

                     
                 

                 

@@ -871,6 +909,7 @@
                 

             

             

+                
Tooltip component is built entirely in CSS.

                 
Add the class tooltip and the attribute data-tooltip, which contains the tooltip content, to non self closing elements. And add the class name tooltip-right, tooltip-bottom or tooltip-left to define the position of a tooltip. By default, the tooltip appears above the element.

             

 
@@ -1094,17 +1133,19 @@
                 

             

             

-                
Add a container element with the class menu. And add child elements with the classname menu-item.

+                
Add a container element with the class menu. And add child elements with the classname menu-item. You can separate menu items with a divider or menu-header. 

             

 
             
 
 <ul class="menu">
+    <!-- menu header -->
     <li class="menu-header">
         <span class="menu-header-text">
             Go to
         </span>
     </li>
+    <!-- menu item -->
     <li class="menu-item">
         <a href="#">
             <span class="icon icon-link"></span> Slack
@@ -1120,6 +1161,13 @@
             <span class="icon icon-link"></span> Skype
         </a>
     </li>
+    <!-- menu divider -->
+    <li class="divider"></li>
+    <li class="menu-item">
+        <a href="#">
+            <span class="icon icon-link"></span> Settings
+        </a>
+    </li>
 </ul>
 

 
@@ -1271,7 +1319,7 @@
                         

                             

                                 
-                                
Modal title

+                                
Modal title

                             

                             

                                 

@@ -1310,7 +1358,7 @@
                 

             

             

-                
Add a container element with the class modal and add another container modal-container inside it. And add child elements with the class name modal-header, modal-content and/or modal-footer. 

+                
Add a container element with the class modal and add another container modal-container inside it. You can add child elements with the class name modal-header, modal-content and modal-footer - any or all of them. 

             

 
             
@@ -1319,7 +1367,7 @@
     <div class="modal-container">
         <div class="modal-header">
             <button class="btn btn-clear pull-right"></button>
-            <h6 class="modal-title">Modal title</h6>
+            <div class="modal-title">Modal title</div>
         </div>
         <div class="modal-body">
             <div class="content">
@@ -1332,6 +1380,74 @@
         </div>
     </div>
 </div>
+
+ +
modal sizes
+
+
+
+
+
+ +
Modal title
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +
+
+
+ + +
+
+
+
+
+
+
+
+ +
Modal title
+
+
+
+
+
+ + +
+
+ + + +
+
+
+
+
+ + +
+
+
+
+
+
+

Add the class modal-sm for a smaller modal dialog.

+
+ + +
+<div class="modal modal-sm">
+    <div class="modal-container">
+        <!-- modal structure here -->
+    </div>
+</div>
-- cgit v1.3.1-23-gd82d