# Système de design Foundation

## Aperçu de l’interface du système de design Foundation

Validez les incréments de pages du livret et le nombre d’exemplaires, examinez les détails dans Reveal et consignez localement l’état de la validation.

## Référence de conception du système de design Foundation

Foundation for Sites 6.9.0 : paramètres et CSS par défaut compilé, avec jQuery 3.7.1. Les noms préfixés par un signe dollar sont des paramètres Sass, et non des propriétés personnalisées CSS accessibles dans le navigateur. Les règles d’impression et les couleurs de couverture sont des choix originaux de l’exemple.

### Palette Foundation

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| $primary-color | #1779ba | Rôle d’action principal issu de foundation-palette. |
| $secondary-color | #767676 | Rôle secondaire. |
| $success-color | #3adb76 | Entrée de la palette pour les réussites. |
| $warning-color | #ffae00 | Entrée de la palette pour les avertissements. |
| $alert-color | #cc4b37 | Rôle d’erreur ou d’alerte. |
| $body-font-color | #0a0a0a | Texte de lecture par défaut. |
| $body-background | #fefefe | Arrière-plan de page par défaut. |
| $light-gray | #e6e6e6 | Source neutre claire pour les surfaces et les bordures. |
| $medium-gray | #cacaca | Ton neutre intermédiaire. |
| $dark-gray | #8a8a8a | Ton neutre foncé. |
### Typographie et géométrie

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| $global-font-size | 100% | Taille de police de base relative au navigateur. |
| $global-lineheight | 1.5 | Hauteur de ligne du corps de texte. |
| $body-font-family | Helvetica Neue, Helvetica, Roboto, Arial, sans-serif | Préférence de famille par défaut. |
| $global-margin | 1rem | Rythme de marge de base. |
| $global-padding | 1rem | Rythme de remplissage de base. |
| $global-radius | 0 | Angles droits par défaut. |
| $global-width | rem-calc(1200) | Largeur maximale par défaut de la grille. |
| $button-padding | 0.85em 1em | Espacement vertical et horizontal par défaut des boutons. |
### Points de rupture de XY Grid

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| small | 0 | Plage de base. |
| medium | 640px | Répartition 7/5 entre le formulaire d’épreuve et l’aperçu. |
| large | 1024px | Grande plage. |
| xlarge | 1200px | Point de rupture Sass disponible. |
| xxlarge | 1440px | Point de rupture Sass disponible. |
| $breakpoint-classes | small medium large | Seules ces classes de largeur nommées sont générées par le paramètre par défaut. |
### Règles explicites du bureau d’épreuves

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| booklet validator | integer, 4–200, divisible by 4 | Hypothèse de précontrôle originale implémentée dans Abide. |
| copies validator | integer, 1–10 | Limite locale originale de quantité d’épreuves. |
| Page heading | 38px / 1.15; mobile 30px | Ajustement typographique original. |
| Form padding | 24px; mobile 18px | Mise en page originale et compacte du formulaire. |
| Cover colors | #e3d8bd / #718474 / #31483b | Illustration originale, sans valeurs de la palette Foundation. |
## Guide complet du système de design Foundation

Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle.

Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources.

## Système de design Foundation pour les sites avec un environnement d’exécution réel

### Foundation pour les sites avec un environnement d’exécution réel

> Foundation for Sites associe un framework CSS adaptatif à des plug-ins JavaScript. Le bureau d’épreuves utilise XY Grid pour la mise en page, Abide pour la validation et Reveal pour sa boîte de dialogue de révision. Son environnement d’exécution compilé est chargé après jQuery 3.7.1, et $(document).foundation() initialise les attributs de données une fois la page créée.

Il ne faut pas confondre ce produit avec Foundation for Emails. La page utilise des formulaires de navigateur, la validation JavaScript et une fenêtre modale ; son balisage n’est pas un modèle d’e-mail. L’exemple hors ligne regroupe les véritables fichiers 6.9.0 et ajoute un petit script original au lieu de produire une imitation statique de ces composants.

