This file has been created as a style and reference guide for ux theming in Niagara. Please open this file in a browser and text editor so you can see what classes are being applied to which elements.

Load a theme:

Table of Contents

General color and styling

.ux-fg
Use this class to set the text color and background color on an element intended to go in the foreground.
.ux-bg
Use this class to set the text color and background color on an element intended to go in the background.
.ux-disabled
Use this class to give the contents of an element, including icons, a disabled look.
.ux-highlight
Use this class to give text a highlighted look.
.ux-shadow
Use this class to add a drop shadow around an element.
.ux-shadow-inset
Use this class to add an inset drop shadow around an element.
.ux-select-none
Use this class to prevent a user from selecting an element.
.ux-font-family-sans-serif (since Niagara 4.9)
Use this class to set a text element to choose from a list of sans-serif fonts specified by the theme. By default, will just specify the sans-serif font family and let the browser choose.
.ux-font-family-serif (since Niagara 4.9)
Use this class to set a text element to choose from a list of serif fonts specified by the theme. By default, will just specify the serif font family and let the browser choose.
.ux-font-family-monospace (since Niagara 4.9)
Use this class to set a text element to choose from a list of monospace fonts specified by the theme. By default, will just specify the monospace font family and let the browser choose.

Windows, containers, and layout

.ux-window
Use this on an element intended to be set apart from its surrounding content, like a self-contained widget. It will contain no padding by default, so you will likely want to wrap the contents in a container (as this element does).
.ux-container
Use this class to add padding to a container element.
.ux-fullscreen-support

Apply this class to a container element to declare it as supporting a fullscreen layout. This means that its content should expand to fill the entire container, rather than laying out dynamically.

One example of this is the Shell Hx Profile: the root element receives the ux-fullscreen-support class, so the entire UI always expands to fill the browser screen.

Another example would be a user-resizable window: as the user resizes the window, the content would always resize itself to fill the entire window.

I have the ux-fullscreen class.

Because my parent container has the ux-fullscreen-support class, I will expand to fill the entire element.

I have the ux-fullscreen class.

But my parent does not have ux-fullscreen-support, so I will lay myself out dynamically.

.ux-fullscreen
See ux-fullscreen-support.
.ux-fixed-header, .ux-body

Use the ux-fixed-header and ux-body classes inside of a ux-fullscreen element to allow the body content to scroll without scrolling the header.

You will need to determine the height of the header element and apply the corresponding margin-top to the ux-body element.

I am a fixed header, with the ux-fixed-header class. My height is 4em.

I am the content body, with the ux-body class. My margin-top is 4em.

My content is very tall, but you can scroll me independently of the header.

.ux-body
See ux-fixed-header.
.ux-tab-bar
Use this class to give an element a Tab Bar look. Works well as a fixed header and with .ux-btn used as tabs.
.ux-tb
Use this class to give an element a toolbar look. Works well as a fixed header and with

Borders

.ux-border
Use this to add a border to an element.
.ux-border-top
Use this to add a border to the top edge of an element.
.ux-border-right
Use this to add a border to the right edge of an element.
.ux-border-bottom
Use this to add a border to the bottom edge of an element.
.ux-border-left
Use this to add a border to the left edge of an element.

Form Elements

.ux-btn

Use this class to make a

It can include an or an icon only:

It supports

It supports hyperlinks.

For proper alignment, wrap the contents in a span or other element rather than an unwrapped text node.

.ux-btn-tb

Use this class to make a

It can include an or an icon only:

It supports

For proper alignment, wrap the contents in a span or other element rather than an unwrapped text node.

.ux-btn-tb-group

Use this class to group a number of together.

.ux-toggled
Use this class to give a or a a toggled-on appearance.
.ux-select
Use the ux-select and ux-option classes to apply bajaux styling to a .
.ux-option
See ux-select.

Tables

.ux-table

Use this class to apply bajaux styling to a table element. Will not do much without the corresponding header, row, and footer classes.

cell 1cell 2
cell 3cell 4
.ux-table-head

Use this class to apply bajaux styling to a table header.

header 1header 2
.ux-table-row

Use this class to apply bajaux styling to a table row. Note that rows have alternating background colors by default (can be turned off using the no-stripe class on the ux-table).

cell 1cell 2
cell 3cell 4
cell 5cell 6
cell 7cell 8
.no-stripe

Add the ux-table and no-stripe classes to a table to remove the alternating background colors from ux-table-rows.

row 1
row 2
row 3
row 4
.ux-table-foot

Use this class to apply bajaux styling to a table footer.

footer 1footer 2

Progress

.ux-progress-bar

Use this class to apply styling to the progress bar used by the bajaux job bar.

 

Sample web application

A sample Web Application!!!
Column 1 Column 2
Some data Some more data
Some data2 Some more data2
Some data3 Some more data3
Some data4 Some more data4
Some more data5
Some data6 Some more data6
This is a table footer.

Raw HTML elements

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3
Hyperlink