Stacks provides conditional atomic classes to easily build complex responsive designs, hover states, and print layouts.
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.
|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.|
Resize your browser to see which classes are applied.
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.”
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.”
Stacks provides print-only atomic classes. By applying
.print:d-none, you’re saying “In print layouts, remove this element from the layout.”
Stacks provides darkmode-only atomic classes. By applying
.d:bg-green-100, you’re saying “In dark mode, apply a background of green 100.”
A limited selection of conditional classes are available throughout Stacks. These are represented in class definitions tables by .