Installation

Eine CSS-Datei einbinden – fertig. Optional ein Theme-Override für andere Markenfarben.

<link rel="stylesheet" href="glasskit.css">  <link rel="stylesheet" href="theme-override.css">  <html data-theme="dark">  <html data-theme="light">

Design Tokens

Alle visuellen Werte werden über CSS Custom Properties gesteuert.

Farbpalette

Token	Dark-Wert	Verwendung
`--gl-color-primary`	#f5a623	Primärfarbe, Buttons, aktive Elemente
`--gl-color-primary-dark`	#d4692a	Gradient-Endwert
`--gl-color-text`	#ffffff	Standard-Textfarbe
`--gl-color-text-muted`	rgba(255,255,255,0.60)	Sekundärer Text
`--gl-color-success`	#34c759	Erfolg-Status
`--gl-color-error`	#ff3b30	Fehler-Status

Glasflächen

Token	Wert	Verwendung
`--gl-surface-1`	rgba(…, 0.08)	Subtilste Fläche (Status)
`--gl-surface-2`	rgba(…, 0.10)	Standard (Inputs, Cards)
`--gl-surface-3`	rgba(…, 0.14)	Nav-Pills, Badges
`--gl-surface-4`	rgba(…, 0.16)	Hover-States
`--gl-surface-5`	rgba(…, 0.22)	Starker Hover
`--gl-surface-milk-strong`	rgba(…, 0.75)	Secondary Button

Spacing & Radii

Token	Wert	Token	Wert
`--gl-space-2xs`	4px	`--gl-radius-xs`	8px
`--gl-space-xs`	8px	`--gl-radius-sm`	12px
`--gl-space-sm`	12px	`--gl-radius-input`	14px
`--gl-space-md`	16px	`--gl-radius-btn`	16px
`--gl-space-lg`	20px	`--gl-radius-card`	24px
`--gl-space-xl`	24px	`--gl-radius-full`	9999px
`--gl-space-2xl`	32px	`--gl-radius-pill`	50%

Theming (Light / Dark)

Das Theme wird über data-theme am <html>-Element gesteuert.

// Theme per JavaScript wechseln: function toggleTheme() { const html = document.documentElement; const current = html.getAttribute('data-theme'); html.setAttribute('data-theme', current === 'dark' ? 'light' : 'dark' ); }

Hintergrund

Der Glaseffekt braucht einen farbigen Hintergrund.

Klasse	Beschreibung
`.glass-bg`	Vollständiger Hintergrund mit Aurora-Lichteffekten
`.glass-bg--has-tab-bar`	Modifier: Padding unten für Tab-Bar
`.glass-bg--has-tab-bar-floating`	Modifier: Padding unten für Floating-Tab-Bar + Accessory

Navigation Bar

Pill-Buttons

Runde Icon-Buttons für Navigation und Aktionen.

Klasse	Beschreibung
`.glass-pill`	Standard Glas-Kreis (46×46px)
`.glass-theme-toggle`	Pill mit Mond/Sonne-Icon-Switch

Tab-Bar

Fixierte Bottom-Navigation mit Glas-Hintergrund und optionalem Badge.

<nav class="glass-tab-bar"> <button class="glass-tab-bar__item is-active"> <span class="glass-tab-bar__icon"></span> <span class="glass-tab-bar__label">Start</span> </button> <button class="glass-tab-bar__item"> <span class="glass-tab-bar__icon">  <span class="glass-tab-bar__badge">3</span> </span> <span class="glass-tab-bar__label">Verträge</span> </button> </nav>

Tab-Bar – Floating

Pillenförmige, zentrierte, schwebende Variante im iOS-26-Liquid-Glass-Stil. Optional mit einer eigenständigen .glass-tab-bar__accessory-Kapsel daneben (z. B. Suche, Erstellen) – mit eigenem Glasmaterial. Der aktive Tab erhält einen weichen radialen Spotlight-Halo statt des Punkt-Underlines.

<div class="glass-tab-bar-dock"> <nav class="glass-tab-bar glass-tab-bar--floating"> <button class="glass-tab-bar__item is-active"> <span class="glass-tab-bar__icon"></span> <span class="glass-tab-bar__label">Start</span> </button>  </nav> <button class="glass-tab-bar__accessory" aria-label="Suche">  </button> </div>

