Reset & Base CSS
Zwei globale CSS-Dateien legen das Fundament für alle Komponenten:
reset.css normalisiert Browser-Defaults und setzt eigene Basis-Stile,
base.css definiert Form-Label-Verhalten, Floating-Labels und Größen-System.
reset.css – Normalisierung & Basis
Diese Stile gelten global für alle HTML-Elemente ohne zusätzliche Klassen.Überschriften (h1–h6) haben
margin: 0
Überschrift H1
Überschrift H2
Überschrift H3
Überschrift H4
Überschrift H5
Absätze (
p) haben margin: 0 – kein unerwünschter Außenabstand
Erster Absatz – kein Margin oben/unten.
Zweiter Absatz – direkt darunter ohne Lücke.
Links:
text-decoration: none, Farbe via --oo-primary
pre – Hintergrund, Border, Radius und Padding aus Design Tokens
Das ist ein pre-Block. Zeilenumbrüche werden beibehalten. background: --oo-surface-2 | border: --oo-color-border | radius: --oo-radius-md
code – leichter Hintergrund und Padding; pre code resettet das wieder
Inline:
const x = 42; im Fließtext// pre code – kein extra Hintergrund
function hallo() {
return "Welt";
}b / strong verwenden font-weight: 600 statt 700
Normaler Text, fetter Text mit strong, fetter Text mit b, normaler Text.
Font-Familie und Box-Sizing werden global auf alle Elemente vererbt
base.css – Form-Labels & Größen-System
Definiert das Floating-Label-Verhalten und das Größen-System (oo-size-xs bis oo-size-xl)
das alle Input-Komponenten verwenden.
Floating Labels – transform + font-size Transition bei Fokus/Wert
Größen-System via
Size-Parameter – steuert font-size, min-height und padding