From 586599108f3b2bde4b739c2b186e9bb705ad0278 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 27 Jun 2017 22:59:33 +0800 Subject: Add Colors utilities #205 --- docs/utilities.html | 255 +++++++++++++++++++++++++++++++++++----------------- 1 file changed, 171 insertions(+), 84 deletions(-) (limited to 'docs/utilities.html') diff --git a/docs/utilities.html b/docs/utilities.html index 27706a7..8739d52 100644 --- a/docs/utilities.html +++ b/docs/utilities.html @@ -47,22 +47,28 @@ Utilities @@ -74,30 +80,77 @@
-
-

Position utilities

+
+

Color utilities

-

Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.

+

Color utilities are used for changing colors for text, link and background.

+
+

Text colors

+
+

+ primary color + secondary color + gray color + light color + success color + warning color + error color +

- -
<!-- clear float -->
-<div class="clearfix"></div>
-<!-- float: left and right -->
-<div class="float-left"></div>
-<div class="float-right"></div>
-<!-- position: relative, absolute and fixed -->
-<div class="rel"></div>
-<div class="abs"></div>
-<div class="fixed"></div>
-<!-- centered block -->
-<div class="centered"></div>
-<!-- margin: 10px and 5px in 4 directions. mt-10 = margin-top: 10px; -->
-<div class="mt-10"></div>
-<div class="mt-5"></div>
-<!-- padding: 10px and 5px in 4 directions. pt-10 = padding-top: 10px; -->
-<div class="pt-10"></div>
-<div class="pt-5"></div>
+
+
<span class="text-primary">primary color</span>
+<span class="text-secondary">secondary color</span>
+<span class="text-gray">gray color</span>
+<span class="text-light">light color</span>
+<span class="text-success">success color</span>
+<span class="text-warning">warning color</span>
+<span class="text-error">error color</span>
+

+
+          

+            

+              primary link
+              secondary link
+              gray link
+              light link
+              success link
+              warning link
+              error link
+            

+          

+
+
+
<a class="text-primary" href="#">primary color</a>
+<a class="text-secondary" href="#">secondary color</a>
+<a class="text-gray" href="#">gray color</a>
+<a class="text-light" href="#">light color</a>
+<a class="text-success" href="#">success color</a>
+<a class="text-warning" href="#">warning color</a>
+<a class="text-error" href="#">error color</a>
+

+
+          
Background colors

+          

+            

+              primary bg
+              secondary bg
+              dark bg
+              gray bg
+              success bg
+              warning bg
+              error bg
+            

+          

+
+
+
<div class="bg-primary">primary bg</div>
+<div class="bg-secondary">secondary bg</div>
+<div class="bg-dark">dark bg</div>
+<div class="bg-gray">gray bg</div>
+<div class="bg-success">success bg</div>
+<div class="bg-warning">warning bg</div>
+<div class="bg-error">error bg</div>
@@ -133,63 +186,6 @@
-
-

Text utilities

-
-

Text utilities are used for text alignment, styles and overflow things.

-
- - -
<!-- left-aligned text -->
-<div class="text-left"></div>
-<!-- center-aligned text -->
-<div class="text-center"></div>
-<!-- right-aligned text -->
-<div class="text-right"></div>
-<!-- justified text -->
-<div class="text-justify"></div>
-
-<!-- Lowercased text -->
-<div class="text-lowercase"></div>
-<!-- Uppercased text -->
-<div class="text-uppercase"></div>
-<!-- Capitalized text -->
-<div class="text-capitalize"></div>
-
-<!-- Normal weight text -->
-<div class="text-normal"></div>
-<!-- Bold text -->
-<div class="text-bold"></div>
-<!-- Italicized text -->
-<div class="text-italic"></div>
-<!-- Larger text (120%) -->
-<div class="text-large"></div>
-
-<!-- Overflow behavior: display an ellipsis to represent clipped text -->
-<div class="text-ellipsis"></div>
-<!-- Overflow behavior: truncate the text -->
-<div class="text-clip"></div>
-<!-- Text may be broken at arbitrary points -->
-<div class="text-break"></div>
-
- -
- -
-

Shape utilities

-
-

Shape utilities are used for change element shapes.

-
- - -
<!-- rounded element -->
-<div class="rounded"></div>
-<!-- circle element -->
-<div class="circle"></div>
-
- -
-

Divider

@@ -243,7 +239,7 @@
- + 
<!-- divider element -->
 <div class="divider"></div>
 <!-- divider element with text -->
@@ -280,6 +276,97 @@
 
         
 
+        

+          
Position utilities

+          

+            
Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.

+          

+
+
+
<!-- clear float -->
+<div class="clearfix"></div>
+<!-- float: left and right -->
+<div class="float-left"></div>
+<div class="float-right"></div>
+<!-- position: relative, absolute and fixed -->
+<div class="rel"></div>
+<div class="abs"></div>
+<div class="fixed"></div>
+<!-- centered block -->
+<div class="centered"></div>
+<!-- margin: 10px and 5px in 4 directions. mt-10 = margin-top: 10px; -->
+<div class="mt-10"></div>
+<div class="mt-5"></div>
+<!-- m-10 = margin: 10px; -->
+<div class="m-10"></div>
+<div class="m-5"></div>
+<!-- padding: 10px and 5px in 4 directions. pt-10 = padding-top: 10px; -->
+<div class="pt-10"></div>
+<div class="pt-5"></div>
+<!-- p-10 = padding: 10px; -->
+<div class="p-10"></div>
+<div class="p-5"></div>
+

+
+        

+
+        

+          
Shape utilities

+          

+            
Shape utilities are used for change element shapes.

+          

+
+
+
<!-- rounded element -->
+<div class="rounded"></div>
+<!-- circle element -->
+<div class="circle"></div>
+

+
+        

+
+        

+          
Text utilities

+          

+            
Text utilities are used for text alignment, styles and overflow things.

+          

+
+
+
<!-- left-aligned text -->
+<div class="text-left"></div>
+<!-- center-aligned text -->
+<div class="text-center"></div>
+<!-- right-aligned text -->
+<div class="text-right"></div>
+<!-- justified text -->
+<div class="text-justify"></div>
+
+<!-- Lowercased text -->
+<div class="text-lowercase"></div>
+<!-- Uppercased text -->
+<div class="text-uppercase"></div>
+<!-- Capitalized text -->
+<div class="text-capitalize"></div>
+
+<!-- Normal weight text -->
+<div class="text-normal"></div>
+<!-- Bold text -->
+<div class="text-bold"></div>
+<!-- Italicized text -->
+<div class="text-italic"></div>
+<!-- Larger text (120%) -->
+<div class="text-large"></div>
+
+<!-- Overflow behavior: display an ellipsis to represent clipped text -->
+<div class="text-ellipsis"></div>
+<!-- Overflow behavior: truncate the text -->
+<div class="text-clip"></div>
+<!-- Text may be broken at arbitrary points -->
+<div class="text-break"></div>
+

+
+        

+
         

           

           
    
-- 
cgit v1.3.1-26-gb76a