Luna UI Documentation

Utilities for all things related to size.

USS variables

List of USS variables for length.

Format: --length-{value}

Values

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.

Add "-neg" suffix for negative values.

Usage

css

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

Utility Classes

Variants

Utility classes has 2 versions; fixed pixel sizes and percentage. Here is a list of them, you will see how they are used in the next sections.

html

<!-- 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

Sets both width and height to the same value.

html

<engine:VisualElement class="size-128" />
<engine:VisualElement class="size-25p" />
<!-- 100p or full means 100% -->
<engine:VisualElement class="size-full" />

Min/Max Size

Sets both min/max width and height to the same value.

html

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

Width

html

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

Min/Max Width

html

<!-- Set min-width -->
<engine:VisualElement class="w-min-128" />
<!-- Set max-width -->
<engine:VisualElement class="w-max-512" />

Height

html

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

Min/Max Height

html

<!-- Set min-height -->
<engine:VisualElement class="h-min-128" />
<!-- Set max-height -->
<engine:VisualElement class="h-max-512" />

Margin

html

<!-- Set margin -->
<engine:VisualElement class="m-16" />
<!-- Set margin top -->
<engine:VisualElement class="mt-16" />
<!-- Set margin bottom -->
<engine:VisualElement class="mb-16" />
<!-- Set margin right -->
<engine:VisualElement class="mr-16" />
<!-- Set margin left -->
<engine:VisualElement class="ml-16" />

Padding

html

<!-- Set padding -->
<engine:VisualElement class="p-16" />
<!-- Set padding top -->
<engine:VisualElement class="pt-16" />
<!-- Set padding bottom -->
<engine:VisualElement class="pb-16" />
<!-- Set padding right -->
<engine:VisualElement class="pr-16" />
<!-- Set padding left -->
<engine:VisualElement class="pl-16" />