Real-time surveillance
Online
2,846
Active monitoring nodes worldwide
Lorem ipsum dolor sit amet consectetur adipiscing consectetur porttitor id vel eget venenatis in purus etiam nunc nulla posuere.
Online
2,846
Active monitoring nodes worldwide
247
2.5%
Active
Total
1,502
<10ms
Latency
Ultra low response time
147
Total
73%
99.5%
8.4%
98.7%
A dashboard hero: a title, two buttons, and six cards reporting the state of a system. The drawings that carry them — the histogram, the radar, the hatched gauges, the grid of the background — are all drawn in CSS. No image is loaded, nothing goes pixelated, and there is no other file to copy than the stylesheet, the script and the two faces.
Copy the <section class="dashboard-bento"> block, link
dashboard-bento.css and dashboard-bento.js. The script is not
required: without it, the scene shows itself straight away in its arrival state, figures
included. All it adds is the entrance — the cards appearing, the bars rising, the numbers
counting up to their value.
The numbers written out in full are in the markup, where a screen reader finds them.
The ones only the drawings carry are variables, grouped at the top of the stylesheet:
--tb-chart-1 to --tb-chart-5 for the histogram,
--tb-ratio for the bar under the radar, --tb-gauge-1 to
--tb-gauge-3 for the three regions. The uptime columns are counted in the
markup: eleven full, one hollow.
One single variable rescales everything, --tb-font-size. It is
1rem and serves as the module for every measurement: the title is 3.75 times
that value, the padding of a card 2 times, the gap between two cards 0.5 times. The radar
and the hatching follow, because they are drawn in the same proportions.
The same section, in a box 640 px wide in the middle of a page that is far wider. The cards reorganise into two columns, the title centres itself, the figures shrink: the window, meanwhile, has not moved.
One platform. Total dominance.
Lorem ipsum dolor sit amet consectetur adipiscing consectetur porttitor id vel eget venenatis in purus etiam nunc nulla posuere.
Online
2,846
Active monitoring nodes worldwide
247
2.5%
Active
Total
1,502
<10ms
Latency
Ultra low response time
147
Total
73%
99.5%
8.4%
98.7%
The looping movements — the sweep of the radar, the pulse of the markers — are plain
CSS: they run without a script. The entrance, on the other hand, waits for the block to
come into the window. Under prefers-reduced-motion, everything stops and
nothing hides: the sweep stays at the angle where it starts, the figures are at their
value.
The without JavaScript page shows what is left when the script does not run.