Skip to content

Commit

Permalink
docs(conditional): add breakpoint widths
Browse files Browse the repository at this point in the history
  • Loading branch information
@dancormier
dancormier committed Feb 24, 2025
1 parent f540947 commit 3767ff7
Showing 1 changed file with 138 additions and 138 deletions.
276 changes: 138 additions & 138 deletions docs/product/develop/conditional-classes.html
View file
Original file line number Diff line number Diff line change
@@ -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 <svg aria-hidden="true" class="svg-icon iconCheckmark fc-green-400 va-middle" width="18" height="18" viewBox="0 0 18 18"><path d="M16 4.41 14.59 3 6 11.59 2.41 8 1 9.41l5 5 10-10z"></path></svg>.
---

<section class="stacks-section">
{% header "h2", "Responsive" %}
<p class="stacks-copy">Many utility classes in Stacks are also available in screen-size specific variations. For example, the <code class="stacks-code">.d-none</code> utility can be applied to small browser widths and below using the <code class="stacks-code">.sm:d-none</code> class, on medium browser widths and below using the <code class="stacks-code">.md:d-none</code> class, and on large browser widths and below using the <code class="stacks-code">.lg:d-none</code> class.</p>

<p class="stacks-copy">This is done using predefined max-width media query breakpoints represented by t-shirt sizes. A common example would be to apply <code class="stacks-code">.md:fd-column</code> to a flex layout. This means, “At the medium breakpoint and smaller, switch the flex layout from columns to rows by applying <code class="stacks-code">fd-column</code>.”</p>

{% tip, "", "", "ai-center sm:ai-start" %}
<strong>Note:</strong> Our font size classes, <code class="stacks-code">.fs-[x]</code> are automatically adjusted at the smallest breakpoint.
{% endtip %}
</section>

<section class="stacks-section">
{% header "h3", "Responsive classes" %}
<div class="overflow-x-auto mb32" tabindex="0">
<table class="wmn4 s-table s-table__bx-simple">
<thead>
<tr>
<th class="s-table--cell2" scope="col">Breakpoint</th>
<th class="s-table--cell3" scope="col">Classname</th>
<th scope="col">Definition</th>
</tr>
</thead>
<tbody>
<tr class="fs-caption">
<th scope="row" class="p8">All / Default</th>
<td><code class="stacks-code bg-white">.[x]</code></td>
<td>The class is applied on all browser widths.</td>
</tr>
<tr class="fs-caption">
<th scope="row" class="p8">Large</th>
<td><code class="stacks-code bg-white">.lg:[x]</code></td>
<td>The class is applied on large browser widths and below.</td>
</tr>
<tr class="fs-caption">
<th scope="row" class="p8">Medium</th>
<td><code class="stacks-code bg-white">.md:[x]</code></td>
<td>The class is applied on medium browser widths and below.</td>
</tr>
<tr class="fs-caption">
<th scope="row" class="p8">Small</th>
<td><code class="stacks-code bg-white">.sm:[x]</code></td>
<td>The class is applied on small browser widths and below.</td>
</tr>
</tbody>
</table>
</div>
</section>

<section class="stacks-section">
{% header "h3", "Responsive example" %}
<p class="stacks-copy">Resize your browser to see which classes are applied.</p>
<div class="stacks-preview">
{% comment %}
This is a terrible hack to be able to highlight our markup
{% endcomment %}
<pre class="language-html s-code-block"><code class="language-html s-code-block"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex flex__center <span class="md:highlight">md:fd-column</span> g16"</span>&gt;</span><br> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex--item wmx3 fs-body3 <span class="lg:highlight">lg:ta-center</span>"</span>&gt;</span><br> …<br> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex--item <span class="md:highlight">md:order-first</span> <span class="sm:highlight">sm:d-none</span>"</span>&gt;</span><br> <span class="hljs-tag">&lt;<span class="hljs-name">svg</span>&gt;</span>…<span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span><br> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
<div class="stacks-preview--example p32">
<div class="d-flex flex__center md:fd-column g16 js-grid">
<div class="flex--item wmx3 fs-body3 lg:ta-center js-grid-left">
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.
</div>
<div class="flex--item sm:d-none md:order-first js-grid-right">
{% spot "RocketXL" %}
</div>
</div>
</div>
</div>
</section>

<section class="stacks-section">
{% header "h2", "Hover" %}
<p class="stacks-copy">Stacks provides hover-only atomic classes. By applying <code class="stacks-code">.h:bs-lg</code>, <code class="stacks-code">.h:o100</code>, and <code class="stacks-code">.h:fc-black-600</code>, you’re saying “On hover, add a large box shadow, an opacity of 100%, and a font color of black 900.”</p>
<div class="stacks-preview">
{% highlight html %}
<div class="s-card o80 bs-sm h:bs-lg h:o100 h:fc-black-600"></div>
{% endhighlight %}
<div class="stacks-preview--example">
<div class="s-card o80 bs-sm h:bs-lg h:o100 h:fc-black-600">Example</div>
</div>
</div>
</section>

