A simple CSS spacing library for margins, paddings and more
npm install css-spacesshell
$ bower install css-spaces
`Install with npm
`shell
$ npm install css-spaces
`Usage
Include the spaces.css to your website:`html
`Add classes to create paddings and margins.
The following header has a margin-top with the size of xl:
`html
This is the header.
`These elements have no padding:
`html
Lorem ipsum
Dolor sit
`This navigation is centered:
`html
`All properties have
!important as you should only add those classes, if you definitely want a specific behavior.Sizes are defined in
px.How it works
All classes are composed of some simple parts.$3
`
m margin
-OR-
p padding
`
$3
`
t top
b bottom
r right
l leftv vertical
h horizontal
(none) No direction specified means all directions (like in
margin: 8px;)`$3
`
- positive value
-- negative value
`
Example:
`css
.mt-xs { margin-top: 16px }
.mt--xs { margin-top: 16px }
`$3
`
a auto
0 0
xxxs 4px
xxs 8px
xs 16px
s 24px
m 36px
l 48px
xl 72px
xxl 96px
xxxl 144px
`$3
The following example just uses one size: s (24px). There is also
xxxs - xxxl and 0 and a (which is auto).Margin classes (they start with m) can have positive and negative values, padding classes (replace the leading m with a p) just have positive values.
`
mt-s margin-top: 24px
mr-s margin-right: 24px
mb-s margin-bottom: 24px
ml-s margin-left: 24pxmh-s margin-left: 24px; margin-right: 24px
mv-s margin-top: 24px; margin-bottom: 24px
m-s margin: 24px
mt--s margin-top: -24px
mr--s margin-right: -24px
mb--s margin-bottom: -24px
ml--s margin-left: -24px
mh--s margin-left: -24px; margin-right: -24px
mv--s margin-top: -24px; margin-bottom: -24px
m--s margin: -24px
// there is also 'auto'
mt-a margin-top: auto
mr-a margin-right: auto
mb-a margin-bottom: auto
ml-a margin-left: auto
mh-a margin-left: auto; margin-right: auto
mv-a margin-top: auto; margin-bottom: auto
m-a margin: auto
// padding classes would be like this:
pt-s padding-top: 24px;
pr-s padding-right: 24px;
// etc.
`$3
`
m-t-0 margin-top: 0
m-t margin-top: 1rem // no-name means "sm (small)"
m-t-md margin-top: 1.5rem
m-t-lg margin-top: 3remm-a-lg margin: 3rem // a means "all"
`
We added negative margins as well (they are missing in Bootstrap 4). Due to the weird syntax for small (no suffix instead of the logical -sm), the syntax for negative values is as follows.`
m-neg margin: -1rem
m-t-xs-neg margin-top: -0.5rem
m-t-neg margin-top: -1.0rem
m-t-md-neg margin-top: -1.5rem
m-t-lg-neg margin-top: -3rem`Individualize
1. Install Sass (google it).
2. Run npm install
3. Change things in source/ ()
4. Run gulp or gulp deploy`