Living Component Showcase & SaaS Design System

PVveda Design System

Zentrale Dokumentation aller offiziellen Vanilla CSS & JS Komponenten, Layout-Container, Badges, Buttons und Utility-Klassen für das PVveda Projekt.

1. Container & Layout Grid System

Standardisiertes Bootstrap-Style Container-System (.container, .container-fluid) kombiniert mit responsiven Grid-Utilities (.pv-grid-2, .pv-grid-3, .pv-grid-4).

Container Klassen

.container

Max-Width 1240px, zentriert mit margin: 0 auto und 1.5rem Padding. Keine erzwungenen Top-Abstände.

.has-header-padding / .page-container

Fügt dynamisches Top-Padding unter der fixierten Sticky-Navbar ein (calc(var(--header-height) + 2.25rem)).

Responsive Grids

.pv-grid-2 2-Spalten Layout Grid

.pv-grid-3 3-Spalten Layout Grid

.pv-grid-4 4-Spalten Metrik Grid

2. Cards & Metrik-Widgets

Elevated Karten mit abgerundeten Ecken (10px), Schatten, Header/Body/Footer-Strukturen und Metrik-Widget-Layouts.

Card mit Header & Footer

Standard Card

Dies ist eine vollständige Card-Komponente. Der Header kann Titel und Badges enthalten, der Footer Aktionen.

Beispiel Link →

Tagesertrag (Metrik Widget)

48.2 kWh

↑ +12.4% gegenüber gestern (Normiert)

.pv-hero-card (Willkommens & Empty-State Hero Card)

Zentrierte Willkommenskarte für leere Zustände mit großem Aufruf-Button und Vorteilszeilen.

✓ 100% Kostenlos • ✓ REST-API Ingestion

3. Badges & Status-Tags (Metronic Style)

Saubere CSS-Klassen für Projekt- und Systemstatus mit moderater Eckenrundung (border-radius: 6px).

Status-Varianten

In Progress Completed Pending Overdue Info / Live Neutral Solid Dark

Badges mit Pulsing Live-Dot

Live Telemetrie Beta Release ✓ Konto Verifiziert Verifizierung erforderlich

Größen-Varianten

Small (.pv-badge-sm) Default (.pv-badge) Large (.pv-badge-lg)

4. Buttons & Interaktionen

Vollständige Button-Suite mit Metronic-Styling, Stationärem Hover (kein Springen) und WCAG AAA-Kontrasten.

Farb-Varianten

Größen & Status

5. Segmentierte Tab-Navigation & Mobile Pills

Modulare Tab-Schaltflächen (.pv-tab-nav, .pv-tab-btn, .pv-compact-module-tabs, .pv-module-btn) zur Aufteilung komplexer Datenansichten.

.pv-wizard-progress (Multi-Step Onboarding Wizard)

✓ 1. Basisdaten

2 2. Ausrichtung

3 3. Technik & Speicher

6. Progress Bars & Quoten-Balken

Visuelle Fortschrittsbalken für Autarkiegrade, Speicherauslastung und Prozentquoten.

.pv-progress-fill-success (Autarkiegrad 91.4%) 91.4 %

.pv-progress-fill-primary (Eigenverbrauchsquote 78.6%) 78.6 %

.pv-progress-fill-warning (Speicherauslastung 94.2%) 94.2 %

6. Interaktiver Vanilla JS PV Telemetrie Chart

Hochperformantes HTML5 Canvas / SVG Chart-System mit interaktivem Hover-Tooltip, Trendlinien und Umschalt-Tabs (.pv-chart-container, .pv-chart-tooltip).

5. Alerts & Benachrichtigungen

Integrierte Hinweismeldungen mit Icons, Titeln und abgestimmten Status-Hintergründen.

📩

.pv-alert-info

Informationen oder Systemhinweise für den Benutzer.

✅

.pv-alert-success

Erfolgreiche Aktionen oder Bestätigungen.

⚠️

.pv-alert-warning

Ausstehende Schritte oder Warnmeldungen.

❌

.pv-alert-error

Kritische Fehler oder abgebrochene Prozesse.

6. Typografie & Text-Helpers

Headlines mit Outfit-Schriftart, Gradient-Text-Effekten und semantischen Farbklassen.

.pv-page-title (Page H1 Title)

.pv-page-subtitle (Subtiler Untertitel oder Slogan)

.text-gradient-hero / .text-gradient-primary
.text-gradient-solar
.text-gradient-cyan

.text-success (#059669) .text-danger (#DC2626) .text-warning (#D97706) .text-muted (var(--text-muted)) .text-heading (var(--text-heading))

7. Utility-Klassen Quick Reference

Generische Hilfsklassen für Abstand, Layout und Flexbox-Ausrichtung ohne Inline-Styles.

Padding Utilities

.padding-10 (1rem)
.padding-125 (1.25rem)
.padding-15 (1.5rem)
.padding-20 (2rem)

Margin Bottom Utilities

.mb-10 (1rem)
.mb-15 (1.5rem)
.mb-20 (2rem)
.mb-30 (3rem)

Zentrierung & Max-Width

.mx-auto (margin: 0 auto)
.max-w-sm (450px max)
.max-w-md (580px max)
.max-w-lg (800px max)

Flex & Display

.pv-flex-between
.pv-flex-center
.text-center
.w-100 (Width 100%)

8. Dynamisches Modalsystem (modal.js)

Saubere, route-basierte Modalfenster ohne Inline-JavaScript. Modale können wahlweise dynamisch per AJAX geladen oder statisch im DOM bereitgestellt werden.

1. Dynamische Modale (Route-basiert)

Jeder Link mit dem Attribut data-modal="true" wird automatisch per AJAX geladen. Der Server liefert die Seite ohne Layout zurück und wird in ein dynamisches Modal gerendert.

<a href="/user/settings" data-modal="true" class="pv-btn pv-btn-primary">
  Einstellungen öffnen
</a>

Demo: Einstellungen laden

2. Lokale Modale (DOM-basiert)

Statische Modale im DOM werden über data-pv-modal-open="id" oder die JS-API PVModal.open('id') geöffnet. Nützlich für Filter- und Bestätigungsdialoge.

<button type="button" data-pv-modal-open="pvDemoLocalModal" class="pv-btn">
  Lokales Modal
</button>

Formular-Verhalten & AJAX-Submit

Forms in dynamischen Modalen werden automatisch abgefangen und via AJAX abgeschickt.

Erfolg: Die Formularfelder werden komplett entfernt, und das Modal zeigt nur noch die grüne Erfolgsmeldung sowie einen „Schließen“-Button im Footer.
Fehler: Eine rote Alert-Box wird oben im Modal eingeblendet, die Eingaben bleiben editierbar, um Korrekturen zu ermöglichen.