Buttons 001
r-button r-button-primaryIN ENTWICKLUNG · v0.3.0Weniger Hürden.
Weniger Hürden.
Mehr Interface.
Dein Werkzeugkasten für das Web. Klare Utilities, durchdachte Komponenten und volle Kontrolle – direkt in deinem HTML und PHP.
Eigenständiger Kern. Keine Abhängigkeiten. Kein Build erforderlich.
● ● ●interface / preview
RK
DEIN NÄCHSTES PROJEKTVon der Idee
ins Interface.
Ein paar Klassen. Dein eigener Stil.
<div class="r-card grid gap-4">
<h3>Dein nächstes Projekt</h3>
<button class="r-button
r-button-primary">Los geht’s</button>
</div>HTML + PHP
Für dein bestehendes Projekt
CSS + Vanilla JS
Direkt einbinden und loslegen
Schritt für Schritt
Ein Kern, der mitwächst
01 / Komponentenlabor
Kleine Teile.
Viele Möglichkeiten.
Das ist die erste Grundlage. Probiere die Komponenten aus und wechsle zwischen hellem und dunklem Theme.
Formular 002
Dialog & Feedback 003
data-r-dialog · data-r-toastDesignvariablen 004
accent
background
subtle
text
Zentrale CSS-Variablen verbinden beide Themes.
Responsive Layouts 005
01
02
03
Auf kleinen Displays gestapelt, ab 768 px nebeneinander.
grid md:grid-cols-3 gap-2Als Nächstes 006
GEPLANT
Daten sichtbar machen.
Charts, Tabellen und weitere interaktive Module folgen. Diese Version konzentriert sich auf den CSS-Kern.
02 / Schnellstart
Dein HTML reicht.
Binde die aktuelle Entwicklerversion ein. JavaScript brauchst du nur für interaktive Komponenten.
PHP-Ausgabe ansehen ↗Die Dateien unter /assets sind ein veränderlicher Entwicklungsstand. Versionierte CDN-Releases folgen später.
PHP-Beispiel: aktuell als über PHP CLI erzeugte Vorschau. Die PHP-Ausführung im Webserver wird noch eingerichtet.
HTML / PHP
<link rel="stylesheet"
href="https://ui.rittek.de/assets/rittek.css">
<script defer
src="https://ui.rittek.de/assets/rittek.js"></script>
<main class="r-container py-16">
<div class="r-card grid gap-4">
<h1 class="text-xl font-bold">Hallo Rittek!</h1>
<button class="r-button r-button-primary"
data-r-toast="Es funktioniert!">
Ausprobieren
</button>
</div>
</main>03 / Der Weg nach vorn
Ein Fundament.
Dann weiterbauen.
Die Grundlage
Erweiterter CSS-Kern, Klassenreferenz, Systemmodus, Formularabläufe und interaktive Module.
Der Werkzeugkasten
Mehr Utilities und Zustände, Navigation, Tabs und Tabellen. Eine vollständige Klassenreferenz.
Das Ökosystem
Charts, Vorlagen, Theme-Werkzeuge, versioniertes CDN und Integrationen.