Akzent-Varianten für das Accessory

Mit --accent, --success oder --error wird das Accessory farbig untermalt (gefüllter Hintergrund, weißes Icon).

Klasse	Beschreibung
`.glass-tab-bar-dock`	Wrapper: fest unten zentriert, hält Tab-Bar + Accessory
`.glass-tab-bar-dock--accessory-left`	Modifier: Accessory links statt rechts
`.glass-tab-bar--floating`	Modifier auf `.glass-tab-bar`: Pillenform, max-content-Breite
`.glass-tab-bar__accessory`	Eigenständige Glas-Kapsel neben der Tab-Bar
`.glass-tab-bar__accessory--accent`	Gefüllt mit Primärfarbe
`.glass-tab-bar__accessory--success`	Gefüllt mit Success-Farbe
`.glass-tab-bar__accessory--error`	Gefüllt mit Error-Farbe
`.glass-bg--has-tab-bar-floating`	Background-Padding-Helper für die Floating-Variante

Titel

Verträge aufnehmen
& hochladen

<h1 class="glass-title">Seitentitel</h1>

Card

Vertrag fotografieren, Kanten prüfen und gesammelt hochladen.

Klasse	Beschreibung
`.glass-card`	Basis-Glasfläche
`.glass-card--glow`	Hell → milchig Verlauf + Lichtstreifen
`.glass-card__icon`	Zentrierter Icon-Wrapper
`.glass-card__text`	Beschreibungstext

Buttons

Klasse	Beschreibung
`.glass-btn`	Basis (56px, volle Breite)
`--primary`	Farbiger Gradient
`--secondary`	Milchig-weiß
`--tertiary`	Subtiles Glas
`--sm`	44px Höhe
`--lg`	64px Höhe
`--auto`	Auto-Breite

Badge

Standard Aktiv Fertig Fehler

<span class="glass-badge glass-badge--primary">Aktiv</span>

Avatar

S

M

L

Divider

Status-Hinweis

Noch keine Verträge vorhanden.

<div class="glass-status"> <svg viewBox="0 0 24 24"></svg> <p>Noch keine Verträge vorhanden.</p> </div>

Liste

Gruppierter Settings-Container für gestapelte Zeilen. Items unterstützen ein führendes Icon, Titel + optionalen Untertitel sowie ein Trailing-Element (Chevron, Wert, Button). Trennlinien zwischen Items werden automatisch gezeichnet — kein zusätzliches Markup nötig.

Settings-Stil (Icon + Titel + Untertitel + Trailing)

iOS 26.4 Update

2,1 GB · Jetzt verfügbar
Apple One

Familie — verlängert sich am 28. Apr.

22,95 €
Mitteilungen
Alle Abos anzeigen

<ul class="glass-list"> <li class="glass-list__item glass-list__item--interactive"> <span class="glass-list__leading"><svg>...</svg></span> <div class="glass-list__content"> <div class="glass-list__title">iOS 26.4 Update</div> <div class="glass-list__subtitle">2,1 GB · Jetzt verfügbar</div> </div> <div class="glass-list__trailing"><svg>...</svg></div> </li>  <li class="glass-list__item glass-list__item--center">Alle anzeigen</li> </ul>

Kompaktes Menü (zentrierter Text, ohne Icons)

Vertrag teilen
Duplizieren
Löschen

<ul class="glass-list"> <li class="glass-list__item glass-list__item--center glass-list__item--interactive">Vertrag teilen</li> <li class="glass-list__item glass-list__item--center glass-list__item--interactive">Duplizieren</li> <li class="glass-list__item glass-list__item--center glass-list__item--interactive glass-list__item--danger">Löschen</li> </ul>

Gruppierte Sektionen mit großen Icons

Empfehlungen

Geladene Medien prüfen

Spare bis zu 1,38 GB ein. Prüfe alle auf deinem Gerät geladenen Videos und Audiodateien und entferne sie bei Bedarf.
AusweisApp Bund

Version 2.5.1

24 MB

Hörbücher

Der Geist aus der Maschine

Teilweise angesehen

237,1 MB
Alle Downloads anzeigen

