spacing
Opensource functional CSS spacing for modern web development
setup
npm install spacing
file(s) meets your needs
import whichevermain.css
is harcoded for CSS3 compatibilitymodule.css
uses CSS4 variables
;
classes
Classes are listed in order from least to most precendence.
padding
.p0
.p1
.p2
.p3
.p4
padding-top
.pt0
.pt1
.pt2
.pt3
.pt4
padding-left
.pl0
.pl1
.pl2
.pl3
.pl4
padding-right
.pr0
.pr1
.pr2
.pr3
.pr4
padding-bottom
.pb0
.pb1
.pb2
.pb3
.pb4
margin
.-m2
.-m1
.m0
.m1
.m2
.m3
.m4
.m-auto
margin-top
.mt0
.mt1
.mt2
.mt3
.mt4
.mt-auto
margin-left
.ml0
.ml1
.ml2
.ml3
.ml4
.ml-auto
margin-right
.mr0
.mr1
.mr2
.mr3
.mr4
.mr-auto
margin-bottom
.mb0
.mb1
.mb2
.mb3
.mb4
.mb-auto
:first-child
.mt0-first
.ml0-first
.mr0-first
.mb0-first
:last-child
.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.
All [data-spacing]
selectors come after the classes in the cascade.
scaling
rem
and therefore can be scaled responsively with the rem
size
spacing variables default to
in CSS4 you could scale via media queries
{}
files
- main.css css3+ bundle
- module.css css4+ bundle