Layout

Three main breakpoints support layout reflow. Breakpoints are defined by container width rather than viewport size, so they adapt to the content’s placement.

The base layout scales from four columns to two columns to one column as the container becomes smaller.

Widgets

Each widget can span multiple columns. Identify the key widget types and sizes: XS, S, SM, M, and L. Use a default four-by-four dashboard grid.

• XS - 1 x 1 

• S - 2 x 1 

• SM - 1 x 2 

• M - 2 x 2 

• L - 3 x 3 

Choose widgets from the template library when possible. For custom designs, use a micro-layout that can reflow into two-column or three-column arrangements as the screen changes.

Widget height adapts to the content. Avoid vertical scrolling inside a widget.

Arrange widgets to optimize vertical space and reading order. Widgets stack together like a jigsaw puzzle.

Widget Content Reflow and Resize

As the screen shrinks from four columns to two columns to one column, widgets adapt to the screen layout. Each widget should scale down gracefully, even when reflow increases its height.

Avoid vertical scrolling within a widget.

Template-based widgets automatically define resize behavior in their templates.

Define the widget arrangement and size for the four-column, two-column, and one-column layouts. Each layout variant is saved separately, so end-user customization and rearrangement are not supported.

Retrofitting the Existing Screens

Tasks of a designer

Create design specifications for the overview screen across three layout variants: four columns, two columns, and one column.

Identify key widget types and sizes, select a widget template, and retrofit the widget to that template. For custom widgets, follow the micro-layout and design variants for the required container sizes.

Follow a masonry-style arrangement for the summary screen.