<section class="stacks-section">
{% header "h2", "Focus" %}
<p class="stacks-copy">Stacks provides focus-only atomic classes. By applying <code class="stacks-code">.f:o100</code>, and <code class="stacks-code">.f:fc-black-600</code>, you’re saying “On focus, add an opacity of 100%, and a font color of black 900.”</p>
<div class="stacks-preview">
{% highlight html %}
<div class="s-card o80 bs-sm f:o100 f:fc-black-600"></div>
{% endhighlight %}
<div class="stacks-preview--example">
<div class="s-card o80 bs-sm f:o100 f:fc-black-600">Example</div>
</div>
</div>
</section>

<section class="stacks-section">
{% header "h2", "Print" %}
<p class="stacks-copy">Stacks provides print-only atomic classes. By applying <code class="stacks-code">.print:d-none</code>, you’re saying “In print layouts, remove this element from the layout.”</p>
<div class="stacks-preview">
{% highlight html %}
<div class="s-card print:d-none"></div>
<div class="s-card d-none print:d-block"></div>
{% endhighlight %}
<div class="stacks-preview--example">
<div class="s-card print:d-none">This element will be removed from the page while printing.</div>
<div class="s-card d-none print:d-block">This element will only be shown when printing.</div>
</div>
</div>
</section>

<section class="stacks-section">
{% header "h2", "Dark mode" %}
<p class="stacks-copy">Stacks provides darkmode-only atomic classes. By applying <code class="stacks-code">.d:bg-green-300</code>, you’re saying “In dark mode, apply a background of green 100.”</p>
<div class="stacks-preview">
{% highlight html %}
<div class="bg-yellow-300 fc-yellow-600 d:bg-green-300 d:fc-green-600"></div>
{% endhighlight %}
<div class="stacks-preview--example">
<div class="bar-sm p12 bg-yellow-300 fc-yellow-600 d:bg-green-300 d:fc-green-600">This element will be yellow text and background in light mode but will become green in dark mode.</div>
</div>
</div>

<p class="stacks-copy">In addition to specific overrides, you can force an element’s colors to be light or dark by applying <code class="stacks-code">.theme-dark__forced</code> or <code class="stacks-code">.theme-light__forced</code>. This comes in handy when showing users a preview of light or dark interface elements.</p>
<div class="stacks-preview">
{% highlight html %}
<div class="fc-dark bg-yellow-300 ba bc-yellow-300 theme-light__forced"></div>
{% endhighlight %}
<div class="stacks-preview--example">
<div class="theme-light__forced bar-sm p12 fc-dark bg-yellow-300 ba bc-yellow-300">This element will be rendered with light mode colors regardless of theme preference.</div>
</div>
</div>
</section>
---
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 <svg aria-hidden="true" class="svg-icon iconCheckmark fc-green-400 va-middle" width="18" height="18" viewBox="0 0 18 18"><path d="M16 4.41 14.59 3 6 11.59 2.41 8 1 9.41l5 5 10-10z"></path></svg>.
---

<section class="stacks-section">
{% header "h2", "Responsive" %}
<p class="stacks-copy">Many utility classes in Stacks are also available in screen-size specific variations. For example, the <code class="stacks-code">.d-none</code> utility can be applied to small browser widths and below using the <code class="stacks-code">.sm:d-none</code> class, on medium browser widths and below using the <code class="stacks-code">.md:d-none</code> class, and on large browser widths and below using the <code class="stacks-code">.lg:d-none</code> class.</p>

<p class="stacks-copy">This is done using predefined max-width media query breakpoints represented by t-shirt sizes. A common example would be to apply <code class="stacks-code">.md:fd-column</code> to a flex layout. This means, “At the medium breakpoint and smaller, switch the flex layout from columns to rows by applying <code class="stacks-code">fd-column</code>.”</p>

{% tip, "", "", "ai-center sm:ai-start" %}
<strong>Note:</strong> Our font size classes, <code class="stacks-code">.fs-[x]</code> are automatically adjusted at the smallest breakpoint.
{% endtip %}
</section>

<section class="stacks-section">
{% header "h3", "Responsive classes" %}
<div class="overflow-x-auto mb32" tabindex="0">
<table class="wmn4 s-table s-table__bx-simple">
<thead>
<tr>
<th class="s-table--cell2" scope="col">Class</th>
<th class="s-table--cell3" scope="col">Breakpoint</th>
<th scope="col">Definition</th>
</tr>
</thead>
<tbody>
<tr class="fs-caption">
<td><code class="stacks-code">.[x]</code></td>
<td>N/A</td>
<td>The class is applied on all browser widths.</td>
</tr>
<tr class="fs-caption">
<td><code class="stacks-code">.lg:[x]</code></td>
<td>1264px</td>
<td>The class is applied on large browser widths and below.</td>
</tr>
<tr class="fs-caption">
<td><code class="stacks-code">.md:[x]</code></td>
<td>980px</td>
<td>The class is applied on medium browser widths and below.</td>
</tr>
<tr class="fs-caption">
<td><code class="stacks-code">.sm:[x]</code></td>
<td>640px</td>
<td>The class is applied on small browser widths and below.</td>
</tr>
</tbody>
</table>
</div>
</section>