Consultez la spécification associée

## Paramètres Sass et palette par défaut du système de design Foundation

### Paramètres Sass et palette par défaut

Le tableau de référence répertorie les paramètres de la configuration Sass installée. La palette par défaut comprend les couleurs principales #1779ba, secondaire #767676, de réussite #3adb76, d’avertissement #ffae00 et d’alerte #cc4b37. Elles définissent les rôles chromatiques du framework ; la couverture chaleureuse du livret est une création originale CSS dotée de sa propre palette.

Les paramètres préfixés par un signe dollar sont des valeurs d’entrée utilisées lors de la compilation. Ce ne sont pas des propriétés personnalisées CSS auxquelles on peut affecter une valeur dans un attribut de style du navigateur. Pour modifier le thème du framework, utilisez une compilation Sass, ou ajoutez des règles CSS ordinaires et clairement ciblées après la feuille de style compilée pour apporter un ajustement propre à un écran. L’exemple adopte cette dernière approche pour son titre, l’espacement interne du formulaire et l’arrière-plan.

Consultez la spécification associée

## Géométrie par défaut et hiérarchie de lecture locale du système de design Foundation

### Géométrie par défaut et hiérarchie de lecture locale

Foundation utilise par défaut une taille de police de 100 % relative au navigateur, une hauteur de ligne de 1.5 pour le corps de texte et une pile de polices Helvetica Neue/Helvetica/Roboto/Arial. Le rayon global est nul, ce qui donne par défaut des angles plus droits que dans de nombreuses bibliothèques de composants actuelles. Les champs de saisie, les encadrés d’information et le formulaire d’épreuve conservent ce caractère, sans adopter un traitement aux grands arrondis qui serait sans rapport avec le reste.

L’application définit le titre de page à 38 px avec une hauteur de ligne de 1.15, ramenée à 30 px sur mobile. Le texte d’introduction mesure 18 px. L’illustration emploie des lettres grasses empilées et un cercle simple pour évoquer l’impression, tandis que le formulaire reste une surface de travail blanche et stable. Ces choix locaux sont détaillés dans le fichier CSS fourni.

Consultez la spécification associée

## XY Grid et choix des gouttières dans le système de design Foundation

### Grille XY et choix de gouttière

Le conteneur grid-container comprend une ligne grid-x grid-margin-x. Ses deux cellules, medium-7 et medium-5, répartissent les douze colonnes entre le formulaire et l’aperçu du livret au-delà de 640 px. Sous ce point de rupture, elles s’empilent dans l’ordre du document. La ligne imbriquée Pages/Proof utilise des cellules small-6 afin que les deux champs numériques compacts restent côte à côte sur un téléphone.

Foundation prend en charge les grilles avec marges et celles avec espacement interne. Cet exemple choisit systématiquement les gouttières par marge dans le conteneur, plutôt que de mélanger les deux types sur une même ligne. La carte des points de rupture comprend xlarge et xxlarge pour une utilisation avec Sass, mais le paramètre breakpoint-classes génère par défaut des classes de largeur small, medium et large. La présence d’une entrée dans la carte ne signifie pas automatiquement que toutes les classes utilitaires correspondantes existent dans le fichier compilé.

Consultez la spécification associée

## Déclarer les règles de validation réelles dans le système de design Foundation

### Enregistrer les règles de validation réelles

Le formulaire utilise data-abide avec novalidate et data-validate-on=submit afin d’éviter le réagencement des erreurs déclenché par les changements lors d’un clic sur un bouton. Chaque élément span.form-error renvoie à son champ via data-form-error-for. Un encadré d’alerte portant l’attribut data-abide-error fournit un récapitulatif pour l’ensemble du formulaire. Les erreurs des champs obligatoires pour le titre et la case de précontrôle sont gérées avec deux validateurs numériques explicites.

