CSS Spaces

A simple CSS spacing library for margins, paddings (and more later ...) written in Sass (SCSS)

Why another css library?

Many libraries try to do everything: sizes, typography, buttons, grid, helpers. CSS Spaces concentrates on one thing only: some classes to add spaces between elements. Use it with whatever framework or library you like.

Install with bower

``shell
$ 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 left

v 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: 24px

mh-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: 3rem

m-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`