Dashboard Documentation

2019-03-17 (1.0.1)

I had to make a decision: what responsive behavior should the dashboard grid follow? There are multiple approaches:

  1. Hero Panelopen in new window uses pixel-perfect sizings and breaks at 700px into 1x1 widgets. This makes the widgets always look good, as they are fixed-sized. However, the content is simply cut above the breakpoint if it does not fit into the viewport. Also, I prefer seeing more content than a 1x1 widget in mobile view.

  2. Use a masonryopen in new window layout. This approach makes sure to place all widgets optimally at all breakpoints. This is great for content where the order doesn't matter. However, on a dashboard I don't want my widgets to move around auto-magically.

  3. Let the user define the layout for each breakpoint. Meh, too much work for the user.

  4. Make the widgets fluid and break into a single column at 767px (exampleopen in new window). Also add a max width to prevent over-stretching the content.

I think that #4 is the best trade-off.

I've implemented a simple Dashboard using CSS Grid. The user may define the number of columns and rows and assign a relative width and height for each widget. In the future, this should be configurable within the UI (drag and drop), but for an MVP this is enough.