Dashboard bento

Ce qui est inclus

La première section d’une page : un titre, deux boutons, et six cartes qui rapportent l’état d’un système — nœuds en ligne, latence, disponibilité, couverture par région. Une feuille de style, un script, deux fichiers de police. Aucune dépendance, aucune étape de build, aucune requête externe.

Les dessins qui portent les chiffres sont tracés en CSS : l’histogramme, le radar et son balayage, les jauges hachurées, le quadrillage du fond. La maquette d’origine chargeait quatre images pour les faire ; ici il n’y en a aucune, donc rien à attendre au chargement et rien qui se pixellise.

Fonctionnalités

• Il réagit à sa largeur, pas à celle de la fenêtre — ses quatre paliers sont des requêtes de conteneur. Posé dans une colonne de 640 px, il se réorganise comme il le ferait sur un téléphone.
• Les chiffres montent — deux secondes, courbe décélérée, un dixième de seconde d’écart entre deux nombres, et le format d’écriture est conservé pendant le comptage : « 2,846 » ne devient jamais « 2846 ».
• Marche sans JavaScript — le script commence par poser lui-même la classe qui cache ce qu’il va animer. Sans lui, rien n’est caché : chiffres à leur valeur, barres à leur hauteur.
• Une variable pour l’échelle — toute mesure dérive du corps du texte, dessins compris. Le radar, les hachures et le quadrillage suivent.
• Vos chiffres, en un endroit — les valeurs que seuls les dessins portent sont des variables groupées en tête de la feuille ; celles qui se lisent sont dans le balisage, là où un lecteur d’écran les trouve.
• Mouvement réduit respecté — délais compris. Le balayage du radar reste alors posé à son angle de départ : c’est une image, pas un mouvement.

Le poser dans une page

Deux fichiers à charger, puis la section :

<link rel="stylesheet" href="dashboard-bento.css">
<script src="dashboard-bento.js" defer></script>

<section class="dashboard-bento">
  <div class="dashboard-bento__backdrop" aria-hidden="true"></div>
  <div class="dashboard-bento__container">
    <div class="dashboard-bento__intro">…</div>
    <div class="dashboard-bento__grid dashboard-bento__grid--top">…</div>
    <div class="dashboard-bento__grid dashboard-bento__grid--bottom">…</div>
  </div>
</section>

Les deux polices sont à côté de la feuille de style, qui les déclare : rien à configurer. Pour changer l’échelle de tout le bloc, une ligne suffit — .dashboard-bento { --tb-font-size: 0.875rem }.

Ce qu’il faut savoir

• Les paliers regardent le conteneur. Si vous posez le bloc dans une boîte sans largeur définie, donnez-lui une largeur : un conteneur de requête doit pouvoir être mesuré.
• Aucun style ni script en ligne. Le composant respecte la politique de sécurité stricte du site, et n’utilise jamais innerHTML : il ne fait que poser des classes et écrire du texte.
• Un défaut de la maquette a été corrigé. Entre 992 et 1060 px, et sous 360 px, le badge de deux cartes sortait de sa carte, faute de place à côté du chiffre. Ici il passe dessous ; le comportement d’origine se retrouve avec flex-wrap: nowrap sur .dashboard-bento__inline.
• Le dessin vient d’ailleurs. Les proportions reprennent celles d’une section d’un template Webflow commercial, relevées sur le site lui-même — boîte par boîte, à cinq largeurs, et jusqu’aux durées de ses animations. Le code, lui, est original, et les quatre images qu’il embarque ont été mesurées puis redessinées.