Displays

Version: 0.9.0

Edit

Utilities for setting common display values.

Display Block

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/displays.scss#L11

Display Block Display Block Display Block

<!-- display block -->
<span class="u-display-block">Display Block</span>
<span class="u-display-block">Display Block</span>
<span class="u-display-block">Display Block</span>

Display Inline-Block

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/displays.scss#L25

Display Inline-Block

<!-- display inline-block -->
<div class="u-display-inline-block">Display Inline-Block</div>
<div class="u-display-inline-block">Display Inline-Block</div>
<div class="u-display-inline-block">Display Inline-Block</div>

Display Inline

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/displays.scss#L39

Display Inline
Display Inline
Display Inline

<!-- display inline -->
<ul>
  <li class="u-display-inline">Display Inline</li>
  <li class="u-display-inline">Display Inline</li>
  <li class="u-display-inline">Display Inline</li>
</ul>

Display Flex

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/displays.scss#L55

Display Flex

Display Inline Flex

<!-- display flex -->
<div class="u-display-flex">
  <div>Display Flex</div>
  <div>Display Flex</div>
  <div>Display Flex</div>
</div>

<!-- display inline flex -->
<div class="u-display-inline-flex">
  <div>Display Inline Flex</div>
  <div>Display Inline Flex</div>
  <div>Display Inline Flex</div>
</div>

Display Grid

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/displays.scss#L84

Display Grid

Display Inline Grid

<!-- display grid -->
<div class="u-display-grid">
  <div>Display Grid</div>
  <div>Display Grid</div>
  <div>Display Grid</div>
</div>

<!-- display inline grid -->
<div class="u-display-inline-grid">
  <div>Display Inline Grid</div>
  <div>Display Inline Grid</div>
  <div>Display Inline Grid</div>
</div>

Display None

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/displays.scss#L123

Display None

<!-- display none -->
<div class="u-display-none">Display None</div>

Global Values

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/displays.scss#L135

Display Initial

Display Inherit

Display Unset

<!-- display initial -->
<div class="u-display-initial">Display Initial</div>

<!-- display inherit -->
<div class="u-display-inherit">Display Inherit</div>

<!-- display unset -->
<div class="u-display-unset">Display Unset</div>