Applying CSS to Components

This is the core section of this set of articles focused on practical examples of using CSS to change web UI component’s appearance and behavior.

The section is divided into several articles highlighting the key aspects of working with component styles in Iotellect, and showcases some useful CSS features that may help to achieve advanced levels of UI customization.

Common Stylization Workflow

A typical workflow for a user new to editing the appearance of web UI components consists of several steps, depending on the complexity of the component being edited:

  1. Adding plain (not wrapped in a selector) base CSS properties to the available style fields in the component Properties Editor.

  2. Figuring out what HTML element inside the component to target with a selector, if just plain CSS properties are not applied where expected.

  3. Adding whole CSS rules and adjusting them to better fit the purpose.

  4. Writing an extended set of rules for special cases of the component appearance, if needed.

  5. Adding CSS for alternative component states, if it supports any.

  6. Testing the component in all its states with different amounts of nested data (if feasible) in the running dashboard.

  7. Extending the component styles with the responsive behavior.

  8. Testing the final results in all target browsers/devices and troubleshooting.

It is supposed that you will be using the built-in browser developer tools to target CSS selectors and troubleshoot your styles if something went in an unexpected way. Read the Useful Browser Tools article to learn more on this topic.

Was this page helpful?