Syntax

Width

Setting an element’s width.

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

Overview

ClassDeclarations
w:sizewidth: sizerem;
w:n/dwidth: r%;
w:fullwidth: 100%;
w:fitwidth: fit-content;
w:minwidth: min-content;
w:maxwidth: max-content;
w:screen-4xswidth: 22.5rem;
w:screen-3xswidth: 30rem;
w:screen-2xswidth: 37.5rem;
w:screen-xswidth: 48rem;
w:screen-smwidth: 52.125rem;
w:screen-mdwidth: 64rem;
w:screen-lgwidth: 80rem;
w:screen-xlwidth: 90rem;
w:screen-2xlwidth: 100rem;
w:screen-3xlwidth: 120rem;
w:screen-4xlwidth: 160rem;

Conditionally apply

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

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

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.