Buttons 001
r-button r-button-primaryIN ENTWICKLUNG · v0.2.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
581 Basisklassen mit Varianten, Klassenreferenz, Themes und erste 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.