helper-css-light
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-toporpadding-topb: for classes that setmargin-bottomorpadding-bottoml: for classes that setmargin-leftorpadding-leftr: for classes that setmargin-rightorpadding-rightx: for classes that set both*-leftand*-righty: for classes that set both*-topand*-bottom
Margins(m)
Where size is one of:
0- for classes that eliminate themarginorpaddingby setting it to 01- (by default) for classes that set themarginorpaddingto$spacer * .252- (by default) for classes that set themarginorpaddingto$spacer * .53- (by default) for classes that set themarginorpaddingto$spacer4- (by default) for classes that set themarginorpaddingto$spacer * 1.55- (by default) for classes that set themarginorpaddingto$spacer * 3
auto - for classes that set the margin to auto
for example($space = 1rem by default)
-
m-0: assignsmargin: 0property m-1: assignsmargin: 0.25rempropertymt-1: assignsmargin-top: 0.25rempropertymb-1: assignsmargin-bottom: 0.25rempropertyml-1: assignsmargin-left: 0.25rempropertymr-1: assignsmargin-right: 0.25rempropertymx-1: assignsmargin-left: 0.25rem; margin-right: 0.25rempropertymy-1: assignsmargin-top: 0.25rem; margin-bottom: 0.25remproperty …m-2: assignsmargin: 0.5rempropertym-3: assignsmargin: 1rempropertym-4: assignsmargin: 1.5rempropertym-5: assignsmargin: 3remproperty
and variants md: m*-md-*
….
Paddings(m)
-
p-0: assignspadding: 0property p-1: assignspadding: 0.25rempropertypt-1: assignspadding-top: 0.25rempropertypb-1: assignspadding-bottom: 0.25rempropertypl-1: assignspadding-left: 0.25rempropertypr-1: assignspadding-right: 0.25rempropertypx-1: assignspadding-left: 0.25rem; padding-right: 0.25rempropertypy-1: assignspadding-top: 0.25rem; padding-bottom: 0.25remproperty …p-2: assignspadding: 0.5rempropertyp-3: assignspadding: 1rempropertyp-4: assignspadding: 1.5rempropertyp-5: assignspadding: 3rempropertyp-5: assignspadding: 3.5remproperty
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: leftproperty.text-right: assignstext-align: rightproperty.text-center: assignstext-align: centerproperty
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: justifyproperty.text-nowrap: assignsfont-align: nowrapproperty
Text Weight and italics
.text-bold: assignsfont-weight: boldproperty.text-normal: assignsfont-weight: normalproperty.text-italic: assignsfont-weight: italicproperty
Text Transform
.text-uppercase: assignsfont-transform: uppercaseproperty.text-lowercase: assignsfont-transform: lowercaseproperty.text-capitalize: assignsfont-transform: capitalizeproperty.text-none: assignsfont-transform: noneproperty
Text Size
.fs-1x: assignsfont-size: 1emproperty.fs-1x-25: assignsfont-size: 1.25emproperty.fs-1x-50: assignsfont-size: 1.5emproperty.fs-1x-75: assignsfont-size: 1.75emproperty … … ….fs-4x: assignsfont-size: 4emproperty
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: .125remproperty.radius: assignsborder-radius: .25remproperty.radius-4: assignsborder-radius: 0.5remproperty.radius-8: assignsborder-radius: 1remproperty.radius-0: assignsborder-radius: 0property-
.radius-x: assigns customborder-radius: xproperty .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>