Le validateur du livret accepte les entiers de quatre à deux cents qui sont divisibles par quatre. Celui du nombre d’exemplaires accepte les entiers de un à dix. Les deux sont enregistrés dans Foundation.Abide.defaults.validators avant l’initialisation, puis référencés par data-validator. Dans ce scénario testé, l’attribut natif step ne suffisait pas à imposer le pas de quatre pages ; l’implémentation ne s’appuie donc pas sur lui. L’hypothèse des quatre pages est propre à cet exemple et ne s’applique pas à tous les processus d’impression.

1. Saisissez cinq pages et envoyez le formulaire : la révision doit rester fermée.

2. Saisissez seize pages, indiquez un titre et cochez la case de précontrôle.

3. Vérifiez les valeurs capturées avant d’enregistrer l’épreuve locale.

Consultez la spécification associée

## Associer l’affichage des erreurs à la navigation dans le système de design Foundation

### Associer l’affichage des erreurs à la navigation

Lors de l’événement forminvalid.zf.abide, l’application place le focus sur le premier champ doté de data-invalid. L’utilisateur arrive ainsi directement au champ à corriger, tandis que l’encadré d’alerte explique le problème général. Les éléments span d’erreur des champs sont associés via aria-describedby ; le message ne se limite donc pas à un indicateur rouge affiché à côté d’un champ sans nom accessible.

Le flux complet des événements est visible dans l’exemple JavaScript. L’événement submit ordinaire est annulé afin que le navigateur ne puisse pas accéder à une destination inexistante. Seul l’événement formvalid.zf.abide crée la copie des données en attente et ouvre la fenêtre de révision. C’est important : associer directement la boîte de dialogue de révision au bouton d’envoi contournerait le résultat de la validation.

Consultez la spécification associée

## Réviser une copie des données dans Reveal avec le système de design Foundation

### Examiner un instantané dans Reveal

La fenêtre modale porte l’attribut data-reveal et est associée à son titre par aria-labelledby. Le gestionnaire de formulaire valide crée un objet en attente et construit sa liste de définitions avec textContent. Reveal s’ouvre via Foundation API, fournit le comportement modal et se ferme au moyen des boutons data-close ou du gestionnaire de confirmation.

Continuer la modification ferme la boîte de dialogue sans enregistrer de résultat. Enregistrer l’épreuve locale écrit les mêmes valeurs en attente dans l’encart d’état avant la fermeture. L’icône de fermeture possède un libellé explicite. La confirmation ne prétend pas qu’un fichier a été téléversé ni qu’une commande d’impression a été passée, car l’application ne prend en charge aucune de ces opérations.

- Reveal affiche les valeurs recueillies lors de la validation du formulaire.

- L’annulation ne modifie aucun résultat enregistré localement.

- La confirmation enregistre uniquement l’état de l’aperçu, et non une commande externe.

Consultez la spécification associée

## Épingler et charger la chaîne de dépendances du système de design Foundation

### Épingler et charger la chaîne de dépendances

Installez foundation-sites@6.9.0 et jquery@3.7.1, puis copiez CSS compilé, Foundation JavaScript et jQuery dans les ressources locales. Chargez la feuille de style avant les ajustements propres à la page. Chargez d’abord jQuery, puis Foundation et enfin le script de l’application ; defer préserve cet ordre après l’analyse du document.

Enregistrez les validateurs personnalisés avant d’appeler $(document).foundation(). Les enregistrer après l’initialisation crée une dépendance temporelle évitable. L’exemple actuel utilise l’environnement d’exécution compilé complet pour garantir sa reproductibilité. Un bundle de production peut sélectionner des plugins et leurs dépendances, mais ne doit pas supprimer Abide ou Reveal si leurs attributs data sont conservés dans le balisage.

Consultez la spécification associée

