Un site sur WebBlocks UI construit uniquement avec WebBlocks UI

Cette démo présente le projet, le modèle en couches, les primitives fournies, les patterns et le comportement JavaScript en n'utilisant que les ressources du paquet et les classes wb-* qu'il livre.

Paquet uniquement Aucun CSS maison Aucun JS maison

Ce que cette page démontre

WebBlocks UI sait se documenter lui-même sans couche de présentation séparée. Ce guide n'ajoute ni CSS d'appoint, ni script utilitaire, ni classe inventée.

Ce que contient le paquet

Couches d'architecture

6

Foundation, utilities, layout, primitives, patterns, icons

Dépendances

0

Le paquet lui-même n'exige aucun framework

JavaScript

14+

Modules de thème, overlays, navigation, retours et disclosure

Icons

173

Usage des icônes en mask-image, piloté par les classes

Lire le système dans le bon ordre

Démarrage Inclusion des fichiers, attributs racine, premier flux

Commence par cette page s'il te faut le chemin d'installation correct le plus court pour un vrai projet.

Architecture Le modèle en six couches

Utilise cette page quand tu dois comprendre où se placent les tokens, le layout, les primitives, les patterns et les icons.

Foundation Tokens, titres, axes de thème

Utilise cette page pour les attributs de thème sur la racine, le mode sombre, les presets, la typographie par défaut, les tokens d'espacement et le style des éléments bruts.

Layout Conteneurs, grilles, shells

Utilise cette page pour wb-container, wb-grid, wb-row, la navbar, la sidebar et la structure du page-shell.

Primitives Les briques livrées

Utilise cette page pour inspecter les contrôles, surfaces, formulaires et interaction shells réellement livrés.

Icons Référence des classes mask-image

Utilise cette page quand il te faut les noms de classes des icônes livrées, le comportement des alias et la voie de l'icône <i> pilotée par les classes.

Patterns Compositions à l'échelle de l'écran

Utilise cette page quand la question porte sur le type de page, la hiérarchie ou la composition plutôt que sur une primitive isolée.

Playground Aperçu en direct, HTML uniquement

Utilise cet outil pour coller du HTML simple, le rendre avec les vraies ressources de WebBlocks UI et valider rapidement des extraits générés par l'IA ou écrits à la main.

Utilities Aides d'espacement, de texte et d'alignement

Utilise cette page pour les aides d'espacement, les tailles de texte, les utilities de couleur, les aides de visibilité et les derniers ajustements de composition.

JavaScript Hooks de données et API publiques

Utilise cette page quand le modèle d'interaction compte et qu'il te faut le bon pattern de déclencheur ou le nom du module public.

Partir d'un exemple réel livré avec le paquet

Quand le rôle de la page est déjà clair, copier l'exemple de pattern le plus proche de ce guide est plus sûr que de reconstruire l'écran de mémoire. Pars de toute la structure, remplace le contenu, puis élague franchement.

Tableau de bord d'administration Sidebar, topbar, statistiques, tableaux

À utiliser quand la page est très applicative et demande de la navigation, des indicateurs, des actions de ligne et des données faciles à parcourir.

Réglages d'administration Formulaires plus longs et actions par sections

À utiliser quand la page est portée par des réglages groupés, des actions destructrices et des flux de formulaire plus lents.

Connexion Parcours d'entrée resserré

À utiliser quand l'écran doit rester étroit, calme et centré sur une seule tâche de formulaire.

Accueil public Rythme du hero et surfaces promotionnelles

À utiliser quand la page est portée par le marketing et demande un flux de contenu plus calme que la densité d'administration.

Content Shell Documentation, onboarding et parcours centrés sur le texte

À utiliser quand la page a besoin de structure, de références et d'une progression lisible plutôt que d'habillage produit.