WebUI mobile-first CSS

Input Classes

Sizes

Classes

Height

input-xs

1.5rem

input-sm

1.75rem

input-md

2.125rem

input-lg

2.375rem

input-xl

2.75rem

input

Un-sized - height expands with content

All input classes can be used without adding the suffix -xs, -sm, -md, -lg, -xl, etc., which means the height of the element will only expand to accomodate its content with a small amount of padding by default.

Textbox sizing

It is recommended that the height of textboxes and dropdowns is not customised, since the height is preset to match other form controls such as buttons and labels.

Styling

The simplest way to style form controls is to use a single class to set the form control type and size. The syntax is [control type]-[control size].

Example

Markup

<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <input type="text" placeholder="Textbox 1" class="input-sm">
  </div>
  <div class="table-col">
    <input type="text" placeholder="Textbox 2" class="input-md">
  </div>
  <div class="table-col">
    <input type="text" placeholder="Textbox 3" class="input-xl">
  </div>		
</div>

Input Widths

You can change the width of input controls by using any of the utility classes, such as width-full to make the control expand to the width of its container element or width-xl to set a fixed width of extra large for example.

Control Classes

Classes

Description

control

Styles an element to the default form control color and padding style, but does not set any dimensions.

control-success

Styles an element to the theme success style, but does not set any dimensions.

control-info

Styles an element to the theme info style, but does not set any dimensions.

control-warning

Styles an element to the theme warning style, but does not set any dimensions.

control-danger

Styles an element to the theme danger style, but does not set any dimensions.

control-highlight

Styles an element to the theme highlight style, but does not set any dimensions.

control-disabled

Styles an element to the theme disabled style, but does not set any dimensions.

The control classes are useful when form controls such as textareas need to match the appearance of other controls. These classes can also be used to style almost any element.

Example

Markup

<div class="table-row col-padding-lg">
  <div class="table-col">
    <textarea class="control width-lg height-md-lg"></textarea>
  </div>
  <div class="table-col">
    <div class="control width-lg height-md-lg"></div>
  </div>
</div>

Labels

Classes

Line height

control-label

1rem

control-label-xxs

1.25rem

control-label-xs

1.5rem

control-label-sm

1.75rem

control-label-md

2.125rem

control-label-lg

2.375rem

control-label-xl

2.75rem

control-label-xxl

3.125rem

The control label classes are sized to match the standard form control heights.

Example

First name

Markup

<div class="table-row col-padding-sm control-group">
  <div class="table-col control-label-sm">
      First name
  </div>
  <div class="table-col">
    <input id="FirstName" type="text" class="input-sm width-full rounded-sm" />
  </div>
</div>

Control Grouping

Classes

Description

control-block

Groups elements by setting the display property of the immediate child elements to block.

control-group

Groups elements by setting the display property to table, and the immediate child elements to table-cell.

control-group-append

Groups elements by adjusting the word spacing property.

Control Grouping

Controls grouping classes are provided for backwards compatibity. However, it is recommended that flexbox is used in preference going forward.

Example

Markup

<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <div class="control-group">
        <button class="button-sm menu-button-info background-focus-info-dark rounded-left-sm transition-long"><i class="fa fa-angle-double-left"></i></button>
        <button class="button-sm menu-button-info background-focus-info-dark transition-long">1</button>
        <button class="button-sm menu-button-info background-focus-info-dark transition-long">2</button>
        <button class="button-sm menu-button-info background-focus-info-dark transition-long">3</button>
        <button class="button-sm menu-button-info background-focus-info-dark rounded-right-sm transition-long"><i class="fa fa-angle-double-right"></i></button>
      </div>
  </div>
</div>

Group Validation Styling

Styles can be applied to a group of form controls by using one of the following classes. The control-group-* classes must be added to the parent element of the controls that require styling.

Class

Description

control-group-success

Applies success styling to a group of form controls.

control-group-info

Applies info styling to a group of form controls.

control-group-warning

Applies warning styling to a group of form controls.

control-group-danger

Applies danger styling to a group of form controls.

control-group-disabled

Applies disabled styling to a group of form controls.