## Le contrôle préalable du système de design Foundation relève d’une décision locale, pas d’une approbation pour la production

### Le précontrôle est une décision locale, pas une approbation de production

Le diagramme et la règle sur le nombre de pages rendent le contexte de validation concret, mais ne constituent pas des spécifications de production pour une imprimerie donnée. L’exemple demande explicitement aux utilisateurs de confirmer les contraintes réelles auprès de leur prestataire de production. Le nombre d’exemplaires indiqué est une limite propre à cet exemple local, et non une information d’inventaire ou de prix.

Un véritable processus de soumission nécessiterait l’inspection des fichiers, une validation côté serveur et une réponse d’acceptation traçable. Foundation fournit les éléments d’interface, mais ces contrôles métier doivent être mis en place par l’application. En explicitant cette limite, le lecteur peut réutiliser le modèle de validation et de révision sans reprendre une affirmation de réussite trompeuse.

Consultez la spécification associée

## Exemples de composants du système de design Foundation

### Balisage du bureau de validation des épreuves

XY Grid, erreurs de formulaire explicites, case à cocher de contrôle prépresse, encarts d’information et confirmation Reveal.

```
<main class="grid-container proof-desk"><header><p class="eyebrow">FOUNDATION / PRINT PROOF DESK</p><h1>Check the job before it leaves the desk.</h1><p class="lead">A local proof checklist built with XY Grid, Abide and Reveal.</p></header><div class="grid-x grid-margin-x"><section class="cell medium-7"><form id="proof-form" data-abide data-validate-on="submit" novalidate><div data-abide-error class="alert callout" style="display:none" role="alert"><p>Check the marked fields before reviewing this proof.</p></div><label for="job">Job title<input id="job" type="text" required pattern=".*\S.*" placeholder="Autumn studio booklet" aria-describedby="job-error"></label><span class="form-error" id="job-error" data-form-error-for="job">Enter a job title.</span><div class="grid-x grid-margin-x"><div class="cell small-6"><label for="pages">Pages<input id="pages" data-validator="booklet" type="number" value="16" min="4" max="200" step="4" required aria-describedby="pages-error"></label><span class="form-error" id="pages-error" data-form-error-for="pages">Use a multiple of four, from 4 to 200.</span></div><div class="cell small-6"><label for="copies">Proof copies<input id="copies" data-validator="copies" type="number" value="2" min="1" max="10" required aria-describedby="copies-error"></label><span class="form-error" id="copies-error" data-form-error-for="copies">Use a whole number from 1 to 10.</span></div></div><label for="stock">Paper stock<select id="stock"><option>Uncoated / warm white</option><option>Coated / bright white</option><option>Recycled / natural</option></select></label><fieldset class="fieldset"><legend>Preflight check</legend><input id="bleed" type="checkbox" required aria-describedby="bleed-error"><label for="bleed">Bleed and safe area have been checked</label><span class="form-error" id="bleed-error" data-form-error-for="bleed">Complete the preflight check.</span></fieldset><div class="button-group"><button type="submit" class="button">Review proof</button><button type="reset" class="button hollow secondary">Reset</button></div></form><div id="result" class="callout secondary" role="status">No proof recorded. This preview does not submit a print order.</div></section><aside class="cell medium-5"><div class="paper-preview" aria-label="Original booklet cover illustration"><span>STUDIO<br>NOTES</span><div class="paper-circle"></div><strong>08 / AUTUMN</strong></div><div class="callout"><h2 class="h5">Why four-page increments?</h2><p>This example assumes folded booklet signatures. It is a local preflight rule, not a universal printing requirement.</p><p>Confirm production constraints with the actual printer before using this pattern.</p></div></aside></div></main><div class="reveal" id="proof-review" data-reveal aria-labelledby="review-title"><h2 id="review-title">Review the proof details</h2><dl id="proof-summary"></dl><p>This confirms only the local example. No file is uploaded and no print order is created.</p><button id="confirm" class="button">Record local proof</button><button class="button hollow secondary" data-close>Keep editing</button><button class="close-button" data-close aria-label="Close review" type="button"><span aria-hidden="true">×</span></button></div>
```

Référence du code

- Le formulaire utilise data-abide et novalidate afin qu’Abide gère les erreurs.

- Reveal est identifié par un ID unique et data-reveal.

### Validateurs Abide personnalisés et processus Reveal

Les validateurs sont enregistrés avant l’initialisation de Foundation ; formvalid ouvre un instantané dans Reveal.

```
Foundation.Abide.defaults.validators.booklet=$el=>{const n=Number($el.val());return Number.isInteger(n)&&n>=4&&n<=200&&n%4===0};
Foundation.Abide.defaults.validators.copies=$el=>{const n=Number($el.val());return Number.isInteger(n)&&n>=1&&n<=10};
$(document).foundation();let pending=null;
$('#proof-form').on('submit',event=>event.preventDefault()).on('formvalid.zf.abide',()=>{pending={title:$('#job').val().trim(),pages:Number($('#pages').val()),copies:Number($('#copies').val()),stock:$('#stock').val()};const list=document.getElementById('proof-summary');list.replaceChildren();for(const[label,value]of [['Job',pending.title],['Pages',pending.pages],['Proof copies',pending.copies],['Stock',pending.stock]]){const dt=document.createElement('dt'),dd=document.createElement('dd');dt.textContent=label;dd.textContent=value;list.append(dt,dd);}$('#proof-review').foundation('open');}).on('forminvalid.zf.abide',()=>{document.querySelector('#proof-form [data-invalid]')?.focus()}).on('reset',()=>{$('#result').text('No proof recorded. This preview does not submit a print order.')});
$('#confirm').on('click',()=>{$('#result').text('Recorded locally: '+pending.title+' — '+pending.pages+' pages, '+pending.copies+' proof copies. No order was created.');$('#proof-review').foundation('close')});
```

Référence du code

- Dans le parcours Abide testé, l’attribut step seul n’imposait pas des incréments de quatre pages ; le validateur personnalisé s’en charge.

- Seul un formulaire valide ouvre la boîte de dialogue de révision.

### Illustration de couverture originale et ajustements de mise en page

Illustration CSS et typographie propre à la page, séparées des paramètres par défaut de Foundation.

```
body{background:#f6f5f1}.proof-desk{max-width:1100px;padding-top:32px;padding-bottom:32px}header{margin-bottom:32px;max-width:760px}.eyebrow{font-size:12px;letter-spacing:.14em;font-weight:700;color:#596456}h1{font-size:38px;line-height:1.15}.lead{font-size:18px;color:#53606a}form{background:white;padding:24px;border:1px solid #ddd}.paper-preview{background:#e3d8bd;aspect-ratio:4/3;padding:24px;position:relative;overflow:hidden;margin-bottom:20px}.paper-preview span{position:relative;z-index:1;font-size:36px;line-height:1;font-weight:700;letter-spacing:-.04em;color:#31483b}.paper-circle{position:absolute;width:75%;aspect-ratio:1;background:#718474;border-radius:50%;top:25%;left:40%}.paper-preview strong{position:absolute;bottom:20px;left:24px;color:#31483b;font-size:12px;letter-spacing:.13em}.callout h2{font-weight:600}#result{margin-top:16px}.reveal dl{display:grid;grid-template-columns:110px 1fr;gap:10px}.reveal dd{overflow-wrap:anywhere}.button:focus-visible{outline:3px solid #143e5b;outline-offset:3px}@media(max-width:639px){h1{font-size:30px}form{padding:18px}.paper-preview{margin-top:16px}}
```

Référence du code

- Toutes les couleurs de la couverture sont des choix propres à l’application.

## Configuration de l’agent du système de design Foundation

### Point de départ de l’implémentation

Le fichier app.js fourni enregistre les validateurs Abide avant l’initialisation et relie Reveal à un événement de formulaire valide. Enregistrez le fichier CSS original sous le nom style.css. L’aperçu local intègre ces mêmes dépendances. Le conteneur HTML comprend tout le balisage du corps ; enregistrez les exemples fournis d’interaction et de CSS sous les noms de fichiers indiqués ici.

```
<!-- npm install foundation-sites@6.9.0 jquery@3.7.1
mkdir -p assets
cp node_modules/foundation-sites/dist/css/foundation.min.css assets/
cp node_modules/foundation-sites/dist/js/foundation.min.js assets/
cp node_modules/jquery/dist/jquery.min.js assets/ -->
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Proof desk</title>
<link rel="stylesheet" href="assets/foundation.min.css">
<link rel="stylesheet" href="style.css">
<script src="assets/jquery.min.js" defer></script>
<script src="assets/foundation.min.js" defer></script>
<script src="app.js" defer></script></head>
<body><main class="grid-container proof-desk"><header><p class="eyebrow">FOUNDATION / PRINT PROOF DESK</p><h1>Check the job before it leaves the desk.</h1><p class="lead">A local proof checklist built with XY Grid, Abide and Reveal.</p></header><div class="grid-x grid-margin-x"><section class="cell medium-7"><form id="proof-form" data-abide data-validate-on="submit" novalidate><div data-abide-error class="alert callout" style="display:none" role="alert"><p>Check the marked fields before reviewing this proof.</p></div><label for="job">Job title<input id="job" type="text" required pattern=".*\S.*" placeholder="Autumn studio booklet" aria-describedby="job-error"></label><span class="form-error" id="job-error" data-form-error-for="job">Enter a job title.</span><div class="grid-x grid-margin-x"><div class="cell small-6"><label for="pages">Pages<input id="pages" data-validator="booklet" type="number" value="16" min="4" max="200" step="4" required aria-describedby="pages-error"></label><span class="form-error" id="pages-error" data-form-error-for="pages">Use a multiple of four, from 4 to 200.</span></div><div class="cell small-6"><label for="copies">Proof copies<input id="copies" data-validator="copies" type="number" value="2" min="1" max="10" required aria-describedby="copies-error"></label><span class="form-error" id="copies-error" data-form-error-for="copies">Use a whole number from 1 to 10.</span></div></div><label for="stock">Paper stock<select id="stock"><option>Uncoated / warm white</option><option>Coated / bright white</option><option>Recycled / natural</option></select></label><fieldset class="fieldset"><legend>Preflight check</legend><input id="bleed" type="checkbox" required aria-describedby="bleed-error"><label for="bleed">Bleed and safe area have been checked</label><span class="form-error" id="bleed-error" data-form-error-for="bleed">Complete the preflight check.</span></fieldset><div class="button-group"><button type="submit" class="button">Review proof</button><button type="reset" class="button hollow secondary">Reset</button></div></form><div id="result" class="callout secondary" role="status">No proof recorded. This preview does not submit a print order.</div></section><aside class="cell medium-5"><div class="paper-preview" aria-label="Original booklet cover illustration"><span>STUDIO<br>NOTES</span><div class="paper-circle"></div><strong>08 / AUTUMN</strong></div><div class="callout"><h2 class="h5">Why four-page increments?</h2><p>This example assumes folded booklet signatures. It is a local preflight rule, not a universal printing requirement.</p><p>Confirm production constraints with the actual printer before using this pattern.</p></div></aside></div></main><div class="reveal" id="proof-review" data-reveal aria-labelledby="review-title"><h2 id="review-title">Review the proof details</h2><dl id="proof-summary"></dl><p>This confirms only the local example. No file is uploaded and no print order is created.</p><button id="confirm" class="button">Record local proof</button><button class="button hollow secondary" data-close>Keep editing</button><button class="close-button" data-close aria-label="Close review" type="button"><span aria-hidden="true">×</span></button></div>
</body></html>
```

### Un prompt pour votre projet

```
Partez du bureau de validation des épreuves pour l’impression Foundation 6.9.0 fourni, de son balisage XY Grid, de ses validateurs Abide et de son processus Reveal. Conservez les contrôles du nombre entier et des multiples de quatre pour le nombre de pages, ainsi que la validation déclenchée par la soumission ; préservez les libellés et leurs associations avec les erreurs. N’ouvrez la fenêtre de révision Reveal native que lorsque les détails de l’épreuve sont valides, et distinguez l’annulation de la confirmation locale. Conservez l’initialisation complète et les ajustements de mise en page CSS d’origine ; ne remplacez pas les validateurs par de simples classes d’erreur visuelles et ne laissez pas entendre qu’une impression a été commandée.
```

## Sources et périmètre du système de design Foundation

Foundation for Sites 6.9.0 avec jQuery 3.7.1. Les règles d’impression et l’illustration sont des exemples originaux. Aucun téléversement de fichier ni aucune commande d’impression ne sont mis en œuvre.

- Styles globaux Fondations Sass et palette.

- XY Grid Largeur des cellules et types de gouttières.

- Abide Règles et événements de validation.

- Reveal Structure modale et API.

- JavaScript Chargement et initialisation des dépendances.

- Formulaires Balisage et styles natifs du formulaire.

## Ressources associées au système de design Foundation

### Framework7

Un carnet de croquis natif Framework7 avec de véritables actions swipeout, les valeurs explicites du thème iOS, une commande d’action accessible au clavier et une liste filtrée qui conserve les études terminées jusqu’à la réinitialisation.

### gluestack UI

Créez une liste de préparation avec les véritables créateurs Button et Input de gluestack, les couleurs sémantiques explicites de la v5 et le code source complet de React Native Web. Examinez la validation, les actions au clavier, l’identité stable des éléments et le calcul local de la progression de préparation.

### Headless UI

Headless UI fournit des composants d’interaction React sans style prédéfini pour les boîtes de dialogue, les listes de sélection et les interrupteurs. Ce guide porte sur la composition de leur comportement natif en matière de focus, de sélection et de fenêtres contextuelles avec du CSS ordinaire, à partir d’un flux de partage de documents comme exemple fonctionnel.


- [Référence de mise en œuvre](https://get.foundation/sites/docs/abide.html)
- [Source](https://get.foundation/sites/docs/global.html)
- [Source](https://get.foundation/sites/docs/xy-grid.html)
- [Source](https://get.foundation/sites/docs/abide.html)
- [Consultez la spécification associée](https://get.foundation/sites/docs/javascript.html)
- [Consultez la spécification associée](https://get.foundation/sites/docs/global.html)
- [Consultez la spécification associée](https://get.foundation/sites/docs/xy-grid.html)
- [Consultez la spécification associée](https://get.foundation/sites/docs/abide.html)
- [Consultez la spécification associée](https://get.foundation/sites/docs/reveal.html)
- [Référence du code](https://get.foundation/sites/docs/xy-grid.html)
- [Référence du code](https://get.foundation/sites/docs/abide.html)
- [Référence du code](https://get.foundation/sites/docs/global.html)
- [Styles globaux Fondations Sass et palette.](https://get.foundation/sites/docs/global.html)
- [XY Grid Largeur des cellules et types de gouttières.](https://get.foundation/sites/docs/xy-grid.html)
- [Abide Règles et événements de validation.](https://get.foundation/sites/docs/abide.html)
- [Reveal Structure modale et API.](https://get.foundation/sites/docs/reveal.html)
- [JavaScript Chargement et initialisation des dépendances.](https://get.foundation/sites/docs/javascript.html)
- [Formulaires Balisage et styles natifs du formulaire.](https://get.foundation/sites/docs/forms.html)