Stacks provides conditional atomic classes to easily build complex responsive designs, hover states, and print layouts.
ResponsiveSection titled Responsive
Many utility classes in Stacks are also available in screen-size specific variations. For example, the
.d-none utility can be applied to small browser widths and below using the
.sm:d-none class, on medium browser widths and below using the
.md:d-none class, and on large browser widths and below using the
This is done using predefined max-width media query breakpoints represented by t-shirt sizes. A common example would be to apply
.md:fd-column to a grid. This means, “At the medium breakpoint and smaller, switch the grid from columns to rows by applying
.fs-[x]are automatically adjusted at the smallest breakpoint.
Responsive classesSection titled Responsive classes
|All / Default||
||The class is applied on all browser widths.|
||The class is applied on large browser widths and below.|
||The class is applied on medium browser widths and below.|
||The class is applied on small browser widths and below.|
Responsive exampleSection titled Responsive example
Resize your browser to see which classes are applied.
<div class="grid ai-center md:fd-column gs16">
<div class="grid--cell fs-body3 lg:ta-center">
<div class="grid--cell sm:d-none">
HoverSection titled Hover
Stacks provides hover-only atomic classes. By applying
.h:fc-black-900, you’re saying “On hover, add a large box shadow, an opacity of 100%, and a font color of black 900.”
<div class="s-card o80 bs-sm h:bs-lg h:o100 h:fc-black-900"></div>
FocusSection titled Focus
Stacks provides focus-only atomic classes. By applying
.f:fc-black-900, you’re saying “On focus, add an opacity of 100%, and a font color of black 900.”
<div class="s-card o80 bs-sm f:o100 f:fc-black-900"></div>
Stacks provides print-only atomic classes. By applying
.print:d-none, you’re saying “In print layouts, remove this element from the layout.”
<div class="s-card print:d-none"></div>
<div class="s-card d-none print:d-block"></div>
Dark modeSection titled Dark mode
Stacks provides darkmode-only atomic classes. By applying
.d:bg-green-100, you’re saying “In dark mode, apply a background of green 100.”
<div class="bc-yellow-1 bg-yellow-100 d:bg-green-100 d:bc-transparent"></div>
In addition to specific overrides, you can force an element’s colors to be light or dark by applying
.theme-light__forced. This comes in handy when showing users a preview of light or dark interface elements.
<div class="fc-dark bg-yellow-100 ba bc-yellow-1 theme-light__forced"></div>
AvailabilitySection titled Availability
A limited selection of conditional classes are available throughout Stacks. These are represented in class definitions tables by .