Skip to main content

Conditional classes

Stacks provides conditional atomic classes to easily build complex responsive designs, hover states, and print layouts. A limited selection of conditional classes are available throughout Stacks. These are represented in class definitions tables by a green checkmark .

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 flex layout. This means, “At the medium breakpoint and smaller, switch the flex layout from columns to rows by applying fd-column.”

Note: Our font size classes, .fs-[x] are automatically adjusted at the smallest breakpoint.
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.

Resize your browser to see which classes are applied.

<div class="d-flex flex__center md:fd-column g16">
<div class="flex--item wmx3 fs-body3 lg:ta-center">

</div>
<div class="flex--item md:order-first 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.

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

Stacks provides focus-only atomic classes. By applying .f:o100, and .f:fc-black-600, 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-600"></div>
Example

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.

Stacks provides darkmode-only atomic classes. By applying .d:bg-green-300, you’re saying “In dark mode, apply a background of green 100.”

<div class="bc-yellow-300 bg-yellow-300 d:bg-green-300 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-300 ba bc-yellow-300 theme-light__forced"></div>
This element will be rendered with light mode colors regardless of theme preference.
Deploys by Netlify