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.
1 2 3 4 5 6 7 8 <div class="grid ai-center md:fd-column gs16"> <div class="grid--cell fs-body3 lg:ta-center"> … </div> <div class="grid--cell sm:d-none"> <svg>…</svg> </div> </div>
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.”
1 <div class="s-card h80 bs-sm h:bs-lg h:o100 h: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.”
1 <div class="s-card print:d-none"></div>
A limited selection of conditional classes are available throughout Stacks. These are represented in class definitions tables by .