Sizing Reference ↓

Width utilities

.ui-width@full
.ui-width@3/4
.ui-width@2/3
.ui-width@1/2
.ui-width@1/3
.ui-width@1/4
.ui-width@auto
.ui-width@fit

Height utilities

@xs
@s
@m
@l
@xl
@2xl
@3xl

Fixed widths

.ui-width-fixed@xs
.ui-width-fixed@s
.ui-width-fixed@m
.ui-width-fixed@l
.ui-width-fixed@xl
.ui-width-fixed@2xl
.ui-width-fixed@3xl

Fluid widths

.ui-width-fluid@10
.ui-width-fluid@25
.ui-width-fluid@50
.ui-width-fluid@75
.ui-width-fluid@100

Fixed heights

@xs
32px
@s
48px
@m
64px
@l
96px
@xl
128px
@2xl
192px
@3xl
256px

Fluid heights

@25
25vh
@50
50vh
@75
75vh
@100
100vh
PrefixSizes available
.ui-width@*0, xs, s, m, l, xl, 2xl, 3xl, auto, full, screen, fit, min, max, 1/2, 1/3, 2/3, 1/4, 3/4
.ui-width-fixed@*xs (320px), s (480px), m (640px), l (768px), xl (1024px), 2xl (1280px), 3xl (1440px)
.ui-width-fluid@*10 (10vw), 25 (25vw), 50 (50vw), 75 (75vw), 100 (100vw)
.ui-min-width@*0, xs, s, m, l, xl, 2xl, 3xl, full, fit, min, max
.ui-max-width@*none, xs, s, m, l, xl, 2xl, 3xl, full, screen, fit
.ui-height@*0, xs, s, m, l, xl, 2xl, 3xl, auto, full, screen, fit, min, max
.ui-height-fixed@*xs (32px), s (48px), m (64px), l (96px), xl (128px), 2xl (192px), 3xl (256px)
.ui-height-fluid@*25 (25vh), 50 (50vh), 75 (75vh), 100 (100vh)
.ui-min-height@*0, xs, s, m, l, xl, 2xl, 3xl, full, screen, fit
.ui-max-height@*none, xs, s, m, l, xl, 2xl, 3xl, full, screen, fit

Reference

Base

Class / AttributeDescription

Modifiers

Class / AttributeDescription

Options

Class / AttributeDescription