README
Helper CSS Light
Common CSS helper classes.
Install
Install with Npm or Bower
npm
To install with npm run
$ npm install helper-css-light --save
Usage
Include css/helper-css.min.css
style in your page and start using css helper classes.
CSS Helper Classes
CSS helper classes: Alignments, Display, Text Aling, Margins, Paddings, Border Radius, Rotates
CSS Helpers for margin and Padding
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 setmargin-top
orpadding-top
b
: for classes that setmargin-bottom
orpadding-bottom
l
: for classes that setmargin-left
orpadding-left
r
: for classes that setmargin-right
orpadding-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 themargin
orpadding
by setting it to 01
- (by default) for classes that set themargin
orpadding
to$spacer * .25
2
- (by default) for classes that set themargin
orpadding
to$spacer * .5
3
- (by default) for classes that set themargin
orpadding
to$spacer
4
- (by default) for classes that set themargin
orpadding
to$spacer * 1.5
5
- (by default) for classes that set themargin
orpadding
to$spacer * 3
auto - for classes that set the margin to auto
for example($space = 1rem by default)
m-0
: assignsmargin: 0
propertym-1
: assignsmargin: 0.25rem
propertymt-1
: assignsmargin-top: 0.25rem
propertymb-1
: assignsmargin-bottom: 0.25rem
propertyml-1
: assignsmargin-left: 0.25rem
propertymr-1
: assignsmargin-right: 0.25rem
propertymx-1
: assignsmargin-left: 0.25rem; margin-right: 0.25rem
propertymy-1
: assignsmargin-top: 0.25rem; margin-bottom: 0.25rem
property ...m-2
: assignsmargin: 0.5rem
propertym-3
: assignsmargin: 1rem
propertym-4
: assignsmargin: 1.5rem
propertym-5
: assignsmargin: 3rem
property
and variants md
: m*-md-*
....
Paddings(m)
p-0
: assignspadding: 0
propertyp-1
: assignspadding: 0.25rem
propertypt-1
: assignspadding-top: 0.25rem
propertypb-1
: assignspadding-bottom: 0.25rem
propertypl-1
: assignspadding-left: 0.25rem
propertypr-1
: assignspadding-right: 0.25rem
propertypx-1
: assignspadding-left: 0.25rem; padding-right: 0.25rem
propertypy-1
: assignspadding-top: 0.25rem; padding-bottom: 0.25rem
property ...p-2
: assignspadding: 0.5rem
propertyp-3
: assignspadding: 1rem
propertyp-4
: assignspadding: 1.5rem
propertyp-5
: assignspadding: 3rem
propertyp-5
: assignspadding: 3.5rem
property
and variants md
: p*-md-*
....
CSS Helpers for Text
Text CSS Helpers contain set of text styling classes for text display and size.
Text Alignment Responsive
.text-left
: assignstext-align: left
property.text-right
: assignstext-align: right
property.text-center
: assignstext-align: center
property
variants
.text-sm-*
: assignstext-align: *
property.text-md-*
: assignstext-align: *
property.text-lg-*
: assignstext-align: *
property.text-xlg-*
: assignstext-align: *
property
Text Alignment
.text-justify
: assignsfont-align: justify
property.text-nowrap
: assignsfont-align: nowrap
property
Text Weight and italics
.text-bold
: assignsfont-weight: bold
property.text-normal
: assignsfont-weight: normal
property.text-italic
: assignsfont-weight: italic
property
Text Transform
.text-uppercase
: assignsfont-transform: uppercase
property.text-lowercase
: assignsfont-transform: lowercase
property.text-capitalize
: assignsfont-transform: capitalize
property.text-none
: assignsfont-transform: none
property
Text Size
.fs-1x
: assignsfont-size: 1em
property.fs-1x-25
: assignsfont-size: 1.25em
property.fs-1x-50
: assignsfont-size: 1.5em
property.fs-1x-75
: assignsfont-size: 1.75em
property ... ... ....fs-4x
: assignsfont-size: 4em
property
and variants
sm
:fs-sm-*x-*
md
:fs-md-*x-*
lg
:fs-lg-*x-*
xlg
:fs-xlg-*x-*
...
CSS Helpers for Border Radius
Border Radius
.radius-circle
: assignsborder-radius: 50%
property.radius-2
: assignsborder-radius: .125rem
property.radius
: assignsborder-radius: .25rem
property.radius-4
: assignsborder-radius: 0.5rem
property.radius-8
: assignsborder-radius: 1rem
property.radius-0
: assignsborder-radius: 0
property.radius-x
: assigns customborder-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
CSS Helpers for Rotates
Transform
.rotate-0
: assignstransform: rotate(0deg)
property.rotate-x-0
: assignstransform: rotate(0deg)
property.rotate-y-0
: assignstransform: rotate(0deg)
property.rotate-90
: assignstransform: rotate(90deg)
property.rotate-x-90
: assignstransform: rotate(90deg)
property.rotate-y-90
: assignstransform: rotate(90deg)
property.rotate-180
: assignstransform: rotate(180deg)
property.rotate-x-180
: assignstransform: rotate(180deg)
property.rotate-y-180
: assignstransform: rotate(180deg)
property.rotate-270
: assignstransform: rotate(270deg)
property.rotate-x-270
: assignstransform: rotate(270deg)
property.rotate-y-270
: assignstransform: rotate(180deg)
property.rotate-360
: assignstransform: rotate(360deg)
property.rotate-x-360
: assignstransform: rotate(360deg)
property.rotate-y-360
: assignstransform: rotate(360deg)
property
As any other classes, helper classes can be combined together.
Usage example:
For given div
element:
<div class="m-all-20 text-center p-t-10 fs-2x-sm">
...
</div>