In addition to changing the colour of the controls, a validation icon will be added inside the control on the right if it is an HTML input or button. You can also force any individual HTML element to have a validation icon by adding the class instrumentation to it, where the element type would not normally be given one, such as a textarea or div.

Example

First name

Markup

<div class="table-row col-padding-sm control-group control-group-success">
  <div class="table-col control-label-sm">
      First name
  </div>
  <div class="table-col">
    <input id="FirstName" type="text" class="input-sm width-full rounded-sm" />
  </div>
</div>

<div class="table-row col-padding-sm">
  <div class="table-col flex-auto">
    <textarea class="control control-warning height-md instrumentation"></textarea>
  </div>
</div>

Textboxes

As shown in the table above, textboxes can be set to one of the sizes provided or be set to un-sized. When un-sized, the height of the control will depend on the font size. In the example below, the first textbox inherits an extra small font-size from the row which has the class text-xs applied.

Example

Markup

<div class="form-row text-xs">
  <div class="form-col-20">
    <input type="text" class="input width-sm">
  </div>
</div>
<div class="form-row">
  <div class="form-col-20">
    <input type="text" class="input-sm width-lg">
  </div>
</div>
<div class="form-row">
  <div class="form-col-20">
    <input type="text" class="input-lg width-full">
  </div>		
</div>

Textareas

Textareas can be styled using the control class. Then any of the width-* and height-* classes can be added to set the size of the control. Most browsers support a resize handle for textareas, but resizing the width is prevented in WebUI to avoid potential form layout distortions.

Example

Markup

<div class="table-row">
  <div class="table-col flex-auto">
    <textarea class="control height-lg">
  </div>
</div>

Dropdowns and Datalists

Select and datalist elements can be styled using the same input classes as textboxes - this ensures that the height and style will match for all input controls. If the select or datalist is being used as a multi-select list, where you need to define the height, then the control class should be used instead of using the input-* classes. Then any of the height-* classes can be added to set the height. See the following example.

Example

Markup

<div class="table-row">
  <div class="table-col">
    <select class="input-sm width-lg-xl">
      <option value="1">Austria</option>
      <option value="3">Bulgaria</option>
      <option value="4">Canada</option>
      <option value="5">Denmark</option>
      <option value="6">England</option>
      <option value="7">Finland</option>
      <option value="8">Germany</option>
    </select>
  </div>
  <div class="table-col">
    <select multiple="multiple" class="control height-lg width-lg-xl scroll-y">
      <option value="1">Austria</option>
      <option value="3">Bulgaria</option>
      <option value="4">Canada</option>
      <option value="5">Denmark</option>
      <option value="6">England</option>
      <option value="7">Finland</option>
      <option value="8">Germany</option>
    </select>
  </div>	
</div>

Example

Markup

<div class="table-row">
  <div class="table-col">
    <input list="brands" class="input-sm width-lg-xl">
    <datalist id="brands">
      <option value="Apple">Apple</option>
      <option value="Huawei">Huawei</option>
      <option value="LG">LG</option>
      <option value="Microsoft">Microsoft</option>
      <option value="Samsung">Samsung</option>
      <option value="Sony">Sony</option>
    </datalist>
  </div>
</div>

Checkboxes and Radio Buttons

Checkboxes

Example

Markup

<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <div class="checkbox border-accent-4">
      <input type="checkbox" value="" id="checkbox3" />
      <label for="checkbox3"></label>
    </div>    
  </div>
  <div class="table-col">
    <div class="checkbox border-info">
      <input type="checkbox" value="" id="checkbox2" />
      <label for="checkbox2"></label>
    </div>
  </div>
  <div class="table-col">
    <div class="checkbox border-accent-3 control-disabled">
      <input type="checkbox" value="" id="checkbox1" disabled />
      <label for="checkbox1"></label>
    </div>   
  </div>
</div>

Checkbox Toggle Switches

Example

Markup

