Page à rail
Le sommaire en colonne, le corps à droite : ce design system, et les pages longues.
Le rail
Un sommaire en colonne, par groupes : le titre du groupe en vert profond, les entrées en capitales, la page courante soulignée. Dès 1000 px il colle sous l’en-tête et suit la lecture ; en dessous, il passe en tête de page, en ligne.
- Emploi
- Le sommaire d’une page longue ou d’un ensemble de pages : le design system, une page légale.
- Moment
- Dès que la page a plus de trois parties, ou qu’elle fait partie d’un ensemble à parcourir.
- Jamais
- Pour trois liens : une tête de section suffit. Ni sur l’accueil, ni sur une page d’offre.
<Rail groupes={[
{ titre: 'Gabarits', liens: [
{ href: '/design/en-tete-pied/', libelle: 'En-tête et pied' },
{ href: '/design/accueil/', libelle: 'L’accueil' },
{ href: '/design/page-offre/', libelle: 'Page d’offre' },
{ href: '/design/page-realisations/', libelle: 'Page Réalisations' },
{ href: '/design/page-realisation/', libelle: 'Page de cas' },
{ href: '/design/page-rail/', libelle: 'Page à rail' },
{ href: '/design/prose/', libelle: 'Prose et page légale' },
] },
{ titre: 'Marques et fichiers', liens: [
{ href: '/design/fichiers/', libelle: 'Logos et fichiers' },
{ href: '/design/ecarte/', libelle: 'Écarté' },
] },
]} label="Pages du design system" />| Classe | Zone | Valeur |
|---|---|---|
| .tr-rail | le sommaire | une nav ; en colonne dès 1000 px, en ligne en dessous |
| .tr-rail__groupe + .tr-rail__groupe | entre deux groupes | 22 px |
| .tr-rail__titre | le titre de groupe | Inter 600 var(--t-label) capitales, .14em, vert profond, 8 px au-dessus de sa liste |
| .tr-rail a | une entrée | Inter 600 11,5 px capitales, .11em, interligne 1,35, ink-2, 6 px de padding vertical, sans soulignement |
| .tr-rail a:hover | au survol | encre |
| .tr-rail a[aria-current="page"] | la page courante | vert profond, souligné 1,5 px à .35em ; posé quand le chemin de la page est celui du lien |
| @media (max-width: 999px) | sous 1000 px | le rail passe en tête : groupes en ligne, écart 12 / 28 px ; entrées en ligne, écart 4 / 14 px |
La page à rail
Le rail dans sa colonne, le corps à droite : 1fr / 3fr dès 1000 px, une seule colonne en dessous. Le design system est construit ainsi, dans src/layouts/Design.astro : l’en-tête de page sans scène, puis la page à rail avec le sommaire des pages et le corps des rubriques.
Le corps reçoit les rubriques. Il garde une largeur de lecture par ses propres classes : une prose fait 64ch, un tableau prend toute la colonne.
<div class="tr-rail-page">
<aside class="tr-rail-page__rail"><Rail groupes={ groupes } label="Sommaire" /></aside>
<div class="tr-rail-page__corps">
<Rubrique n={1} titre="La colonne" intro="Une colonne de lecture.">
<Prose>Le texte de la page.</Prose>
</Rubrique>
</div>
</div>| Classe | Zone | Valeur |
|---|---|---|
| .tr-rail-page | la page | une colonne, ligne pointillée en haut ; dès 1000 px, 1fr / 3fr |
| .tr-rail-page__rail | la colonne du rail | padding clamp(16px, 2vw, 28px) clamp(20px, 3vw, 48px), trait pointillé en bas ; dès 1000 px, collante à 76 px sous le haut de la fenêtre, trait pointillé à droite, padding clamp(24px, 3vw, 40px) 24px clamp(24px, 3vw, 40px) clamp(20px, 3vw, 48px) |
| .tr-rail-page__corps | le corps | padding clamp(24px, 3vw, 48px) clamp(20px, 3vw, 48px) ; dès 1000 px, clamp(28px, 4vw, 64px) à gauche et clamp(20px, 3vw, 48px) à droite |
| .tr [id] | une cible d’ancre | scroll-margin-top 88 px, pour passer sous l’en-tête |
Les rubriques
Le corps d’une page du design system est une suite de rubriques numérotées : le numéro, le titre avec son point vert, l’entrée en matière, puis les briques. Chaque rubrique est une section, séparée de la précédente par un trait pointillé.
| Classe | Zone | Valeur |
|---|---|---|
| .sys-rub | la rubrique | padding vertical clamp(32px, 4vw, 56px), trait pointillé au-dessus ; la première sans trait ni padding haut |
| .sys-rub__n | le numéro | Inter 600 var(--t-label), .14em, vert profond, 10 px au-dessus du titre |
| .sys-rub h2 | le titre | Outfit clamp(26px, 2.6vw, 38px), interligne 1,08, approche -0,03em, 22ch ; le point final en vert profond (sys-point) |
| .sys-rub__intro | l’entrée en matière | 62ch, ink-2, interligne 1,6, 14 px sous le titre |
| .sys-rub > * + * | entre deux briques | clamp(20px, 2.4vw, 28px) |
Où l’employer ailleurs
Toute page longue avec un sommaire. Les premières sont les pages légales : les mentions légales et la politique de confidentialité, construites sur la trame par le composant SectionsLegales.
Sur une page légale, le rail porte des ancres plutôt que des pages : un seul groupe, une entrée numérotée par sujet, et chaque sujet est une section tr-legal avec l’id correspondant et une marge de défilement de 96 px. Les mentions légales ont sept sujets, la politique de confidentialité neuf, lus dans pages-v3. Le rail ne marque la page courante que par son chemin : sur des ancres, aucune entrée n’est soulignée, et rien ne suit le défilement. Le spécimen est sur la page Prose et page légale.
RègleLe rail ne porte que des liens, en capitales : jamais un bouton, un prix, ni une phrase.