Services publics et éducation · Nouvelle ressource
Système de design KERN.
Créez une interface native KERN avec une typographie vérifiée, des thèmes sémantiques, des panneaux dépliables et un parcours de confirmation réversible.
Système de design KERN : HTML natif, CSS et comportement du navigateur
Contenu du package
KERN native 2.8.2 fournit les composants CSS et les polices. L’exemple importe directement ces fichiers : le bouton, la zone de texte, Details et Dialog sont des éléments natifs avec des classes KERN. Aucun fournisseur React ni constructeur de composant JavaScript n’est nécessaire. L’application fournit la logique de décision autour de la boîte de dialogue ; le style, à lui seul, n’efface pas un champ de saisie.
Installez le package natif dans la version épinglée.
Copiez ensemble sa feuille de style et ses polices, en conservant leurs chemins relatifs.
Enregistrez l’exemple complet ci-dessous et servez le répertoire via HTTP.
Système de design KERN : Fira Sans et typographie adaptative
Chargez explicitement la typographie
kern.min.css référence Fira Sans ; fonts/fira-sans.css déclare les fontes et les ressources WOFF2 associées par chemin relatif. Conservez le répertoire des polices intact pour éviter qu’une feuille de style apparemment correcte n’utilise silencieusement une police de remplacement. Les tailles de texte statique restent de 16, 18 et 21px, tandis que les jetons adaptatifs de titre et de sous-titre changent à 768px. Utilisez un élément de titre pour définir la hiérarchie et la classe KERN appropriée pour son traitement visuel. L’exemple conserve un seul h1 et donne à la boîte de dialogue son propre h2.
Système de design KERN : espacement, largeur et mise en page adaptative
Distinguez les jetons de la composition
KERN expose des jetons d’espacement nommés de 0 à 192 px, avec des incréments de 2 et 4 px pour les petites valeurs. Les jetons de bordure et de rayon suivent des échelles distinctes. L’exemple adopte un rythme vertical de 24 px et une rangée d’actions avec retour à la ligne. La largeur maximale du contenu, fixée à 800 px, et la largeur maximale de la boîte de dialogue, fixée à 560 px, sont des choix explicites propres à l’application ; aucune des deux n’est présentée comme une largeur universelle de conteneur KERN. Sur les écrans étroits, les marges internes de la page passent à 16 px et la boîte de dialogue reste contenue dans la fenêtre d’affichage. Aucune hauteur minimale correspondant à celle de la fenêtre n’est appliquée au document, ce qui évite une boucle de redimensionnement lors de son intégration.
Couleurs sémantiques et apparence du système de design KERN
Changez les rôles, pas les valeurs hexadécimales isolées
Le paquet utilise les propriétés sémantiques CSS pour le texte, les actions, l’arrière-plan et la mise en évidence du focus. Les palettes claire et sombre modifient ces rôles de façon cohérente. Par exemple, en mode clair, action-default correspond à darkblue-700 et, en mode sombre, à darkblue-300 ; sa couleur de premier plan passe quant à elle du blanc au noir. L’exemple définit data-kern-theme sur html et présente un bouton à l’état enfoncé. La préférence ne s’applique qu’à ce document ; elle n’est pas enregistrée. Supprimer l’attribut explicite permet à la feuille de style de suivre prefers-color-scheme.
Une note modifiable avec libellé — système de design KERN
Gardez les consignes à portée de main
La zone de texte utilise kern-form-input__input à l’intérieur de kern-form-input, avec un véritable libellé associé à l’identifiant de la zone. L’aide possède son propre identifiant et reste liée au champ via aria-describedby. Cette note facultative est locale : l’exemple ne simule ni erreurs de champ obligatoire ni enregistrement sur un serveur. Le bouton Restaurer l’exemple rétablit la valeur initiale et place le focus sur le champ modifiable. Une zone de statut annonce le résultat sans remplacer le libellé ni déplacer le focus vers un texte non interactif.
Informations complémentaires avec Details — système de design KERN
Laissez le navigateur gérer l’affichage
L’élément details gère son propre état d’ouverture ; son élément summary sert de déclencheur. KERN ajoute kern-details__header, un petit élément span pour le titre et kern-details__body pour la présentation. L’exemple y place les informations sur la conservation, car elles sont complémentaires. Les consignes obligatoires, les erreurs et l’action de suppression restent visibles en dehors du contenu masqué. Le comportement clavier natif permet l’activation sans gestionnaire de clic supplémentaire ni état aria-expanded redondant.
Rédigez un résumé descriptif et concis.
Ne placez pas d’autre bouton ni de lien dans l’élément summary.
Pour regrouper des divulgations connexes, utilisez un accordéon au lieu de déguiser des actions sans rapport en éléments Details.
Une confirmation avec une issue sûre — système de design KERN
Structure et contrôle
La boîte de dialogue est associée à son titre h2 et décrite par une courte explication des conséquences. L’en-tête, le corps et le pied de page utilisent les classes documentées de KERN. showModal() place la boîte de dialogue native au premier plan ; close() met fin à l’interaction. Le focus initial est placé sur Conserver la note grâce à autofocus. La touche Échap ferme la boîte sans modifier le texte, et l’écouteur de fermeture replace le focus sur Supprimer la note. Seule l’action Oui, supprimer efface le contenu. Les clics sur l’arrière-plan sont volontairement sans effet, car il s’agit d’une confirmation de suppression. Cette approche suit les recommandations documentées pour les décisions importantes plutôt que de reprendre sans discernement le gestionnaire de fermeture au clic sur l’arrière-plan de l’exemple générique.
Intégration et champ d’application — système de design KERN
Installez toute la chaîne de dépendances
La configuration ci-dessous installe une version précise d’un seul paquet et copie sa CSS ainsi que son répertoire de polices. L’exemple complet inclut sa propre CSS de mise en page, l’attribut de thème racine, la structure DOM et la gestion des événements. Après l’intégration à un véritable formulaire, testez les deux issues de la boîte de dialogue, la touche Échap et les écrans étroits. Le code de KERN est distribué sous licence EUPL ; le site distingue ses contenus textuels et graphiques, soumis à la licence CC BY-NC-SA. Cet exemple original ne reprend pas l’identité d’une autorité et ne laisse pas entendre qu’un service a fait l’objet d’un audit d’accessibilité. Une véritable application nécessite toujours la persistance des données, la validation côté serveur et l’évaluation du parcours utilisateur complet.
L’ensemble du balisage du document, la mise en page CSS et le comportement de l’application ; installez les ressources avec le bloc de configuration.
html
<!doctype html><html lang="en" data-kern-theme="light"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>KERN workshop note</title><link rel="stylesheet" href="vendor/kern-2.8.2/kern.min.css"><link rel="stylesheet" href="vendor/kern-2.8.2/fonts/fira-sans.css"><style>body{margin:0;padding:clamp(16px,4vw,40px);color:var(--kern-color-layout-text-default)}main{max-width:800px;margin:auto;display:grid;gap:24px}.top,.actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.top{justify-content:space-between}.kern-dialog{max-width:min(560px,calc(100% - 32px))}textarea{width:100%;resize:vertical}#status{min-height:24px}.kern-details{width:100%}</style><main><div class="top"><span class="kern-preline">KERN · Native components</span><button class="kern-btn kern-btn--secondary" id="theme" aria-pressed="false"><span class="kern-label">Dark appearance</span></button></div><h1 class="kern-heading kern-heading--large">Workshop note</h1><p class="kern-body">Prepare a short note for your next workshop. This demonstration keeps edits only in this page.</p><div class="kern-form-input"><label class="kern-label" for="note">Your note</label><p class="kern-hint" id="hint">No personal information is needed. Nothing is submitted.</p><textarea class="kern-form-input__input" rows="5" id="note" aria-describedby="hint">Discuss accessible ways to collect workshop feedback.</textarea></div><details class="kern-details"><summary class="kern-details__header"><span class="kern-title kern-title--small">What happens to this note?</span></summary><div class="kern-details__body"><p class="kern-body">Edits live in this browser tab. Reloading restores the example text. Discarding clears the current note after confirmation; it does not delete a server record.</p></div></details><div class="actions"><button class="kern-btn kern-btn--primary" id="discard"><span class="kern-label">Discard note</span></button><button class="kern-btn kern-btn--secondary" id="restore"><span class="kern-label">Restore example</span></button></div><p id="status" class="kern-body" role="status"></p><dialog class="kern-dialog" id="confirm" aria-labelledby="confirm-title" aria-describedby="confirm-description"><header class="kern-dialog__header"><h2 class="kern-title kern-title--large" id="confirm-title">Discard this note?</h2></header><section class="kern-dialog__body"><p class="kern-body" id="confirm-description">Your current text will be cleared from this page. Choose Keep note to continue editing.</p></section><footer class="kern-dialog__footer"><button class="kern-btn kern-btn--secondary" id="keep" autofocus><span class="kern-label">Keep note</span></button><button class="kern-btn kern-btn--primary" id="clear"><span class="kern-label">Yes, discard</span></button></footer></dialog></main><script>const byId=id=>document.getElementById(id),note=byId('note'),modal=byId('confirm'),original=note.value;byId('discard').onclick=()=>modal.showModal();byId('keep').onclick=()=>modal.close('keep');byId('clear').onclick=()=>{note.value='';modal.close('discard');byId('status').textContent='Note discarded from this page.'};modal.addEventListener('close',()=>byId('discard').focus());byId('restore').onclick=()=>{note.value=original;byId('status').textContent='Example restored.';note.focus()};byId('theme').onclick=()=>{const dark=document.documentElement.dataset.kernTheme!=='dark';document.documentElement.dataset.kernTheme=dark?'dark':'light';byId('theme').setAttribute('aria-pressed',String(dark))};</script></html>
Configuration de l’agent du système de design KERN
Point de départ de l’implémentation
Aucune étape de compilation ni aucun framework d’interface utilisateur ne sont requis. Conservez le répertoire de polices, car le CSS utilise des chemins relatifs vers les fichiers WOFF2. L’archive ZIP de l’exemple complet fonctionnel, disponible dans les sources, fournit également les dépendances exactes de l’aperçu et le document complet. Extrayez-la, exécutez python3 -m http.server 8080 dans ce répertoire, puis ouvrez http://localhost:8080/kern.html. N’ouvrez pas les exemples utilisant des modules via file://.
bash
npm install --save-exact @kern-ux/[email protected]
mkdir -p vendor/kern-2.8.2
cp node_modules/@kern-ux/native/dist/kern.min.css vendor/kern-2.8.2/
cp -R node_modules/@kern-ux/native/dist/fonts vendor/kern-2.8.2/
# Save the complete HTML example below as kern.html beside vendor/.
python3 -m http.server 8080
# Open http://localhost:8080/kern.html
Un prompt pour votre projet
Prompt pour l’agent IA
Créez l’exemple local de note d’atelier avec @kern-ux/native 2.8.2 CSS et la police Fira Sans fournie. Assemblez une zone de texte kern-form-input avec libellé, un élément natif Details pour les informations complémentaires et une kern-dialog avec en-tête, corps et pied de page correctement libellés. Ouvrez-la avec showModal(), placez le focus sur Conserver la note avec autofocus, permettez à la touche Échap d’annuler sans modifier le texte et effacez la note uniquement après l’action Oui, supprimer. Au moment de la fermeture, replacez le focus sur le déclencheur et proposez l’action Restaurer l’exemple. Faites basculer data-kern-theme entre les modes clair et sombre sans inventer de nouveaux jetons de palette. Conservez les choix de largeur initiaux de l’application et gardez la note locale ; aucun téléversement, brouillon côté serveur ni affirmation concernant un service public n’est nécessaire.
05
Sources et champ d’application — système de design KERN
Démonstration originale utilisant le code de KERN. Elle ne suppose ni identité gouvernementale, ni stockage persistant, ni certification d’accessibilité.
