chrisinterface UI-Kit — Styleguide

Komponenten · Buttons (UI-Kit — per Sync verteilt)Components · Buttons (UI Kit — distributed by the sync)

Komponenten · Umschalter (UI-Kit — Pillen in flacher Wanne, der gewählte hebt sich als Griff heraus; die Tastaturbedienung liefert umschalter.js)Components · View switch (UI Kit — pills in a flat tray, the chosen one rises as a grip; keyboard operation comes from umschalter.js)

Komponenten · Formulare (UI-Kit — per Sync verteilt)Components · Forms (UI Kit — distributed by the sync)

Komponenten · Suchfeld (UI-Kit — kein Label nötig; der Platzhalter beschreibt die Suche)Components · Search field (UI Kit — no label needed; the placeholder describes the search)

Komponenten · Modal (UI-Kit — Vorschau, nicht als Overlay)Components · Modal (UI Kit — preview, not as an overlay)

Komponenten · Account-Menü (UI-Kit — für Werkzeuge mit Anmeldung)Components · Account menu (UI Kit — for tools with sign-in)

Komponenten · Popup-Menü · Kebab · Custom-Select (UI-Kit — ⋮-Aktionen & eigenes Dropdown; Popups hier statisch gezeigt)Components · Popup menu · Kebab · Custom select (UI Kit — ⋮ actions & own dropdown; popups shown static here)

Komponenten · Toast (Baustein — live: ok/info/warn oben rechts, Fehler unten Mitte)Components · Toast (block — live: ok/info/warn top right, errors bottom center)

Komponenten · Vorgang (Baustein — sperrt die Seite, solange Import, Export oder Löschen läuft; der Erfolg geht von selbst, Hinweis und Fehler bleiben. Hier statisch; die Knöpfe spielen ihn live ab.)Components · Operation (block — locks the page while import, export or delete is running; success closes by itself, notice and error stay. Static here; the buttons play it live.)

Komponenten · Status & Badges (UI-Kit — Zustand = Punkt+Text, Eigenschaft = Chip)Components · Status & badges (UI Kit — state = dot + text, property = chip)

Komponenten · Nebentext (Baustein — .leise: der Text, der zurücktreten soll)Components · Secondary text (block — .leise: text that steps back)

Komponenten · Diagramm (Baustein charts.js — liest die Farbrollen beim Zeichnen; ECharts lädt das Werkzeug selbst, hier vom CDN)Components · Chart (block charts.js — reads the color roles when drawing; the tool loads ECharts itself, here from the CDN)

Komponenten · Leer-Zustände (UI-Kit — was ein Bereich sagt, wenn er nichts zu zeigen hat)Components · Empty states (UI Kit — what an area says when it has nothing to show)

Links .zustand.knapp — die leere STELLE: der eine Satz in Liste, Tabelle oder Schublade, kompakt und linksbündig. Rechts .zustand mit .titel — der leere BEREICH, großzügig und mittig; ein .btn darin („Erneut versuchen") bekommt Luft nach oben.

Left .zustand.knapp — the empty SPOT: the one sentence in a list, table or drawer, compact and left-aligned. Right .zustand with .titel — the empty AREA, generous and centered; a .btn inside (“Try again”) gets air above.

Komponenten · Login-Formular (UI-Kit — Karte + Marke + Felder + Primär-Button komponiert)Components · Sign-in form (UI Kit — card + brand + fields + primary button composed)

Werkzeug

Anmeldung

Benutzername

Passwort

Anmelden

Komponenten · Cockpit (UI-Kit — Kachel, Hero-Zahl und Puls-Punkt für Werkzeuge, die wie ein Instrument aussehen)Components · Cockpit (UI Kit — tile, hero number and pulse dot for tools that look like an instrument)

Kachel (eckig, vertieft, Versalien-Kopf) und Hero-Zahl tragen den Messwert, die Instrument-Zelle 2:07.118 die dichte Zeile einer Zeittafel. Was das Werkzeug misst, bleibt im Werkzeug.

Tile (square, recessed, uppercase head) and hero number carry the reading, the instrument cell 2:07.118 the dense row of a timing table. What the tool measures stays in the tool.

Komponenten · Datenblatt (UI-Kit — die Karte eines Datensatzes; Zeile mit Feld = wird hier gepflegt, Zeile ohne Rahmen = kommt von woanders)Components · Data sheet (UI Kit — the card of one record; row with field = maintained here, row without frame = comes from elsewhere)

Dieselbe Karte kann in einem Werkzeug Felder tragen und im nächsten nur Text — gleiche Reihenfolge, gleiche Etiketten. Der Spaltenwirt (.pk-col) gehört dem Werkzeug: Optik zentral, Größe lokal.

The same card can carry fields in one tool and only text in the next — same order, same labels. The column host (.pk-col) belongs to the tool: look central, size local.

Komponenten · Tabelle (UI-Kit — Hülle: Kopf/Zebra/Hover/Sort; Spalten & Breiten pro Werkzeug)Components · Table (UI Kit — shell: head/zebra/hover/sort; columns & widths per tool)

Komponenten · Drucken (Baustein druck.css — gilt nur beim Drucken: A4, 15 mm Rand, Papier-Typografie, Umbruch-Schutz, Tabellenkopf auf jeder Seite, Bedienung ausgeblendet. Als letztes Stylesheet einbinden.)Components · Print (block druck.css — applies only when printing: A4, 15 mm margins, paper typography, break protection, table header on every page, controls hidden. Include it as the last stylesheet.)

Dieser Absatz steht nur auf dem Papier — Klasse .nur-druck. Gedruckt aus der Galerie des chrisinterface UI-Kits.This paragraph appears only on paper — class .nur-druck. Printed from the chrisinterface UI-Kit gallery.