CSS framework

The CSS classes provided by Web AppBuilder are listed below. These classes are designed to create visual consistency across the app and allow the app to use themes. They are classified in four categories: main, widget and panel, state, and icon. You can find them in the jimu.js/css/jimu-theme.css file.

Note:

Not all of these CSS classes have been applied to all of the widgets and themes. Code refactoring will continue in following releases.

Main classes

Main classes have an impact on the overall look and feel of the app.

Class nameDescription

jimu-main-background

Defines the main color of the app. Applies to the main UI of the app.

jimu-main-font

Applies to the body tag. If you do not want to override the default font, ignore it.

jimu-title

Defines the font size and color. Applies to the element that displays the app's title.

jimu-subtitle

Defines the font size and color. Applies to the element that displays the app's subtitle.

jimu-footer

Defines the font size and color. Applies to the element that displays the app's footer.

jimu-link

Defines the font size and color. Applies to the element that displays the app's link.

jimu-widget-onscreen-icon

Defines the background color and border. Applies to the icon element of the on-screen widget.

jimu-widget-placeholder

Defines the background color and border. Applies to the on-screen placeholder.

jimu-overlay

Applies to the overlay element.

Widget and panel classes

Widget and panel classes have an impact on the look and feel of the widget and panel.

Class nameDescription

jimu-widget

Defines the font size and color. Applies to the outer container of the widget.

jimu-widget-title

Defines the font size and color. Applies to the element that displays the widget's title.

jimu-widget-note

Defines the font size and color. Applies to the element that displays the note text.

jimu-panel

Defines the background and border. Applies to the outer container of the panel.

jimu-panel-title

Defines the font size and color. Applies to the element that displays the panel's title.

State classes

State classes are designed for consistency. They do not have CSS rules.

Class nameDescription

jimu-state-hover

Applies to the element when the pointer hovers over it.

jimu-state-focus

Applies to the element in focus.

jimu-state-active

Applies to the selected element.

jimu-state-disabled

Applies to the disabled element.

jimu-state-error

Applies to the element that shows the error message.

Icon classes

An image sprite in the jimu.js/css/sprite.png file contains many icons. To use them, apply a jimu-icon class, a state class, and an icon name class to the element. The icon name class follows the pattern of jimu-icon-<icon name>. The full list of icon names is available in the jimu.js/css/sprite.css file.

Class nameDescription

jimu-icon

The base class applied to an icon element.

The following code demonstrates how to apply the add icon and the state-hover icon:

<div class="jimu-icon jimu-icon-add"></div>
<div class="jimu-icon jimu-icon-add
jimu-state-hover"></div>