BUSINESS COLLECTION / ZUSÄTZLICHE ADMIN-DESIGNS

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>

Vier Systeme. Ein klarer Anspruch.

Zurückhaltende Gestaltung für tägliche Arbeit: lesbare Daten, eindeutige Hierarchien und funktionale Navigation. Diese vier Designs ergänzen die expressive Farbkollektion.

01 Executive

Dunkelblaue Seitenleiste, weiße Arbeitsflächen und ein klares Blau als Akzent. Für Projektsteuerung, CRM und Verwaltung.

Executive öffnen ↗

Executive als eigener Arbeitsbereich

Dieser minimale Aufbau verwendet nur die Admin-Gestaltung, keine Anwendungslogik der Rittek-Demo. Setze die Attribute an den body deiner eigenen Seite. Das kleine Script schaltet das mobile Menü um.

HTML

<body data-r-admin="executive" data-r-scheme="executive" data-r-size="small" data-r-font="standard">
  <div class="admin-shell">
    <aside class="admin-sidebar" id="ex-admin-nav-executive">
      <a class="admin-brand" href="#ex-admin-overview-executive">Mein Workspace</a>
      <nav class="admin-nav mt-6" aria-label="Arbeitsbereich">
        <a href="#ex-admin-overview-executive" aria-current="page">Übersicht</a>
        <a href="#ex-admin-reports-executive">Berichte</a>
      </nav>
    </aside>
    <div class="admin-content">
      <header class="admin-topbar">
        <button type="button" class="r-button admin-menu-button" id="ex-admin-menu-executive" aria-controls="ex-admin-nav-executive" aria-expanded="false">Menü</button>
        <span class="breadcrumb">Mein Workspace / Übersicht</span>
      </header>
      <main id="admin-main">
        <section class="admin-panel" id="ex-admin-overview-executive">
          <h1 class="text-2xl font-semibold">Projektübersicht</h1>
          <p class="text-muted mt-4">Hier stehen deine Kennzahlen und Projekte.</p>
        </section>
        <section class="admin-panel mt-4" id="ex-admin-reports-executive">
          <h2 class="text-xl font-semibold">Berichte</h2>
          <p class="text-muted mt-4">Hier stehen deine Auswertungen.</p>
        </section>
      </main>
    </div>
  </div>
</body>

JavaScript · type="module"

const menu = document.getElementById('ex-admin-menu-executive');
menu.addEventListener('click', () => {
  const open = menu.getAttribute('aria-expanded') !== 'true';
  document.body.dataset.menuOpen = String(open);
  menu.setAttribute('aria-expanded', String(open));
});
document.addEventListener('keydown', event => {
  if (event.key === 'Escape' && document.body.dataset.menuOpen === 'true') {
    document.body.dataset.menuOpen = 'false';
    menu.setAttribute('aria-expanded', 'false');
    menu.focus();
  }
});

CSS

@import url("https://ui.rittek.de/assets/admin.css");

02 Slate

Helle schmale Navigation, kühle Grautöne, zusammenhängende Kennzahlenleiste und priorisierte Aufgaben links. Für datenreiche Backoffices.

Slate öffnen ↗

Slate als eigener Arbeitsbereich

Dieser minimale Aufbau verwendet nur die Admin-Gestaltung, keine Anwendungslogik der Rittek-Demo. Setze die Attribute an den body deiner eigenen Seite. Das kleine Script schaltet das mobile Menü um.

HTML

<body data-r-admin="slate" data-r-scheme="slate" data-r-size="small" data-r-font="standard">
  <div class="admin-shell">
    <aside class="admin-sidebar" id="ex-admin-nav-slate">
      <a class="admin-brand" href="#ex-admin-overview-slate">Mein Workspace</a>
      <nav class="admin-nav mt-6" aria-label="Arbeitsbereich">
        <a href="#ex-admin-overview-slate" aria-current="page">Übersicht</a>
        <a href="#ex-admin-reports-slate">Berichte</a>
      </nav>
    </aside>
    <div class="admin-content">
      <header class="admin-topbar">
        <button type="button" class="r-button admin-menu-button" id="ex-admin-menu-slate" aria-controls="ex-admin-nav-slate" aria-expanded="false">Menü</button>
        <span class="breadcrumb">Mein Workspace / Übersicht</span>
      </header>
      <main id="admin-main">
        <section class="admin-panel" id="ex-admin-overview-slate">
          <h1 class="text-2xl font-semibold">Projektübersicht</h1>
          <p class="text-muted mt-4">Hier stehen deine Kennzahlen und Projekte.</p>
        </section>
        <section class="admin-panel mt-4" id="ex-admin-reports-slate">
          <h2 class="text-xl font-semibold">Berichte</h2>
          <p class="text-muted mt-4">Hier stehen deine Auswertungen.</p>
        </section>
      </main>
    </div>
  </div>
</body>

JavaScript · type="module"

