diff --git a/docs/product/develop/conditional-classes.html b/docs/product/develop/conditional-classes.html index 14f0a174ab..3293d4e4d6 100644 --- a/docs/product/develop/conditional-classes.html +++ b/docs/product/develop/conditional-classes.html @@ -1,138 +1,138 @@ ---- -layout: page -title: Conditional classes -description: 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 . ---- - -
- {% header "h2", "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 flex layout. This means, “At the medium breakpoint and smaller, switch the flex layout from columns to rows by applying fd-column.”

- - {% tip, "", "", "ai-center sm:ai-start" %} - Note: Our font size classes, .fs-[x] are automatically adjusted at the smallest breakpoint. - {% endtip %} -
- -
- {% header "h3", "Responsive classes" %} -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
BreakpointClassnameDefinition
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.
-
-
- -
- {% header "h3", "Responsive example" %} -

Resize your browser to see which classes are applied.

-
- {% comment %} - This is a terrible hack to be able to highlight our markup - {% endcomment %} -
<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. -
-
- {% spot "RocketXL" %} -
-
-
-
-
- -
- {% header "h2", "Hover" %} -

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

-
-{% highlight html %} -
-{% endhighlight %} -
-
Example
-
-
-
- -
- {% header "h2", "Focus" %} -

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

-
-{% highlight html %} -
-{% endhighlight %} -
-
Example
-
-
-
- -
- {% header "h2", "Print" %} -

Stacks provides print-only atomic classes. By applying .print:d-none, you’re saying “In print layouts, remove this element from the layout.”

-
-{% highlight html %} -
-
-{% endhighlight %} -
-
This element will be removed from the page while printing.
-
This element will only be shown when printing.
-
-
-
- -
- {% header "h2", "Dark mode" %} -

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

-
-{% highlight html %} -
-{% endhighlight %} -
-
This element will be yellow text and background in light mode but will become green 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.

-
-{% highlight html %} -
-{% endhighlight %} -
-
This element will be rendered with light mode colors regardless of theme preference.
-
-
-
+--- +layout: page +title: Conditional classes +description: 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 . +--- + +
+ {% header "h2", "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 flex layout. This means, “At the medium breakpoint and smaller, switch the flex layout from columns to rows by applying fd-column.”

+ + {% tip, "", "", "ai-center sm:ai-start" %} + Note: Our font size classes, .fs-[x] are automatically adjusted at the smallest breakpoint. + {% endtip %} +
+ +
+ {% header "h3", "Responsive classes" %} +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ClassBreakpointDefinition
.[x]N/AThe class is applied on all browser widths.
.lg:[x]1264pxThe class is applied on large browser widths and below.
.md:[x]980pxThe class is applied on medium browser widths and below.
.sm:[x]640pxThe class is applied on small browser widths and below.
+
+
+ +
+ {% header "h3", "Responsive example" %} +

Resize your browser to see which classes are applied.

+
+ {% comment %} + This is a terrible hack to be able to highlight our markup + {% endcomment %} +
<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. +
+
+ {% spot "RocketXL" %} +
+
+
+
+
+ +
+ {% header "h2", "Hover" %} +

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

+
+{% highlight html %} +
+{% endhighlight %} +
+
Example
+
+
+
+ +
+ {% header "h2", "Focus" %} +

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

+
+{% highlight html %} +
+{% endhighlight %} +
+
Example
+
+
+
+ +
+ {% header "h2", "Print" %} +

Stacks provides print-only atomic classes. By applying .print:d-none, you’re saying “In print layouts, remove this element from the layout.”

+
+{% highlight html %} +
+
+{% endhighlight %} +
+
This element will be removed from the page while printing.
+
This element will only be shown when printing.
+
+
+
+ +
+ {% header "h2", "Dark mode" %} +

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

+
+{% highlight html %} +
+{% endhighlight %} +
+
This element will be yellow text and background in light mode but will become green 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.

+
+{% highlight html %} +
+{% endhighlight %} +
+
This element will be rendered with light mode colors regardless of theme preference.
+
+
+