Syntax

Min Width

Setting the minimum width of an element.

🚧This page is still under construction and some content may not be complete.

Overview

ClassDeclarations
min-w:sizemin-width: sizerem;
min-vhmin-height: 100vh;
min-w:fullmin-width: 100%;
min-w:fitmin-width: fit-content;
min-w:minmin-width: min-content;
min-w:maxmin-width: max-content;
min-w:screen-4xsmin-width: 22.5rem;
min-w:screen-3xsmin-width: 30rem;
min-w:screen-2xsmin-width: 37.5rem;
min-w:screen-xsmin-width: 48rem;
min-w:screen-smmin-width: 52.125rem;
min-w:screen-mdmin-width: 64rem;
min-w:screen-lgmin-width: 80rem;
min-w:screen-xlmin-width: 90rem;
min-w:screen-2xlmin-width: 100rem;
min-w:screen-3xlmin-width: 120rem;
min-w:screen-4xlmin-width: 160rem;

Conditionally apply

Apply styles based on different states using selectors and applying conditionally.

<div class="min-w:full:hover min-w:full@sm min-w:full@dark min-w:full@print"></div>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.