Media WebUI

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
Pellentesque habitant morbi tristique senectus
Pellentesque habitant morbi tristique senectus
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
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
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>