Installation

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

Design Tokens

Alle visuellen Werte werden über CSS Custom Properties gesteuert.

Farbpalette

Glasflächen

Spacing & Radii

Dichte

Theming (Light / Dark)

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

Rechts nach links

Seit 1.20.0 folgen die Komponenten der Schreibrichtung. dir="rtl" auf <html> oder einem beliebigen Container genügt: Abstände, Positionen und Rahmen sind logische Eigenschaften, also spiegeln sich Labels und Hinweise, das Such-Icon, die Trennlinien der Liste, die Popover-Anker, die Tab-Badges, die Modal-Aktionen, das × des Toasts und die Ausrichtung von Akkordeon, Liste, Tabelle und Prose. Wo zwei Werte gemeinsam wandern müssen — der Chevron des Selects und der Platz für ihn, der Knopf des Schalters und sein Weg, der Verlauf der Fortschrittsfüllung — steht die Regel unter :dir(rtl): Chrome und Edge ab 120, Safari ab 16.4, Firefox ab 49. Ein älterer Browser lässt diese Teile links nach rechts, statt sie auseinanderzureißen.

Drucken

Druckdialoge lassen Hintergrundgrafiken standardmäßig weg, und manche Zustände sind nur mit einem Hintergrund gezeichnet. Seit 1.21.1 behalten diese Teile auf Papier ihre Farben — das angehakte Kästchen und sein Haken, das gewählte Radio, die Spur des Toggles, die Füllung des Fortschrittsbalkens, der aktuelle Schritt, der gewählte Tag von Datumsstreifen und Kalender, der Knopf des Schiebereglers und die Tonpunkte —, der Rest der Seite druckt sparsam. Einzustellen ist nichts. Eine dunkle Seite druckt ihre helle Schrift und ihre Flächen auf weißes Papier; eine Seite, die gedruckt werden soll, wechselt dafür ins helle Theme:

Dichte (Kompakt)

Admin-Oberflächen, Desktop-Layouts und schmale Formulare brauchen dichtere Bedienelemente. Seit 1.21.0 sind ihre Größen Dichte-Tokens, und data-density="compact" am <html>-Element setzt einen kleineren Satz: Felder und Buttons 40px hoch statt 52 und 56, kleinere Toggles, Checkboxen und Radios, dichtere Listenzeilen und Modal-Aktionen. Farben, Schrift und Abstände bleiben, wie sie sind. Ohne das Attribut behält jedes Element die Größe, die es immer hatte.

Die Vorschau setzt das Attribut auf ihre rechte Spalte. Auf einer Seite gehört es an <html>, neben data-theme: Ein Element weiter unten mit data-theme="dark" setzt die Standardgrößen wieder.

Einzug und Weg des Toggle-Knopfs — in beiden Schreibrichtungen — und die Ausrichtung von Toggle, Checkbox und Radio an der ersten Zeile leiten sich aus den Tokens ab. Jede Größe, die ein Projekt setzt, bleibt so ausgerichtet. Die Regeln lesen jede Größe mit dem bisherigen Wert als Fallback, wie --gl-modal-max-width: Eine Seite, deren Token-Sheet älter ist, behält die alten Größen.

Hintergrund

Der Glaseffekt braucht einen farbigen Hintergrund.

Navigation Bar

Pill-Buttons

Runde Icon-Buttons für Navigation und Aktionen.

Tab-Bar

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

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.

Akzent-Varianten für das Accessory

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

Titel

Card

Buttons

Ein deaktivierter Button — disabled, oder aria-disabled="true" an einem a.glass-btn, der sich nicht deaktivieren lässt — ist gedimmt, zeigt den Cursor not-allowed und hebt sich beim Hover nicht mehr an (seit 1.21.2; vorher sah er genau aus wie ein aktiver). Der Link selbst navigiert weiter, wenn die Seite ihn nicht abfängt. Dasselbe gilt für Pill, Tab-Bar-Accessory, Modal-Aktionen, interaktive Listenzeilen und die Monatspfeile des Kalenders; Toggle, Checkbox und Radio dimmen Bedienelement und Label, Select, Textarea und Range dimmen wie das Input.

