Syntax

width🚧

Setting an element’s width.

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

Overview

ClassDeclarations
w:sizewidth: size/16rem;
w:n/dwidth: n/d*100%;
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>
Syntax
white-space

Controlling how whitespace and line breaks within an element are handled.

Syntax
will-change

Setting how an element is expected to change in the browser.

© Aoyue Design LLC.