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 name | Description |
|---|---|
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 name | Description |
|---|---|
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 name | Description |
|---|---|
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 name | Description |
|---|---|
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>