assets/css/less/utility.less
that may be useful.
.smaller
makes font size smaller.bigger
makes font weight biggerBigger H4
.lighter
makes font weight light.bolder
makes font weight boldLighter Text
.dark
.white
.red
.red2
.light-red
.blue
.light-blue
.green
.light-green
.orange
.orange2
.light-orange
.purple
.pink
.pink2
.brown
.grey
.light-grey
Blue Text
.bigger-110
.bigger-120
.bigger-290
.bigger-300
.bigger-125
.bigger-175
.bigger-225
.bigger-275
.smaller-90
.smaller-80
...
.smaller-30
.smaller-20
...
.smaller-75
.smaller-25
Smaller Text
.inline
applies display: inline-block
.block
applies display: block
.pos-rel
.position-relative
.pos-abs
.position-absolute
.inline
and .position-relative
can be used to add a dropdown inside a DIV
element without the need to define a new class:
.center
.align-center
.align-left
.align-right
.middle
.align-middle
.align-top
.align-bottom
.no-float
.no-padding
.no-padding-right
.no-padding-left
.no-padding-top
.no-padding-bottom
.no-margin
.no-margin-right
.no-margin-left
.no-margin-top
.no-margin-bottom
.no-border
.no-border-right
.no-border-left
.no-border-top
.no-border-bottom
.width-100
.width-90
.width-20
.width-75
.width-25
.width-auto
.height-auto
......
.spaced
and .spaced2
to
ul
and ol
lists for more spacing:
.space
.space-0
.space-2
.space-4
.space-30
.space-32
.vspace-2-xs
.vspace-4-xs
.vspace-30-xs
.vspace-32-xs
.vspace-2-sm
.vspace-4-sm
.vspace-2-md
.vspace-4-md
.vspace-2-lg
.vspace-4-lg
.hr
.hr.hr-2
.hr.hr-4
.hr.hr-30
.hr.hr-32
.hr.hr-dotted
.hr.hr-double
.header
with same text colors as above:
Header Text
.action-buttons
:
.grid2
.grid3
.grid4
elements
are less responsive and good for small pieces of content and have a border line separating them: