UI Components

This library exists to document various elements of the UI system.

This project uses the CSS framework Bulma. Documentation can be found at https://bulma.io/documentation/. To keep the CSS bundle small, only the Bulma tools that are actually used are imported into /static/scss/registry.scss. If you need to use a tool that isn't included yet, you can add it manually in that file.

Note that the CSS employs a "reset" that removes many default browser styles, in favor of custom styles. As such, margins, list styles, and other styles may need to be manually added in some cases. Where applicable, these will be documented below.

Table of contents:

Typography

Back to top

Headline 1

<h1>Headline 1</h1>

Headline 2

<h2>Headline 2</h2>

Headline 3

<h3>Headline 3</h3>
Headings h4, h5, and h6 are not used in this library.

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<p>Lorem ipsum dolor sit amet...</p>

Links

Links are unstyled by default. To give a link back its normal styles, wrap the link in a container with the class of content.
This is a link
<div class="content"><a href="#">This is a link</a></div>

Library Text Styles

The CSS Library has several custom helpers for text styles, as defined below.

This is medium-sized text (default, used for overriding larger type)

<p class="text-md">Medium-sized text</p>

This is small text

<p class="text-sm">Small text</p>

This is extra-small text

<p class="text-xs">Extra-small text</p>

012345 - This is a formatted number

<p class="num">Formatted number</p>

This is table text

<p class="text-table">Table text</p>

This is label text

<p class="text-label">Label text</p>

This is medium-weight text (500)

<p class="has-text-weight-medium">Medium-weight text</p>

This is bold-weight text (700)

<p class="has-text-weight-bold">Bold-weight text</p>

Lists

Lists are unstyled by default. To give a list back its normal styles, wrap the list in a container with the class of content.

Ordered List

  1. One
  2. Two
  3. Three
  4. Four
<div class="content">
  <ol>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
  </ol>
</div>

Unordered List

  • One
  • Two
  • Three
  • Four
<div class="content">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
  </ul>
</div>

Forms

Back to top

Text Inputs

<div class="field">
  <label class="label" for="textInput1">Basic Text Input</label>
  <div class="control">
    <input class="input" type="text" id="textInput1" name="name" value="" placeholder="Basic Text Input">
  </div>
</div>

A helpful message

<div class="field">
  <label class="label" for="textInput2">Text Input With Help Note</label>
  <div class="control">
    <input class="input" type="text" id="textInput2" name="name" value="" placeholder="Text Input With Help Note">
  </div>
  <p class="help">A helpful message</p>
</div>

An error message

<div class="field">
  <label class="label" for="textInput3">Text Input With Error Message</label>
  <div class="control">
    <input class="input" type="text" id="textInput3" name="name" value="" placeholder="Text Input With Error Message">
  </div>
  <p class="help is-danger">An error message</p>
</div>

Select Input

<div class="field">
  <label class="label" for="selectInput">Select Input</label>
  <div class="control">
      <div class="select">
          <select id="selectInput">
            <option value="">Any</option>
            <option value="">Option One</option>
            <option value="">The Second Option</option>
            <option value="">Another</option>
            <option value="">The Last Option</option>
          </select>
      </div>
  </div>
</div>

Date Input

<div class="field">
  <label class="label" for="dateInput">Date Input</label>
  <div class="control">
    <input class="input" type="date" id="dateInput" name="dateInput" value="">
  </div>
</div>

Number Input

<div class="field">
  <label class="label" for="numberInput">Number Input</label>
  <div class="control">
    <input class="input" type="number" id="numberInput" name="numberInput" value="" placeholder="0">
  </div>
</div>

Buttons

Back to top 
<button class="button">Default Button</button>
<button class="button is-primary">Primary (Purple) Button</button>
<button class="button is-primary is-outlined">Outlined Button</button>
<button class="button is-danger">Danger Button</button>
<button class="button is-compact">Compact Button</button>

Badges and Chips

Back to top

Default Badges

Default Badge 
<span class="badge">Default Badge</span>
Full Width Badge 
<span class="badge is-full">Full Width Badge</span>

Status Badges

Pending 
<span class="badge is-pending">Pending</span>
Started 
<span class="badge is-started">Started</span>
Success 
<span class="badge is-success">Success</span>
Failed 
<span class="badge is-failed">Failed</span>
Cancelled 
<span class="badge is-cancelled">Cancelled</span>

Filter Chips

<button class="badge filter-chip">
  Close Filter
  <span class="icon material-icons md-16" aria-hidden="true">cancel</span>
</button>

Icons

Back to top

This project uses the Material Icons Library. Additional icons can be found using their tools.

This is simply a font, so you can set the icon color as you would other text via the CSS color property.

Standard Icon Usage

<span class="material-icons" aria-hidden="true">face</span>

Additional sizes

