point.css

Unit-based layout classes.

What

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

Example

This is the media object with all opinions about layout removed.

This example uses `.media` for position and point.css for widths and sizes.

Chantastic

Some jabbering on about the most pendantic nonsense you've ever heard.

Open this in your inspector.

Stats

105 selectors, 611B gzipped, unlimited possibilites.

Implementation

If don't like the class names, use Gravitons.

Usage

margin

m-1

mx-1

my-1

mt-1

mr-1

mb-1

ml-1

Padding

p-1

pt-1

pr-1

pb-1

pl-1

px-1

py-1

TRBL

t-1


r-1


b-1


l-1


size

s-1 s-2 s-3 s-4

Code


/*! 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}

Install

npm install point.css

or in-browser

<link rel="stylesheet" href="https://unpkg.com/point.css@1.0.0-pre" />

Alternatives

If you work in an application where rem has been fiddled with, use one of these alternatives that fixed with pixels.