<div class="table-row col-padding-md">
  <div class="table-col">
    <div class="toggle-switch-xs accent-1-light rounded-sm">	
      <input type="checkbox" value="1" id="check-switch-1" />
      <label for="check-switch-1" class="background-accent-1 left-transition-medium"></label>
    </div>
  </div>
  <div class="table-col">
    <div class="toggle-switch-sm onoff accent-2-light rounded-sm">	
      <input type="checkbox" value="2" id="check-switch-2" />
      <label for="check-switch-2" class="background-accent-2 left-transition-medium"></label>
    </div>
  </div>
  <div class="table-col">
    <div class="toggle-switch-md yesno accent-3-light rounded-sm control-disabled">	
      <input type="checkbox" value="3" id="check-switch-3" disabled />
      <label for="check-switch-3" class="background-default left-transition-medium"></label>
    </div>
  </div>
</div>

Checkbox Toggle Buttons

Example

Check 1 (preselected)

Check 2

Check 3

Markup

<div class="content-row">
  <div class="control-group">
    <div class="toggle-button-sm toggle-button-accent-1">			
      <input type="checkbox" id="checkButton1" checked>
      <label for="checkButton1" class="transition-medium">Check 1 (preselected)</label>
    </div>
    <div class="toggle-button-sm toggle-button-accent-1">
      <input type="checkbox" id="checkButton2"> 
      <label for="checkButton2" class="transition-medium">Check 2</label>
    </div>
    <div class="toggle-button-sm toggle-button-accent-1">
      <input type="checkbox" id="checkButton3"> 
      <label for="checkButton3" class="transition-medium">Check 3</label>
    </div>
  </div>				
</div>

Radio Buttons

Example

Markup

<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <div class="radio border-success">
      <input type="radio" value="" name="radiogroup1" id="radio1" />
      <label for="radio1"></label>
    </div>    
  </div>
  <div class="table-col">
    <div class="radio border-accent-1">
      <input type="radio" value="" name="radiogroup1" id="radio2" />
      <label for="radio2"></label>
    </div>
  </div>
  <div class="table-col">
    <div class="radio border-accent-2 control-disabled">
      <input type="radio" value="" name="radiogroup1" id="radio3" disabled />
      <label for="radio3"></label>
    </div>
  </div>
</div>

Radio Button Toggle Switches

Example

Markup

<div class="table-row col-padding-md">
  <div class="table-col">
    <div class="toggle-switch-xs accent-1-light rounded-sm">	
      <input type="radio" value="1" id="radio-switch-1" name="radio-switch-1" />
      <label for="radio-switch-1" class="background-accent-1 left-transition-medium"></label>
    </div>
  </div>
  <div class="table-col">
    <div class="toggle-switch-sm onoff accent-2-light rounded-sm">	
      <input type="radio" value="2" id="radio-switch-2" name="radio-switch-1" />
      <label for="radio-switch-2" class="background-accent-2 left-transition-medium"></label>
    </div>
  </div>
  <div class="table-col">
    <div class="toggle-switch-md yesyno accent-3-light rounded-sm control-disabled">	
      <input type="radio" value="3" id="radio-switch-3" name="radio-switch-1" disabled />
      <label for="radio-switch-3" class="background-default left-transition-medium"></label>
    </div>
  </div>
</div>

Radio Toggle Buttons

Example

Radio 1 (preselected)

Radio 2

Radio 3

Markup

<div class="content-row">
  <div class="control-group">
    <div class="toggle-button-sm toggle-button-accent-1">			
      <input type="radio" name="radioButton" id="radioButton1" checked>
      <label for="radioButton1" class="transition-medium">Radio 1 (preselected)</label>
    </div>
    <div class="toggle-button-sm toggle-button-accent-1">
      <input type="radio" name="radioButton" id="radioButton2"> 
      <label for="radioButton2" class="transition-medium">Radio 2</label>
    </div>
    <div class="toggle-button-sm toggle-button-accent-1">
      <input type="radio" name="radioButton" id="radioButton3"> 
      <label for="radioButton3" class="transition-medium">Radio 3</label>
    </div>
  </div>				
</div>

Lists

Styling Classes

Class

Description

list

Formats ordered and unordered lists without a list style or padding, and with a small left margin.

list-inline

Formats ordered and unordered lists inline without a list style or padding, and with a small left margin.

list-bullet

Sets the list style type to disc.

list-bullet-square

