helper-css-light
v3.4.1
Published
css classes of help for fronend
Downloads
78
Maintainers
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>