# KERN Design System – Plain-CSS-HTML-Kit
[](https://www.npmjs.com/package/@kern-ux/native)
[](LICENSE.md)
---
### [Deutsch](#deutsch-1) | [English](#english-1)
---
## 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](https://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](https://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:
```bash
npm install @kern-ux/native --save
```
Binde anschließend die CSS-Stylesheets und Schriftarten ein:
```javascript
// 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:
```css
@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 `` ein:
* **Alternative A: jsdelivr**
```html
```
* **Alternative B: unpkg**
```html
```
### Methode 3: Kopieren der Bibliothek
Lade die neueste Version direkt als ZIP-Archiv von der [Release-Seite des KERN-UX Repositories](https://gitlab.opencode.de/kern-ux/kern-ux-plain/-/releases) 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:
```javascript
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
```html
```
### 2. Badges
```html
InformationErfolgWarnungFehler
```
### 3. Description List (Beschreibungsliste)
```html
Name
Musterperson
Vorname
Kim
E-Mail
kim@musterperson.de
Adresse
Musterstraße 2, 23456 Musterstadt
```
---
## ♿️ 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](https://www.kern-ux.de) (wie z. B. auf der [Button-Komponentenseite](https://www.kern-ux.de/komponenten/button#barrierefreiheit)) 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:
```bash
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 6006
```
Verfügbare Befehle:
- `npm run build` - Kompiliert SCSS/CSS und baut Storybook
- `npm run test:a11y` - Führt automatisierte Barrierefreiheits-Tests aus
- `npm 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](https://gitlab.opencode.de/kern-ux/kern-ux-plain/-/issues) gemeldet werden.
Bitte lies unsere [Contributing Guidelines](CONTRIBUTING.md) 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](LICENSE.md) Datei.
---
## 🔗 Nützliche Links
- [KERN Offizielle Webseite](https://www.kern-ux.de)
- [Komponenten-Dokumentation](https://www.kern-ux.de/komponenten)
- [KERN Plain-CSS-HTML-Kit Repository](https://gitlab.opencode.de/kern-ux/kern-ux-plain)
- [Projekt-Roadmap](https://www.kern-ux.de/ueber-kern/roadmap)