Astro 7 · CSS natif · Web Components

De bonnes bases.
À vous la suite.

Un atelier pour vos prochains projets. Des styles qui se composent, des composants qui s’assemblent et le Web comme fondation.

Explorer les composants Comprendre la structure

01 Le contenu d’abord02 La cascade comme alliée03 L’interaction progressive

01 / Fondations

Un langage commun.

Des valeurs brutes aux intentions, puis aux composants.
Changez une intention, faites évoluer tout le système.

01 / PRIMITIVE--color-lime-200

La valeur : oklch(92% 0.16 118)

02 / SEMANTIC--color-accent

L’intention : une couleur d’accent.

03 / COMPONENT--button-background

Le contexte : le fond d’un bouton.

Canvas--color-canvas

Surface--color-surface

Texte--color-text

Accent--color-accent

Action--color-action

02 / Compositions

L’espace fait le travail.

Inspirées d’Every Layout, les compositions s’adaptent
à la place disponible et aux besoins du contenu.

Stack

Un rythme vertical constant.

Cluster

Des éléments qui suivent le flux.

Grid

Autant de colonnes que possible.

Sidebar

Une largeur fixe, une part flexible.

Switcher

Une rangée devient une colonne.

Center

Une mesure, de l’espace autour.

Aussi inclus : Box, Cover, Frame, Reel et Container. En classes CSS ou en composants Astro.

03 / Composants

Composez à votre façon.

HTML d’abord. JavaScript au besoin.

Explorer les formulaires accessibles: champs natifs, groupes et messages d’erreur.

Card / Compound component

À votre image.

Un en-tête, un contenu, un pied de carte. Chaque partie est indépendante, l’ensemble reste cohérent.

Exception / data-variant

Une autre intention.
La même structure.

Une variante change les variables du composant. La composition et le contenu gardent leur liberté.

---
import * as Card from '@/components/ui/card';
---
<Card.Root>
  <Card.Header><h3>À votre image.</h3></Card.Header>
  <Card.Body><p>Votre contenu, vos compositions.</p></Card.Body>
  <Card.Footer><a href="/projet">Découvrir</a></Card.Footer>
</Card.Root>

Web Component / Dialog

Une interaction,
à sa juste place.

Une modale native, avec gestion du focus et fermeture par Échap.

Ouvrir la démonstration

HTML natif / Accordion

Pourquoi le Light DOM ?

Les styles globaux, les utilitaires et les tokens atteignent les éléments internes. Les composants s’intègrent naturellement à la cascade CUBE CSS.

Et sans JavaScript ?

Les cartes et compositions restent identiques. Les accordéons sont natifs, les panneaux d’onglets sont tous lisibles et le contenu de la modale apparaît dans la page.

Comment personnaliser un projet ?

Commencez par les primitives, ajustez les tokens sémantiques, puis composez vos pages. Ajoutez des tokens de composant seulement pour les besoins locaux.

De bonnes bases.À vous la suite.