<div class="glass-list__section-header">Empfehlungen</div> <ul class="glass-list"> <li class="glass-list__item glass-list__item--interactive"> <span class="glass-list__leading glass-list__leading--lg"><svg>...</svg></span> <div class="glass-list__content"> <div class="glass-list__title">Geladene Medien prüfen</div> <div class="glass-list__subtitle glass-list__subtitle--wrap">Mehrzeilige Beschreibung...</div> </div> <div class="glass-list__trailing"> <span class="glass-list__value">24 MB</span> <svg>...</svg> </div> </li> <li class="glass-list__item glass-list__item--accent glass-list__item--center">Alle anzeigen</li> </ul>

Klassen-Referenz

Klasse	Beschreibung
`.glass-list`	Gruppierter Surface-Container
`.glass-list--flush`	Edge-to-Edge-Variante (kein seitlicher Margin / Radius). Setzt voraus, dass der Eltern-Container `--gl-space-lg` Padding hat.
`.glass-list--bare`	Entfernt Hintergrund, Border & Shadow — für die Einbettung in `.glass-popover` oder `.glass-card`.
`.glass-list__item`	Listenzeile (als `<li>`, `<a>` oder `<button>`)
`.glass-list__section-header`	Sektionslabel oberhalb einer `.glass-list` — Uppercase, klein, gedämpft
`.glass-list__item--interactive`	Fügt Hover- / Focus- / Active-States hinzu
`.glass-list__item--center`	Zentrierte Single-Text-Variante mit Ellipsis-Truncation
`.glass-list__item--danger`	Roter Text für destruktive Aktionen
`.glass-list__item--accent`	Primärfarbener Text für Akzent-Aktionen
`.glass-list__leading`	Leading-Slot (28×28, enthält ein Icon-SVG)
`.glass-list__leading--lg`	Großer Leading-Slot (40×40, abgerundetes Quadrat, unterstützt `<img>`)
`.glass-list__content`	Flexibler mittlerer Slot — nimmt verbleibende Breite, ermöglicht Truncation
`.glass-list__title`	Primärer Text (medium weight, ellipsis)
`.glass-list__subtitle`	Sekundärer Text (klein, gedämpft, ellipsis)
`.glass-list__subtitle--wrap`	Mehrzeiliger Subtitle (bis 3 Zeilen, mit Ellipsis-Clamp)
`.glass-list__trailing`	Trailing-Slot — Chevron, Wert, Button, Badge
`.glass-list__value`	Gedämpfter Text in `.glass-list__trailing` (z.B. Dateigröße)

Trennlinien zwischen Zeilen werden automatisch via ::after gerendert. Items mit Leading-Icon erhalten einen icon-aligned Inset; Items ohne bekommen ein normales Padding-Inset. Das letzte Item hat nie eine Trennlinie. SVG-Icon-Konvention: 24px für Leading, 18px für Trailing, stroke: currentColor, stroke-width: 2.

Modal

Zentrierter Dialog mit Blur-Overlay. Sichtbarkeit wird über die .is-active-Klasse auf dem Overlay-Element gesteuert — das Umschalten benötigt etwas JavaScript.

<div class="glass-modal-overlay" id="my-modal"> <div class="glass-modal"> <div class="glass-modal__header"> <h2 class="glass-modal__title">Vertrag löschen?</h2> </div> <div class="glass-modal__body"> <p>Dieser Vorgang kann nicht rückgängig gemacht werden.</p> </div> <div class="glass-modal__footer"> <button class="glass-modal__action" onclick="closeModal()">Abbrechen</button> <button class="glass-modal__action glass-modal__action--danger">Löschen</button> </div> </div> </div> <script> // Öffnen / Schließen via .is-active auf dem Overlay (NICHT auf .glass-modal) function openModal() { document.getElementById('my-modal').classList.add('is-active'); } function closeModal() { document.getElementById('my-modal').classList.remove('is-active'); } </script>

Klassen-Referenz

Klasse	Beschreibung
`.glass-modal-overlay`	Fullscreen Blur-Overlay
`.glass-modal-overlay.is-active`	Sichtbar + animiert
`.glass-modal`	Dialog-Container (max-width 340px)
`__header / __title`	Titel-Bereich
`__body`	Inhaltsbereich
`__footer / __action`	Aktionsleiste
`__action--primary`	Primäre Aktion
`__action--danger`	Gefährliche Aktion

