Common CSS helper classes. Focus on missing padding and margin styles in Bootstrap 3.
Install with Npm or Bower
To install with npm run
$ npm install helper-css --save
To install with Bower run
$ bower install helper-css --save
Include helper-css.min.css
style in your page and start using css helper classes.
CSS helper classes cover four areas - margin, padding, text and general.
All margin and padding have properties for distances 0, 5, 10, 15, 20, 30, 40, 50, 60, 80, 100, 150 and 200 px.
Margin classes starts with m
, padding classes starts p
.
Following is the number that represents space in pixels and (optional) direction. Direction can be top
, lft
, rgt
and btm
.
Example:
m0
: assignsmargin: 0
propertym50lft
: assignsmargin-left: 50px
propertyp10
: assignspadding: 10px
propertyp20btm
: assignspadding-bottom: 20px
propertyp10top p10btm m20rgt
: assignspadding-top: 10px; padding-bottom: 10px; margin-right: 20px
property
Text CSS Helpers contain set of text styling classes for text display and size.
Text Display
text-strong
: assignsfont-weight: bold
propertytext-strike
: assignstext-decoration: line-through
property
Text Size
Text size can be adjusted by using text-<size>
where <size>
can take t-shirt value: xs, s, m, l, xl, xxl.
text-xs
: assignsfont-size: 70%
propertytext-s
: assignsfont-size: 85%
propertytext-m
: assignsfont-size: 100%
propertytext-l
: assignsfont-size: 115%
propertytext-xl
: assignsfont-size: 130%
propertytext-xxl
: assignsfont-size: 145%
property
As any other classes, helper classes can be combined together.
For given div
element:
<div class="m0 p20top p10rgt p50btm p10lft text-s">
...
</div>
output would be the same as:
<div style="margin:0; padding: 20px 10px 50px 10px; font-size: 80%;">
...
</div>