blank.css ‣ space

blank.css space utilities for consistent layouts

configure

Like all of blank.css, the spacing utilites are completely configurable using custom properties and custom media queries, like so:

:root {
    --space-n: 0;
    --space-xs: .125rem;
    --space-sm: .25rem;
    --space-md: .5rem;
    --space-lg: 1rem;
    --space-xl: 2rem;
}
 
@custom-media --xs (min-width: 22rem);
@custom-media --sm (min-width: 29rem);
@custom-media --md (min-width: 36rem);
@custom-media --lg (min-width: 45rem);
@custom-media --xl (min-width: 54rem);

install

npm i -D blank-css-space

use

now you have these classes at your disposal, where

identifier	available
{type}	mg or pd
{Side}	T or B or L or R or H or V
{size}	n or xs or sm or md or lg

.blank-u-{type}{Side}{size}

for example, if I wanted a small amount of padding on all sides, but large horizontal margins, I'd do this:

<div class="blank-u-pdAs blank-u-mgVlg">My item</div>

If I wanted the small padding to change to large when I hit the md breakpoint, I'd do:

<div class="blank-u-pdAs blank-u-mgVlg blank-u-md-pdAlg">My item</div>

Mix and match in whichever way you choose.