WebUI mobile-first CSS

Theme Colors

Theme colors are based on a subset of the Material Design color palette.

primary

secondary

highlight

muted

disabled

transparent

light

default

dark

info-light

info

info-dark

success-light

success

success-dark

warning-light

warning

warning-dark

danger-light

danger

danger-dark

accent-1-light

accent-1

accent-1-dark

accent-2-light

accent-2

accent-2-dark

accent-3-light

accent-3

accent-3-dark

accent-4-light

accent-4

accent-4-dark

accent-5-light

accent-5

accent-5-dark

The above classes all set the background and a complimentary foreground color. However, you can use the background and foreground colors separately by simply prefixing the class name with background- or color- respectively. See the following example.

Example

Lorem ipsum

Markup

<div class="text-sm">
  <div class="flex-row flex-padding-xs">
    <div class="flex-col flex-fit background-accent-1-dark color-info-light">Lorem ipsum</div>
    <div class="flex-col flex-fit background-accent-4-dark color-success-light">Lorem ipsum</div>	
    <div class="flex-col flex-fit background-accent-5-dark color-warning-light">Lorem ipsum</div>
  </div>
</div>

If you are using the full WebUI CSS file, then you are also able to set border, boundary, and outline colors by prefixing with border-, boundary-, or outline-.

Naming convention

To use the event color classes the following format should be followed. [element attribute]-[element event]-[theme color].

For example background-focus-info or border-hover-accent-1

Color Combinations

Color combinations should always be chosen carefully, taking into account people with partial sight and / or color blindness.

Translucency

The translucent-* classes range from a zero alpha transparency to a value of 0.9, and just like the theme colors, they can be used to set background, foreground, border, boundary, or outline. Here is a list of the translucency classes available:

Classes

Alpha Value

translucent, background-translucent, color-translucent, border-translucent, boundary-translucent, outline-translucent

translucent-1, background-translucent-1, color-translucent-1, border-translucent, boundary-translucent, outline-translucent

0.1

translucent-2, background-translucent-2, color-translucent-2, border-translucent, boundary-translucent, outline-translucent

0.2

translucent-3, background-translucent-3, color-translucent-3, border-translucent, boundary-translucent, outline-translucent

0.3

translucent-4, background-translucent-4, color-translucent-4, border-translucent, boundary-translucent, outline-translucent

0.4

translucent-5, background-translucent-5, color-translucent-5, border-translucent, boundary-translucent, outline-translucent

0.5

translucent-6, background-translucent-6, color-translucent-6, border-translucent, boundary-translucent, outline-translucent

0.6

translucent-7, background-translucent-7, color-translucent-7, border-translucent, boundary-translucent, outline-translucent

0.7

translucent-8, background-translucent-8, color-translucent-8, border-translucent, boundary-translucent, outline-translucent

0.8

translucent-9, background-translucent-9, color-translucent-9, border-translucent, boundary-translucent, outline-translucent

0.9

Making use of translucency is one easy way to get more color shades.

Example

Pellentesque habitant morbi tristique senectus

Markup

<div class="container background-accent-1-dark color-light">
  <div class="panel background-translucent">
    Pellentesque habitant morbi tristique senectus
  </div>
  <div class="panel background-translucent-1">
    Pellentesque habitant morbi tristique senectus
  </div>
  <div class="panel background-translucent-2">
    Pellentesque habitant morbi tristique senectus
  </div>
  <div class="panel background-translucent-3">
    Pellentesque habitant morbi tristique senectus
  </div>
  <div class="panel background-translucent-4">
    Pellentesque habitant morbi tristique senectus
  </div>							
</div>

Focus and Hover Events

WebUI has a full range classes supporting focus and hover events for colors. These are used for various types of button by default, but are also there for you to use on other elements.

Supported Elements

Not all HTML elements accept focus events by default. If you need focus events for elements such as divs or spans, then you will need to to add a tabindex attribute to them and set the value to -1.

Example

Markup

<div class="container gap-vertical-md">
  <div class="container">
    <button type="button" class="menu-button-sm menu-button-info rounded-md background-focus-accent-2">Background Focus</button>
  </div>
  <div class="container">
    <input type="text" class="input-lg width-full rounded-md border-focus-accent-2" placeholder="Border Focus" />
  </div>
  <div class="container">
    <button type="button" class="menu-button-sm menu-button-info rounded-md background-hover-accent-2">Background Hover</button>
  </div>
  <div class="container">
    <input type="text" class="input-lg width-full rounded-md border-hover-accent-2" placeholder="Border Hover" />
  </div>
</div>