Displays

You can control easily the display value of blocks, depending of the current breakpoint or not.

u-d-i (inline)

u-d-i (inline)

<div class="u-d-i">u-d-i (inline)</div>
<div class="u-d-i">u-d-i (inline)</div>

u-d-b (block)

u-d-b (block)

<span class="u-d-b">u-d-b (block)</span>
<span class="u-d-b">u-d-b (block)</span>

$u-displays: (
  display: (
    responsive: true,
    property: display,
    class: d,
    values: (
      n: none,
      i: inline,
      ib: inline-block,
      b: block,
      f: flex,
      'if': inline-flex,
      // the "if" key is escaped because it's a reserved keyword
      g: grid,
    ),
  ),
);

Hide elements

By using the .u-d-n class, you can hide an element, and use a responsive display class to show it in another resolution.

For example, a block with class="u-d-n u-d-b@md" will be hided on mobile, but visible on desktop.
But a block with class="u-d-n@tb" is showed only on mobile (and become hided from a tablet resolution).

hide on "md" and wider screens

hide on screens smaller than "md"

<div class="u-d-n@md">hide on "md" and wider screens</div>
<div class="u-d-n u-d-b@md">hide on screens smaller than "md"</div>