Erste Schritte
Einbinden
Abschnitt betitelt „Einbinden“Das Design System ist eine versionierte CSS-Datei. Diese Doku beschreibt Version 0.2.1.
Binde sie im <head> deiner Anwendung ein:
<link rel="stylesheet" href="https://avag-mui.nbg1.your-objectstorage.com/v0.2.1/avag.min.css">Die Versionsnummer in der URL ist fix — deine Anwendung bekommt Updates nur, wenn du bewusst auf eine neue Version wechselst. Veröffentlichte Versionen bleiben unverändert verfügbar. Über die Versions-Auswahl in der Seitenleiste schaltest du live zwischen Versionen um — die Vorschauen laden dann das CSS der gewählten Version direkt aus dem Objektspeicher.
Erste Komponente
Abschnitt betitelt „Erste Komponente“Alle Komponenten sind reine HTML-Strukturen mit CSS-Klassen — kein JavaScript nötig. Vorschau ansehen, Code kopieren, fertig:
<button class="button is-primary">Los geht's</button>Dark Mode
Abschnitt betitelt „Dark Mode“Standardmäßig folgt alles dem Betriebssystem. Manuell steuern per data-theme auf dem <html>-Element:
<html data-theme="dark"> <!-- oder "light" -->Eigene Anpassungen
Abschnitt betitelt „Eigene Anpassungen“Dein CSS gewinnt immer gegen die Library — sie nutzt Cascade Layers, eigene (unlayered) Regeln
haben automatisch Vorrang. Kein !important nötig. Für gezieltes Feintuning exponiert jede
Komponente zusätzlich Variablen:
.button { --button-bg: rebeccapurple; }