#Min Width

Classes to set the minimum width of an element.

min-width: 0;

min-width: 640px;

min-width: 768px;

min-width: 1024px;

min-width: 1280px;

min-width: 1536px;

min-width: 10%;

min-width: 20%;

min-width: 30%;

min-width: 40%;

min-width: 50%;

min-width: 60%;

min-width: 70%;

min-width: 80%;

min-width: 90%;

min-width: 100%;

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.

<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.