spacing

Opensource functional CSS spacing for modern web development

- setup
- classes
- data-spacing
- scaling
- files

setup

``
npm install spacing
`

$3

- main.css is harcoded for CSS3 compatibility
- module.css uses CSS4 variables

`css
@import "node_modules/spacing/main";
`

classes

Classes are listed in order from least to most precendence.

$3

- .p0
- .p1
- .p2
- .p3
- .p4

$3

- .pt0
- .pt1
- .pt2
- .pt3
- .pt4

$3

- .pl0
- .pl1
- .pl2
- .pl3
- .pl4

$3

- .pr0
- .pr1
- .pr2
- .pr3
- .pr4

$3

- .pb0
- .pb1
- .pb2
- .pb3
- .pb4

$3

- .-m2
- .-m1
- .m0
- .m1
- .m2
- .m3
- .m4
- .m-auto

$3

- .mt0
- .mt1
- .mt2
- .mt3
- .mt4
- .mt-auto

$3

- .ml0
- .ml1
- .ml2
- .ml3
- .ml4
- .ml-auto

$3

- .mr0
- .mr1
- .mr2
- .mr3
- .mr4
- .mr-auto

$3

- .mb0
- .mb1
- .mb2
- .mb3
- .mb4
- .mb-auto

$3

- .mt0-first
- .ml0-first
- .mr0-first
- .mb0-first

$3

- .mt0-last
- .ml0-last
- .mr0-last
- .mb0-last

data-spacing

Alternative to classes you can also space via [data-spacing] with value(s) being any of the classes.

`html



`

All [data-spacing] selectors come after the classes in the cascade.

scaling

$3

`css
:root {
font-size: 1em;
font-size: calc(.9em + .5vw + .5vh);
}
`

$3

`css
:root {
--space-1: .5rem;
--space-2: 1rem;
--space-3: 1.5rem;
--space-4: 3rem;
}

@media (min-width: 30em) and (min-height: 20em) {
:root {
--space-1: .5rem;
--space-2: 1rem;
--space-3: 2rem;
--space-4: 4rem;
}
}
``

files

- main.css css3+ bundle
- module.css css4+ bundle
- class.css class selectors
- data.css data selectors
- root.css default variables