<section class="stacks-section">
{% header "h3", "Responsive example" %}
<p class="stacks-copy">Resize your browser to see which classes are applied.</p>
<div class="stacks-preview">
{% comment %}
This is a terrible hack to be able to highlight our markup
{% endcomment %}
<pre class="language-html s-code-block"><code class="language-html s-code-block"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex flex__center <span class="md:highlight">md:fd-column</span> g16"</span>&gt;</span><br> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex--item wmx3 fs-body3 <span class="lg:highlight">lg:ta-center</span>"</span>&gt;</span><br> …<br> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex--item <span class="md:highlight">md:order-first</span> <span class="sm:highlight">sm:d-none</span>"</span>&gt;</span><br> <span class="hljs-tag">&lt;<span class="hljs-name">svg</span>&gt;</span>…<span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span><br> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
<div class="stacks-preview--example p32">
<div class="d-flex flex__center md:fd-column g16 js-grid">
<div class="flex--item wmx3 fs-body3 lg:ta-center js-grid-left">
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.
</div>
<div class="flex--item sm:d-none md:order-first js-grid-right">
{% spot "RocketXL" %}
</div>
</div>
</div>
</div>
</section>

<section class="stacks-section">
{% header "h2", "Hover" %}
<p class="stacks-copy">Stacks provides hover-only atomic classes. By applying <code class="stacks-code">.h:bs-lg</code>, <code class="stacks-code">.h:o100</code>, and <code class="stacks-code">.h:fc-black-600</code>, you’re saying “On hover, add a large box shadow, an opacity of 100%, and a font color of black 900.”</p>
<div class="stacks-preview">
{% highlight html %}
<div class="s-card o80 bs-sm h:bs-lg h:o100 h:fc-black-600"></div>
{% endhighlight %}
<div class="stacks-preview--example">
<div class="s-card o80 bs-sm h:bs-lg h:o100 h:fc-black-600">Example</div>
</div>
</div>
</section>

<section class="stacks-section">
{% header "h2", "Focus" %}
<p class="stacks-copy">Stacks provides focus-only atomic classes. By applying <code class="stacks-code">.f:o100</code>, and <code class="stacks-code">.f:fc-black-600</code>, you’re saying “On focus, add an opacity of 100%, and a font color of black 900.”</p>
<div class="stacks-preview">
{% highlight html %}
<div class="s-card o80 bs-sm f:o100 f:fc-black-600"></div>
{% endhighlight %}
<div class="stacks-preview--example">
<div class="s-card o80 bs-sm f:o100 f:fc-black-600">Example</div>
</div>
</div>
</section>

<section class="stacks-section">
{% header "h2", "Print" %}
<p class="stacks-copy">Stacks provides print-only atomic classes. By applying <code class="stacks-code">.print:d-none</code>, you’re saying “In print layouts, remove this element from the layout.”</p>
<div class="stacks-preview">
{% highlight html %}
<div class="s-card print:d-none"></div>
<div class="s-card d-none print:d-block"></div>
{% endhighlight %}
<div class="stacks-preview--example">
<div class="s-card print:d-none">This element will be removed from the page while printing.</div>
<div class="s-card d-none print:d-block">This element will only be shown when printing.</div>
</div>
</div>
</section>

<section class="stacks-section">
{% header "h2", "Dark mode" %}
<p class="stacks-copy">Stacks provides darkmode-only atomic classes. By applying <code class="stacks-code">.d:bg-green-300</code>, you’re saying “In dark mode, apply a background of green 100.”</p>
<div class="stacks-preview">
{% highlight html %}
<div class="bg-yellow-300 fc-yellow-600 d:bg-green-300 d:fc-green-600"></div>
{% endhighlight %}
<div class="stacks-preview--example">
<div class="bar-sm p12 bg-yellow-300 fc-yellow-600 d:bg-green-300 d:fc-green-600">This element will be yellow text and background in light mode but will become green in dark mode.</div>
</div>
</div>

<p class="stacks-copy">In addition to specific overrides, you can force an element’s colors to be light or dark by applying <code class="stacks-code">.theme-dark__forced</code> or <code class="stacks-code">.theme-light__forced</code>. This comes in handy when showing users a preview of light or dark interface elements.</p>
<div class="stacks-preview">
{% highlight html %}
<div class="fc-dark bg-yellow-300 ba bc-yellow-300 theme-light__forced"></div>
{% endhighlight %}
<div class="stacks-preview--example">
<div class="theme-light__forced bar-sm p12 fc-dark bg-yellow-300 ba bc-yellow-300">This element will be rendered with light mode colors regardless of theme preference.</div>
</div>
</div>
</section>

0 comments on commit 3767ff7

Please sign in to comment.