Layout

Classes to provide an easy way to adjust the layout of the elements without breaking work-flow.

Position

Position types.

<!-- Position Relative -->
<engine:VisualElement class="relative" />
<!-- Position Absolute-->
<engine:VisualElement class="absolute" />

Directional positioning classes, left, right, top, bottom. All of the classes use the same variants.

Format: left-{variant}, right-{variant}, top-{variant}, bottom-{variant}

<!-- set left -->
<engine:VisualElement class="left-4" />
<!-- set right-->
<engine:VisualElement class="right-10p" />
<!-- set top -->
<engine:VisualElement class="top-full" />
<!-- set bottom -->
<engine:VisualElement class="bottom-20-neg" />

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, auto

Each variant has a negative version.

Format: left-{variant}-neg, right-{variant}-neg, top-{variant}-neg, bottom-{variant}-neg

<!-- left position is set to 4px -->
<engine:VisualElement class="left-4" />
<!-- left position is set to -4px -->
<engine:VisualElement class="left-4-neg" />

Flex

Direction property.

<!-- flex-direction: row -->
<engine:VisualElement class="flex-row" />
<!-- flex-direction: row-reverse -->
<engine:VisualElement class="flex-row-reverse" />
<!-- flex-direction: column-->
<engine:VisualElement class="flex-col" />
<!-- flex-direction: column-reverse -->
<engine:VisualElement class="flex-col-reverse" />

Grow and Shrink properties. Both have 9 variants.

<!-- flex-grow: 5 -->
<engine:VisualElement class="grow-5" />
<!-- flex-shrink: 2 -->
<engine:VisualElement class="shrink-2" />

Variants

0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Alignment

Self:

<!-- align-self -->
<engine:VisualElement class="self-stretch" />

Class Name	Property Value
self-auto	align-self: auto
self-start	align-self: flex-start
self-end	align-self: flex-end
self-center	align-self: center
self-stretch	align-self: stretch

Items:

<!-- align-items -->
<engine:VisualElement class="items-auto" />

Class Name	Property Value
items-auto	align-items: auto
items-start	align-items: flex-start
items-end	align-items: flex-end
items-center	align-items: center
items-stretch	align-items: stretch

Align-Content:

<!-- align-content-->
<engine:VisualElement class="align-start" />

Class Name	Property Value
align-auto	align-content: auto
align-start	align-content: flex-start
align-end	align-content: flex-end
align-center	align-content: center
align-stretch	align-content: stretch

Justify-Content:

<!-- justify-content-->
<engine:VisualElement class="justify-start" />

Class Name	Property Value
justify-start	justify-content: flex-start
justify-end	justify-content: flex-end
justify-center	justify-content: center
justify-between	justify-content: space-between
justify-around	justify-content: space-around
justify-evenly	justify-content: space-evenly

Margin

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

Margin, margin-left, margin-right, margin-top, margin-bottom properties.

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

Padding

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

Padding, padding-left, padding-right, padding-top, padding-bottom properties.

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