Skip to the page

MCSS-Lite 0.4.1

GitHub

Switcher l-switcher

StableLayout · since 0.1.0

Children sit side by side until the container is narrower than a threshold, then all stack at once.

Pick this part

Pick l-switcher for

  • Two to four items of equal importance, such as pricing tiers or steps, that should switch from a row to a column all at once.

Pick another part for

  • Items of unequal importance: use l-sidebar.
  • Five or more items, or a list of unknown length: use l-grid with l-grid--responsive.

Build it

  1. Start with an element and add class="l-switcher".
  2. Tune --switcher-threshold inline if the default (30rem) doesn't fit.
  3. Put the parts inside. The layout sets the space between them, so they need no margins.

Free

Team

Show markup 4 lines 
<div class="l-switcher" style="--switcher-threshold: 40rem">
  <section class="c-card"><p class="u-margin-0">Free</p></section>
  <section class="c-card"><p class="u-margin-0">Team</p></section>
</div>

Check your build

Each piece that doesn't fit was run through mcss-lite validate when this page was built. The output below is real.

Fits

Set the threshold with the custom property.

Free

Team

Show markup 4 lines 
<div class="l-switcher" style="--switcher-threshold: 40rem">
  <section class="c-card"><p class="u-margin-0">Free</p></section>
  <section class="c-card"><p class="u-margin-0">Team</p></section>
</div>

validate: 0 issues

Doesn't fit

Don't invent size modifiers.

<div class="l-switcher l-switcher--wide">
  <section class="c-card"><p class="u-margin-0">Free</p></section>
</div>

validate

  • error Unknown class "l-switcher--wide". l-switcher has no modifiers. Only classes from the MCSS-Lite contracts exist. [unknown-class]

Spec sheet

Custom properties
PropertyDefaultWhat it does
--switcher-threshold30remContainer width below which children stack. Set inline, e.g. style="--switcher-threshold: 40rem".

Fits with

Researched from