Erstellen Sie eine native KERN-Oberfläche mit geprüfter Typografie, semantischen Designs, aufklappbaren Inhalten und einem umkehrbaren Bestätigungsablauf.
KERN-Designsystem: natives HTML, CSS und Browserverhalten
Was das Paket bereitstellt
KERN native 2.8.2 enthält Komponenten-CSS und Schriftdateien. Das Beispiel bindet diese Dateien direkt ein: Der Button, das Textarea, Details und Dialog sind native Elemente mit KERN-Klassen. Weder ein React-Provider noch ein JavaScript-Komponentenkonstruktor ist erforderlich. Die Anwendung stellt die Entscheidungslogik rund um den Dialog bereit; das Styling allein leert kein Eingabefeld.
Installiere das exakt festgelegte native Paket.
Kopiere Stylesheet und Schriftdateien gemeinsam und behalte ihre relativen Pfade bei.
Speichere das vollständige Beispiel unten und stelle das Verzeichnis über HTTP bereit.
KERN-Designsystem: Fira Sans und adaptive Typografie
Typografie explizit laden
kern.min.css benennt Fira Sans; fonts/fira-sans.css deklariert die tatsächlichen Font Faces und relativen WOFF2-Dateien. Wenn das Schriftverzeichnis intakt bleibt, fällt ein vermeintlich korrektes Stylesheet nicht unbemerkt auf eine Ersatzschrift zurück. Statische Schriftgrößen bleiben bei 16, 18 und 21px, während sich adaptive Titel- und Überschriften-Tokens bei 768px ändern. Verwende ein Überschriftenelement für die Hierarchie und die passende KERN-Klasse für die visuelle Gestaltung. Das Beispiel verwendet ein h1 und gibt dem Dialog ein eigenes h2.
KERN-Designsystem: Abstände, Breite und responsives Layout
Tokens und Layout getrennt halten
KERN stellt benannte Abstandstokens von 0 bis 192px bereit, darunter Abstufungen von 2px und 4px im unteren Bereich. Rahmen- und Radius-Tokens bilden separate Skalen. Das Beispiel verwendet einen vertikalen Rhythmus von 24px und eine umbrechende Aktionszeile. Die maximale Inhaltsbreite von 800px und die Dialogbegrenzung von 560px sind explizite Anwendungsentscheidungen; keine davon wird als universeller KERN-Container dargestellt. Bei schmalen Ansichten wird der Seitenabstand auf 16px gesetzt und die Dialogbreite bleibt innerhalb des Viewports. Für das Dokument wird keine Mindesthöhe relativ zur Viewport-Höhe festgelegt, sodass beim Einbetten keine Rückkopplungsschleife durch Größenänderungen entsteht.
KERN-Designsystem: Semantische Farbe und Erscheinungsbild
Rollen wechseln, nicht einzelne Hex-Werte
Das Paket verwendet semantische CSS-Eigenschaften für Text, Aktionen, Hintergrund und Fokus. Helle und dunkle Farbpaletten ändern diese Rollen gemeinsam. So wird action-default im hellen Modus darkblue-700 und im dunklen Modus darkblue-300 zugeordnet, während die Vordergrundfarbe von Weiß zu Schwarz wechselt. Das Beispiel setzt data-kern-theme auf html und zeigt einen Button mit gedrücktem Zustand. Die Einstellung gilt nur für dieses Dokument und wird nicht gespeichert. Wird das explizite Attribut entfernt, folgt das Stylesheet wieder prefers-color-scheme.
KERN-Designsystem: Eine beschriftete, bearbeitbare Notiz
Anweisungen stets verfügbar halten
Das Textarea verwendet kern-form-input__input innerhalb von kern-form-input. Ein echtes Label verweist über die Input-ID auf das Eingabefeld. Der Hinweis hat eine eigene ID und bleibt über aria-describedby damit verknüpft. Da es sich um eine optionale lokale Notiz handelt, erfindet das Beispiel weder Fehlermeldungen für Pflichtfelder noch einen serverseitigen Speichervorgang. Wiederherstellen setzt den Anfangswert und fokussiert das bearbeitbare Feld. Ein Statusbereich gibt das Ergebnis bekannt, ohne das Label zu ersetzen oder den Fokus auf einen passiven Text zu verschieben.
KERN-Designsystem: Zusatzinformationen mit Details
Die Offenlegung dem Browser überlassen
Das details-Element verwaltet seinen geöffneten Zustand; das summary-Element dient als Auslöser. KERN ergänzt kern-details__header, ein kleines Titel-Span und kern-details__body für die Darstellung. Im Beispiel stehen hier ergänzende Informationen zur Aufbewahrung. Erforderliche Anweisungen, Fehlermeldungen und die Aktion zum Verwerfen bleiben außerhalb der Offenlegung sichtbar. Das native Tastaturverhalten ermöglicht die Aktivierung ohne zweiten Click-Handler oder doppelten aria-expanded-Zustand.
Formuliere die Zusammenfassung aussagekräftig und knapp.
Füge kein weiteres Button- oder Link-Element in das summary-Element ein.
Verwende für mehrere zusammengehörige Offenlegungen ein Accordion, statt nicht zusammengehörige Aktionen als Details zu tarnen.
KERN-Designsystem: Eine Bestätigung mit sicherem Ausstieg
Struktur und Steuerung
Der Dialog wird durch sein h2 beschriftet und durch eine kurze Beschreibung der Folgen erläutert. Für Kopfzeile, Inhalt und Fußzeile werden die dokumentierten Klassen von KERN verwendet. showModal() platziert den nativen Dialog in der obersten Ebene; close() beendet die Interaktion. „Notiz behalten“ erhält über autofocus den anfänglichen Fokus. Escape schließt den Dialog, ohne den Text zu ändern, und der Close-Listener setzt den Fokus zurück auf „Notiz verwerfen“. Nur „Ja, verwerfen“ ändert den Wert. Klicks auf den Backdrop haben absichtlich keine Wirkung, da es sich um eine Bestätigung für eine destruktive Aktion handelt. Das entspricht den dokumentierten Empfehlungen für kritische Entscheidungen, statt den Handler zum Schließen per Backdrop aus dem allgemeinen Beispiel wahllos zu übernehmen.
Die Einrichtung unten installiert ein Paket in einer exakt festgelegten Version und kopiert dessen CSS sowie das Schriftverzeichnis. Das vollständige Beispiel enthält ein eigenes Layout-CSS, ein Theme-Attribut am Root-Element, die DOM-Struktur und die Ereignisbehandlung. Teste nach der Integration in ein echtes Formular beide Dialogausgänge, Escape und schmale Bildschirme. KERN-Code ist unter EUPL lizenziert; die Website kennzeichnet ihre textlichen und grafischen Inhalte unter CC BY-NC-SA. Dieses Originalbeispiel übernimmt nicht die Identität einer Behörde und erweckt nicht den Eindruck, ein Dienst habe ein Barrierefreiheitsaudit bestanden. Eine echte Anwendung benötigt weiterhin Persistenz, serverseitige Validierung und eine Bewertung der vollständigen User Journey.
Das gesamte Dokument-Markup, das Layout-CSS und das Anwendungsverhalten; installiere die Assets mithilfe des Einrichtungsblocks.
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>
Es ist weder ein Build-Schritt noch ein UI-Framework erforderlich. Behalte das Schriftartenverzeichnis bei, da dessen CSS auf relative WOFF2-Dateien verweist. Das vollständige ZIP mit dem funktionierenden Beispiel unter Sources enthält außerdem die exakten Vorschau-Abhängigkeiten und das vollständige Dokument. Entpacke es, führe in diesem Verzeichnis python3 -m http.server 8080 aus und öffne anschließend http://localhost:8080/kern.html. Öffne Beispiele mit Modulen nicht über 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
Ein Prompt für dein Projekt
Agenten-Prompt
Erstelle das lokale Beispiel für Workshop-Notizen mit @kern-ux/native 2.8.2 CSS und der mitgelieferten Fira Sans. Füge ein beschriftetes kern-form-input-Textarea, eine ergänzende native Details-Aufklappfunktion und einen kern-dialog mit beschriftetem Header, Inhalt und Footer zusammen. Öffne den Dialog mit showModal(), setze den Autofokus auf „Notiz behalten“, ermögliche das Abbrechen mit Escape, ohne den Text zu ändern, und lösche die Notiz erst nach „Ja, verwerfen“. Stelle beim Schließen den Fokus auf das auslösende Element zurück und biete „Beispiel wiederherstellen“ an. Wechsle data-kern-theme zwischen light und dark, ohne neue Farbpaletten-Token zu erfinden. Behalte die ursprünglichen Optionen für die Anwendungsbreite bei und speichere die Notiz lokal; ein Upload, ein Server-Entwurf oder eine Behauptung über einen Behördendienst ist nicht erforderlich.
05
KERN Designsystem: Quellen und Geltungsbereich
Ursprüngliche Demonstration mit KERN-Code. Es werden weder eine Behördenidentität noch dauerhafte Speicherung oder eine Barrierefreiheitszertifizierung suggeriert.
