Atomic Bulldog - UI/pattern library

1.11.3 - Display utilities

Source: atoms/modifiers/_display.scss, line 73

Open in new window

Display utilities helps to responsively toggle the display value of components.

.is-d-{breakpoint}-{display value}, breakpoint is optional.

display value:

  • none
  • block
  • inline-block
  • inline
  • flex
  • inline-flex
  • grid
  • inline-grid

Example:

.is-d-none
.is-d-none
.is-d-inline
.is-d-inline
.is-d-block
.is-d-block
.is-d-inline-block
.is-d-inline-block
parent .is-d-flex
parent .is-d-flex
parent .is-d-flex
parent .is-d-inline-flex
parent .is-d-inline-flex
parent .is-d-inline-flex
parent .is-d-inline-flex
parent .is-d-grid
parent .is-d-grid
parent .is-d-grid
parent .is-d-inline-grid
parent .is-d-inline-grid
parent .is-d-inline-grid
parent .is-d-inline-grid
<!--style="width: auto" for kss only-->
<!--is-d-none-->
<div class="is-d-none kss-box" style="width: auto">.is-d-none</div>
<div class="is-d-none kss-box" style="width: auto">.is-d-none</div>
<!--is-d-inline-->
<div class="is-d-inline kss-box" style="width: auto">.is-d-inline</div>
<div class="is-d-inline kss-box" style="width: auto">.is-d-inline</div>
<!--is-d-block-->
<div class="is-d-block kss-box" style="width: auto">.is-d-block</div>
<div class="is-d-block kss-box" style="width: auto">.is-d-block</div>
<!--is-d-inline-block-->
<div class="is-d-inline-block kss-box" style="width: auto">.is-d-inline-block</div>
<div class="is-d-inline-block kss-box" style="width: auto">.is-d-inline-block</div>
<!--is-d-flex-->
<div class="is-d-flex">
  <div class="kss-box">parent .is-d-flex</div>
  <div class="kss-box">parent .is-d-flex</div>
  <div class="kss-box">parent .is-d-flex</div>
</div>
<!--is-d-inline-flex-->
<div class="is-d-inline-flex">
  <div class="kss-box">parent .is-d-inline-flex</div>
  <div class="kss-box">parent .is-d-inline-flex</div>
</div>
<div class="is-d-inline-flex">
  <div class="kss-box">parent .is-d-inline-flex</div>
  <div class="kss-box">parent .is-d-inline-flex</div>
</div>
<!--is-d-grid at least col need to be set-->
<div class="is-d-grid">
  <div class="kss-box">parent .is-d-grid</div>
  <div class="kss-box">parent .is-d-grid</div>
  <div class="kss-box">parent .is-d-grid</div>
</div>
<!--is-d-inline-grid at least col need to be set-->
<div class="is-d-inline-grid">
  <div class="kss-box">parent .is-d-inline-grid</div>
  <div class="kss-box">parent .is-d-inline-grid</div>
</div>
<div class="is-d-inline-grid">
  <div class="kss-box">parent .is-d-inline-grid</div>
  <div class="kss-box">parent .is-d-inline-grid</div>
</div>