<span class="material-icons md-12" aria-hidden="true">face</span>
<span class="material-icons md-16" aria-hidden="true">face</span>
<span class="material-icons md-18" aria-hidden="true">face</span>
<span class="material-icons md-30" aria-hidden="true">face</span>
<span class="material-icons md-36" aria-hidden="true">face</span>
<span class="material-icons md-48" aria-hidden="true">face</span>

Action Icons

These are used in various situations throughout the site. Based on your needs, you can either update the html value or use the class names. The classname supercedes the html value. See examples below.

Basic Example

<span class="action-icon">
  <span class="material-icons md-16" aria-hidden="true"><span>check</span></span>
</span>

Larger Icon

<span class="action-icon is-large">
  <span class="material-icons md-16" aria-hidden="true"><span>check</span></span>
</span>

Jumbo Icon

<span class="action-icon is-jumbo">
  <span class="material-icons" aria-hidden="true"><span>check</span></span>
</span>

Darker Icon

<span class="action-icon is-dark">
  <span class="material-icons md-16" aria-hidden="true"><span>check</span></span>
</span>

Danger Icon

<span class="action-icon is-danger">
  <span class="material-icons md-16" aria-hidden="true"><span>delete_forever</span></span>
</span>

Check / Complete Variants

<span class="action-icon">
  <span class="material-icons md-16" aria-hidden="true"><span>check</span></span>
</span>
<span class="action-icon">
  <span class="material-icons md-16" aria-hidden="true"><span>done</span></span>
</span>
<span class="action-icon is-check">
  <span class="material-icons md-16" aria-hidden="true"><span>face</span></span>
</span>
<span class="action-icon is-complete">
  <span class="material-icons md-16" aria-hidden="true"><span>face</span></span>
</span>
<span class="action-icon is-done">
  <span class="material-icons md-16" aria-hidden="true"><span>face</span></span>
</span>

Upload / Ingest Variants

<span class="action-icon">
  <span class="material-icons md-16" aria-hidden="true"><span>file_upload</span></span>
</span>
<span class="action-icon is-upload">
  <span class="material-icons md-16" aria-hidden="true"><span>face</span></span>
</span>
<span class="action-icon is-ingest">
  <span class="material-icons md-16" aria-hidden="true"><span>face</span></span>
</span>

Download / Restore Variants

<span class="action-icon">
  <span class="material-icons md-16" aria-hidden="true"><span>file_download</span></span>
</span>
<span class="action-icon is-download">
  <span class="material-icons md-16" aria-hidden="true"><span>face</span></span>
</span>
<span class="action-icon is-restore">
  <span class="material-icons md-16" aria-hidden="true"><span>face</span></span>
</span>

Delete Variants

<span class="action-icon">
  <span class="material-icons md-16" aria-hidden="true"><span>delete_forever</span></span>
</span>
<span class="action-icon is-delete">
  <span class="material-icons md-16" aria-hidden="true"><span>face</span></span>
</span>

New Feature Variants

<span class="action-icon">
  <span class="material-icons md-16" aria-hidden="true"><span>star</span></span>
</span>
<span class="action-icon is-new">
  <span class="material-icons md-16" aria-hidden="true"><span>face</span></span>
</span>
<span class="action-icon is-feature">
  <span class="material-icons md-16" aria-hidden="true"><span>face</span></span>
</span>

User Variants

<span class="action-icon">
  <span class="material-icons md-16" aria-hidden="true"><span>person</span></span>
</span>
<span class="action-icon is-user">
  <span class="material-icons md-16" aria-hidden="true"><span>face</span></span>
</span>

Replication Variants

<span class="action-icon">
  <span class="material-icons md-16" aria-hidden="true"><span>library_books</span></span>
</span>
<span class="action-icon is-replication">
  <span class="material-icons md-16" aria-hidden="true"><span>face</span></span>
</span>

Search / Identifier Variants

<span class="action-icon">
  <span class="material-icons md-16" aria-hidden="true"><span>search</span></span>
</span>
<span class="action-icon is-search">
  <span class="material-icons md-16" aria-hidden="true"><span>face</span></span>
</span>
<span class="action-icon is-identifier">
  <span class="material-icons md-16" aria-hidden="true"><span>face</span></span>
</span>

Work Item Variants

<span class="action-icon">
  <span class="material-icons md-16" aria-hidden="true"><span>build</span></span>
</span>
<span class="action-icon is-work-item">
  <span class="material-icons md-16" aria-hidden="true"><span>face</span></span>
</span>

Object Variants

<span class="action-icon">
  <span class="material-icons md-16" aria-hidden="true"><span>inventory</span></span>
</span>
<span class="action-icon is-object">
  <span class="material-icons md-16" aria-hidden="true"><span>face</span></span>
</span>

File Variants

<span class="action-icon">
  <span class="material-icons md-16" aria-hidden="true"><span>insert_drive_file</span></span>
</span>
<span class="action-icon is-file">
  <span class="material-icons md-16" aria-hidden="true"><span>face</span></span>
</span>