Zum Hauptinhalt springen
Leichte Sprache Gebärdensprache| KERN Katalog KERN Figma KERN openCode
Version: 2.8.2

Einbinden von KERN

Die Komponenten sind bislang nur mit HTML und CSS umgesetzt, um die Gestaltung konsistent und einfach nutzbar zu machen.

Schritt 1: Installieren der KERN-UX Bibliothek​

Es gibt drei Möglichkeiten, das KERN-UX Native Package in deiner Anwendung zu verwenden:

Methode 1: Einbindung über NPM​

KERN-UX Native Package installieren​

Führe folgenden Befehl aus, um die KERN-UX Dateien zu installieren:

npm install @kern-ux/native --save

Binde die Styles in deine Applikation ein.

@import "@kern-ux/native/dist/kern.min.css";
@import "@kern-ux/native/dist/fonts/fira-sans.css";

Methode 2: Einbindung per CDN​

Füge diesen Code in die index.html deiner Anwendung ein, um die KERN-UX-Bibliothek zu laden per CDN zu laden:

jsdelivr​

<head>
 <!-- // ... -->
 <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" />
 <!-- // ... -->
</head>

unpkg​

<head>
 <!-- // ... -->
 <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" />
 <!-- // ... -->
</head>

Methode 3: Kopieren der Bibliothek​

Du kannst die KERN-UX-Bibliothek auch direkt als ZIP-Datei herunterladen. Gehe dazu auf die Release-Seite des KERN-UX Repositories und lade die neueste Version der Bibliothek herunter.

Entpacke die ZIP-Datei und binde die kompilierten CSS-Dateien in dein Projekt ein. Falls du stattdessen die SCSS-Dateien im Ordner src/scss verwendest, kompiliere sie zunächst zu CSS. Lasse die KERN-Dateien unverändert und lege eigene Anpassungen in einer separaten CSS/SCSS-Datei ab, die du nach KERN lädst. Wie das funktioniert, erfährst du unter Updatesicheres Theming.

Schritt 2: Komponente einbinden​

Füge das HTML für eine Komponente in deine Anwendung ein. Gehe zur Beispiel-Alert-Komponente und kopiere das HTML.

Füge das HTML in eine Seite oder Vorlage in deiner Anwendung ein.

Inhaltsverzeichnis