Cellules et grilles
La cellule, la grille qui se trace, le rail, et les pages posées dessus.
Section, grille, cellule
Trois briques, et chacune trace sa part. La Section pose la ligne qui traverse toute la fenêtre, et les deux rails de son contenu. La Grille trace sa ligne du haut. Chaque Cellule trace son bas et sa droite. Les lignes restent justes quel que soit le nombre de colonnes.
- Emploi
- Poser tout contenu sur le plan : une section par sujet, une grille par liste, une cellule par élément.
- Moment
- Toujours. Rien ne flotte hors d’une section, et toute liste d’éléments semblables est une grille.
- Jamais
- Une cellule seule hors d’une grille, sauf le formulaire et la tête en cellule. Une grille avec une marge intérieure : elle va jusqu’aux rails.
- IA et automatisation
Bosco Services
Un assistant lit les demandes d’intervention, retrouve le client dans leur logiciel métier, et prépare la fiche et le devis. Une personne valide.
- E-commerce
Clotilde Davenne
La boutique Shopify d’un domaine de Chablis. Cinq appellations, le retrait au domaine, et les règles de la vente de vin prévues dès le départ.
- Site internet et logiciel métier
Mes Jardiniers
Un site où l’on réserve son jardinier en quelques clics, et derrière, le logiciel qui planifie les interventions des équipes terrain.
- Application mobile
PepPsy
L’application de prévention en santé mentale que PepPsy propose aux salariés de ses entreprises clientes. Un baromètre, des contenus choisis selon les scores, un psychologue.
- Application mobile
Cathédrale de Nantes
L’application de visite de la cathédrale, commandée par le diocèse de Nantes. Un parcours guidé en trois langues, les offices, l’actualité et les dons.
- Site internet
IE Architecture
Le premier site d’une agence d’architecture de Laval. Les projets se lisent un par un, en grand, et l’agence publie elle-même ses nouvelles réalisations.
<Section id="realisations" titreId="tr-realisations">
<Tete variante="ligne" etiquette="Réalisations" titre="Ce qu’on a fait, et pour qui." id="tr-realisations" />
<Grille classe="tr-cas">
<Cellule classe="tr-cas__it">
<Etiquette element="span">Boutique en ligne</Etiquette>
<h3>Clotilde Davenne</h3>
<p class="small">La boutique Shopify d’un domaine viticole bourguignon.</p>
</Cellule>
{/* cinq autres cellules */}
</Grille>
</Section>| Classe | Zone | Valeur |
|---|---|---|
| .tr-sec | la section | ligne du haut sur toute la fenêtre (var(--th), 1 px) ; padding-block 0 |
| .tr-sec > .tr-in | le contenu | largeur min(100 % moins 2 × 28 px, 1184 px), centré ; un rail vertical de 1 px à chaque bord ; padding clamp(40px, 5vw, 72px) 0 |
| --th, --tv | le trait | un tiret de 4 px, un pas de 8 px, var(--line) ; horizontal et vertical |
| .tr-grille | la grille | grid sans puces ; ligne du haut ; clip-path inset(0 1px 0 0) cache le dernier trait vertical, confondu avec le rail |
| .tr-cel | la cellule | padding clamp(20px, 2.4vw, 28px) ; trait en bas et à droite ; min-width 0 |
| element | la balise | Section : section ; Grille : ul (par défaut), ol ou div ; Cellule : li (par défaut), div, figure ou article |
| data-lignes | la grille se trace | posé par Grille (lignes, vrai par défaut) ; voir la rubrique 03 |
| data-stagger | les cellules se suivent | posé par Grille, 70 ms par défaut, null pour aucun ; chaque enfant [data-reveal] reçoit --d, son rang fois le pas |
| reveal | l’apparition d’une cellule | vrai : monte de 16 px en apparaissant ; fade : fondu seul, pour une image ou un dessin ; faux : immobile |
| label, titreId | l’accessibilité | aria-label sur une grille ou une section sans titre ; aria-labelledby sur une section titrée |
La cellule pâle
La seule surface colorée que la trame tolère : var(--pale), dans une cellule. Elle porte un dessin, une tête ou la cellule allumée, jamais une section entière.
- IA et automatisation
Une IA branchée sur votre métier.
Des agents reliés à vos outils préparent le travail, vous validez.
- L’équipe
La stratégie
Ce qu’il faut construire, pour qui, et ce que ça doit rapporter.
<Grille classe="tr-cas">
<Cellule pale reveal="fade" muette>
<Scene nom="ia-et-automatisation" />
</Cellule>
<Cellule classe="tr-cas__it">
<Etiquette element="span">IA et automatisation</Etiquette>
<h3>Vos devis se préparent pendant que vous travaillez.</h3>
<p class="small">L’assistant prépare devis et relances, trie vos documents, et vous validez.</p>
</Cellule>
</Grille>| Classe | Zone | Valeur |
|---|---|---|
| .tr-cel--pale | la cellule pâle | background-color var(--pale), soit var(--color-grinn-pale), #F5FAF5 |
| pale | la prop | Cellule pale ; avec reveal="fade" pour un dessin : fondu seul, sans montée |
| .tr-ia, .tr-ia__dessin | la section IA de l’accueil | fond clair depuis le 13 octobre (JB) : la cellule du texte (.tr-ia__texte) sur le blanc, sans aplat ; le dessin dans une cellule pâle et unie (Cellule pale reveal="fade", classe tr-ia__dessin), sans dégradé d’angle, padding clamp(16px, 2vw, 28px), le schéma centré dans sa boîte 4/3 ; jusqu’au 13 octobre, toute la grille était pâle et la cellule du dessin portait le dégradé d’angle ; deux colonnes, 1fr et 1.25fr, dès 900 px |
| .tr-demo__scene | la scène de l’accueil | tr-cel tr-cel--pale, padding 0 ; derrière la scène hero v2, pâle et unie (ni dégradé d’angle, ni quadrillage .tr-une__fond, ni cellules vivantes : 13 octobre, à valider par JB) ; sur toute la largeur de la démonstration en 3:2 (2:1 de 620 à 999 px) ; dès 1000 px, au centre, sur les trois rangées |
| .tr-page__dessin | le dessin d’un en-tête de page | tr-cel tr-cel--pale, padding 0, 4/3 ; derrière un schéma v2, pâle et unie (ni dégradé d’angle, ni quadrillage .tr-une__fond, ni cellules vivantes : 13 octobre, à valider par JB) ; sinon le dégradé d’angle, quadrillé par .tr-une__fond (.tr-une__dessin, la variante « cote » du Hero, plus employée, en 4/3 puis 3/2 dès 900 px) |
| .tr-tete--cel | la tête en cellule | fond var(--pale), quadrillage masqué au centre : voir Têtes de section |
| .tr-cel--allume | la cellule allumée | fond var(--pale), min-height 120 px : voir Bandes et cellules allumées |
| .tr-scene | un dessin dedans | une illustration v2 (.tr-scene--v2, SVG à fond transparent) : mix-blend-mode normal, sans filtre ; une ancienne scène peinte (aucune en service depuis le 13 octobre) : multiply, son fond blanc laisse passer le pâle et la trame |
| .tr-cel--scene | une cellule de dessin seule | padding clamp(16px, 2vw, 28px), le dessin centré, contain, 420 px de haut au plus : marketing-digital sur /suivi/, ia-et-automatisation sur /contact/ |
La grille qui se trace
Quand une grille entre dans le cadre, sa ligne du haut s’étire, puis chaque cellule trace son bas et sa droite, l’une après l’autre. Sans script, tout est tracé d’emblée. Les six cellules de la première rubrique l’ont fait en arrivant.
| Classe | Zone | Valeur |
|---|---|---|
| data-lignes | la grille observée | trame.ts la suit ; .is-trace est posé quand 10 % de la grille entrent dans le cadre, avec une marge basse de 8 % |
| --l | le tour de chaque cellule | 70 ms fois son rang, posé par le script sur chaque enfant de la grille |
| .js [data-lignes]:not(.is-trace) | avant | background-size 0 % 1px sur la grille ; 0 % 1px et 1px 0 % sur ses cellules |
| [data-lignes] | la ligne du haut | transition background-size 1100 ms var(--ease) |
| [data-lignes] > .tr-cel | les cellules | transition background-size 1100 ms var(--ease), retardée de var(--l) ; background-color 380 ms |
| data-allume | les bandes | même observateur, même .is-trace ; les cellules allumées d’une grille suivent son .is-trace |
| mouvement réduit | sans animation | transitions à none, .is-trace posé d’emblée |
| sans script | sans la classe .js | rien n’est caché : la grille est tracée dès le chargement |
Les durées de tout ce qui bouge sont rassemblées dans Mouvement.
Jusqu’aux rails
Les cellules vont jusqu’aux rails ; le texte seul garde sa marge. C’est la règle qui fait tenir la page sur son plan : une grille collée aux rails est posée dessus, une grille en retrait flotte.
L’équipe
- 5 ans, à Nantes et à Paris
- Autour de quinze personnes
L’équipe
- 5 ans, à Nantes et à Paris
- Autour de quinze personnes
| Classe | Zone | Valeur |
|---|---|---|
| .tr-tete, .tr-suite | le texte seul | padding-inline clamp(20px, 3vw, 48px) |
| .tr-note, .tr-prose, .tr-corps--centre | les paragraphes | même marge |
| .tr-cles > div | les paires clé et valeur | padding 14 px clamp(20px, 3vw, 48px) : le trait va jusqu’aux rails, le texte garde la marge |
| .tr-grille, .tr-form | les cellules | aucune marge : elles touchent les rails |
| .tr-joindre | le point de contact | l’exception : 1100 px au plus, centré ; à pleine largeur, la grille s’arrête à 42 px de chaque rail |
| .tr-logos .tr-etq | l’étiquette des logos | margin 22 px clamp(20px, 3vw, 48px) 16 px |
Les classes de colonnes
Le nombre de colonnes est l’affaire de la classe passée à la Grille. Une colonne au téléphone, deux ensuite, puis le nombre propre à la section. Les points de rupture sont ceux de grinn.css, en largeur de fenêtre.
| Classe | Section | Colonnes |
|---|---|---|
| .tr-offres | les offres | 1 ; 2 dès 700 px ; 3 dès 1080 px |
| .tr-cas | les réalisations | 1 ; 2 dès 600 px ; 3 dès 1000 px |
| .tr-eng | les engagements | 1 ; 2 dès 600 px ; 4 dès 1000 px |
| .tr-equipe | l’équipe | 1 ; 2 dès 700 px, la photo sur toute la largeur ; 4 dès 1000 px, la photo toujours sur toute la largeur, en 2/1, les quatre rôles en rangée dessous |
| .tr-faits | les faits (page de l’équipe) | 1 ; 2 dès 600 px ; var(--n) dès 1000 px, --n le nombre de faits, plus un s’il y a un bouton : 3 sur la page de l’équipe ; margin-top -1 px, collée à la grille du dessus |
| .tr-suivi | le suivi | 1 ; 2 dès 700 px ; var(--n) dès 1000 px, --n le nombre de colonnes posé par Tarifs (4 au plus) : 3 pour le suivi |
| .tr-dires | les citations | 1 ; 2 dès 700 px, la tête en première rangée ; 3 dès 1000 px, la tête sur deux colonnes et les cases vides visibles |
| .tr-logos__piste | les logos | pas une grille depuis le 12 octobre : une rangée flex de cases de clamp(170px, 15vw, 230px), qui défile (voir Logos) |
| .tr-joindre | le point de contact | 1 ; 2 dès 900 px quand l’agenda existe (.tr-joindre--deux), la tête sur les deux |
| .tr-etapes | les étapes | 1 ; 2 dès 600 px ; var(--n) dès 1000 px, --n le nombre d’étapes, 4 au plus |
| .tr-faq | les questions | 1 ; 2 dès 800 px |
| .tr-chiffres | les repères chiffrés | 1 ; 2 dès 600 px ; var(--n) dès 1000 px, --n le nombre de repères, 4 au plus |
| .tr-ia | l’IA | 1, le texte puis le dessin ; 1fr et 1.25fr dès 900 px |
| .tr-demo | la démonstration de l’accueil | 2, la scène sur les deux ; 3 dès 620 px, la scène sur les trois ; dès 1000 px, 1fr, 2.3fr et 1fr sur trois rangées : la scène au centre sur les trois rangées, les trois premières offres à gauche, les trois suivantes à droite (grid-area posée sur le deuxième au septième enfant) |
| .tr-form | le formulaire | 2 ; 1 sous 600 px |
| .sys-sommaire | ce design system | 1 ; 2 dès 600 px ; 3 dès 1200 px |
RègleUne grille va jusqu’aux rails, trace ses lignes à l’arrivée, et ne porte de couleur que dans sa cellule pâle.