Version 0.40.0

UI Helpers

Helpers

Helpers classes need an root id #sui-root to work.

Margins helpers

You can add margins to an element by adding the following classes.

Margin Class
All .sui-h-m-X
Top .sui-h-mt-X
Bottom .sui-h-mb-X
Left .sui-h-ml-X
Right .sui-h-mr-X
Vertical .sui-h-mv-X
Horizontal .sui-h-mh-X

Where X is one of the follwing suffix:

none, xxs, xs, sm, md, lg, xl, xxl

Paddings helpers

You can add paddings to an element by adding the following classes.

Padding Class
All .sui-h-p-X
Top .sui-h-pt-X
Bottom .sui-h-pb-X
Left .sui-h-pl-X
Right .sui-h-pr-X
Vertical .sui-h-pv-X
Horizontal .sui-h-ph-X

Where X is one of the follwing suffix:

none, xxs, xs, sm, md, lg, xl, xxl

Text helpers

Text alignment

Alignment Class
Left
.sui-h-text-left
Center
.sui-h-text-center
Right
.sui-h-text-right

Text colors

Color Class
Success .sui-h-text-success
Warning .sui-h-text-warning
Danger .sui-h-text-danger
Brand .sui-h-text-brand-primary