const menu = document.getElementById('ex-admin-menu-slate');
menu.addEventListener('click', () => {
  const open = menu.getAttribute('aria-expanded') !== 'true';
  document.body.dataset.menuOpen = String(open);
  menu.setAttribute('aria-expanded', String(open));
});
document.addEventListener('keydown', event => {
  if (event.key === 'Escape' && document.body.dataset.menuOpen === 'true') {
    document.body.dataset.menuOpen = 'false';
    menu.setAttribute('aria-expanded', 'false');
    menu.focus();
  }
});

CSS

@import url("https://ui.rittek.de/assets/admin.css");

03 Forest

Tiefe Petrolgrün-Navigation, dunkle Kopfzeile und warme helle Flächen. Dezente Serifentypografie für eine ruhige, etablierte Anmutung.

Forest öffnen ↗

Forest als eigener Arbeitsbereich

Dieser minimale Aufbau verwendet nur die Admin-Gestaltung, keine Anwendungslogik der Rittek-Demo. Setze die Attribute an den body deiner eigenen Seite. Das kleine Script schaltet das mobile Menü um.

HTML

<body data-r-admin="forest" data-r-scheme="forest" data-r-size="small" data-r-font="standard">
  <div class="admin-shell">
    <aside class="admin-sidebar" id="ex-admin-nav-forest">
      <a class="admin-brand" href="#ex-admin-overview-forest">Mein Workspace</a>
      <nav class="admin-nav mt-6" aria-label="Arbeitsbereich">
        <a href="#ex-admin-overview-forest" aria-current="page">Übersicht</a>
        <a href="#ex-admin-reports-forest">Berichte</a>
      </nav>
    </aside>
    <div class="admin-content">
      <header class="admin-topbar">
        <button type="button" class="r-button admin-menu-button" id="ex-admin-menu-forest" aria-controls="ex-admin-nav-forest" aria-expanded="false">Menü</button>
        <span class="breadcrumb">Mein Workspace / Übersicht</span>
      </header>
      <main id="admin-main">
        <section class="admin-panel" id="ex-admin-overview-forest">
          <h1 class="text-2xl font-semibold">Projektübersicht</h1>
          <p class="text-muted mt-4">Hier stehen deine Kennzahlen und Projekte.</p>
        </section>
        <section class="admin-panel mt-4" id="ex-admin-reports-forest">
          <h2 class="text-xl font-semibold">Berichte</h2>
          <p class="text-muted mt-4">Hier stehen deine Auswertungen.</p>
        </section>
      </main>
    </div>
  </div>
</body>

JavaScript · type="module"

const menu = document.getElementById('ex-admin-menu-forest');
menu.addEventListener('click', () => {
  const open = menu.getAttribute('aria-expanded') !== 'true';
  document.body.dataset.menuOpen = String(open);
  menu.setAttribute('aria-expanded', String(open));
});
document.addEventListener('keydown', event => {
  if (event.key === 'Escape' && document.body.dataset.menuOpen === 'true') {
    document.body.dataset.menuOpen = 'false';
    menu.setAttribute('aria-expanded', 'false');
    menu.focus();
  }
});

CSS

@import url("https://ui.rittek.de/assets/admin.css");

04 Carbon

Durchgehend dunkle Graphitoberfläche mit horizontaler Navigation und entsättigtem Blaugrau. Für Analyse und technische Arbeitsplätze.

Carbon öffnen ↗

Carbon als eigener Arbeitsbereich

Dieser minimale Aufbau verwendet nur die Admin-Gestaltung, keine Anwendungslogik der Rittek-Demo. Setze die Attribute an den body deiner eigenen Seite. Das kleine Script schaltet das mobile Menü um.

HTML

<body data-r-admin="carbon" data-r-scheme="carbon" data-r-size="small" data-r-font="standard">
  <div class="admin-shell">
    <aside class="admin-sidebar" id="ex-admin-nav-carbon">
      <a class="admin-brand" href="#ex-admin-overview-carbon">Mein Workspace</a>
      <nav class="admin-nav mt-6" aria-label="Arbeitsbereich">
        <a href="#ex-admin-overview-carbon" aria-current="page">Übersicht</a>
        <a href="#ex-admin-reports-carbon">Berichte</a>
      </nav>
    </aside>
    <div class="admin-content">
      <header class="admin-topbar">
        <button type="button" class="r-button admin-menu-button" id="ex-admin-menu-carbon" aria-controls="ex-admin-nav-carbon" aria-expanded="false">Menü</button>
        <span class="breadcrumb">Mein Workspace / Übersicht</span>
      </header>
      <main id="admin-main">
        <section class="admin-panel" id="ex-admin-overview-carbon">
          <h1 class="text-2xl font-semibold">Projektübersicht</h1>
          <p class="text-muted mt-4">Hier stehen deine Kennzahlen und Projekte.</p>
        </section>
        <section class="admin-panel mt-4" id="ex-admin-reports-carbon">
          <h2 class="text-xl font-semibold">Berichte</h2>
          <p class="text-muted mt-4">Hier stehen deine Auswertungen.</p>
        </section>
      </main>
    </div>
  </div>
</body>

JavaScript · type="module"

