GRUNDLAGEN / PHASEN 2–4

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>

Ein verlässliches Fundament.

Positionierung, Grid-Reihen, logische Abstände und Formulare mit verständlichen Zuständen.

Layout passt sich der Schreibrichtung an.

end-2

Logischer Anfang

ps-6 ist immer der innere Abstand am Anfang der Zeile.

<div dir="rtl" class="relative p-6">
  <span class="absolute top-2 end-2">Status</span>
  <p class="ps-6 text-start">Inhalt</p>
</div>

Abstände für LTR und RTL

Mit dir legst du die Schreibrichtung fest. start/end und ps/pe beziehen sich auf den logischen Anfang bzw. das Ende.

HTML

<div dir="rtl" class="relative border rounded p-6">
  <span class="absolute top-2 end-2 r-badge bg-accent">Status</span>
  <p class="text-start font-bold mt-4">Projektübersicht</p>
  <p class="ps-6 mt-4">Dieser Text hat Abstand am logischen Zeilenanfang.</p>
</div>

Grid-Reihen & Spalten

01
row-span-2

02 · col-span-2

Auch Start-/Endlinien, automatische Reihen, Bruchbreiten und negative Insets stehen bereit.

Raster mit unterschiedlich großen Feldern

grid-cols-3 erzeugt drei Spalten. row-span-2 und col-span-2 lassen Inhalte mehrere Rasterfelder belegen.

HTML

<div class="grid grid-cols-3 grid-rows-2 gap-3 h-48">
  <div class="row-span-2 p-4 bg-accent rounded">Links über zwei Reihen</div>
  <div class="col-span-2 p-4 bg-subtle rounded">Oben über zwei Spalten</div>
  <div class="p-4 border rounded">Unten Mitte</div>
  <div class="p-4 border rounded">Unten rechts</div>
</div>

Zustände & Druck

Fokus und Auswahl sind sichtbar.

Fokus im Bereich

print:hidden blendet Navigation beim Drucken aus. print:block blendet druckspezifische Inhalte ein.

Zustände und Druckansicht

Varianten wie focus-within: und checked: gelten nur im passenden Zustand. print: gilt beim Drucken.

HTML

<label class="flex gap-3 items-center">
  <input type="checkbox" class="r-check checked:ring-2"> Auswahl markieren
</label>
<div class="p-4 border rounded focus-within:border-accent mt-4">
  <label class="r-label" for="ex-focus">Projektname</label>
  <input class="r-input" id="ex-focus">
</div>
<p class="print:hidden mt-4">Dieser Text ist nur am Bildschirm sichtbar.</p>
<p class="hidden print:block">Dieser Text erscheint nur in der Druckansicht.</p>

Ein vollständiger Formularablauf

Felder prüfen, Fehler korrigieren, Ergebnis sehen. Lokale Demo ohne Versand oder Speicherung.

import {initForms} from '/assets/modules/forms.js';
const forms = initForms(document);
// forms.destroy();

// Ohne data-r-preview bleibt die normale Formularaktion erhalten.
// rittek:formvalid kann eine Anwendung zum eigenen Versand abfangen.
// Servervalidierung bleibt bei der Anwendung.

Ein Formular lokal prüfen

required und type=email beschreiben die Browserregeln. Das Modul ergänzt Fehlerübersicht und Fokusführung; diese Vorschau versendet keine Daten.

HTML

<form method="dialog" data-r-validate data-r-preview>
  <label class="r-label" for="ex-company">Unternehmen *</label>
  <input class="r-input" id="ex-company" name="company" required minlength="2">
  <label class="r-label mt-4" for="ex-contact-email">E-Mail *</label>
  <input class="r-input" id="ex-contact-email" name="email" type="email" required>
  <div class="flex gap-3 mt-6">
    <button class="r-button r-button-primary" type="submit">Prüfen</button>
    <button class="r-button" type="reset">Zurücksetzen</button>
  </div>
  <p class="r-alert mt-4" data-r-form-result role="status" hidden></p>
</form>

JavaScript · type="module"

import {initForms} from 'https://ui.rittek.de/assets/modules/forms.js';
const forms = initForms(document);