loading-img

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;
To-do List
TODAY
TOMORROW