Size

Designed to standardize the sizing of UI elements in your application, helping to maintain consistency across your design.

Length

List of USS variables for length.

0, 1, 2, 4, 6, 8, 10, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 80, 96, 112, 128, 144, 160, 176, 192, 208, 224, 240, 256, 288, 320, 384, 448, 512, 640, 768, 896, 1024

Usage

.example {
    width: var(--length-16); /* 16px */
    height: var(--length-32); /* 32px */
    margin: var(--length-96); /* 96px */
}

Utility Classes

All of the below classes use the same variants.

Variants

/* Size in px */
0, 1, 2, 4, 6, 8, 10, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 80, 96,
112, 128, 144, 160, 176, 192, 208, 224, 240, 256, 288, 320, 384

/* Size in percentage % */
/* Increments of 5 */
5p, 10p, 15p, 20p, 25p, 30p, 35p, 40p, 45p, 50p, 55p, 60p, 65p, 70p, 75p, 80p, 85p,
90p, 95p, 100p
/* Other */
33p, 66p, full

Size

Set both width and height to the same value.

<!-- Set width and height -->
<engine:VisualElement class="size-128" />
<engine:VisualElement class="size-25p" />
<engine:VisualElement class="size-full" />

Format: size-{variant}. See Variants.

Min/Max Size

Set min/max size of both width and height to the same value.

<!-- Set min-width and min-height -->
<engine:VisualElement class="size-min-128" />
<engine:VisualElement class="size-min-50p" />
<engine:VisualElement class="size-min-full" />
<!-- Set max-width and max-height -->
<engine:VisualElement class="size-max-128" />
<engine:VisualElement class="size-max-50p" />
<engine:VisualElement class="size-max-full" />

Format: size-min-{variant} and size-max-{variant}. See Variants.

Width/Height

Set width or height seperately.

<!-- Set height -->
<engine:VisualElement class="h-128" />
<engine:VisualElement class="h-5p" />
<engine:VisualElement class="h-full" />
<!-- Set width -->
<engine:VisualElement class="w-128" />
<engine:VisualElement class="w-66p" />
<engine:VisualElement class="w-full" />

Format: h-{variant} and w-{variant}. See Variants.

Min/Max Width/Height

Set min/max size of width or height.

<!-- Set min-height -->
<engine:VisualElement class="h-min-128" />
<engine:VisualElement class="h-min-15p" />
<engine:VisualElement class="h-min-full" />
<!-- Set min-width -->
<engine:VisualElement class="w-min-128" />
<engine:VisualElement class="w-min-33p" />
<engine:VisualElement class="w-min-full" />
<!-- Set max-height -->
<engine:VisualElement class="h-max-128" />
<engine:VisualElement class="h-max-55p" />
<engine:VisualElement class="h-max-full" />
<!-- Set max-width -->
<engine:VisualElement class="w-max-128" />
<engine:VisualElement class="w-max-85p" />
<engine:VisualElement class="w-max-full" />

Format: h-min-{variant}, h-max-{variant} , w-min-{variant}, w-max-{variant}. See Variants.