#Min Width

Classes to set the minimum width of an element.

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

#Examples

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

min-w-50p
<div class="p-4 bg-indigo-100 u-round-xs text-white font-bold u-text-center u-flex" style="">
    <div class="min-w-50p p-2 bg-indigo-500 u-round-xs">min-w-50p</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.$MIN-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 min-w-0 to be applied to some element for lg and above, then I would use the min-w-0-lg class.

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

For more information, visit the Viewports documentation.

#Variants

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

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

This would generate the following additonal classes.

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

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