Hinweis: die .is-active-Klasse gehört auf das .glass-modal-overlay, nicht auf .glass-modal selbst. Das Overlay übernimmt den Fullscreen-Backdrop, und sein :is-active-Zustand triggert sowohl das Backdrop-Fade-In als auch die Scale-Up-Animation des inneren Dialogs.

Toast

Sichtbar via .is-visible. Varianten: --success, --error, --warning.

Dokument erfolgreich hochgeladen!

<div class="glass-toast glass-toast--success"> <svg class="glass-toast__icon">...</svg> <span class="glass-toast__text">Erfolgreich!</span> </div>

Popover

Verankertes Dropdown- / Menü-Container. Trigger und .glass-popover in einem .glass-popover-anchor verschachteln. Sichtbarkeit wird über die .is-open-Klasse gesteuert — das Umschalten benötigt ein bisschen JavaScript.

<div class="glass-popover-anchor"> <button class="glass-btn glass-btn--secondary" onclick="togglePop(this)">Menü öffnen</button> <div class="glass-popover"> <ul class="glass-list glass-list--bare"> <li class="glass-list__item glass-list__item--interactive">Teilen</li> <li class="glass-list__item glass-list__item--interactive">Löschen</li> </ul> </div> </div> <script> // Hinweis: NICHT `togglePopover` benennen — kollidiert mit der nativen // HTMLElement.togglePopover()-API-Methode. function togglePop(btn) { btn.nextElementSibling.classList.toggle('is-open'); } </script>

Klassen-Referenz

Klasse	Beschreibung
`.glass-popover-anchor`	Positionierungs-Kontext für den Popover (umschließt Trigger + Popover)
`.glass-popover`	Floating Glass-Surface, ausgeblendet bis `.is-open`
`.glass-popover.is-open`	Sichtbarer Zustand — Fade- + Scale-Animation
`.glass-popover--top`	Öffnet nach oben (über dem Trigger)
`.glass-popover--start`	Linke Kante am Trigger ausrichten
`.glass-popover--end`	Rechte Kante am Trigger ausrichten

Hinweis: die Toggle-Funktion darf nicht togglePopover heißen — dieser Name kollidiert mit der nativen HTMLElement.togglePopover()-Methode der HTML Popover API, und Inline-onclick-Handler werfen einen NotSupportedError.

Input

Vertragsname

Fehler-Zustand Bitte gültige E-Mail angeben

<div class="glass-input-group"> <label class="glass-label">Label</label> <input class="glass-input" type="text"> <span class="glass-hint">Hilfetext</span> </div>

Textarea

Select

<select class="glass-select"> <option>Bitte wählen…</option> </select>

Suchfeld

Toggle Switch

Aktiviert Deaktiviert

<label class="glass-toggle"> <input class="glass-toggle__input" type="checkbox"> <span class="glass-toggle__track"> <span class="glass-toggle__thumb"></span> </span> <span class="glass-toggle__label">Label</span> </label>

Checkbox

Ausgewählt Nicht ausgewählt

Radio Button

Option A Option B

Range Slider

Bildqualität 75%

Progress Bar

Klasse	Beschreibung
`.glass-progress`	Basis-Container
`--sm / --lg`	Track-Höhe: 4px / 12px
`--success / --error`	Farb-Varianten

Accordion

Die ausführliche Antwort auf diese Frage.

Die Antwort auf Frage zwei.

Utilities

Stack (vertikal)

.gl-stack .gl-stack--xs (8px) .gl-stack--sm (12px) .gl-stack--md (16px) .gl-stack--lg (20px) .gl-stack--xl (24px)

Row (horizontal)

.gl-row .gl-row--xs (8px) .gl-row--sm (12px) .gl-row--md (16px)

Margin Top

.gl-mt-sm (12px) .gl-mt-md (16px) .gl-mt-lg (20px) .gl-mt-xl (24px)

Margin Bottom

.gl-mb-sm (12px) .gl-mb-md (16px) .gl-mb-lg (20px) .gl-mb-xl (24px)

Text

.gl-text-center .gl-text-muted .gl-text-sm

Layout

.gl-px (padding horizontal) .gl-w-full (width: 100%) .gl-flex-1 (flex: 1)

