Version 0.40.0

UI Layouts

Containers

Default container

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, adipisci amet animi corporis enim error exercitationem ipsum iusto laudantium libero maxime modi quis recusandae sed sunt totam vel! Quaerat, sunt!
<div class="sui-l-container">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, adipisci amet animi corporis enim error exercitationem ipsum iusto laudantium libero maxime modi quis recusandae sed sunt totam vel! Quaerat, sunt!
</div>

Gutter modifiers

You can add the following modifiers to change the gutter size (container paddings).

Modifier Description
as--gutter-X Set gutter size (where X is none, xxs, xs, sm, md, lg, xl or xxl).
as--gutter-vertical-X Set gutter size only vertically (where X is none, xxs, xs, sm, md, lg, xl or xxl)
as--gutter-horizontal-X Set gutter size only horizontally (where X is none, xxs, xs, sm, md, lg, xl or xxl)

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, adipisci amet animi corporis enim error exercitationem ipsum iusto laudantium libero maxime modi quis recusandae sed sunt totam vel! Quaerat, sunt!
<div class="sui-l-container as--gutter-xxl@md">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, adipisci amet animi corporis enim error exercitationem ipsum iusto laudantium libero maxime modi quis recusandae sed sunt totam vel! Quaerat, sunt!
</div>

Size modifiers

You can add the following modifiers to change max size of a container.

Modifier Description
as--size-X Set container max size (where X is full, xxs, xs, sm, md, lg, xl or xxl).
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, adipisci amet animi corporis enim error exercitationem ipsum iusto laudantium libero maxime modi quis recusandae sed sunt totam vel! Quaerat, sunt!
<div class="sui-l-container as--size-sm">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, adipisci amet animi corporis enim error exercitationem ipsum iusto laudantium libero maxime modi quis recusandae sed sunt totam vel! Quaerat, sunt!
</div>

Responsive suffixes for modifiers

Screens size Suffix name
All -
450px + @xxs
600px + @xs
800px + @sm
1000px + @md
1200px + @lg
1400px + @xl
1600px + @xxl