Sets the list style type to square.

list-alpha

Sets the list style type to lower-alpha.

list-alpha-upper

Sets the list style type to upper-alpha.

list-number

Sets the list style type to decimal.

Spacing Classes

Classes

Spacing

Spacing (inline)

list-spacing-sm

0.313rem

2.313rem

list-spacing-md

0.938rem

2.938rem

list-spacing-lg

1.563rem

3.563rem

Example

Item 1
Item 2
Item 3

Item 1
Item 2
Item 3

Item 1
Item 2
Item 3

Item 1
Item 2
Item 3

Markup

<div class="table-row text-sm text-nowrap col-padding-lg">
  <div class="table-col">
    <ul class="list list-spacing-md">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
  <div class="table-col">
    <ul class="list list-spacing-md list-number">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
  <div class="table-col">
    <ul class="list list-spacing-md list-alpha-upper">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
  <div class="table-col">
    <ul class="list-inline list-spacing-md">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

Range Controls

Range Classes

Class

Description

range

The mandatory class for range control styling.

range-xs, range-sm, range-md, range-lg, range-xl

Specifies the overall height of the range control.

range-[WebUI color suffix]

Specifies the range control color. The color suffix can be one of the standard WebUI colors.

range-disabled

Specifies that the range control should be styled as disabled.

range-rounded

Specifies that the range control thumb should be round instead of a rectangle.

range-series

Used to style a range control series.

Example

0 25 50 75 100

0
25
50
75
100

0
25
50
75
100

Markup

<div class="range-series width-full color-dark">
  <span>0</span>
  <span>25</span>
  <span>50</span>
  <span>75</span>
  <span>100</span>
</div>
<input type="range" value="25" min="0" max="100" class="range width-full" />

<div class="row-spacing-xl"></div>

<div class="content-row">
  <div class="content-col-20">
    <input type="range" value="25" min="0" max="100" class="range range-lg range-success width-full" />
  </div>
</div>
<div class="content-row">
  <div class="content-col-20">
    <ul class="range-series list-inline margin-initial width-full color-success">
      <li>0</li>
      <li>25</li>
      <li>50</li>
      <li>75</li>
      <li>100</li>
    </ul>
  </div>	
</div>
        
<div class="row-spacing-xl"></div>

<div class="content-row">
  <div class="content-col-20">
    <input type="range" value="25" min="0" max="100" class="range range-xs range-info width-full" />
  </div>
</div>
<div class="content-row">
  <div class="content-col-20">
    <ul class="range-series list-inline margin-initial width-full color-accent-5">
      <li>0</li>
      <li>25</li>
      <li>50</li>
      <li>75</li>
      <li>100</li>
    </ul>
  </div>	
</div>

Progress Controls

Progress Classes

Class

Description

progress

The mandatory class for progress control wrapper element.

progress-[WebUI color suffix]

Specifies the progress control color. The color suffix can be one of the standard WebUI colors.

progress-labal

Class for a supplimentary overlay text.

Example

25%

Markup

<div class="progress progress-accent-2 width-full rounded-sm">			
  <progress value="25" max="100" id="progressbar"></progress>
  <div class="progress-label color-dark">25%</div>  
</div>

Badges

Classes

Class

Description

badge-square-xs

Defines an extra small badge with no rounding.

badge-square-sm

Defines a small badge with no rounding.

badge-square-md

Defines a medium size badge with no rounding.

badge-square-lg

Defines a large badge with no rounding.

badge-square-xl

Defines an extra large badge with no rounding.

badge-round-xs

Defines an extra small badge with rounding.

badge-round-sm

Defines a small badge with rounding.

badge-round-md

Defines a medium size badge with rounding.

badge-round-lg

Defines a large badge with rounding.

badge-round-xl

Defines an extra large badge with rounding.

Example

This is a warning

55

A dark badge

Markup

<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <div class="badge-square-xs warning">
      This is a warning.
    </div>
  </div>
  <div class="table-col">
    <div class="badge-round-sm info">
      55
    </div>
  </div>
  <div class="table-col">
    <div class="badge-round-sm dark">
      A dark badge.
    </div>
  </div>
</div>