blank.css ‣ display

blank.css display utilities for displaying content

configure

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

@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-display

use

now you have these classes at your disposal, where

identifier	available
{type}	show or hide or ib(inline-block)
{query}	xs or sm or md or xl

.blank-u-{query}-{type}

for example, if I wanted to show an a hidden element starting at the sm query, I'd do this:

<div class="blank-u-sm-show">My small item</div>

If I wanted the now shown element to hide again at the lg query, I'd do:

<div class="blank-u-sm-show blank-u-lg-hide">My small item</div>

Mix and match in whichever way you choose.