Helper Classes
Helper Classes
You don't need to create new css class for simple edits.
We already did it for you.
- Easy to Use
- Size Options
- Text Options
- Colors
Padding
All size: 0,5,10,15,20,25,30,35,40,45,50px
Class | Preview | Description |
.padding-5 |
Demo
|
padding: 5px |
.padding-l-5 |
Demo
|
padding-left: 5px |
.padding-r-5 |
Demo
|
padding-right: 5px |
.padding-t-5 |
Demo
|
padding-top: 5px |
.padding-b-5 |
Demo
|
padding-bottom: 5px |
Margin
All size: 0,5,10,15,20,25,30,35,40,45,50px
Class | Preview | Description |
.margin-5 |
Demo
|
margin: 5px |
.margin-l-5 |
Demo
|
margin-left: 5px |
.margin-r-5 |
Demo
|
margin-right: 5px |
.margin-t-5 |
Demo
|
margin-top: 5px |
.margin-b-5 |
Demo
|
margin-bottom: 5px |
Float
Class | Preview | Description |
.float-l |
Demo
|
float: left |
.float-r |
Demo
|
float: right |
.float-n |
Demo
|
float: none |
Text Align
Class | Preview | Description |
.text-r |
Demo
|
text-align: right |
.text-l |
Demo
|
text-align: left |
.text-c |
Demo
|
text-align: center |
Border
Class | Preview | Description |
.border-b-none |
Demo
|
border-bottom: none |
.border-t-none |
Demo
|
border-top: none |
.border-l-none |
Demo
|
border-left: none |
.border-r-none |
Demo
|
border-right: none |
.border-none |
Demo
|
border: none |
Text Size and Styles
Class | Preview | Description |
.f-size-10 |
Demo
|
font-size: 10px All size available 10 to 32 |
.f-size-16 |
Demo
|
font-size: 16px |
.f-bold |
Demo
|
font-weight: bold |
.f-italic |
Demo
|
font-style: italic |
.f-underline |
Demo
|
text-decoration: underline |
Colors
Class | Preview | Description |
.color1 |
Demo
|
color: @color1; |
.color2 |
Demo
|
color: @color2; |
.color3 |
Demo
|
color: @color3; |
.color4 |
Demo
|
color: @color4; |
.color5 |
Demo
|
color: @color5; |
.color6 |
Demo
|
color: @color6; |
.color7 |
Demo
|
color: @color7; |
.color8 |
Demo
|
color: @color8; |
.color9 |
Demo
|
color: @color9; |
.color10 |
Demo
|
color: @color10; |
.color11 |
Demo
|
color: @color11; |
.color12 |
Demo
|
color: @color12; |
.color13 |
Demo
|
color: @color13; |
.color14 |
Demo
|
color: @color14; |
.color15 |
Demo
|
color: @color15; |
Background Colors
Class | Preview | Description |
.color1-bg |
background: @color1; | |
.color2-bg |
background: @color2; | |
.color3-bg |
background: @color3; | |
.color4-bg |
background: @color4; | |
.color5-bg |
background: @color5; | |
.color6-bg |
background: @color6; | |
.color7-bg |
background: @color7; | |
.color8-bg |
background: @color8; | |
.color9-bg |
background: @color9; | |
.color10-bg |
background: @color10; | |
.color11-bg |
background: @color11; | |
.color12-bg |
background: @color12; | |
.color13-bg |
background: @color13; | |
.color14-bg |
background: @color14; | |
.color15-bg |
background: @color15; |