2.0.0 • Published 8 years ago
blank-css-display v2.0.0
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.