Base Fundament CSS Framework

Base, Fundament, CSS und Framework gehören zusammen, weil hier die Regeln festgelegt werden, die später überall wirken.

Die Base-Schicht ist das, was du selten bewusst siehst, aber sofort merkst, wenn sie fehlt. Hier landen Dinge wie Hintergrundfarben, Textfarbe, Standardschrift, Zeilenhöhe, Links, sowie ein paar defensive Entscheidungen. Wenn du später ein Formular baust oder ein Grid, sollen die Elemente nicht plötzlich anders aussehen, nur weil ein Browser eine andere Vorgabe hat. Genau dafür ist Base da.

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">

Typografie und Abstände

In vielen Projekten wird Typografie zu spät angefasst. Ich mache es lieber am Anfang. Ein Framework setzt Grundabstände für p, ul, table, form und Überschriften. Dann sieht schon Roh-HTML ordentlich aus, ohne dass du jede Zeile anfassen musst. Wenn du hier sauber bist, wird alles stabiler, und du sparst dir später hektische Notlösungen.

body{
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  background: #f8f9fa;
  color: #202122;
}

Warum Base vor Components kommt

Components leben von Vorhersehbarkeit. Ein Button kann nur „einfach“ sein, wenn er auf bekannten Variablen sitzt. Darum sind Farben und Ränder in der Base entweder als CSS-Variablen oder als klare Defaults gesetzt. Das klingt trocken, aber es verhindert komische Ausrutscher, wenn du später fünf Seiten weiter bist und dich fragst, warum ein Link auf einmal lila ist. Ich hab das schon zu oft gesehn, und ja, man lernt daraus.

Kurze Referenz