Die Seitendichte steuert Abstände und Bedienelemente. Die Schrift bleibt normal groß und lässt sich mit dem eigenen Dropdown unabhängig einstellen. Ohne JavaScript genügt:
<body data-r-size="xs" data-r-font="standard">Breakpoints bleiben gleich. Browser-Zoom funktioniert unabhängig davon.
Das Komponentenlabor.
Utilities, Zustände und Bewegung in einem gemeinsamen System.
Neu dabei? Rittek UI in HTML oder PHP einbinden
Dieses Grundgerüst funktioniert auch als .php-Datei. Setze das Beispiel-HTML in den Body. JavaScript-Beispiele kommen darunter in einen <script type="module">-Block. Bei einem eigenen Server ersetzt du /assets/ in den Imports durch https://ui.rittek.de/assets/ oder kopierst die Assets auf deinen Server. Die Demo-Navigation gehört nicht zum Framework.
<!doctype html>
<html lang="de" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Meine Rittek-Seite</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<!-- Hier das HTML des gewünschten Beispiels einsetzen. -->
<script src="https://ui.rittek.de/assets/rittek.js"></script>
<!-- JavaScript aus dem Beispiel in einen script type="module"-Block einsetzen. -->
</body>
</html>Tabs mit Tastaturbedienung
Tabs zum Umschalten
Die IDs verbinden jeden Tab mit genau einem Inhaltsbereich. Das optionale Modul übernimmt Klicks und Pfeiltasten.
<div data-r-tabs>
<div class="r-tabs" role="tablist" aria-label="Projektinformationen">
<button type="button" role="tab" id="ex-overview-tab" aria-controls="ex-overview-panel" aria-selected="true">Übersicht</button>
<button type="button" role="tab" id="ex-settings-tab" aria-controls="ex-settings-panel" aria-selected="false" tabindex="-1">Einstellungen</button>
</div>
<div class="r-tab-panel" role="tabpanel" id="ex-overview-panel" aria-labelledby="ex-overview-tab" tabindex="0">Hier steht die Projektübersicht.</div>
<div class="r-tab-panel" role="tabpanel" id="ex-settings-panel" aria-labelledby="ex-settings-tab" tabindex="0" hidden>Hier stehen die Einstellungen.</div>
</div>import {init} from 'https://ui.rittek.de/assets/modules/interactions.js';
const tabs = init(document);Menü & Drawer
Aktionsmenü und Seitenpanel
Das Interaktionsmodul steuert das Menü. data-r-dialog und data-r-close werden vom allgemeinen Rittek-Script verarbeitet.
<div class="r-dropdown" data-r-dropdown>
<button type="button" class="r-button" aria-haspopup="menu" aria-expanded="false" aria-controls="ex-actions">Aktionen</button>
<div class="r-menu" id="ex-actions" role="menu" aria-label="Projektaktionen" hidden>
<button type="button" role="menuitem" data-r-dialog="ex-drawer">Details öffnen</button>
<button type="button" role="menuitem" data-r-toast="Die Demoaktion wurde ausgelöst.">Meldung anzeigen</button>
</div>
</div>
<dialog class="r-dialog r-drawer" id="ex-drawer" aria-labelledby="ex-drawer-title">
<h2 id="ex-drawer-title">Projektdetails</h2>
<p class="text-muted mt-4">Dieser Inhalt gehört zu deinem Projekt.</p>
<button type="button" class="r-button mt-4" data-r-close>Schließen</button>
</dialog>import {init} from 'https://ui.rittek.de/assets/modules/interactions.js';
const menu = init(document);Formularbausteine
Passwort und Zeichenzähler
Normale Eingabefelder bekommen durch Datenattribute kleine Zusatzfunktionen. Der Schalter ist eine native Checkbox.
<label class="r-label" for="ex-password">Passwort</label>
<div class="flex gap-2">
<input class="r-input min-w-0" id="ex-password" type="password" autocomplete="new-password">
<button type="button" class="r-button" data-r-password="ex-password" aria-pressed="false">Anzeigen</button>
</div>
<label class="r-label mt-4" for="ex-description">Beschreibung</label>
<textarea class="r-input" id="ex-description" maxlength="120" data-r-count="ex-count" aria-describedby="ex-count"></textarea>
<p class="r-help" id="ex-count"></p>
<label class="flex items-center gap-3 mt-4"><input type="checkbox" class="r-switch"> Benachrichtigungen aktivieren</label>import {init} from 'https://ui.rittek.de/assets/modules/interactions.js';
const fields = init(document);Accordion
Brauche ich einen Build?
Wie funktionieren Module?
Aufklappbarer Inhalt
details und summary funktionieren ohne JavaScript. Die r-accordion-Klasse liefert die Gestaltung.
<details class="r-accordion">
<summary>Wie binde ich Rittek UI ein?</summary>
<div>Füge die CSS-Datei ein. JavaScript brauchst du nur für interaktive Zusatzmodule.</div>
</details>Animationen
Bewegung ist optional. Deine Systemeinstellung für reduzierte Bewegung wird berücksichtigt.
Bewegung und Ladezustände
Die Animationsklassen starten beim Einfügen. Die Betriebssystemeinstellung für reduzierte Bewegung wird berücksichtigt.
<div class="grid md:grid-cols-3 gap-4">
<div class="r-card r-animate-fade">Einblenden</div>
<div class="r-card r-animate-slide">Hineingleiten</div>
<div class="r-card r-animate-scale">Vergrößern</div>
</div>
<div class="flex items-center gap-4 mt-6">
<span class="r-spinner" role="status" aria-label="Wird geladen"></span>
<span class="r-skeleton w-full" aria-hidden="true"></span>
</div>
<label class="r-label mt-4" for="ex-progress">Fortschritt: 65 %</label>
<progress class="r-progress" id="ex-progress" value="65" max="100">65 %</progress>Status & Fokus
Bitte gib eine vollständige E-Mail-Adresse ein.
Fehler eindeutig beschriften
Verbinde einen Fehlertext über aria-describedby mit dem Feld. aria-invalid zeigt den Fehlerzustand für assistive Technik an.
<label class="r-label" for="ex-error-email">E-Mail</label>
<input class="r-input" id="ex-error-email" type="email" value="ungueltig" aria-invalid="true" aria-describedby="ex-email-error">
<p class="r-error" id="ex-email-error">Bitte gib eine vollständige E-Mail-Adresse ein.</p>Buttons in mehreren Größen
r-button ist die Basis. Zusätzliche Klassen wählen Größe und Betonung; disabled deaktiviert den Button.
<div class="flex flex-wrap gap-3">
<button type="button" class="r-button r-button-sm">Klein</button>
<button type="button" class="r-button r-button-primary" data-r-toast="Die Aktion wurde ausgelöst.">Speichern</button>
<button type="button" class="r-button r-button-lg">Groß</button>
<button type="button" class="r-button" disabled>Nicht verfügbar</button>
</div>Tooltip & Popover
Platz für zusätzliche Infos
Ein nativer Popover mit Außenklick und Escape-Unterstützung.
Hinweise und zusätzliche Infos
Der Tooltip braucht initTools(). Der native Popover wird über popovertarget geöffnet und lässt sich mit Escape schließen.
<span class="r-tooltip-wrap" data-r-tooltip-wrap>
<button type="button" class="r-button" aria-describedby="ex-tooltip">Hinweis</button>
<span class="r-tooltip" id="ex-tooltip" role="tooltip" hidden>Dieser Hinweis erscheint auch bei Tastaturfokus.</span>
</span>
<button type="button" class="r-button" popovertarget="ex-popover">Weitere Infos</button>
<div class="r-popover" id="ex-popover" popover>
<h2 class="text-xl font-bold">Zusätzliche Informationen</h2>
<p class="mt-4">Hier steht ein hilfreicher Hinweis.</p>
<button type="button" class="r-button mt-4" popovertarget="ex-popover" popovertargetaction="hide">Schließen</button>
</div>import {initTools} from 'https://ui.rittek.de/assets/modules/tools.js';
const hints = initTools(document);Command-Palette
Dokumentation und Demos schnell erreichen. Tastenkürzel: Strg/K bzw. Cmd/K außerhalb von Eingabefeldern.
Layout & Formulare ↗Eine durchsuchbare Aktionsliste
Jeder Link mit data-r-command-item wird durchsucht. Das Modul öffnet den Dialog auch mit Strg/Cmd+K außerhalb von Eingabefeldern.
<button type="button" class="r-button" data-r-open-command="ex-command">Aktionen suchen</button>
<dialog class="r-dialog r-command" id="ex-command" data-r-command aria-labelledby="ex-command-title">
<h2 id="ex-command-title">Aktionen</h2>
<label class="r-label mt-4" for="ex-command-search">Seite suchen</label>
<input class="r-input" id="ex-command-search" type="search">
<nav class="r-command-list" aria-label="Suchergebnisse">
<a data-r-command-item href="https://ui.rittek.de/docs/">Klassenreferenz</a>
<a data-r-command-item href="https://ui.rittek.de/docs/admin.html">Business Admin</a>
</nav>
<p class="r-help mt-4" data-r-command-empty role="status" hidden>Keine passende Aktion gefunden.</p>
<form method="dialog"><button class="r-button mt-4">Schließen</button></form>
</dialog>import {initTools} from 'https://ui.rittek.de/assets/modules/tools.js';
const commands = initTools(document);Die komplette Referenz wächst mit dem Framework. Tabellen und Charts sind im Datenlabor als erste eigenständige Module verfügbar.