Badge

Varianten: --primary, --success, --warning (seit 1.18.0) und --error. Jede nimmt Fläche, Rand und Schrift aus den Token -surface, -border und -on-surface ihrer Statusfarbe — wer die Statusfarbe umfärbt, färbt das ganze Badge um.

Chips

Ein Badge dient auch als Filter-Chip. --interactive macht ihn anfassbar — Zeiger, Hover-Tönung, Fokusring — und --selected zeigt, welcher Chip aktiv ist. Nimm einen echten <button> und leg den Zustand in aria-pressed, damit die Zeile per Tastatur bedienbar ist und als Umschalter angesagt wird.

--selected vertieft die Farbe, die der Badge schon hat, statt sie zu übergehen — ein Status-Chip bleibt beim Auswählen also in seiner eigenen Farbe.

Avatar

Divider

Status-Hinweis

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)

Kompaktes Menü (zentrierter Text, ohne Icons)

Gruppierte Sektionen mit großen Icons

Klassen-Referenz

Trennlinien zwischen Zeilen werden automatisch via ::after gerendert. Items mit Leading-Icon erhalten einen icon-aligned Inset; Items ohne — kein __leading, oder eines mit dem Attribut hidden (seit 1.20.0) — bekommen das normale Padding-Inset. Ein verstecktes __leading oder __trailing nimmt keinen Platz ein. 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.

Klassen-Referenz

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.

Als natives Dialog-Element

Seit 1.20.0 darf das Overlay auch ein <dialog> sein. Mit showModal() geöffnet liegt es in der Top Layer; die Seite dahinter ist für Zeiger, Tastatur und Screenreader inert; der Fokus wandert hinein und beim Schließen dorthin zurück, wo er herkam; Escape schließt. GlassKit nimmt dem Dialog seinen eigenen Kasten und Backdrop, er sieht also genau aus wie das <div>-Overlay. Seinen Namen bekommt er über aria-labelledby vom Titel. <glk-modal> aus GlassKit Elements arbeitet so.

Solange ein modaler Dialog offen ist, ist alles außerhalb inert — ein Toast, der dann erscheint, ist weder anklickbar noch wird er vorgelesen. Rückmeldungen gehören in den Dialog, oder der Dialog schließt zuerst.

Breite

Das Panel ist höchstens --gl-modal-max-width breit — 340 px, wenn nicht gesetzt (seit 1.20.0; vorher ein fester Wert). Ein Dialog mit Formular oder Tabelle darf breiter werden:

Toast

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

Mit Aktion (seit 1.19.0): __action ist eine kleine Pille im Ton des Toasts — primär beim schlichten Toast, in der Statusfarbe bei einer Variante — und __close das × am Ende; es braucht ein aria-label. Beide haben eine Trefferfläche von 44 px. Ein Toast mit Aktion darf bis 480 px breit werden, der Text bricht um, die Knöpfe schrumpfen nie; er sollte stehen bleiben, bis einer davon benutzt wird. Der Toast sitzt --gl-toast-top vom oberen Rand (56 px, wenn nicht gesetzt) — setz ihn unter deine Kopfzeile und nimm bei viewport-fit=cover env(safe-area-inset-top) dazu. Er bleibt auch mit Aktion oben: ein Ort für jeden Toast.

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.

Klassen-Referenz

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

Datums- und Zeitfelder — type="date", time, datetime-local, month — nehmen dieselbe Klasse. Sie verzichten auf das native Aussehen (seit 1.17.0): iOS zeichnete sie breiter als ihre Spalte, ein leeres schmaler als ein gefülltes, den Wert mittig. Jetzt sitzen sie wie jedes andere Feld in ihrer Spalte, der Wert am Anfang; der native Picker öffnet weiter.

Präfix und Suffix

