WebUI mobile-first CSS

Border Classes

Sizing Classes

Class

Width

border-xs

0.063rem (Default)

border-sm

0.125rem

border-md

0.188rem

border-lg

0.25rem

border-xl

0.313rem

Using one of the above classes without a border color class will show a border in the default border color defined in the WebUI color palette.

Color Classes

There are border color classes for most colors in the WebUI color palette. The simplest format used for these is border-[color], which will affect all borders of an element. You can also specify which border to color by using the format border-[side]-[color]. For example: border-top-accent-1.

Borders

If the element being styled already has a border with the required width, then you don't need to use the border sizing classes.

Example

Markup

<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <div class="width-md height-md border-sm border-info">
    </div>
  </div>
  <div class="table-col">
    <div class="width-md height-md border-md border-top-success">
    </div>
  </div>
  <div class="table-col">
    <div class="width-md height-md border-xl border-top-dark border-left-danger">
    </div>
  </div>
</div>

Rounding Classes

Classes

Radius

rounded-sm , rounded-top-sm , rounded-left-sm , rounded-bottom-sm , rounded-right-sm

0.188rem

rounded-md , rounded-top-md , rounded-left-md , rounded-bottom-md , rounded-right-md

0.375rem

rounded-lg , rounded-top-lg , rounded-left-lg , rounded-bottom-lg , rounded-right-lg

0.563rem

Example

rounded-sm

rounded-md

rounded-lg

Markup

<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <div class="container width-md height-md border-sm border-accent-1 rounded-sm">
      <span class="place-middle-center">rounded-sm</span>
    </div>
  </div>
  <div class="table-col">
    <div class="container width-md height-md border-sm border-accent-1 rounded-md">
      <span class="place-middle-center">rounded-md</span>
    </div>
  </div>
  <div class="table-col">
    <div class="container width-md height-md border-sm border-accent-1 rounded-lg">
        <span class="place-middle-center">rounded-lg</span>
    </div>
  </div>
</div>

Behavioural Classes

The behavioural classes provide color changes on hover or focus events. The format is as described above, but with the addition of hover or focus. For example: border-right-hover-success or border-top-focus-dark.

Example

Hover

Focus

Markup

<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <div class="container width-md height-md border-sm border-hover-accent-1">
      <span class="place-middle-center">Hover</span>
    </div>
  </div>
  <div class="table-col">
    <div class="container width-md height-md border-md border-bottom-hover-accent-3">
      <span class="place-middle-center">Hover</span>
    </div>
  </div>
  <div class="table-col">
    <div class="container width-md height-md border-xl border-right-focus-info border-left-focus-warning" tabindex="0">
        <span class="place-middle-center">Focus</span>
    </div>
  </div>
</div>

Border Cap Classes

Class

Description

border-cap-top-focus-*

Defines a border open at the bottom and shown when the element is in focus.

border-cap-left-focus-*

Defines a border open on the right and shown when the element is in focus.

border-cap-right-focus-*

Defines a border open on the left and shown when the element is in focus.

border-cap-bottom-focus-*

Defines a border open at the top and shown when the element is in focus.

border-cap-top-hover-*

Defines a border open at the bottom and shown when a hover event is triggered.

border-cap-left-hover-*

Defines a border open on the right and shown when a hover event is triggered.

border-cap-right-hover-*

Defines a border open on the left and shown when a hover event is triggered.

border-cap-bottom-hover-*

Defines a border open at the top and shown when a hover event is triggered.

border-cap-horizontal-focus-*

Defines a border open at the top and bottom, and shown when the element is in focus.

border-cap-vertical-focus-*

Defines a border open on the left and right, and shown when the element is in focus.

border-cap-horizontal-hover-*

Defines a border open at the top and bottom, and shown when a hover event is triggered.

border-cap-vertical-hover-*

Defines a border open on the left and right, and shown when a hover event is triggered.

Border caps allow you to partially surround an element with a border that does not extend into any open sides of an element. The element must have a border size defined using the standard WebUI border classes, if a border is not already present. Most WebUI theme colors can be used and are appended to the end of the class name in common with other classes. The full format for border cap classes is border-cap-[cap type]-[event]-[theme color].

Border Caps

Currently, WebUI only supports border caps that are shown as a result of hover or focus events.

Example

Markup

<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <button class="button-md menu-button-accent-2 border-md border-cap-left-focus-accent-2-light rounded-left-md">Left Border Cap</button>
  </div>
  <div class="table-col">
    <button class="button-md menu-button-accent-4 border-md border-cap-top-focus-accent-4-light rounded-top-md">Top Border Cap</button>
  </div>
  <div class="table-col">
    <button class="button-md menu-button-accent-1 border-md border-cap-vertical-focus-accent-1-light">Vertical Border Cap</button>
  </div>
  <div class="table-col">
    <button class="button-md menu-button-info border-md border-cap-horizontal-focus-info-light">Horizontal Border Cap</button>
  </div>  
</div>

Boundary Classes

Classes

Class

Width

boundary-*

0.188rem

Boundaries are available in only one size and make use of CSS box-shadow to create a boundary inside the element border.

There are boundary classes for most colors in the WebUI color palette. The simplest format used for these is boundary-[color], which will affect all sides of an element. You can also specify which side of the element the boundary will appear using the format boundary-[side]-[color]. For example: boundary-top-accent-1.

Example

Markup

<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <div class="width-md height-md border-sm boundary-info">
    </div>
  </div>
  <div class="table-col">
    <div class="width-md height-md border-sm boundary-top-success">
    </div>
  </div>
  <div class="table-col">
    <div class="width-md height-md border-sm boundary-top-dark boundary-left-danger">
    </div>
  </div>
