@kern-ux/native
v2.6.2
Published
Native Styles und Komponenten-Bibliothek für das KERN-UX Design System. Beinhaltet CSS, Fonts und KERN-Komponenten.
Maintainers
marienfeldtomReadme
KERN Design System – Plain-CSS-HTML-Kit
Deutsch | English
Deutsch
Was ist KERN?
Mit KERN schaffen wir einen offenen UX-Standard für die deutsche Verwaltung, der Umsetzende befähigt, barrierefreie digitale Verwaltungslösungen effizient und nutzendenzentriert zu entwickeln. KERN ist ein Open-Source-Projekt, das von den Ländern Hamburg und Schleswig-Holstein initiiert wurde. Alle Informationen findest du auf www.kern-ux.de.
Dieses Repository enthält die Plain CSS/HTML-Referenzimplementation des KERN-Designsystems und ist auf npm unter dem Namen @kern-ux/native verfügbar.
English
What is KERN?
KERN is an open UX standard for the German public administration. It enables development teams to build accessible digital government services efficiently and with a user-centered focus. KERN is an open-source project initiated by the federal states of Hamburg and Schleswig-Holstein. Learn more at www.kern-ux.de.
This repository contains the plain CSS/HTML reference implementation of the KERN Design System, published on npm as @kern-ux/native.
🚀 Einbindung & Installation
Du kannst KERN auf drei verschiedene Arten in dein Projekt integrieren:
Methode 1: Einbindung über NPM (Empfohlen)
Füge @kern-ux/native zu deinen Projektabhängigkeiten hinzu:
npm install @kern-ux/native --saveBinde anschließend die CSS-Stylesheets und Schriftarten ein:
// JavaScript / TypeScript Bundler
import '@kern-ux/native/dist/kern.min.css';
import '@kern-ux/native/dist/fonts/fira-sans.css'; // Hauptschriftart (Fira Sans)
import '@kern-ux/native/dist/fonts/noto-sans.css'; // Optional (Noto Sans)Oder in deiner Haupt-CSS/SCSS-Datei:
@import "@kern-ux/native/dist/kern.min.css";
@import "@kern-ux/native/dist/fonts/fira-sans.css";Methode 2: Einbindung per CDN
Wenn du KERN ohne ein Buildtool/NPM verwenden möchtest, binde die CSS-Dateien direkt über ein CDN in deinen <head> ein:
Alternative A: jsdelivr
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kern-ux/native/dist/kern.min.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kern-ux/native/dist/fonts/fira-sans.css" />Alternative B: unpkg
<link rel="stylesheet" href="https://unpkg.com/@kern-ux/native/dist/kern.min.css" /> <link rel="stylesheet" href="https://unpkg.com/@kern-ux/native/dist/fonts/fira-sans.css" />
Methode 3: Kopieren der Bibliothek
Lade die neueste Version direkt als ZIP-Archiv von der Release-Seite des KERN-UX Repositories herunter. Entpacke die ZIP-Datei und binde die kompilierten CSS-Dateien oder die SCSS-Quelldateien direkt in dein Projekt ein.
🛠 Einbindung & Imports
JavaScript-Komponenten
Interaktive Komponenten (wie das Kopfzeilen-Menü) benötigen das mitgelieferte JavaScript zur Initialisierung:
import '@kern-ux/native/dist/js/kern-kopfzeile.js';🧩 Komponenten-Beispiele
Hier sind einige grundlegende Komponenten-Markups mit BEM-Klassen (kern-*) und integrierten Barrierefreiheits-Attributen:
1. Buttons
<button type="button" class="kern-btn kern-btn--primary">
<span class="kern-label">Primary Button</span>
</button>
<button type="button" class="kern-btn kern-btn--secondary">
<span class="kern-label">Secondary Button</span>
</button>
<button type="button" class="kern-btn kern-btn--tertiary">
<span class="kern-label">Tertiary Button</span>
</button>2. Badges
<span class="kern-badge kern-badge--info">
<span class="kern-label">Information</span>
</span>
<span class="kern-badge kern-badge--success">
<span class="kern-label">Erfolg</span>
</span>
<span class="kern-badge kern-badge--warning">
<span class="kern-label">Warnung</span>
</span>
<span class="kern-badge kern-badge--danger">
<span class="kern-label">Fehler</span>
</span>3. Description List (Beschreibungsliste)
<dl class="kern-description-list">
<div class="kern-description-list-item">
<dt class="kern-description-list-item__key">Name</dt>
<dd class="kern-description-list-item__value">Musterperson</dd>
</div>
<div class="kern-description-list-item">
<dt class="kern-description-list-item__key">Vorname</dt>
<dd class="kern-description-list-item__value">Kim</dd>
</div>
<div class="kern-description-list-item">
<dt class="kern-description-list-item__key">E-Mail</dt>
<dd class="kern-description-list-item__value">[email protected]</dd>
</div>
<div class="kern-description-list-item">
<dt class="kern-description-list-item__key">Adresse</dt>
<dd class="kern-description-list-item__value">Musterstraße 2, 23456 Musterstadt</dd>
</div>
</dl>♿️ Barrierefreiheit
Barrierefreiheit ist der Kern unseres Design-Systems:
- Farbkontraste erfüllen die WCAG 2.1 AA/AAA Richtlinien.
- Semantisches HTML5 und korrekte WAI-ARIA-Rollen werden aktiv unterstützt.
- Der Tastatur-Fokus ist in allen interaktiven Zuständen deutlich erkennbar.
💡 Wichtiger Hinweis für Entwickler:innen: Auf jeder einzelnen Komponentenseite auf kern-ux.de (wie z. B. auf der Button-Komponentenseite) findest du am Ende einen dedizierten Abschnitt zur Barrierefreiheit. Hier siehst du übersichtlich, was bereits geprüft wurde und worauf du bei der Einbindung in deiner Anwendung noch achten musst. Nutze dort die bereitgestellten Checklisten zur Absicherung.
💻 Lokale Entwicklung (für Mitwirkende)
Wenn du am Plain-Kit selbst mitwirken möchtest:
git clone https://gitlab.opencode.de/kern-ux/kern-ux-plain.git
cd kern-ux-plain
npm install
npm start # Startet die Storybook-Entwicklungsumgebung auf Port 6006Verfügbare Befehle:
npm run build- Kompiliert SCSS/CSS und baut Storybooknpm run test:a11y- Führt automatisierte Barrierefreiheits-Tests ausnpm run test:visual- Führt visuelle Regressionstests via BackstopJS aus
🤝 Beitragen
Bugs und Verbesserungsvorschläge, die sich ausschließlich auf den CSS/HTML-Code beziehen, können im Issue-Tracker auf OpenCode gemeldet werden.
Bitte lies unsere Contributing Guidelines vor der Erstellung eines Merge Requests.
📄 Lizenz
Lizenziert unter der EUPL-1.2 (European Union Public Licence v. 1.2). Weitere Details findest du in der LICENSE.md Datei.