Display

Pack name: seed-display

Display utility pack for Seed

Contents

Install

npm install seed-display --save

Dependencies


Usage

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.

Class Display Type
u-d-initial initial
u-d-none none
u-d-block block
u-d-inline inline
u-d-inline-block inline-block

Example

I'm hidden!
I'm inline!
I'm an inline!
I'm a block!
<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.

I'm only visible until md viewports
I'm only visible at md viewports
<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>

The first <div> becomes hidden at the md viewport. If the viewport is smaller than md, the display is unaffected by the utility class.

The second <div> is initially hidden, as specified by u-d-none. It only becomes visible at the md viewport size.