UI Modes

When you create a Dashborg app, you can select a “UI” mode. This mode is a shorthand for importing a set of CSS files and potentially importing a set of component libraries. By default Dashborg apps are created in the “dashborg” UI mode. This imports the Semantic UI / Fomantic UI library, some extra Dashborg style extensions for rows and columns, and the Dashborg UI Components.

For a clean slate, no extra components and no CSS imports (not even a CSS reset!) you should use the mode “none”. Note that all UI modes import the Dashborg Core.

You set a UI mode using the attribute “ui” on your app:

<app ui="dashborg">...
<app ui="none">...
<app ui="bulma">...
UI Mode Description
dashborg The default. Imports Semantic UI / Fomantic UI v2.8.7, Dashborg CSS extensions for rows and columns (and to help style the Semantic UI components) and the Dashborg UI Components, sets ‘rem’ to 16px.
none Pure HTML, no CSS or components imported. Only imports the Dashborg Core
semui Imports the Semantic UI / Fomantic UI v2.8.7 CSS, sets ‘rem’ to 14px.
bulma Imports Bulma v0.9.2, sets ‘rem’ to 16px
bootstrap Imports Bootstrap v4.5.2, sets ‘rem’ to 16px.

You are free to import your own custom CSS or CSS library into your Dashborg panels using the <link> tag. It is easiest to import from a 3rd party static URL (like cdnjs), but you can also import any custom CSS using application BLOBs.