blank-css-space
v2.0.0
Published
blank.css space utilities for consistent layouts
Downloads
7
Maintainers
Readme
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.