Switcher

Introduction

Creating flexible layouts that adapt to different screen sizes and content can be a daunting task. The .switcher classes offer a powerful solution to effortlessly manage flexible and responsive layouts. Whether you want to design multi-column layouts or ensure a graceful transition to a stacked layout on small screens, Switcher classes provide an efficient way to achieve your layout goals with ease.

Using Switcher

To harness the potential of the Switcher classes in your HTML, follow these straightforward steps:

1. Apply the .switcher class to the parent container element to enable the Switcher layout behavior. This class automatically organizes its children into responsive columns based on available space.

<div class="switcher">
  <div>
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
  </div>
</div>

2. Customize the spacing between elements using the .switcher-space-{size} classes. These classes set the --cds-comp-composition-switcher-space variable, which controls the spacing between items. Choose the class that matches your desired spacing:

Class	Value
.switcher-space-3xs	--cds-sys-spacing-3xs
.switcher-space-2xs	--cds-sys-spacing-2xs
.switcher-space-xs	--cds-sys-spacing-xs
.switcher-space-s	--cds-sys-spacing-s
.switcher-space-m	--cds-sys-spacing-m
.switcher-space-l	--cds-sys-spacing-l
.switcher-space-xl	--cds-sys-spacing-xl
.switcher-space-2xl	--cds-sys-spacing-2xl
.switcher-space-3xl	--cds-sys-spacing-3xl

For example, to set a generous spacing equivalent to the var(--cds-sys-spacing-l) size, you can use the .switcher-space-l class:

<div class="switcher switcher-space-l">
  <!-- Your switcher content here -->
</div>

3. Customize the maximum number of columns using the .switcher-max-{number} classes. These classes specify the maximum number of columns your content will be divided into based on the available space. For example, the .switcher-max-3 class will limit your content to a maximum of three columns before turning to a stacked layout:

<div class="switcher switcher-max-3">
  <!-- Your switcher content here -->
</div>

4. Adjust the threshold for column breaks using the .switcher-treshold-{size} classes. These classes set the --cds-comp-composition-switcher-treshold variable, determining when columns layout should switch to stacked layout.

Class	Value
.switcher-treshold-3xs	12rem
.switcher-treshold-2xs	16rem
.switcher-treshold-xs	20rem
.switcher-treshold-s	24rem
.switcher-treshold-m	28rem
.switcher-treshold-l	32rem
.switcher-treshold-xl	36rem
.switcher-treshold-2xl	42rem
.switcher-treshold-3xl	48rem
.switcher-treshold-4xl	56rem
.switcher-treshold-5xl	64rem
.switcher-treshold-6xl	72rem
.switcher-treshold-7xl	80rem

By customizing these threshold classes, you can ensure that your content wraps into a stacked layout when you desire.

The Switcher classes help create multi-column layouts that gracefully transition to a stacked layout on smaller screens or when the content requires it.

Key Features

The Switcher classes offer the following features:

• Responsive multi-column layout for various screen sizes.
• Precise control over the spacing between items.
• Customizable maximum column limits.
• Adjustable thresholds for column breaks.

Practical Use Cases

The Switcher classes are versatile and find applications in various design scenarios, including:

• Designing responsive grids for content or product listings.
• Creating multi-column blog layouts.
• Building adaptive navigation menus.
• Arranging elements into responsive card layouts.

Elevate your web design capabilities with the Switcher classes and take control of your layouts with ease. Achieve responsive, multi-column designs that automatically adapt to different screen sizes.