Display

A series of utility classes that adjust the display property of a selector, with support for responsive modifiers.

Install

npm install seed-display --save

Dependencies

• seed-breakpoints
• seed-publish

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.

Example

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

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.

Configurations

Below are the default Sass configuration variables for seed-display. The variables can be found in the pack’s _config.scss file.

seed-display/_config.scss

// Namespaces
$seed-display-namespace: "u-d" !default;

// Displays
$seed-display: (
  initial: initial,
  none: none,
  block: block,
  inline: inline,
  inline-block: inline-block
) !default;

Related

• seed-visibility