Global Styles

In a lot of projects, it is a common need to apply the one set of CSS styles across many components sharing similar features. The moment a custom font for at least a part of the UI is involved, or the same component is used more than once on the dashboard, it is inevitable to somehow manage the identical custom CSS properties of many elements.

To spare yourself from duplicating the same CSS snippets over and over again between all of the components, apply shared component styles globally within the dashboard or the whole application using one of the available in Iotellect methods.

Using global CSS grants the centralized control over the shared styles of dashboard components, but requires using more precise CSS selectors to target groups of different component elements within the layout and complicates the troubleshooting.

Ways to Apply Global Component Styles

There are two ways to apply CSS styles globally to dashboard components in Iotellect:

  • Adding CSS styles to the Root Panel of the dashboard in the UI Builder

  • Linking them as an external CSS file. 

The first method is good for the cases when an application consists of a small number of distinct dashboards and/or a Dashboard Template is used to contain the UI.

The second one may be useful if an application consists of numerous dashboards with loads of look-alike components and doesn’t use a Dashboard Template for its UI.

Was this page helpful?