Ein Icon, eine Währung, eine Einheit oder ein Button im Kasten des Feldes (seit 1.22.0): das Input in .glass-input-wrap legen und __prefix und __suffix daneben setzen. Sie liegen auf dem Feld, mittig, an seinem Anfang und Ende — von rechts nach links tauschen sie die Seiten. Das Padding des Feldes wächst um ihre Breite, --gl-input-prefix-size und --gl-input-suffix-size: 18px, ein Icon, wenn nicht gesetzt — für eine breitere Einheit setzen. Es folgt dem Modifier --prefix / --suffix, oder einem sichtbaren Affix, wo :has() unterstützt wird. Ein Klick auf Text, ein Icon oder ein deaktiviertes Bedienelement erreicht das Feld; aktive Bedienelemente, Links und Elemente mit tabindex nehmen ihren eigenen, formularassoziierte Custom Elements wie <glk-button> eingeschlossen (seit 1.22.2). Das tun sie auch in einem Container, der mit pointer-events: none gesperrt ist: ihn mit inert sperren oder sie deaktivieren. <glk-input> aus GlassKit Elements hat darauf die Slots prefix und suffix und misst die Breite selbst.

Textarea

Select

Der Chevron ist --gl-select-chevron, ein SVG in der gedämpften Textfarbe des jeweiligen Themes — seit 1.20.0; vorher blieb er auch im hellen Theme weiß und war kaum zu sehen. Mit einem eigenen url(…) im Token lässt er sich ersetzen. Von rechts nach links wandern der Chevron und der Platz für ihn nach links.

Suchfeld

Toggle Switch

Das Input ist unsichtbar, liegt aber über der Spur und nimmt den Klick selbst an (seit 1.20.0): Ein Testwerkzeug, das den Schalter über seine Rolle anklickt, erreicht es — vorher zeichnete die Spur darüber und nahm den Klick. Es deckt nur die Spur ab; der Labeltext, der auch einen Link enthalten kann, bleibt beim Label. Ein leeres __label nimmt keinen Platz ein, ein Schalter ohne Text hält also keine 12 px Lücke dafür frei. Beides gilt genauso für Checkbox und Radio Button. Von rechts nach links beginnt der Knopf rechts.

Checkbox

Wie beim Toggle liegt das Input über der Box, und ein leeres __label nimmt keinen Platz ein (seit 1.20.0).

Radio Button

Wie beim Toggle liegt das Input über dem Kreis, und ein leeres __label nimmt keinen Platz ein (seit 1.20.0).

Range Slider

Progress Bar

Accordion

Skeleton

Ladeplatzhalter: schimmernde Zeilen stehen für Text, der noch nicht da ist. Die Breite jeder Zeile setzt der Aufrufer; der Schimmer folgt dem Theme und steht unter prefers-reduced-motion still. Den Bereich mit aria-busy="true" markieren, damit Hilfstechnik das Laden erkennt.

Tabelle

Eine gewöhnliche <table> auf Glas: Haarlinien zwischen den Zeilen, gedämpfter Kopf, Zahlen rechtsbündig in Tabellenziffern. Der Wrapper .glass-table-wrap scrollt seitlich, wo die Spalten nicht passen. Die Klasse gehört auf die Tabelle selbst — aus einem Shadow Root erreicht ::slotted() die Zellen nicht, deshalb ist das bewusst Dokument-CSS.

Fließtext

Fließtext, den die App nicht von Hand geschrieben hat — gerendertes Markdown, Hilfe- und Infoseiten. Eine Klasse auf dem Container stylt Überschriften, Absätze, Listen, Links, Code, Zitate, Bilder und Tabellen. Bewusst Dokument-CSS: der Inhalt ist Light DOM, und ::slotted() endet auf der ersten Ebene.

Segmentwahl

Eine kleine, exklusive Auswahl als ein Bedienelement — Ampel, Vormittag / Nachmittag, Modus. Knöpfe in einer role="group"; der gewählte trägt aria-pressed="true", und genau an diesem Attribut hängt das Styling, damit Zustand und Semantik nicht auseinanderlaufen. Die Ton-Modifier setzen einen Punkt in einer Zustandsfarbe vor die Beschriftung. Probier es: Klick oder Tab auf einen Knopf und Leertaste. Mehr Optionen als Platz? Ohne Modifier bleibt die Zeile einzeilig und läuft über den Rand; --scroll lässt sie seitwärts scrollen, --wrap bricht sie um. Beide lassen sich mit --full kombinieren.

