Conditional Classes

Stacks provides conditional atomic classes to easily build complex responsive designs, hover states, and print layouts.

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 .lg:d-none class.

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 fd-column.”

Note: Our font size classes, .fs-[x] are automatically adjusted at the smallest breakpoint.

Responsive Classes

Breakpoint Classname Definition
All / Default .[x] The class is applied on all browser widths.
Large .lg:[x] The class is applied on large browser widths and below.
Medium .md:[x] The class is applied on medium browser widths and below.
Small .sm:[x] The class is applied on small browser widths and below.

Responsive Example

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>
Stack Overflow for Teams is a private, secure home for your team’s questions and answers. No more digging through stale wikis and lost emails—give your team back the time it needs to build better products.

Hover

Stacks provides hover-only atomic classes. By applying .h:bs-lg, .h:o100, and .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>
Example

Print

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>
This element will be removed from the page while printing.

Availability

A limited selection of conditional classes are available throughout Stacks. These are represented in class definitions tables by .