const menu = document.getElementById('ex-admin-menu-carbon');
menu.addEventListener('click', () => {
  const open = menu.getAttribute('aria-expanded') !== 'true';
  document.body.dataset.menuOpen = String(open);
  menu.setAttribute('aria-expanded', String(open));
});
document.addEventListener('keydown', event => {
  if (event.key === 'Escape' && document.body.dataset.menuOpen === 'true') {
    document.body.dataset.menuOpen = 'false';
    menu.setAttribute('aria-expanded', 'false');
    menu.focus();
  }
});

CSS

@import url("https://ui.rittek.de/assets/admin.css");

Solider Klassen- und Farbaufbau

<link rel="stylesheet" href="/assets/rittek.css">
<link rel="stylesheet" href="/assets/admin.css">
<body data-r-admin="executive" data-r-scheme="executive"
      data-r-size="small" data-r-font="standard">
  <div class="admin-shell">
    <aside class="admin-sidebar">…</aside>
    <div class="admin-content">…</div>
  </div>
</body>

Die Dateien unter /assets sind Entwicklungsstände. Alle 14 Farbschemata werden einheitlich mit data-r-scheme gewählt. data-r-admin bestimmt nur den Aufbau der Admin-Demo; beim Farbwechsel bleibt dieser unverändert. Die vier Business-Farbschemata sind bereits im CSS-Kern enthalten; admin.css wird nur für das Admin-Layout benötigt. Die Business-Oberfläche kann mit Utilities, Komponentenvariablen und eigenen CSS-Regeln angepasst werden.

Gemeinsame Klassen: admin-shell, admin-sidebar, admin-topbar, admin-panel, admin-metric, admin-nav und admin-footer. Farbrollen: --r-bg, --r-surface, --r-subtle, --r-text, --r-muted, --r-border, --r-accent und --r-on-accent. Navigation: --admin-nav, --admin-nav-text, --admin-nav-muted und --admin-nav-active.

Farben, Modus, Dichte und Schrift

Alle vier Business-Schemata haben eine helle und dunkle Variante. Im Dashboard stehen zusätzlich Seitendichte XS–XXL und eine unabhängige Schriftgröße bereit. Mit JavaScript: Rittek.setTheme("dark"), Rittek.setSize("xs") und Rittek.setFont("standard"). Ein Farbwechsel erhält diese Einstellungen und die aktuelle Tabellensuche.

Farben wechseln ohne Umbau

Im Dashboard kannst du über „Farbschema“ zwischen allen normalen und Business-Paletten wechseln, ohne Navigation, Daten oder Tabellenzustand neu zu laden. Beispiel: data-r-scheme="ocean" statt data-r-scheme="executive". Mit JavaScript: Rittek.setScheme("ocean"). Die vier Links oben wählen dagegen bewusst einen anderen Admin-Aufbau.

Bedienbare Entwürfe

Bereiche wechseln, Zeitraum ändern, Tabellen suchen/sortieren und CSV exportieren. Mobile Navigation mit Menüschalter. Sämtliche Unternehmen, Personen und Zahlen sind fiktive Demodaten. Kein Login, keine Datenbank und keine serverseitige Speicherung.

Darstellung unabhängig vom Layout wählen

Die Datenattribute bilden die Ausgangswerte. Das allgemeine Rittek-Script verbindet die Selects automatisch mit Farbe, Modus, Dichte und Schrift. In eigenen Projekten wird keine Docs-Navigation erzeugt.

HTML

<body data-r-admin="executive" data-r-scheme="carbon" data-r-size="xs" data-r-font="standard">
  <div class="flex flex-wrap gap-4 p-4">
    <label>Farbschema
      <select class="r-input" data-r-scheme-control>
        <option value="executive">Executive</option>
        <option value="carbon" selected>Carbon</option>
        <option value="ocean">Ocean</option>
        <option value="orchid">Orchid</option>
      </select>
    </label>
    <label>Darstellung
      <select class="r-input" data-r-mode-control>
        <option value="system">System</option>
        <option value="light">Hell</option>
        <option value="dark">Dunkel</option>
      </select>
    </label>
    <label>Seitendichte
      <select class="r-input" data-r-size-control>
        <option value="xs" selected>XS</option>
        <option value="small">Small</option>
        <option value="standard">Standard</option>
        <option value="big">Big</option>
        <option value="xxl">XXL</option>
      </select>
    </label>
    <label>Schriftgröße
      <select class="r-input" data-r-font-control>
        <option value="small">Small</option>
        <option value="standard" selected>Normal</option>
        <option value="big">Big</option>
      </select>
    </label>
  </div>
  <section class="r-card m-4"><h1 class="text-xl font-bold">Mein Projekt</h1><p class="mt-4">Das Layout bleibt beim Farbwechsel erhalten.</p></section>
</body>

JavaScript · type="module"

// Die folgenden Aufrufe sind optional und zeigen dieselbe Steuerung per API.
Rittek.setScheme('carbon');
Rittek.setTheme('system');
Rittek.setSize('xs');
Rittek.setFont('standard');