WebUI mobile-first CSS

Basic Padding

Padding

The following example uses the pad-md class.

Pellentesque habitant morbi tristique senectus

    
<div class="info-dark pad-md border-xs border-info">
  <div>Pellentesque habitant morbi tristique senectus</div>
</div>
                
HTML

Padding Classes

Padding classes available and corresponding sizes.

Class	Size
pad-initial, pad-left-initial, pad-top-initial, pad-right-initial, pad-bottom-initial	0
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

Items Padding

Items padding can be applied to any HTML element and affects all immediate child elements. To override this padding for individual child elements, any of the classes listed above can be used.

The following example uses the pad-items-lg class to add large padding to all immediate child elements. Padding for the second child element has been overridden by the pad-sm class.

Item 1

Item 2

Item 3

    
<div class="container info-dark pad-items-lg">
  <div class="border-xs border-info">Item 1</div>
  <div class="border-xs border-info pad-sm">Item 2</div>
  <div class="border-xs border-info">Item 3</div>
</div>
                
HTML

Items Padding Classes

Classes available for padding child elements.

Class	Size
pad-items-initial	0
pad-items-xxs	0.078rem
pad-items-xxs-xs	0.156rem
pad-items-xs	0.313rem
pad-items-xs-sm	0.469rem
pad-items-sm	0.625rem
pad-items-sm-md	0.781rem
pad-items-md	0.938rem
pad-items-md-lg	1.094rem
pad-items-lg	1.25rem
pad-items-lg-xl	1.406rem
pad-items-xl	1.563rem
pad-items-xl-xxl	1.719rem
pad-items-xxl	1.876rem

Column Padding

Column padding can be applied to an entire layout or table - it affects all descendant elements specified as layout cols, HTML columns or table data cells. To override this padding for individual descendant elements, any of the regular pad-* classes can be used.

Column 1

Column 2

Column 3

    
<div class="row info-dark col-padding-lg">
  <div class="col border-xs border-info">Column 1</div>
  <div class="col border-xs border-info pad-sm">Column 2</div>
  <div class="col border-xs border-info">Column 3</div>
</div>
                
HTML

Column Padding Classes

Classes for column padding are cascading, so will affect multiple nested levels.

Class	Size
col-padding-initial	0
col-padding-xs	0.313rem
col-padding-sm	0.625rem
col-padding-md	0.938rem
col-padding-lg	1.25rem
col-padding-xl	1.563rem

Padding for Layouts

Layout Padding

The col-padding-* classes can be used to apply padding to WebUI layouts, flexbox layouts that use the flex-col, flex-col-* classes, and HTML tables.

Logo

Heading

Navigation

Content

    
  

  
<div class="col-padding-sm">
  <div class="row">
    <div class="col-fixed info-dark border-xs border-info">
      Logo
    </div>
    <div class="col text-center info-dark border-xs border-info">
      Heading
    </div>  
  </div>
  <div class="row">
    <div class="col-6-bp-3-over info-dark border-xs border-info">
      Navigation
    </div>
    <div class="col-18-bp-3-over info-dark border-xs border-info">
      Content
    </div>
  </div>
</div>
  
      
HTML

Padding for HTML Tables

HTML Table Padding

The col-padding-* classes can also be used with HTML tables.

2017	Total	v60	v59	v59
Apr	75.7	0.1	0.2	4.9
Mar	75.1		0.2	0.4
Feb	74.1			0.2
Jan	73.7			0.1
Footer

    
  

  
<table class="table table-bordered table-accent-4 
    table-striped width-full col-padding-md text-sm">
  <thead>
    <tr>
      <th>
        2017
      </th>
      <th>
        Total
      </th>
      <th>
        v60
      </th>
      <th>
        v59
      </th>
      <th>
        v59
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Apr
      </td>
      <td>
        75.7
      </td>
      <td>
        0.1
      </td>
      <td>
        0.2
      </td>
      <td>
        4.9
      </td>
    </tr>
    <tr>
      <td>
        Mar
      </td>
      <td>
        75.1
      </td>
      <td>
        
      </td>
      <td>
        0.2
      </td>
      <td>
        0.4
      </td>
    </tr>
    <tr>
      <td>
        Feb
      </td>
      <td>
        74.1
      </td>
      <td>
        
      </td>
      <td>
        
      </td>
      <td>
        0.2
      </td>
    </tr>
    <tr>
      <td>
        Jan
      </td>
      <td>
        73.7
      </td>
      <td>
        
      </td>
      <td>
        
      </td>
      <td>
        0.1
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="5">
        Footer
      </td>
    </tr>
  </tfoot>
</table>
  
      
HTML