From d435fa64ec27cbcf2a571cad955b1ed2b40a3231 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Mon, 19 Sep 2016 14:02:44 +0300 Subject: [PATCH] Utilities and helpers demo --- docs/modules.html | 52 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) diff --git a/docs/modules.html b/docs/modules.html index 54d315f..434036d 100644 --- a/docs/modules.html +++ b/docs/modules.html @@ -674,7 +674,59 @@ </div>
+

Utilities & Helper classes

+

The core utiltiy module contains a set of useful utilities and helper classes to make common tasks easier when developing new pages.

+

Generic borders

+

By using the opacity CSS property in a creative way, along with border-radiuses, we have created utility classes that will create generic borders for virtually any element you want. Simply add the .bordered class to create a generic border around an element. You can also use the .rounded and .circle classes (with or without the border style) to create reounded or circular corners for different elements accordingly.

+

Example


+ Button with generic border:  
+ Image with generic border and rounded corners:  
+ Image with circular corners:  
+ 
<button class="btn blue bordered">Button</button>
+<img class="bordered rounded" src="favicon.png">
+<img class="circle" src="favicon.png">
+
+ + +

Contextual colors and backgrounds

+

You can easily add contextual text or background color to certain textual elements by simply using one of the contextual prefixes (.txt- and .bg- respectively) and a color suffix (red, green or blue).

+

Example

+

Here is some text with contextual colors: red, green & blue.
+ And here is some text with contextual backgrounds: red, green & blue.

+ 
<span class="txt-red">red text</span>
+<span class="txt-green">green text</span> 
+<span class="txt-blue">blue text</span>
+
+<span class="bg-red">red background</span>
+<span class="bg-green">green background</span>
+<span class="bg-blue">blue background</span>
+
+ +

Image thumbnails

+

Image thumbnails can be used to stylize images by adding a custom border around them by simply using the .thumb class.

+

Example


+   

+ 
<img class="thumb" src="favicon.png">
+
+ +

Utility symbols

+

You can easily add carets and close symbols by using the .caret and .close classes respectively.

+

Example

+    +
+ 
<span class="caret"></span>
+<span class="close"></span>
+
+ +

Helper classes

+

Apart from the above utilities, there are some extra classes provided to help streamline the development process. Some of these classes use the !important property to override other styles, so be careful when using them. The provided helper classes are as follows:

+