BaseGUI.de

Die Content-Schicht sorgt dafür, dass Standard-HTML gut aussieht, ohne dass du jede Zeile extra designen musst. Überschriften bekommen klare Größen, Absätze haben Luft, Listen hängen nicht schief am Rand, und Tabellen wirken nicht wie ein Screenshot aus 2006. Genau das ist die Stärke von einem soliden Framework: du schreibst HTML, und die Basis sorgt dafür, dass es sofort lesbar ist.

<h2>Dokumentation</h2>
<p>Ein Absatz mit ruhiger Zeilenhöhe.</p>
<ul>
  <li>Liste ohne Spezialklassen</li>
  <li>Abstände kommen aus Content</li>
</ul>

Headings und Rhythmus

Was oft unterschätzt wird: ein Framework definiert nicht nur die Schriftgröße, sondern auch den Rhythmus. Wenn eine H2 zu dicht am Absatz klebt, wirkt alles wie ein Block. Wenn die Abstände zu groß sind, wirkt es wie ein Poster. Der Sweet Spot ist meistens langweilig, und genau das ist gut. Für Doku Seiten willst du keine Show, du willst Klarheit. Wenn du später Components darüber legst, profitiert alles davon.

h2{ margin:18px 0 10px 0; font-size:20px; }
p{ margin:0 0 12px 0; }
ul{ margin:0 0 12px 0; padding-left:18px; }

Warum Content vor Components kommt

Wenn Content stimmt, sehen Komponenten automatisch besser aus. Ein Button neben Text wirkt nicht fremd, weil Typografie und Abstände passen. Und eine Tabelle ist nicht plötzlich winzig, weil ein Browser andere Defaults hat. Ich hab schon Projekte gesehen, wo man zuerst UI gebaut hat und später gemerkt hat, dass der Grundtext komisch ist. Dann fängt man an zu flicken, und das wird schnell unnötig anstrengend, weil man überall kleine Ausnahmen reinzieht.

Content ist auch der Ort, an dem du Dinge wie hyphens:auto oder sinnvolle Blockquote-Styles unterbringen kannst, ohne gleich ein eigenes Designsystem zu erfinden. Auf deutsch ist Silbentrennung übrigens wirklich hilfreich, wenn du lange Wörter hast und mobil nicht alles sprengen willst. Wenn man es einmal sauber setzt, passt es in jeder Unterseite, und du musst nicht mehr dran denken.