Styling with CSS

Use CSS stylesheets to customize your App's identity even further.

Overview

Ubidots now supports Custom CSS Stylesheets, allowing you to directly access and modify the CSS of your application and its login page. This feature provides greater flexibility to adapt the visual appearance of your solutions beyond the default configuration options.

By applying your own CSS rules, you can:

Customize styles such as fonts, colors, and visualization details to better suit your design requirements.
Reinforce brand identity by aligning the Application and login page with your organization’s branding guidelines.
Enhance user experience by tailoring the interface to your users’ needs.

This feature is intended for users who need more control over the presentation of their Applications, ensuring both the dashboards and the login page deliver a consistent, branded experience.

The App's custom CSS and login page CSS are only available in the Enterprise tiers.
This is an advanced customization feature that requires extensive CSS knowledge. If you need help customizing your Application and Login CSS, contact us at support@ubidots.com.

Any CSS class beyond the public API isn't actively maintained. We don't recommend targeting unsupported classes or HTML elements. If you find that there's a lack of coverage, please contact us at support@ubidots.com.

Styling with CSS can take your application from this:

Login page

Application

To this:

Login page

Application

BEM notation

BEM (Block Element Modifier) is a CSS naming methodology for classes that helps create reusable and maintainable stylesheets. Our design system, VulcanUI, implements a strict BEM convention with the ds- prefix for all component classes.

BEM structure

Ubidots' BEM naming convention follows this pattern:

ds-block__element--modifier

Where:

ds- Required prefix for all VulcanUI design system classes.
block - The component name (e.g., Sidebar, Table, NavBar or Accordeon).
__element - Optional component part (e.g., __container, __wrapper, __cell).
--modifier - Optional state or variant (e.g., --primary, --disabled, --active).

Key rules

Ubidots' BEM notation uses these rules:

Maximum 2-level nesting: Uses block__element, never block__element__subelement
Semantic hierarchy: Elements must be logically positioned under their parent.
Lowercase only: All class names must be lowercase with hyphens.
Consistent separators: Always uses __ for elements and -- for modifiers.

Class examples

Below are a few examples of classes from BEM-supported components in the application. You can find the full list in the respective component sections.

Classes

The following classes target specific HTML <div> tags within the Table component.

ds-table__viewport
ds-table__toolbar
ds-table__wrapper
ds-table__controls

Classes

The following classes target specific HTML <div> tags within the application sidebar.

ds-sidebar__viewport
ds-sidebar__header
ds-sidebar__body
ds-sidebar__footer-wrapper

Classes

The following classes target specific HTML <div> tags within the accordion component.

ds-accordion
ds-accordion__toggle
ds-accordion__content
ds-accordion__header

Core/Entity vs. Design System classes

Ubidots implements two distinct CSS class systems that serve different purposes within the platform. Understanding the difference between these systems is crucial for proper styling and customization.

Design System Classes

Design system classes are component-level styles that follow strict BEM notation and are prefixed with ds-. These classes are managed by the VulcanUI design system and provide consistent styling for reusable UI components.

Characteristics:

Prefix: Always start with ds-.
Scope: Individual UI components (buttons, tables, inputs, etc.).
Naming: Follow BEM convention (ds-block__element--modifier).
Purpose: Ensure visual consistency across components.

Examples here.

Core/Entity Classes

Core and entity classes are application-level containers that provide structure for entire views and sections within the Ubidots platform. These classes enable entity-specific customization while maintaining global consistency.

Characteristics:

Prefix: Entity name or core-.
Scope: Page layouts and view containers.
Naming: <entity>-view__container pattern, or the core-view__container class
Purpose: Enable view-level customization and theming.
Structure: Hierarchical container system

Every view in the Ubidots application includes the global core class:

<div class="core-view__container">
  <!-- All view content -->
</div>

Each entity has its own container class following the pattern <Entity>-view__container:

<div class="core-view__container">
  <div class="devices-view__container">
    <!-- Devices entity content -->
  </div>
</div>

Common entity examples:

devices-view__container
dashboards-view__container
reports-view__container
events-view__container

For a complete list of Core/Entity classes, see here.

Implementation Structure

The final HTML structure within an application combines both class systems:

<!-- Application-level containers -->
<div class="core-view__container">
  <div class="devices-view__container">
    
    <!-- Design system components -->
    <div class="ds-table__viewport">
      <table class="ds-table">
        <thead class="ds-table__head">
          <tr class="ds-table__row">
            <th class="ds-table__cell ds-table__cell--sortable">
              Device Name
            </th>
          </tr>
        </thead>
      </table>
    </div>
    
  </div>
