WebUI mobile-first CSS

Basic Padding

The following table lists basic padding classes available and their sizes.

Classes

Size

pad-xxs, pad-left-xxs, pad-top-xxs, pad-right-xxs, pad-bottom-xxs

0.078rem

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

0.156rem

pad-xs, pad-left-xs, pad-top-xs, pad-right-xs, pad-bottom-xs

0.313rem

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

0.469rem

pad-sm, pad-left-sm, pad-top-sm, pad-right-sm, pad-bottom-sm

0.625rem

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

0.781rem

pad-md, pad-left-md, pad-top-md, pad-right-md, pad-bottom-md

0.938rem

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

1.094rem

pad-lg, pad-left-lg, pad-top-lg, pad-right-lg, pad-bottom-lg

1.25rem

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

1.406rem

pad-xl, pad-left-xl, pad-top-xl, pad-right-xl, pad-bottom-xl

1.563rem

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

1.719rem

pad-xxl, pad-left-xxl, pad-top-xxl, pad-right-xxl, pad-bottom-xxl

1.876rem

Example

Pellentesque habitant morbi tristique senectus

Markup

<div class="container">
  <div class="table-row">
    <div class="table-col-5 pad-sm">
      <div>Pellentesque habitant morbi tristique senectus</div>
    </div>
    <div class="table-col-5 pad-md">
      <div>Pellentesque habitant morbi tristique senectus</div>
    </div>
    <div class="table-col-5 pad-lg">
      <div>Pellentesque habitant morbi tristique senectus</div>
    </div>
    <div class="table-col-5 pad-xl">
      <div>Pellentesque habitant morbi tristique senectus</div>
    </div>
  </div>
</div>

Padding for Grids

The col-padding-* classes are used to apply padding to all columns in any of the 3 grid types.

Tha classes available are as follows:

col-padding-xs
col-padding-sm
col-padding-md
col-padding-lg
col-padding-xl

Example

2017

Total

v60

v59

v58

Jan

73.7

0.1

Feb

74.1

0.2

Markup

<div class="responsive-gutter-md">
  <div class="container col-padding-md text-center text-sm text-bold">
    <div class="table-row">
      <div class="table-col-4 text-left">2017</div>
      <div class="table-col-4">Total</div>
      <div class="table-col-4">v60</div>
      <div class="table-col-4">v59</div>
      <div class="table-col-4">v58</div>
    </div>
    <div class="table-row">
      <div class="table-col-4 text-left">Jan</div>
      <div class="table-col-4">73.7</div>
      <div class="table-col-4">-</div>
      <div class="table-col-4">-</div>
      <div class="table-col-4">0.1</div>
    </div>
    <div class="table-row">
      <div class="table-col-4 text-left">Feb</div>
      <div class="table-col-4">74.1</div>
      <div class="table-col-4">-</div>
      <div class="table-col-4">-</div>
      <div class="table-col-4">0.2</div>
    </div>
  </div>
</div>

Padding with Flexbox

When padding is required for content within flex items, the normal pad-* classes can be used. However, it is best to apply padding to a nested container element rather than the flex item itself to avoid breaking the flex layout, as shown in the following example.

For more information on using containers see the Containers section.

Example

Lorem ipsum dolor sit amet

Markup

<div class="flex-row">
  <div class="flex-size-6 flex-direction-column">     
    <div class="background-accent-1-light pad-md">
      Lorem ipsum dolor sit amet        
    </div>
    <div class="background-accent-4-light pad-md">
      Lorem ipsum dolor sit amet        
    </div>
  </div>
  <div class="flex-size-14">
    <div class="flex-col background-accent-2-light pad-md">
      Lorem ipsum dolor sit amet
    </div>
    <div class="flex-col background-accent-4-light pad-md">
      Lorem ipsum dolor sit amet
    </div>
  </div>
</div>

WebUI also provides the flex-padding-* helper classes. Similar to the col-padding-* classes, they can be used to apply padding to multiple elements at once with one important difference. The flexbox helper classes necessarily restrict the scope to the immediate child flex-col and flex-size-* elements only - this is because flexbox classes are used for more than just grids.

Here's an example showing how to apply padding to multiple columns

Example

Lorem ipsum dolor sit amet

Markup

<div class="flex-row">
  <div class="flex-size-6 flex-direction-column background-accent-1-light flex-padding-md">     
    <div class="flex-col background-accent-1-light">
      Lorem ipsum dolor sit amet        
    </div>
    <div class="flex-col background-accent-4-light">
      Lorem ipsum dolor sit amet        
    </div>
  </div>
  <div class="flex-size-14 flex-padding-md">
    <div class="flex-col background-accent-2-light">
      Lorem ipsum dolor sit amet
    </div>
    <div class="flex-col background-accent-4-light">
      Lorem ipsum dolor sit amet
    </div>
  </div>
</div>