Responsive Styles

If a project involves operation on various devices across many platforms, you need to be sure your dashboards are usable and good looking on any device from the supposedly supported zoo. This implies using the responsive design approach to create the UI.

Responsive web design is an approach in web design to make web pages render well on any screen size and resolution while ensuring good usability.

The scope of possible implementations includes changing the dashboard layout, sizes of the fonts and styles of the components, and even removing or replacing some elements depending on a viewport width.

The responsive UI behavior is better be planned beforehand, and then added to the application dashboards using the available component properties and CSS methods. Otherwise, you risk facing the necessity of radically reassembling the whole dashboard’s layout in order to implement the desired behavior.

Ways to Enable Responsive UI

There are two ways to add responsive behavior to a dashboard or its components in Iotellect:

  • Using components’ Breakpoints property

  • Applying @media CSS rules directly from the components’ custom style properties

The first method is supposed to maintain a list of key resolution breakpoints where the most changes in the layout and styles happen. Get more information about using it in the Using Resolution Breakpoints article.

The second one is the classic CSS approach to responsive design. It is useful when applying local style changes to a component that requires correction on a certain screen resolution out of the general list of added Breakpoints entries. Read about using it in the Using Media Queries article.

Was this page helpful?