Core/Entity classes

Application and entity specific classes.

Core and entity classes provide targeted styling capabilities for the Ubidots application. They let you apply CSS customizations either globally across the platform or to specific entities. These classes are essential for creating consistent theming and entity-specific customizations without affecting other parts of the application.

Why Core/Entity Classes Matter

Global Consistency: The core-view__container class enables platform-wide styling changes that affect every view in the application, ensuring visual consistency across all entities.

Entity Isolation: Entity-specific classes like devices-view__container allow you to customize individual views without impacting other parts of the application, providing precise control over each entity's appearance.

Scalable Customization: This system supports both broad theming changes and granular entity customizations, making it easy to maintain brand consistency while accommodating specific functional requirements.

Core & Entity-specific Classes

Core

Applied to every view container across the entire Ubidots application.

core-view__container

Use cases:

• Platform-wide color schemes.

• Global typography settings.

• Universal spacing and layout adjustments.

Example

.core-view__container {
  font-family: 'Custom Brand Font', sans-serif;
  background-color: var(--global-background);
  min-height: 100vh;
}

Entity container

Applied to every entity container that's exposed in the Ubidots application. It follows the syntax:

<entity>-view__container

Use cases:

• Entity-specific color coding.

• Custom layouts for each entity.

• Entity-specific spacing and typography.

Available entity classes are:

Entity	Class
Devices	devices-view__container
Device groups	device_groups-view__container
Dashboards	dashboards-view__container
Events	events-view__container
Event logs	events_logs-view__container
Reports	reports-view__container
Users	users-view__container
Organizations	organizations-view__container

Example

.devices-view__container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.devices-view__container .ds-table {
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

Entity banner classes

For now, only the Device entity is supported. More modules will be available soon.

These classes apply to entity table views exposed in the Ubidots application, except Dashboards. They let you add an image banner or linear gradient to the entity table.

It follows the syntax:

<entity>-table__layout

<entity>-table__content

The layout class is only needed to hold two additional classes for the two banner options. The banner classes are:

• <entity>-table__banner

• <entity>-table__banner-gradient

Use each one based on the banner type you want to implement.

Example

This CSS adds an image banner to the Devices view:

:root {
   /* Component-Specific Sizes */
   --table-banner-height: 254px;
   --table-content-offset: calc(var(--table-banner-height) / -2);

   /* Images */
    --devices-table-banner-image: url(https://d37r24zvv6zb85.cloudfront.net/production/media/ent_login_screen/68a00c069807fa008cab1a53_6a5018ea7f7944619c1fe0be36aee3f1.png);
}

/* Enable banner image in Device view */
.devices-table__content {
   transform: translateY(var(--table-content-offset));
}

.devices-table__banner {
   background-image: var(--devices-table-banner-image);
   height: var(--table-banner-height);
}

Rendered DOM

The rendered HTML for the Devices view, including a banner, looks like this. This example is taken directly from the application:

<div id="root">
  <div class="sc-cdmDIG lerfa">
    <!--Sidebar -->
    <aside class="sc-jjRXMV bkmJAK" data-open="false" data-testid="sidebar">
      <!--Content of the sidebar -->
    </aside>
    <!--Main content -->
    <main class="devices-view__container core-view__container">
      <!--Context bar -->
      <section>
        <div>
          <h1>Devices</h1>
        </div>
      </section>
      <div class="devices-table__layout">
        <div>
          <!--Banners -->
          <div class="devices-table__banner" role="presentation"></div>
          <div class="devices-table__banner-gradient" role="presentation"></div>
        </div>
        <!--Devices view content -->
        <div class="devices-table__content">
          <!--Content of the Devices view -->
        </div>
      </div>
    </main>
  </div>
</div>