</div>

When to Use Each System

Use Design System Classes (`ds-`) for:

Styling individual UI components
Ensuring visual consistency
Component-specific states and variants
Reusable interface elements

Use Core/Entity Classes for:

Page-level layout customization
Entity-specific theming
View container styling
Application-wide structural changes
Custom CSS overrides for specific sections

Customization Guidelines

For Design System Components:

/* Customize component variants */
.ds-table__viewport {
  background-color: var(--custom-primary);
}

For Application Views:

/* Global view customization */
.core-view__container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Entity-specific customization */
.devices-view__container {
  background-color: var(--devices-bg);
  padding: 2rem;
}

/* Target design system components within specific entities */
.devices-view__container .ds-table {
  border-radius: 8px;
}

This dual-class system ensures both component consistency through the design system and application flexibility through core/entity classes.

Branding colors

You can access the app's color palette from the CSS stylesheets of both the application and the login page. This is useful if you want to define reusable CSS variables that inherit from those colors.

To do so, use the {{colors.<colorKey>}} bookmark syntax within the CSS stylesheet.

Color keys

Some keys are self-explanatory because they match the color name shown in the App's branding section. Others use descriptive names to help you identify them.

iconColor - Icons
navbarColor - Primary Navigation
variablesIcon
loginFormColor - Login Background
subHeaderColor - Secondary Navigation
widgetBackground
widgetTitleColor
dangerButtonColor
defaultButtonColor - Primary button
mainTableItemColor
subHeaderTextColor – Navigation text
dashboardBackground
loginButtonFormColor
warningModalCoverColor - Warning
variableInfoboxCoverColor
informationModalCoverColor
loginFooterForegroundColor
dataSourceInfoboxCoverColor
variableInfoboxDerivedColor

Example

This is an example of using the branding color palette as reusable CSS variables within the stylesheet.

:root {
  --color-icon-color: {{ colors.iconColor }};
  --color-navbar-color: {{ colors.navbarColor }};
  --color-variables-icon: {{ colors.variablesIcon }};
  --color-login-form-color: {{ colors.loginFormColor }};
  --color-sub-header-color: {{ colors.subHeaderColor }};
  --color-widget-background: {{ colors.widgetBackground }};
  --color-widget-title-color: {{ colors.widgetTitleColor }};
  --color-danger-button-color: {{ colors.dangerButtonColor }};
  --color-default-button-color: {{ colors.defaultButtonColor }};
  --color-main-table-item-color: {{ colors.mainTableItemColor }};
  --color-sub-header-text-color: {{ colors.subHeaderTextColor }};
  --color-dashboard-background: {{ colors.dashboardBackground }};
  --color-login-button-form-color: {{ colors.loginButtonFormColor }};
  --color-warning-modal-cover-color: {{ colors.warningModalCoverColor }};
  --color-variable-infobox-cover-color: {{ colors.variableInfoboxCoverColor }};
  --color-information-modal-cover-color: {{ colors.informationModalCoverColor }};
  --color-login-footer-foreground-color: {{ colors.loginFooterForegroundColor }};
  --color-data-source-infobox-cover-color: {{ colors.dataSourceInfoboxCoverColor }};
  --color-variable-infobox-derived-color: {{ colors.variableInfoboxDerivedColor }};
}

.ds-table__viewport {
  background-color: var(--color-navbar-color);
}

Custom fonts

You can change the font of the entire application and login page with the Custom Font option in the Branding section:

When you click it, a modal opens where you can enter your font URL, usually from Google Fonts or another provider:

Once you import the font, you can use it in your application and login page CSS as follows:

:root {
    --font-family-primary: "Orbitron", "Inter";
}

/* ==========================================================================
   Apply custom font globally
   ========================================================================== */
*:not([role="icon"]) {
    font-family: var(--font-family-primary);
}

The result is:

PreviousXML v1.0 (deprecated)NextApplication CSS

Last updated 3 months ago

Was this helpful?

Overview

BEM notation

BEM structure

Key rules

Class examples

Core/Entity vs. Design System classes

Design System Classes

Core/Entity Classes

Implementation Structure

When to Use Each System

Use Design System Classes (ds-) for:

Use Core/Entity Classes for:

Customization Guidelines

Branding colors

Color keys

Example

Custom fonts

Use Design System Classes (`ds-`) for: