Common CSS helper classes.
Install with Npm or Bower
To install with npm run
$ npm install helper-css-light --save
Include css/helper-css.min.css
style in your page and start using css helper classes.
CSS helper classes: Alignments, Display, Text Aling, Margins, Paddings, Border Radius, Rotates
All margin and padding have properties for distances 0, .25rem(-1), .5rem(-2), 1rem(-3), 1.5rem(-4), 3rem(*-5).
Margin classes starts with m-
, padding classes starts p-
.
Following is the number that represents space in pixels and (optional) direction. Direction can be t
, l
, r
and b
.
Example:
Margins(m) and Paddings(p) BY BOOTSTRAP
t
: for classes that set margin-top
or padding-top
b
: for classes that set margin-bottom
or padding-bottom
l
: for classes that set margin-left
or padding-left
r
: for classes that set margin-right
or padding-right
x
: for classes that set both *-left
and *-right
y
: for classes that set both *-top
and *-bottom
Margins(m)
Where size is one of:
0
- for classes that eliminate the margin
or padding
by setting it to 01
- (by default) for classes that set the margin
or padding
to $spacer * .25
2
- (by default) for classes that set the margin
or padding
to $spacer * .5
3
- (by default) for classes that set the margin
or padding
to $spacer
4
- (by default) for classes that set the margin
or padding
to $spacer * 1.5
5
- (by default) for classes that set the margin
or padding
to $spacer * 3
auto - for classes that set the margin to auto
for example($space = 1rem by default)
m-0
: assigns margin: 0
property
m-1
: assigns margin: 0.25rem
propertymt-1
: assigns margin-top: 0.25rem
propertymb-1
: assigns margin-bottom: 0.25rem
propertyml-1
: assigns margin-left: 0.25rem
propertymr-1
: assigns margin-right: 0.25rem
propertymx-1
: assigns margin-left: 0.25rem; margin-right: 0.25rem
propertymy-1
: assigns margin-top: 0.25rem; margin-bottom: 0.25rem
property
…m-2
: assigns margin: 0.5rem
propertym-3
: assigns margin: 1rem
propertym-4
: assigns margin: 1.5rem
propertym-5
: assigns margin: 3rem
propertyand variants md
: m*-md-*
….
Paddings(m)
p-0
: assigns padding: 0
property
p-1
: assigns padding: 0.25rem
propertypt-1
: assigns padding-top: 0.25rem
propertypb-1
: assigns padding-bottom: 0.25rem
propertypl-1
: assigns padding-left: 0.25rem
propertypr-1
: assigns padding-right: 0.25rem
propertypx-1
: assigns padding-left: 0.25rem; padding-right: 0.25rem
propertypy-1
: assigns padding-top: 0.25rem; padding-bottom: 0.25rem
property
…p-2
: assigns padding: 0.5rem
propertyp-3
: assigns padding: 1rem
propertyp-4
: assigns padding: 1.5rem
propertyp-5
: assigns padding: 3rem
propertyp-5
: assigns padding: 3.5rem
propertyand variants md
: p*-md-*
….
Text CSS Helpers contain set of text styling classes for text display and size.
Text Alignment Responsive
.text-left
: assigns text-align: left
property.text-right
: assigns text-align: right
property.text-center
: assigns text-align: center
propertyvariants
.text-sm-*
: assigns text-align: *
property.text-md-*
: assigns text-align: *
property.text-lg-*
: assigns text-align: *
property.text-xlg-*
: assigns text-align: *
propertyText Alignment
.text-justify
: assigns font-align: justify
property.text-nowrap
: assigns font-align: nowrap
propertyText Weight and italics
.text-bold
: assigns font-weight: bold
property.text-normal
: assigns font-weight: normal
property.text-italic
: assigns font-weight: italic
propertyText Transform
.text-uppercase
: assigns font-transform: uppercase
property.text-lowercase
: assigns font-transform: lowercase
property.text-capitalize
: assigns font-transform: capitalize
property.text-none
: assigns font-transform: none
propertyText Size
.fs-1x
: assigns font-size: 1em
property.fs-1x-25
: assigns font-size: 1.25em
property.fs-1x-50
: assigns font-size: 1.5em
property.fs-1x-75
: assigns font-size: 1.75em
property
…
…
….fs-4x
: assigns font-size: 4em
propertyand variants
sm
: fs-sm-*x-*
md
: fs-md-*x-*
lg
: fs-lg-*x-*
xlg
: fs-xlg-*x-*
…Border Radius
.radius-circle
: assigns border-radius: 50%
property.radius-2
: assigns border-radius: .125rem
property.radius
: assigns border-radius: .25rem
property.radius-4
: assigns border-radius: 0.5rem
property.radius-8
: assigns border-radius: 1rem
property.radius-0
: assigns border-radius: 0
property.radius-x
: assigns custom border-radius: x
property
.radius-top
.radius-right
.radius-bottom
.radius-left
.radius-top-left
.radius-top-right
.radius-bottom-left
.radius-bottom-right
.radius-diagonal-1
.radius-diagonal-2
Transform
.rotate-0
: assigns transform: rotate(0deg)
property.rotate-x-0
: assigns transform: rotate(0deg)
property.rotate-y-0
: assigns transform: rotate(0deg)
property.rotate-90
: assigns transform: rotate(90deg)
property.rotate-x-90
: assigns transform: rotate(90deg)
property.rotate-y-90
: assigns transform: rotate(90deg)
property.rotate-180
: assigns transform: rotate(180deg)
property.rotate-x-180
: assigns transform: rotate(180deg)
property.rotate-y-180
: assigns transform: rotate(180deg)
property.rotate-270
: assigns transform: rotate(270deg)
property.rotate-x-270
: assigns transform: rotate(270deg)
property.rotate-y-270
: assigns transform: rotate(180deg)
property.rotate-360
: assigns transform: rotate(360deg)
property.rotate-x-360
: assigns transform: rotate(360deg)
property.rotate-y-360
: assigns transform: rotate(360deg)
propertyAs any other classes, helper classes can be combined together.
For given div
element:
<div class="m-all-20 text-center p-t-10 fs-2x-sm">
...
</div>