Die Klassenreferenz.

Generiert aus derselben Quelle wie das CSS. Ohne Build direkt nutzbar.

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>

Varianten

sm: 640 px · md: 768 px · lg: 1024 px · xl: 1280 px · 2xl: 1536 px. Außerdem hover:, focus-visible:, active:, disabled:, dark: und print:. Zusätzlich: focus-within:, checked:, required:, invalid:, aria-expanded: und aria-selected:. Kombinierte Varianten für sm/md/lg/xl mit hover oder focus-visible sind verfügbar; beliebige Kombinationen sind noch nicht enthalten.

grid md:grid-cols-3 gap-4 hover:bg-accent

Klasse oder CSS-Eigenschaft suchen

Utility-Klassen und ihre CSS-Eigenschaften
Klasse	CSS

Dein erstes Layout mit Utilities

Jede Klasse übernimmt eine konkrete Aufgabe: grid aktiviert das Raster, gap-4 setzt den Abstand und md:grid-cols-2 schaltet ab 768 Pixeln auf zwei Spalten.

HTML

<main class="r-container py-8">
  <h1 class="text-3xl font-bold">Mein erstes Rittek-Projekt</h1>
  <div class="grid md:grid-cols-2 gap-4 mt-6">
    <section class="r-card">
      <h2 class="text-xl font-bold">Projektübersicht</h2>
      <p class="text-muted mt-4">Diese Karte steht auf kleinen Displays über der zweiten Karte.</p>
      <button type="button" class="r-button r-button-primary mt-4">Projekt öffnen</button>
    </section>
    <section class="r-card">
      <h2 class="text-xl font-bold">Nächste Schritte</h2>
      <p class="text-muted mt-4">Ab 768 Pixeln stehen beide Karten nebeneinander.</p>
    </section>
  </div>
</main>