Zum Inhalt
r/ rittek uiDOCS
Admin-Demo ↗

GESTALTUNG / DESIGN TOKENS

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.

HTML · Grundgerüst
<!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>

Mehr Farbe.
Mehr du.

Zehn abgestimmte Farbwelten, zwei Helligkeitsmodi und lokale Kontrolle über jede Oberfläche. Die grüne Rittek-Basis bleibt erhalten.

Wähle eine Farbwelt für diese Seite. Die Vorschaukarten behalten ihre jeweils eigene Palette; Graphite zeigt bewusst seine dunkle und Porcelain seine helle Variante.

Aktuell: Rittek Lime

Global einstellen. Lokal überschreiben.

Für die ganze Seite

<html data-theme="dark">
<body data-r-scheme="orchid"
      data-r-size="xs"
      data-r-font="standard">

Farbschema, Hell/Dunkel, Seitendichte und Schrift sind voneinander unabhängig. Alles funktioniert auch ohne JavaScript.

Die ganze Seite gestalten

Diese Attribute gehören an die vorhandenen html- und body-Elemente deiner Seite. Farbe, Hell/Dunkel, Dichte und Schrift sind unabhängig.

HTML
<!doctype html>
<html lang="de" data-theme="dark">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Mein Projekt</title></head>
<body data-r-scheme="orchid" data-r-size="xs" data-r-font="standard">
  <main class="r-container py-8"><h1 class="text-2xl font-bold">Mein Projekt</h1><p class="mt-4">Kompakte Abstände mit normaler Schrift.</p></main>
</body>
</html>

LOKAL · ORCHID / XS / NORMALE SCHRIFT

Ein Bereich mit eigenem Stil.

Diese Karte behält ihre Farben und ihre Dichte, auch wenn du die gesamte Seite umstellst.

<section data-r-scheme="orchid"
  data-theme="light" data-r-size="xs"
  data-r-font="standard">…</section>

Einen Bereich unabhängig gestalten

Die Attribute gelten nur für diesen Bereich und seine Inhalte. Andere Teile der Seite behalten ihre eigene Gestaltung.

HTML
<section class="r-card" data-r-scheme="orchid" data-theme="light" data-r-size="xs" data-r-font="standard">
  <h2 class="text-xl font-bold">Mein Projektbereich</h2>
  <p class="text-muted mt-4">Dieser Bereich ist immer hell und kompakt.</p>
  <button type="button" class="r-button r-button-primary mt-4">Speichern</button>
</section>

Einzelne Komponenten frei gestalten

<button class="r-button r-button-primary
  px-8 py-2 rounded-full">Speichern</button>

<button class="r-button r-button-primary"
  style="--r-button-bg:#9f247f;
         --r-button-color:#fff;
         --r-button-radius:4px;
         --r-button-px:28px">Speichern</button>

Utilities überschreiben die Komponentenbasis. Für freie Werte kannst du CSS-Variablen, eigene Klassen oder direkte CSS-Eigenschaften verwenden. Tailwinds Syntax für beliebige Werte wie p-[13px] ist derzeit noch nicht implementiert.

Buttons gezielt überschreiben

Utilities ändern Abstände und Form. Komponentenvariablen erlauben freie Werte, ohne eine neue Framework-Klasse zu benötigen.

HTML
<button type="button" class="r-button r-button-primary px-8 py-2 rounded-full">Mit Utilities</button>
<button type="button" class="r-button r-button-primary" style="--r-button-bg:#9f247f;--r-button-color:#ffffff;--r-button-radius:4px;--r-button-px:28px;--r-button-py:10px">Eigene Werte</button>

Deine eigenen Designvariablen

.mein-bereich {
  --r-accent: #9f247f;
  --r-on-accent: #ffffff;
  --r-focus: #9f247f;
  --r-radius: 18px;
  --r-density: .65;
}

/* Komponenten: */
/* --r-card-padding, --r-card-radius, --r-card-bg */
/* --r-input-px, --r-input-py, --r-input-radius */
/* --r-button-px, --r-button-py, --r-button-radius */

Hauptfarben: --r-bg, --r-surface, --r-subtle, --r-text, --r-muted, --r-border, --r-accent und --r-on-accent. Eigene Werte benötigen passende Kontraste. Die geprüften Presets bieten dafür einen Ausgangspunkt.

Eigene Designvariablen verwenden

Eine eigene CSS-Klasse kann die gemeinsamen Designrollen überschreiben. Wähle immer eine gut lesbare Kombination von Akzent und Akzenttext.

HTML
<section class="r-card mein-projektbereich">
  <h2 class="text-xl font-bold">Individuelle Gestaltung</h2>
  <p class="text-muted mt-4">Die Komponenten verwenden die lokalen Variablen.</p>
  <button type="button" class="r-button r-button-primary mt-4">Aktion</button>
</section>
CSS
.mein-projektbereich {
  --r-accent: #9f247f;
  --r-on-accent: #ffffff;
  --r-focus: #9f247f;
  --r-radius: 18px;
  --r-density: .65;
}