πͺ Display
The display
utility provides a quick way to control the display behavior of an element.
It supports both static and responsive variants generated through mixins and loops.
π§± Naming convention
Section titled βπ§± Naming conventionβAll classes follow the structure:
.u--display-{value}.u--display-{breakpoint}-{value}
β When to use
Section titled ββ When to useβUse this utility when:
- You need to toggle element visibility (
block
,none
,inline
, etc.) - You want to switch layouts responsively β for example, showing a block layout on desktop and none on mobile
- You want to apply layout behaviors like
flex
orgrid
π§ͺ Responsive usage
Section titled βπ§ͺ Responsive usageβThis utility supports responsive variants, using breakpoint prefixes like:
desktop
, laptop
, tabletl
, tabletm
, tablets
, mobile
.
β How to use
Section titled ββ How to useβYou can apply them directly in HTML:
<div class="u--display-flex u--display-tabletm-block u--display-tablets-none"> <p>Hello world</p></div>
Or extend them in SCSS if you have a custom class:
.c--card-a { @extend .u--display-flex; @extend .u--display-tabletm-block; @extend .u--display-tablets-none;}