Display utility pack for Seed
npm install seed-display --save
seed-display provides a handful of utility classes that change the
display CSS property of a selector. Below are all the utility classes and their affects.
All of the following classes support responsive modifiers.
<div class="u-d-none">I'm hidden!</div> <div class="u-d-inline">I'm inline!</div> <div class="u-d-inline-block">I'm an inline!</div> <div class="u-d-block">I'm a block!</div>
Showing and hiding
Combining the display classes with targeted responsive modifiers allows you to show/hide elements at desired viewport sizes.
If you’re on a desktop, resize your browser to see the example below in action.
<div class="u-d-none@md">I'm only visible until md viewports</div> <div class="u-d-none u-d-block@md">I'm only visible at md viewports</div>
<div> becomes hidden at the
md viewport. If the viewport is smaller than
md, the display is unaffected by the utility class.
<div> is initially hidden, as specified by
u-d-none. It only becomes visible at the
md viewport size.