Unit-based layout classes.
105 selectors for layout on a point grid.
A point grid is like graph paper. The gaps between dots are the smallest single unit of measurement.
In point.css, the gaps are .5rem
This is the media object with all opinions about layout removed.
This example uses `.media` for position and point.css for widths and sizes.
Open this in your inspector.
105 selectors, 611B gzipped, unlimited possibilites.
s-1 | s-2 | s-3 | s-4 |
---|---|---|---|
/*! point.css */
.m-0{margin:0}
.m-1{margin:.5rem}
.m-2{margin:1rem}
.m-3{margin:2rem}
.m-4{margin:4rem}
.my-0{margin-top:0;margin-bottom:0}
.my-1{margin-top:.5rem;margin-bottom:.5rem}
.my-2{margin-top:1rem;margin-bottom:1rem}
.my-3{margin-top:2rem;margin-bottom:2rem}
.my-4{margin-top:4rem;margin-bottom:4rem}
.mx-0{margin-right:0;margin-left:0}
.mx-1{margin-right:.5rem;margin-left:.5rem}
.mx-2{margin-right:1rem;margin-left:1rem}
.mx-3{margin-right:2rem;margin-left:2rem}
.mx-4{margin-right:4rem;margin-left:4rem}
.mt-0{margin-top:0}
.mt-1{margin-top:.5rem}
.mt-2{margin-top:1rem}
.mt-3{margin-top:2rem}
.mt-4{margin-top:4rem}
.mr-0{margin-right:0}
.mr-1{margin-right:.5rem}
.mr-2{margin-right:1rem}
.mr-3{margin-right:2rem}
.mr-4{margin-right:4rem}
.mb-0{margin-bottom:0}
.mb-1{margin-bottom:.5rem}
.mb-2{margin-bottom:1rem}
.mb-3{margin-bottom:2rem}
.mb-4{margin-bottom:4rem}
.ml-0{margin-left:0}
.ml-1{margin-left:.5rem}
.ml-2{margin-left:1rem}
.ml-3{margin-left:2rem}
.ml-4{margin-left:4rem}
.p-0{padding:0}
.p-1{padding:.5rem}
.p-2{padding:1rem}
.p-3{padding:2rem}
.p-4{padding:4rem}
.py-0{padding-top:0;padding-bottom:0}
.py-1{padding-top:.5rem;padding-bottom:.5rem}
.py-2{padding-top:1rem;padding-bottom:1rem}
.py-3{padding-top:2rem;padding-bottom:2rem}
.py-4{padding-top:4rem;padding-bottom:4rem}
.px-0{padding-right:0;padding-left:0}
.px-1{padding-right:.5rem;padding-left:.5rem}
.px-2{padding-right:1rem;padding-left:1rem}
.px-3{padding-right:2rem;padding-left:2rem}
.px-4{padding-right:4rem;padding-left:4rem}
.pt-0{padding-top:0}
.pt-1{padding-top:.5rem}
.pt-2{padding-top:1rem}
.pt-3{padding-top:2rem}
.pt-4{padding-top:4rem}
.pr-0{padding-right:0}
.pr-1{padding-right:.5rem}
.pr-2{padding-right:1rem}
.pr-3{padding-right:2rem}
.pr-4{padding-right:4rem}
.pb-0{padding-bottom:0}
.pb-1{padding-bottom:.5rem}
.pb-2{padding-bottom:1rem}
.pb-3{padding-bottom:2rem}
.pb-4{padding-bottom:4rem}
.pl-0{padding-left:0}
.pl-1{padding-left:.5rem}
.pl-2{padding-left:1rem}
.pl-3{padding-left:2rem}
.pl-4{padding-left:4rem}
.t-0{top:0}
.t-1{top:.5rem}
.t-2{top:1rem}
.t-3{top:2rem}
.t-4{top:4rem}
.r-0{right:0}
.r-1{right:.5rem}
.r-2{right:1rem}
.r-3{right:2rem}
.r-4{right:4rem}
.b-0{bottom:0}
.b-1{bottom:.5rem}
.b-2{bottom:1rem}
.b-3{bottom:2rem}
.b-4{bottom:4rem}
.l-0{left:0}
.l-1{left:.5rem}
.l-2{left:1rem}
.l-3{left:2rem}
.l-4{left:4rem}
.w-0{width:0}
.w-1{width:.5rem}
.w-2{width:1rem}
.w-3{width:2rem}
.w-4{width:4rem}
.h-0{height:0}
.h-1{height:.5rem}
.h-2{height:1rem}
.h-3{height:2rem}
.h-4{height:4rem}
.s-0{height:0}
.s-1{width:.5rem;height:.5rem}
.s-2{width:1rem;height:1rem}
.s-3{width:2rem;height:2rem}
.s-4{width:4rem;height:4rem}
npm install point.css
or in-browser
<link rel="stylesheet" href="https://unpkg.com/point.css@1.0.0-pre" />
If you work in an application where rem
has been fiddled with, use one of these alternatives that fixed with pixels.