incremental-point.css v1.0.0-beta-1

incremental-point.css

Point-based layout system in CSS

Install

npm: npm install incremental-point.css

browser: <link rel="stylesheet" href="//unpkg.com/incremental-point.css" />

Use

<div class="m-1 p-3">
  This has .5rem margin and 1.5rem padding.
</div>

All the code

/*! incremental-point.css */
.m-0{margin:0}
.m-1{margin:.5rem}
.m-2{margin:1rem}
.m-3{margin:1.5rem}
.m-4{margin:2rem}
.m-5{margin:2.5rem}
.m-6{margin:3rem}
.m-7{margin:3.5rem}
.m-8{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:1.5rem;margin-bottom:1.5rem}
.my-4{margin-top:2rem;margin-bottom:2rem}
.my-5{margin-top:2.5rem;margin-bottom:2.5rem}
.my-6{margin-top:3rem;margin-bottom:3rem}
.my-7{margin-top:3.5rem;margin-bottom:3.5rem}
.my-8{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:1.5rem;margin-left:1.5rem}
.mx-4{margin-right:2rem;margin-left:2rem}
.mx-5{margin-right:2.5rem;margin-left:2.5rem}
.mx-6{margin-right:3rem;margin-left:3rem}
.mx-7{margin-right:3.5rem;margin-left:3.5rem}
.mx-8{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:1.5rem}
.mt-4{margin-top:2rem}
.mt-5{margin-top:2.5rem}
.mt-6{margin-top:3rem}
.mt-7{margin-top:3.5rem}
.mt-8{margin-top:4rem}
.mr-0{margin-right:0}
.mr-1{margin-right:.5rem}
.mr-2{margin-right:1rem}
.mr-3{margin-right:1.5rem}
.mr-4{margin-right:2rem}
.mr-5{margin-right:2.5rem}
.mr-6{margin-right:3rem}
.mr-7{margin-right:3.5rem}
.mr-8{margin-right:4rem}
.mb-0{margin-bottom:0}
.mb-1{margin-bottom:.5rem}
.mb-2{margin-bottom:1rem}
.mb-3{margin-bottom:1.5rem}
.mb-4{margin-bottom:2rem}
.mb-5{margin-bottom:2.5rem}
.mb-6{margin-bottom:3rem}
.mb-7{margin-bottom:3.5rem}
.mb-8{margin-bottom:4rem}
.ml-0{margin-left:0}
.ml-1{margin-left:.5rem}
.ml-2{margin-left:1rem}
.ml-3{margin-left:1.5rem}
.ml-4{margin-left:2rem}
.ml-5{margin-left:2.5rem}
.ml-6{margin-left:3rem}
.ml-7{margin-left:3.5rem}
.ml-8{margin-left:4rem}
.p-0{padding:0}
.p-1{padding:.5rem}
.p-2{padding:1rem}
.p-3{padding:1.5rem}
.p-4{padding:2rem}
.p-5{padding:2.5rem}
.p-6{padding:3rem}
.p-7{padding:3.5rem}
.p-8{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:1.5rem;padding-bottom:1.5rem}
.py-4{padding-top:2rem;padding-bottom:2rem}
.py-5{padding-top:2.5rem;padding-bottom:2.5rem}
.py-6{padding-top:3rem;padding-bottom:3rem}
.py-7{padding-top:3.5rem;padding-bottom:3.5rem}
.py-8{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:1.5rem;padding-left:1.5rem}
.px-4{padding-right:2rem;padding-left:2rem}
.px-5{padding-right:2.5rem;padding-left:2.5rem}
.px-6{padding-right:3rem;padding-left:3rem}
.px-7{padding-right:3.5rem;padding-left:3.5rem}
.px-8{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:1.5rem}
.pt-4{padding-top:2rem}
.pt-5{padding-top:2.5rem}
.pt-6{padding-top:3rem}
.pt-7{padding-top:3.5rem}
.pt-8{padding-top:4rem}
.pr-0{padding-right:0}
.pr-1{padding-right:.5rem}
.pr-2{padding-right:1rem}
.pr-3{padding-right:1.5rem}
.pr-4{padding-right:2rem}
.pr-5{padding-right:2.5rem}
.pr-6{padding-right:3rem}
.pr-7{padding-right:3.5rem}
.pr-8{padding-right:4rem}
.pb-0{padding-bottom:0}
.pb-1{padding-bottom:.5rem}
.pb-2{padding-bottom:1rem}
.pb-3{padding-bottom:1.5rem}
.pb-4{padding-bottom:2rem}
.pb-5{padding-bottom:2.5rem}
.pb-6{padding-bottom:3rem}
.pb-7{padding-bottom:3.5rem}
.pb-8{padding-bottom:4rem}
.pl-0{padding-left:0}
.pl-1{padding-left:.5rem}
.pl-2{padding-left:1rem}
.pl-3{padding-left:1.5rem}
.pl-4{padding-left:2rem}
.pl-5{padding-left:2.5rem}
.pl-6{padding-left:3rem}
.pl-7{padding-left:3.5rem}
.pl-8{padding-left:4rem}
.t-0{top:0}
.t-1{top:.5rem}
.t-2{top:1rem}
.t-3{top:1.5rem}
.t-4{top:2rem}
.t-5{top:2.5rem}
.t-6{top:3rem}
.t-7{top:3.5rem}
.t-8{top:4rem}
.r-0{right:0}
.r-1{right:.5rem}
.r-2{right:1rem}
.r-3{right:1.5rem}
.r-4{right:2rem}
.r-5{right:2.5rem}
.r-6{right:3rem}
.r-7{right:3.5rem}
.r-8{right:4rem}
.b-0{bottom:0}
.b-1{bottom:.5rem}
.b-2{bottom:1rem}
.b-3{bottom:1.5rem}
.b-4{bottom:2rem}
.b-5{bottom:2.5rem}
.b-6{bottom:3rem}
.b-7{bottom:3.5rem}
.b-8{bottom:4rem}
.l-0{left:0}
.l-1{left:.5rem}
.l-2{left:1rem}
.l-3{left:1.5rem}
.l-4{left:2rem}
.l-5{left:2.5rem}
.l-6{left:3rem}
.l-7{left:3.5rem}
.l-8{left:4rem}
.s-1{width:.5rem;height:.5rem}
.s-2{width:1rem;height:1rem}
.s-3{width:1.5rem;height:1.5rem}
.s-4{width:2rem;height:2rem}
.s-5{width:2.5rem;height:2.5rem}
.s-6{width:3rem;height:3rem}
.s-7{width:3.5rem;height:3.5rem}
.s-8{width:4rem;height:4rem}
.w-1{width:.5rem}
.w-2{width:1rem}
.w-3{width:1.5rem}
.w-4{width:2rem}
.w-5{width:2.5rem}
.w-6{width:3rem}
.w-7{width:3.5rem}
.w-8{width:4rem}
.h-1{height:.5rem}
.h-2{height:1rem}
.h-3{height:1.5rem}
.h-4{height:2rem}
.h-5{height:2.5rem}
.h-6{height:3rem}
.h-7{height:3.5rem}
.h-8{height:4rem}

Options

If you're in a situation where rem isn't a usable value, there are fixed pixel versions available.

7-point.css
8-point.css
10-point.css