Cirrus

#Max Width

Classes to set the maximum width of an element.

ClassStyles
max-w-none
max-width: none;
max-w-xs
max-width: 640px;
max-w-sm
max-width: 768px;
max-w-md
max-width: 1024px;
max-w-lg
max-width: 1280px;
max-w-xl
max-width: 1536px;
max-w-10p
max-width: 10%;
max-w-20p
max-width: 20%;
max-w-30p
max-width: 30%;
max-w-40p
max-width: 40%;
max-w-50p
max-width: 50%;
max-w-60p
max-width: 60%;
max-w-70p
max-width: 70%;
max-w-80p
max-width: 80%;
max-w-90p
max-width: 90%;
max-w-100p
max-width: 100%;
max-w-screen
max-width: 100vw;

#Examples

Using these classes it quite simple to control the maximum width an element should have. You can either use a percentage based class or use a class to span the whole screen using the max-w-[size] syntax.

max-w-xs (640px)
max-w-sm (768px)
<div class="p-4 bg-teal-100 u-round-xs text-white font-bold u-text-center">
    <div class="max-w-xs p-2 bg-teal-500 u-round-xs mb-2">max-w-xs (640px)</div>
    <div class="max-w-sm p-2 bg-teal-500 u-round-xs">max-w-sm (768px)</div>
</div>

#Responsive

⚠ Note that the viewport variants are disabled in the default build of Cirrus. To enable, you must enable it yourself in _configs.scss and create a custom build or enable it in the config in your Sass project.

//_configs.scss
$config: (
    viewports: (
        flags.$MAX-WIDTH: true,
    )
) !default;

To use the viewport variant of a given class, you just need to suffix each class with a viewport selector. For example, if I only want max-w-0 to be applied to some element for lg and above, then I would use the max-w-0-lg class.

<div class="max-w-0-lg">
    <!-- ... -->
</div>

For more information, visit the Viewports documentation.

#Variants

The classes specified above are the default utility classes for setting maximum widths. You can add, change, or remove classes within the _config.scss file of Cirrus.

// _config.scss
$config: (
    extend: (
        max-widths: (
            'fit': 'fit-content',
        )
    )
) !default;

This would generate the following additonal classes.

.max-w-fit {
    max-width: fit-content !important;
}

Learn more about how to extend Cirrus to support your use cases in the Configuration documentation.