Sizing

Width

Style syntax for setting an element’s width.

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

Overview [sr-only]

ClassDeclarations
width:size / w:size / w:n/nwidth: sizerem
w:fullwidth: size%
w:fitwidth: fit-content
w:maxwidth: max-content
w:maxwidth: max-content
w:3xs / w:360width: 30rem
w:2xs / w:480width: 37.5rem
w:xs / w:600width: 48rem
w:sm / w:768width: 52.125rem
w:md / w:1024width: 64rem
w:lg / w:1280width: 80rem
w:xl / w:1440width: 90rem
w:2xl / w:1600width: sizerem
w:3xl / w:1920width: 120rem
w:4xl / w:2560width: 160rem

Conditionally apply

Apply styles in different states using selectors, media queries, etc.

<div class="width:full:hover width:full@sm width:full@dark width:full@print"></div>
PREVIOUS
Min Width

Style syntax for setting the minimum width of an element.

NEXT
Margin

Style syntax for setting the margin area on all four sides of an element.

MIT License © Aoyue Design LLC.