#Viewports

Cirrus by default is a framework designed to make developing mobile optimized sites easier. Most styles for layouts and elements adapt to changes in screen size and orientation.

Component styles will automatically resize based on the page width while utility classes have modifiers that allow them to be applied to an element at some specified viewport.

#Default Behavior

Some default behavior to expect when elements get resized are:

• Text elements such as h1 will shrink for mobile devices to remain in the right proportion.
• Navigation items inside of header-nav will be tucked away in a dropdown menu for mobile devices.
• Columns inside of a row start out as vertically stacked elements on mobile devices. This can be ignored using any of the col-xs-[i] classes.
• Elements inside of level will also be stacked vertically on mobile devices. Again, the col-xs-[i] classes can be used to override this behavior.

#Breakpoints

The standard breakpoints used in Cirrus are xs, sm, md, and lg. This replaces the mobile, tablet, and desktop designations used in older versions.

From that, the class designations in Cirrus follow this guideline:

An example of style that follows this convention is the u-none-* class.

#Usage

When applying classes viewport supported classes, note that the framework assumes you are designing for a mobile device first. This means that applying u-none on some given div will apply for all screen sizes.

Design For Mobile First

If you then set u-flex-row-md on the div, it will then apply the row flexbox layout starting at the md breakpoint and higher.

<div class="u-flex u-flex-column u-flex-row-md">
    <!-- ... -->
/>

❌ Do not target mobile devices with small selectors.

<div class="u-none-sm">...</div>

✅ Use un-suffixed variant for mobile and suffixed classes for larger screens.

<div class="u-none u-block-md u-flex-lg">...</div>

Modify Specific Viewport

To apply a class for a specific screen size, we can easily set this behavior using multiple declarations of the classes we need for each viewport.

As an example, let's say we want to position a sticky div to be relative only for sm to md. We can use achieve this with the class declarations shown above.

<div class="u-sticky u-relative-sm u-sticky-md">
    <!-- ... -->
/>

Note that not all classes support application by viewport. You can see if a given group of classes support this by checking if the documentation contains a 'Responsive' section detailing how to use the classes with different viewports.

#Customization

You can now modify the breakpoints used within the framework just by modifying the configuration when importing Cirrus.

Adding/Overriding More Breakpoints

To add a breakpoint pair, add a new with entry in the extend configuration and add the corresponding breakpoint pair. Note that this can also be used for overriding existing breakpoints.

@use "cirrus-ui/src/cirrus-ext" as * with (
    $config: (
        extend: (
            breakpoints: (
                // 1. Add the width of the new breakpoint
                widths: (
                    '2xl': 2506px,
                ),
                // 2. Add the breakpoint pair
                breakpoint-pairs: (
                    '2xl': 'lg',
                )
            )
        )
    ),
);

Removing Default Breakpoints

To remove the default breakpoints, just set the settings to null. Note that this may break some existing builds, so be sure to resolve them and add in the corresponding breakpoints as needed.

@use "cirrus-ui/src/cirrus-ext" as * with (
    $config: (
        breakpoints: (
            widths: null,
            breakpoint-pairs: null,
        )
    ),
);