Layout

Three main breakpoints for the layouts. Note that the breakpoints are defined by container width, not screen size.

There’s a vertical grid with a 50px height that allows users to scale and size widgets. Widget heights can be adjusted in 50px increments.

Reflow and Resize

• Each widget on the summary view can span multiple columns. 

• Each widget must span at least 1 column and have a minimum height of 300 px. 

• The minimum width for widgets is 1 column. 

• Widgets cannot span half or part of a layout column. 

• Identify the key widget types and sizes. 

• Widget sizes can be XS, S, SM, M, or L. 

  • XS - 1 x 1 

  • S - 2 x 1 

  • SM - 1 x 2 

  • M - 2 x 2 

  • L - 3 x 3

Based on your requirements and the information to display in the widgets, you can select the widget composition from the template library.

If none of the templates fit the requirements, then the widgets can use a custom design. 

• For custom designs, use a micro-grid (1-column/2-column or 3-column, or a special grid type) that resizes and scales as the screen size changes.

For dashboard-style layouts, designers should ensure that widgets in a single row are the same height when they first design the screens. Users can later break this arrangement, and that is expected.

Users can manually resize widget heights and widths. When users resize widgets, the layout adjusts to optimize vertical spacing. This configuration will be saved.

Widget Content Reflow and Resize

When the screen shrinks from 4 columns to 2 columns to 1 column, widget sizes adapt to the screen layout. 

In most cases, content reflow can increase the widget height, and that is expected. For example, a 2 x 1 widget when scaled to 1 column could become a 1x 2. 

Avoid vertical scrolling within a widget.

For widgets based on the templates, the resize behavior is automatically defined in the templates. 

The designer must define widget arrangement and sizing for each layout (4 column, 2 column, and 1 column).

Each layout variant is saved as its own view. 

Widget Customization Behavior

(By End Users - Designers don’t need to worry about this)

Resizing of Widgets

The widgets can be resized horizontally and vertically. 

The horizontal resizing is only in increments of 1 column, and the vertical resizing happens in increments of 50px. The vertical size always snaps to the 50px grid baseline. 

The content shrinks and expands when the widget is resized. Individual components within the widget have pre-defined behavior for how shrinking and expanding happens.

Rearranging Widgets (Shuffling)

This is supported, but each state is saved only per the current view.

If the user resizes or zooms the browser view and reaches the next breakpoint (e.g. from 4 columns to 2 columns) the position of the reshuffled widget switches back to the latest previous state of the arrangement.

Deleting a Widget

If a Widget is deleted in any of the possible views (4, 2 or 1 column view) the widget will be deleted for the rest of the views as well.

After the deletion of a widget, the remaining content will “compress” or “shuffle up” automatically so that occurring whitespace is reduced as much as possible. This rearrangement will automatically occur in all remaining views.

Adding a New Widget

After selecting the widget that the user wants to add to the dashboard, the widget is automatically placed into the first possible slot available. 

If no whitespace exists, it will automatically be added at the end of the list. Adding a widget will place it in the first available slot across all layout variants

Pinning of Widgets

Pinning of Widgets is currently not supported. And it is not being planned to be implemented in the near future.

Retrofitting the existing screens

(Tasks of a designer)

• Design specifications for 3 layout variants: 4-column, 2-column, and 1-column layout

• Identify the key widget types and sizes. The widget size can span across columns (This assumes a default grid of 4 columns for the Dashboard)

• Pick a widget template and retrofit the widget to the template.

• For a custom widget, follow the micro-grid and design the variants of the widget for different layouts.