📋 Alle Klassen auf einen Blick

Komponente	Klassen	Modifier / States
Hintergrund	`.glass-bg`	`--has-tab-bar`
Navigation	`.glass-nav`	–
Pill-Button	`.glass-pill`	–
Theme-Toggle	`.glass-theme-toggle`	–
Titel	`.glass-title`	–
Card	`.glass-card`	`--glow`
Button	`.glass-btn`	`--primary`, `--secondary`, `--tertiary`, `--sm`, `--lg`, `--auto`
Badge	`.glass-badge`	`--primary`, `--success`, `--error`
Avatar	`.glass-avatar`	`--sm`, `--lg`
Divider	`.glass-divider`	–
Status	`.glass-status`	–
Liste	`.glass-list`	`--flush`, `--bare`, `__item--interactive`, `__item--center`, `__item--danger`, `__item--accent`, `__leading--lg`, `__subtitle--wrap`, `__value`, `__section-header`
Popover	`.glass-popover`	`--top`, `--start`, `--end`, `.is-open`
Input	`.glass-input`	`--error`, `:disabled`
Textarea	`.glass-textarea`	–
Select	`.glass-select`	–
Suchfeld	`.glass-search`	–
Toggle	`.glass-toggle`	`:checked`
Checkbox	`.glass-checkbox`	`:checked`
Radio	`.glass-radio`	`:checked`
Range	`.glass-range`	–
Progress	`.glass-progress`	`--sm`, `--lg`, `--success`, `--error`
Modal	`.glass-modal-overlay`	`.is-active`
Toast	`.glass-toast`	`--success`, `--error`, `--warning`, `.is-visible`
Tab-Bar	`.glass-tab-bar`	`.is-active` auf Items
Tab-Bar Floating	`.glass-tab-bar-dock` + `.glass-tab-bar--floating`	`__accessory`, `__accessory--accent`/`--success`/`--error`, `--accessory-left`
Accordion	`.glass-accordion`	`.is-open` auf Items

🤖 KI / LLM-Referenz

GlassKit liefert eine SKILL.md mit – eine strukturierte, maschinenlesbare Komponenten-Referenz für KI-Assistenten, LLMs und Code-Generierungs-Tools.

Feature	Beschreibung
Copy-Paste HTML	Alle 24 Komponenten mit exakter Verschachtelung und BEM-Hierarchie
Design-Token-Tabellen	Farben, Surfaces, Blur, Radii, Spacing, Shadows, Typography
State-Klassen-Mapping	`is-active`, `is-open`, `is-visible`, `:checked` – wo was hingehört
Composition Patterns	6 fertige Seiten-Layouts: Login, Dashboard, Formular, Modal, Einstellungen, Fortschritt
Häufige Fehler	Typische Fehler und deren Korrekturen

Anhängen oder referenzieren Sie SKILL.md, wenn Sie eine KI bitten, GlassKit-HTML zu generieren – für produktionsreife Ergebnisse.

# Dateipfad glasskit/SKILL.md # Auch im npm-Paket enthalten npm install @jungherz-de/glasskit node_modules/@jungherz-de/glasskit/SKILL.md

Installation

Design Tokens

Farbpalette

Glasflächen

Spacing & Radii

Theming (Light / Dark)

Hintergrund

Navigation Bar

Pill-Buttons

Tab-Bar

Tab-Bar – Floating

Akzent-Varianten für das Accessory

Titel

Verträge aufnehmen& hochladen

Card

Buttons

Badge

Avatar

Divider

Status-Hinweis

Liste

Settings-Stil (Icon + Titel + Untertitel + Trailing)

Kompaktes Menü (zentrierter Text, ohne Icons)

Gruppierte Sektionen mit großen Icons

Klassen-Referenz

Modal

Vertrag löschen?

Klassen-Referenz

Toast

Popover

Klassen-Referenz

Input

Textarea

Select

Suchfeld

Toggle Switch

Checkbox

Radio Button

Range Slider

Progress Bar

Accordion

Utilities

Stack (vertikal)

Row (horizontal)

Margin Top

Margin Bottom

Text

Layout

📋 Alle Klassen auf einen Blick

🤖 KI / LLM-Referenz

Verträge aufnehmen
& hochladen