Designing a layout system for big-screen dashboards
From 2020 to 2023, I developed dashboards and mapping tools for a warehouse automation system using TypeScript and React.
Our customers wanted to display system dashboards on large monitors. To support this requirement, our developers needed a way to build a variety of dashboards using a simple but flexible layout system.
I created a system of layout "strategies" that could handle any conceivable configuration of one to four panels:
A single strategy could take on multiple forms by moving the "breakpoints" between panels:
First, I defined eight basic strategies:
Then I used CSS Grid Layout to establish the default attributes of each strategy:
Finally, I created a simple Dashboard component that accepts a strategy (e.g. "one-over-two"), optional breakpoints and child panels. Internally, it computes new values for
grid-template-columns if given custom breakpoints:
My solution allowed us to spin up new dashboard designs with no fuss and a light code footprint.