Schrittanzeige

Fortschritt durch einen kurzen Ablauf: nummerierte Kreise mit Haarlinien dazwischen, erledigte auf der Erfolgsfläche (mit SVG-Haken), der aktuelle in der Primärfarbe und mit aria-current="step".

Die Liste ist ein Größen-Container: unter 360 px behält nur der aktuelle Schritt seine Beschriftung, die anderen zeigen ihre Nummer; davor kürzen Beschriftungen mit Ellipse. Maßgeblich ist die Breite des Blocks, nicht des Viewports — hier in einem 300-px-Rahmen:

Bottom-Sheet

Das Bottom-Sheet ist das mobile Geschwister des Modals: ein Overlay, das einblendet, und ein Panel, das von der Unterkante hochfährt, nur oben gerundet, mit Griff und Safe-Area-Abstand. Eigener Block statt Modal-Modifier, weil Layout, Einfahrbewegung und Geste verschieden sind. --inline bettet das Panel ohne Overlay in den Fluss ein; die Overlay-Form braucht ein wenig JavaScript, unten gezeigt und in GlassKit Elements als <glk-sheet> umgesetzt.

Leerzustand

Für leere Listen und Ergebnisseiten: eine zentrierte Spalte mit runder Icon-Fläche, Titel, kurzem gedämpftem Text und Platz für eine oder mehrere Aktionen nebeneinander.

Wochenstreifen

Eine Reihe von Tages-Chips, die seitwärts scrollt — ein Buchungshorizont, die Tage um heute. Jeder Chip ist ein <button> mit Wochentag, Tageszahl und einem Punkt, den ein Ton-Modifier einfärbt; ohne Ton bleibt der Punkt transparent, damit Chips mit und ohne Markierung gleich hoch sind. Der gewählte Chip trägt aria-pressed="true" wie in der Segmentwahl; :disabled oder aria-disabled="true" dimmt einen Tag, der nicht wählbar ist. Die Scrollbar ist versteckt. Gib jedem Knopf ein aria-label mit dem vollen Datum — das sichtbare „Di 22“ ist kein Name. <glk-date-strip> in GlassKit Elements baut das aus Daten, mit Pfeiltasten und zentriertem gewähltem Chip.

Monatskalender

Ein Monat: Titel zwischen zwei runden Navigationsknöpfen, Wochentagszeile und 42 quadratische Tages-Knöpfe mit bis zu drei Punkten unter der Zahl. Der gewählte Tag trägt aria-pressed="true", --today zeichnet einen warmen Rahmen, --other dimmt einen Tag des Nachbarmonats, :disabled oder aria-disabled="true" dimmt einen Tag außerhalb des erlaubten Bereichs — die zweite Form bleibt für Pfeiltasten fokussierbar. Der Block ist eine role="group" aus Knöpfen mit dem vollen Datum als Namen, kein role="grid". <glk-calendar> in GlassKit Elements baut ihn, mit Tastaturnavigation und Namen aus Intl.

Bildauswahl

Ein Bild wählen, mit Vorschau: eine 72-px-Fläche — das Bild mit object-fit: cover oder ein Platzhalter-Icon — und eine Spalte mit Beschriftung, Hinweis und Aktionen, die gewöhnliche .glass-btn-Knöpfe sind; der Block bringt keine eigene Knopfoptik mit. --round macht die Fläche rund für Avatare; eine lange Beschriftung bricht um und drückt die Fläche nie zusammen. Jedes Bild, nicht nur Fotos. <glk-image-picker> in GlassKit Elements ergänzt Dateidialog, EXIF-Drehung und Verkleinerung.

Foto des Hundes JPG oder PNG · wird vor dem Hochladen auf 1024 px verkleinert

Auswählen

Profilfoto

ÄndernEntfernen

Utilities

📋 Alle Klassen auf einen Blick

🤖 KI / LLM-Referenz

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

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

🧩 Die GlassKit-Familie

GlassKit ist das CSS-Fundament einer dreischichtigen Familie – drei Schichten, eine Designsprache. Für alles jenseits einzelner Komponenten sind die Schwesterprojekte der vorgesehene Weg.