WebUI mobile-first CSS

Horizontal Spacing

The gap-horizontal-* classes can be used to create horizontal spacing between any immediate child elements with the exception of grid rows and columns. They are ideal for separating form controls such as buttons or creating small gaps between images, but can be used to separate almost any elements.

Class

Size

gap-horizontal-xs

0.313rem

gap-horizontal-sm

0.625rem

gap-horizontal-md

0.938rem

gap-horizontal-lg

1.25rem

gap-horizontal-xl

1.563rem

Example

Markup

<div class="form-row text-bold text-sm">
  <div class="form-col-20 background-accent-1-light gap-horizontal-md">
    <button type="button" class="button-sm button-accent-1">Button 1</button>
    <button type="button" class="button-sm button-accent-1">Button 2</button>
    <button type="button" class="button-sm button-accent-1">Button 3</button>
  </div>
</div>

Horizontal Spacing

The gap-horizontal-* classes should not be used to separate grid columns, but are intended for spacing elements within flex items, grid rows and columns.

Vertical Spacing

The gap-vertical-* classes can be used to create vertical spacing between any immediate child elements, and may be used to create spacing between grid rows. These are ideal for separating form controls such as buttons or creating small gaps between images, but can be used for almost any elements.

Class

Size

gap-vertical-xs

0.313rem

gap-vertical-sm

0.625rem

gap-vertical-md

0.938rem

gap-vertical-lg

1.25rem

gap-vertical-xl

1.563rem

Example

Pellentesque habitant morbi tristique senectus

Markup

<div class="container gap-vertical-sm">
  <div class="panel background-accent-1-light">
    <div>Pellentesque habitant morbi tristique senectus</div>
  </div>
  <div class="panel background-accent-1-light">
    <div>Pellentesque habitant morbi tristique senectus</div>
  </div>
  <div class="panel background-accent-1-light">
    <div>Pellentesque habitant morbi tristique senectus</div>
  </div>
  <div class="panel background-accent-1-light">
    <div>Pellentesque habitant morbi tristique senectus</div>
  </div>						
</div>

Row Spacing

The row-spacing-* classes are used to apply spacing between rows in any of the 3 grid types. They can also be used to create vertical spacing between most elements, and are available with the traditional grid system only.

The classes available are as follows:

Class

Height

row-spacing-xs

0.313rem

row-spacing-sm

0.625rem

row-spacing-md

1.25rem

row-spacing-lg

1.875rem

row-spacing-xl

3.125rem

Example

Lorem ipsum

Markup

<div class="container col-padding-md text-center text-sm">
  <div class="form-row">
    <div class="form-col-eq-3 background-accent-1-light">Lorem ipsum</div>
    <div class="form-col-eq-3 background-accent-1-light">Lorem ipsum</div>
    <div class="form-col-eq-3 background-accent-1-light">Lorem ipsum</div>
  </div>
  <div class="row-spacing-lg"></div>
  <div class="form-row">
    <div class="form-col-eq-3 background-accent-1-light">Lorem ipsum</div>
    <div class="form-col-eq-3 background-accent-1-light">Lorem ipsum</div>
    <div class="form-col-eq-3 background-accent-1-light">Lorem ipsum</div>
  </div>
</div>

Custom Margins

WebUI includes a number of utility classes that can be used to assist with element margins, as listed in the following table. These classes can be used on their own or in combination with the place-* or dock-* classes.

Classes

Margin

margin-initial

0

margin-top-initial , margin-left-initial , margin-bottom-initial , margin-right-initial

0

margin-top-xxs , margin-left-xxs , margin-bottom-xxs , margin-right-xxs

0.625rem

margin-top-minus-xxs , margin-left-minus-xxs , margin-bottom-minus-xxs , margin-right-minus-xxs

-0.625rem

margin-top-xxs-xs , margin-left-xxs-xs , margin-bottom-xxs-xs , margin-right-xxs-xs

0.938rem

margin-top-minus-xxs-xs , margin-left-minus-xxs-xs , margin-bottom-minus-xxs-xs , margin-right-minus-xxs-xs

-0.938rem

margin-top-xs , margin-left-xs , margin-bottom-xs , margin-right-xs

1.25rem

margin-top-minus-xs , margin-left-minus-xs , margin-bottom-minus-xs , margin-right-minus-xs

-1.25rem

margin-top-xs-sm , margin-left-xs-sm , margin-bottom-xs-sm , margin-right-xs-sm

1.875rem

margin-top-minus-xs-sm , margin-left-minus-xs-sm , margin-bottom-minus-xs-sm , margin-right-minus-xs-sm

-1.875rem

margin-top-sm , margin-left-sm , margin-bottom-sm , margin-right-sm

2.5rem

margin-top-minus-sm , margin-left-minus-sm , margin-bottom-minus-sm , margin-right-minus-sm

-2.5rem

margin-top-sm-md , margin-left-sm-md , margin-bottom-sm-md , margin-right-sm-md

3.75rem

margin-top-minus-sm-md , margin-left-minus-sm-md , margin-bottom-minus-sm-md , margin-right-minus-sm-md

-3.75rem

margin-top-md , margin-left-md , margin-bottom-md , margin-right-md

5rem

margin-top-minus-md , margin-left-minus-md , margin-bottom-minus-md , margin-right-minus-md

-5rem

margin-top-md-lg , margin-left-md-lg , margin-bottom-md-lg , margin-right-md-lg

7.5rem

margin-top-minus-md-lg , margin-left-minus-md-lg , margin-bottom-minus-md-lg , margin-right-minus-md-lg

-7.5rem

margin-top-lg , margin-left-lg , margin-bottom-lg , margin-right-lg

10rem

margin-top-minus-lg , margin-left-minus-lg , margin-bottom-minus-lg , margin-right-minus-lg

-10rem

margin-top-lg-xl , margin-left-lg-xl , margin-bottom-lg-xl , margin-right-lg-xl

15rem

margin-top-minus-lg-xl , margin-left-minus-lg-xl , margin-bottom-minus-lg-xl , margin-right-minus-lg-xl

-15rem

margin-top-xl , margin-left-xl , margin-bottom-xl , margin-right-xl

20rem

margin-top-minus-xl , margin-left-minus-xl , margin-bottom-minus-xl , margin-right-minus-xl

-20rem

margin-top-xl-xxl , margin-left-xl-xxl , margin-bottom-xl-xxl , margin-right-xl-xxl

30rem

margin-top-minus-xl-xxl , margin-left-minus-xl-xxl , margin-bottom-minus-xl-xxl , margin-right-minus-xl-xxl

-30rem

margin-top-xxl , margin-left-xxl , margin-bottom-xxl , margin-right-xxl

40rem

margin-top-minus-xxl , margin-left-minus-xxl , margin-bottom-minus-xxl , margin-right-minus-xxl

-40rem

Example

place-top-right margin-top-xs margin-right-sm

place-middle-left margin-left-sm

Markup

<div class="panel background-accent-1-light height-lg-xl text-sm">
  <div class="place-top-right margin-top-xs margin-right-sm pad-sm accent-1">
    <div>place-top-right margin-top-xs margin-right-sm</div>
  </div>
  <div class="place-middle-left margin-left-sm pad-sm accent-1">
    <div>place-middle-left margin-left-sm</div>
  </div>
</div>