Styling with CSS

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.

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 system implements key rules for the classes:

1. Maximum 2-level nesting: Uses block__element, never block__element__subelement

2. Semantic hierarchy: Elements must be logically positioned under their parent.

3. Lowercase only: All class names must be lowercase with hyphens.

4. Consistent separators: Always uses __ for elements and -- for modifiers.

Class examples

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

Table

Sidebar

NavBar

Accordeon

Classes

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

1. ds-table__viewport

2. ds-table__toolbar

3. ds-table__wrapper

4. ds-table__controls

Classes

The below classes target specific HTML <div> tags within the application Sidebar.

1. ds-sidebar__viewport

2. ds-sidebar__header

3. ds-sidebar__body

4. ds-sidebar__footer-wrapper

Classes

The below classes target specific HTML <div> tags within the application NavBar.

1. ds-navbar

2. ds-navbar__wrapper

3. ds-navbar__logo

4. ds-navbar__options

Classes

The below classes target specific HTML <div> tags within the Accordeon component.

1. ds-accordion

2. ds-accordion__toggle

3. ds-accordion__content

4. 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 core-view__container class

• Purpose: Enable view-level customization and theming.

• Structure: Hierarchical container system

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

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

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

Accessing the colors palette of the app is possible 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 the {{colors.<colorKey>}} bookmark syntax within the CSS stylesheet.

Color keys

Some keys are self-explanatory by matching the color name shown in the App's branding section. Others have the respective name so you can 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 an example of using the branding colors palette as CSS reusable variables within the CSS 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

Changing the font of the whole application and login page is doable with the Custom Font option in the Branding section:

When clicking it, a modal opens where you can enter your fonts' URL, usually from Google Fonts or other providers:

Once you import the font, you can use it in your application and login page's 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: