Système de design Foundation.

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 [email protected] et [email protected], 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

<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>

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')});

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}}