</div>

Behavioural Classes

The behavioural classes provide color changes on hover or focus events. The format is as described above, but with the addition of hover or focus. For example: boundary-right-hover-success or boundary-top-focus-dark.

Boundaries

WebUI only supports hover and focus boundaries on all sides or a single side of an element.

Example

Hover

Focus

Markup

<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <div class="container width-md height-md border-sm boundary-hover-accent-1">
      <span class="place-middle-center">Hover</span>
    </div>
  </div>
  <div class="table-col">
    <div class="container width-md height-md border-sm boundary-bottom-hover-accent-3">
      <span class="place-middle-center">Hover</span>
    </div>
  </div>
  <div class="table-col">
    <div class="container width-md height-md border-sm boundary-right-focus-info" tabindex="0">
        <span class="place-middle-center">Focus</span>
    </div>
  </div>
</div>

Outline Classes

Classes

Class

Width

outline-*

0.188rem

Outlines are available in only one size and make use of CSS box-shadow to create an outline outside the element border.

There are outline classes for most colors in the WebUI color palette. The simplest format used for these is outline-[color], which will affect all sides of an element. You can also specify which side of the element the outline will appear using the format outline-[side]-[color]. For example: outline-top-accent-1.

Example

Markup

<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <div class="width-md height-md border-sm outline-info">
    </div>
  </div>
  <div class="table-col">
    <div class="width-md height-md border-sm outline-top-success">
    </div>
  </div>
  <div class="table-col">
    <div class="width-md height-md border-sm outline-top-dark outline-left-danger">
    </div>
  </div>
</div>

Behavioural Classes

The behavioural classes provide color changes on hover or focus events. The format is as described above, but with the addition of hover or focus. For example: outline-right-hover-success or outline-top-focus-dark.

Outlines

WebUI only supports hover and focus outlines on all sides or a single side of an element.

Example

Hover

Focus

Markup

<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <div class="container width-md height-md border-sm outline-hover-accent-1">
      <span class="place-middle-center">Hover</span>
    </div>
  </div>
  <div class="table-col">
    <div class="container width-md height-md border-sm outline-bottom-hover-accent-3">
      <span class="place-middle-center">Hover</span>
    </div>
  </div>
  <div class="table-col">
    <div class="container width-md height-md border-sm outline-right-focus-info" tabindex="0">
        <span class="place-middle-center">Focus</span>
    </div>
  </div>
</div>

Shadow Classes

Classes

Class

Description

raised-sm

Creates a small raised effect.

raised-md

Creates a medium raised effect.

raised-md

Creates a large raised effect.

Example

raised-sm

raised-md

raised-lg

Markup

<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <div class="container width-md height-md accent-1 raised-sm">
      <span class="place-middle-center">raised-sm</span>
    </div>
  </div>
  <div class="table-col">
    <div class="container width-md height-md accent-1 raised-md">
      <span class="place-middle-center">raised-md</span>
    </div>
  </div>
  <div class="table-col">
    <div class="container width-md height-md accent-1 raised-lg">
      <span class="place-middle-center">raised-lg</span>
    </div>
  </div>
</div>

Transition Classes

Classes

Class

Description

transition-*

Affects: color, background-color, border-color, box-shadow, width, height.

color-transition-*

Affects: color only.

background-color-transition-*

Affects: background color only.

border-color-transition-*

Affects: border color only.

boundary-transition-*

Affects: boundary only.

outline-transition-*

Affects: outline only.

width-transition-*

Affects: width only.

height-transition-*

Affects: height only.

left-transition-*

Affects: left position only.

top-transition-*

Affects: top position only.

All transition classes require a transition duration to be appended to the end of the class name. The duration is specified as short, medium, or long. The simplest format used for these is transition-[duration], which will transition multiple properties. You can also target individual properties using the format [property]-transition-[duration]. For example: color-transition-short or border-color-transition-medium.

Example

Short border focus transition

Medium boundary focus transition

Long outline focus transition

Markup

<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <div class="container width-lg height-lg border-md border-focus-info border-color-transition-short" tabindex="0">
      <span class="place-middle-center">Short border focus transition</span>
    </div>
  </div>
  <div class="table-col">
    <div class="container width-lg height-lg border-sm boundary-focus-success boundary-transition-medium" tabindex="0">
      <span class="place-middle-center">Medium boundary focus transition</span>
    </div>
  </div>
  <div class="table-col">
    <div class="container width-lg height-lg border-sm outline-focus-accent-2 outline-transition-long" tabindex="0">
      <span class="place-middle-center">Long outline focus transition</span>
    </div>
  </div>
</div>

Visibility Classes

Class

Description

hidden

Sets the display style to none and removes the element from the document layout.

invisible

Sets the visibility property to hidden, keeping the element in the document layout.

faded

Sets the opacity property to 0, keeping the element in the document layout.

Media Classes

Class

Description

image

Sets an image element to block level with a maximum width of 100% and auto height.

media-fill

Sets the object-fit property to fill.

media-contain

Sets the object-fit property to contain.

media-cover

Sets the object-fit property to cover.

media-scale-down

Sets the object-fit property to scale-down.

media-none

Sets the object-fit property to none.

Other Classes

Class

Description

nobreak

Prevents a page break, column break, or region break from occurring inside an element.

layer-top

Sets the z-index of an element to be above all other WebUI component z-index settings.

screen-reader

Sets the specified element to be accessible to screen readers only.