A responsive layout pattern that helps switching the orientation from horizontal to vertical if the available width for the targeted (wrapper) element becomes less than the set width. Useful when the targeted element has >= 2 child elements.
Implementation
<div class="switcher --threshold-{z}">
...
</div>
Implementation tip!
When you apply the switcher pattern to the "fixed" content of sidebar pattern, you can get an impressive layout. On larger available width, the content in the "fixed" sidebar has a vertical orientation. Once the available width decreases, the sidebar transforms into a vertical alignment. But the switcher does the opposite, as it now has more available width. To achieve this, ensure the --threshold-{z} class utility of the switcher has a z+1 compared to the sidebar.
API
Custom property
Default
Description
--layout-threshold
0
Sets the threshold when the targeted element switches orientation