Sections

Conditional classes

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

Responsive

Section 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 .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

Section titled 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

Section 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>
    <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

Section titled 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.”

<div class="s-card o80 bs-sm h:bs-lg h:o100 h:fc-black-900"></div>
Example

Focus

Section titled Focus

Stacks provides focus-only atomic classes. By applying .f:o100, and .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>
Example

Print

Section titled Print

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

Dark mode

Section 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>
This element will be yellow with a border by default but green without a border in dark mode.

In addition to specific overrides, you can force an element’s colors to be light or dark by applying .theme-dark__forced or .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>
This element will be rendered with light mode colors regardless of theme preference.

Availability

Section titled Availability

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

Edit on GitHub