Layout

Candidate

Le systeme de layout Sirdata Pixel fournit une base neutre pour composer des sites marketing, des pages produit et des experiences documentaires. Il ne definit pas une direction artistique : il contraint les largeurs, gere les gutters, structure les sections et stabilise les grilles responsive.

Utiliser ces primitives pour construire progressivement des pages coherentes sans imposer de framework CSS externe.

Principles

• Container contraint la largeur du contenu et gere les gutters responsive.
• Section gere l’espacement vertical et les fonds simples.
• Grid organise les contenus repetes ou les compositions multi-colonnes.
• Les tokens --px-* sont le contrat public pour ajuster le layout sans modifier les composants.
• Les layouts doivent rester sobres : pas de carte globale autour de chaque section, pas d’imbrication decorative.

Container

Container centre le contenu, applique une largeur maximale et preserve un gutter responsive. Par defaut, il rend un div. Utiliser as="main" uniquement pour le conteneur principal d’une page.

Container sm

Container md

Container lg

Prop	Values	Default	Role
size	sm, md, lg, xl, full	lg	Largeur maximale du contenu
padding	none, sm, md, lg	md	Gutters horizontaux
as	Balise HTML	div	Semantique du conteneur

---
import Container from '@sirdata/pixel/astro/Container';
---

<Container as="main" size="lg">
  <h1>Segments actifs</h1>
  <p>Activez vos audiences dans un cadre maitrise.</p>
</Container>

<main class="pixel-container pixel-container--lg pixel-container--padding-md">
  <h1>Segments actifs</h1>
  <p>Activez vos audiences dans un cadre maitrise.</p>
</main>

Section

Section porte l’espacement vertical et le fond. Elle ne doit pas contenir directement une largeur de page : placer un Container a l’interieur.

Surface / spacing sm

Muted / spacing md

Prop	Values	Default	Role
spacing	none, sm, md, lg, xl	md	Padding vertical
tone	default, muted, surface, dark	default	Fond simple
as	Balise HTML	section	Semantique de la zone

<Section tone="muted" spacing="lg">
  <Container size="lg">
    <h2>Une base claire pour les equipes</h2>
    <p>Composer rapidement une page sans redefinir les gutters.</p>
  </Container>
</Section>

Grid

Grid est responsive par defaut. Sur mobile, les colonnes reviennent a une colonne. Sur tablette, les grilles 3 et 4 se reduisent progressivement. Sur desktop, elles respectent le nombre de colonnes demande.

Audience

Qualification et activation de segments.

ABConsent

Consentement, conformite et preferences.

ServerSide

Flux de donnees fiables cote serveur.

Prop	Values	Default	Role
columns	1, 2, 3, 4, auto	auto	Colonnes desktop
gap	sm, md, lg	md	Espacement entre items
align	start, center, stretch	stretch	Alignement vertical des items
as	Balise HTML	div	Semantique du groupe

<Grid columns={3} gap="md">
  <Card>...</Card>
  <Card>...</Card>
  <Card>...</Card>
</Grid>

<div class="pixel-grid pixel-grid--columns-3 pixel-grid--gap-md pixel-grid--align-stretch">
  <article>...</article>
  <article>...</article>
  <article>...</article>
</div>

Examples

Hero simple centre

Sirdata Pixel

Construire des interfaces coherentes plus vite

Une base layout neutre pour aligner les sites marketing Sirdata sans repartir de zero.

Explorer les fondations

<Section spacing="lg" tone="muted">
  <Container size="md">
    <div class="hero">
      <p>Sirdata Pixel</p>
      <h1>Construire des interfaces coherentes plus vite</h1>
      <Button href="/foundations/colors/">Explorer les fondations</Button>
    </div>
  </Container>
</Section>

Section avec 3 cards

<Section spacing="lg">
  <Container size="lg">
    <Grid columns={3} gap="md">
      <Card>Audience</Card>
      <Card>ABConsent</Card>
      <Card>ServerSide</Card>
    </Grid>
  </Container>
</Section>

Section deux colonnes

Un layout progressif

La colonne texte reste lisible. La seconde colonne peut accueillir une preview, une image produit ou une liste de benefices.

Activation maitrisee

Une surface de contenu simple, alignee avec les gutters et les sections.

Grille de logos

Sirdata

Audience

ABConsent

ServerSide

Utiliser columns="auto" lorsque le nombre d’elements varie ou lorsque les largeurs peuvent s’adapter naturellement.

Page marketing complete

<Section spacing="xl" tone="muted">
  <Container as="main" size="lg">
    <h1>Plateforme data pour equipes responsables</h1>
  </Container>
</Section>

<Section spacing="lg" tone="surface">
  <Container size="lg">
    <Grid columns={3}>
      <Card>...</Card>
      <Card>...</Card>
      <Card>...</Card>
    </Grid>
  </Container>
</Section>

<Section spacing="lg">
  <Container size="md">
    <h2>Une mise en place progressive</h2>
    <p>Introduire les primitives layout avant de refondre les composants visuels.</p>
  </Container>
</Section>

Tokens

--px-container-sm: 40rem;
--px-container-md: 60rem;
--px-container-lg: 70rem;
--px-container-xl: 80rem;
--px-gutter: clamp(var(--spacing-inline-lg), 4vw, var(--spacing-inline-xxl));

--px-section-sm: var(--spacing-layout-sm);
--px-section-md: var(--spacing-layout-md);
--px-section-lg: var(--spacing-layout-lg);
--px-section-xl: var(--spacing-layout-xl);

--px-grid-gap-sm: var(--spacing-layout-xs);
--px-grid-gap-md: var(--spacing-layout-sm);
--px-grid-gap-lg: var(--spacing-layout-md);

Composition rules

Do	Don’t
Composer les pages avec Section > Container > contenu.	Appliquer un max-width sur chaque composant enfant.
Utiliser size="md" pour les contenus longs.	Utiliser full pour du texte courant.
Utiliser Grid pour les listes de cards, logos ou benefices.	Imposer une grille custom differente par page.
Garder les fonds simples : default, muted, surface, dark.	Transformer Section en hero visuel complexe.

Migration progressive

1. Importer @sirdata/pixel/styles dans le site existant.
2. Remplacer les wrappers globaux par .pixel-container.
3. Encadrer les blocs de page avec .pixel-section.
4. Remplacer les grilles custom simples par .pixel-grid.
5. Migrer ensuite les composants visuels page par page.