BaseGUI.de

Ein Grid-Object ist ein Muster, das du ständig brauchst: zwei Spalten, eine Sidebar, Karten in Reihen, responsive Umbrüche. Das Object kümmert sich um Struktur, nicht um Inhalte. Du solltest im HTML klar sehen können, was Layout ist und was Inhalt ist. Wenn du das trennst, wird ein späterer Umbau viel entspannter. Gerade bei Doku Seiten sieht man schnell, ob ein Layout sauber ist, weil überall Text, Listen und Code-Boxen stehen.

<div class="o-grid">
  <div>Hauptinhalt</div>
  <aside>Sidebar</aside>
</div>

Einfaches Grid, klare Regeln

Viele Frameworks übertreiben Grid-Systeme. Für BaseGUI reicht oft: eine Spalte auf klein, ab 900px zwei Spalten. Dazu ein konstanter Abstand. Wenn du das überall gleich hältst, wirkt die Seite ruhig. Und du musst nicht dauernd mit Pixeln jonglieren. Der Trick ist nicht, möglichst viele Varianten zu haben, sondern eine Variante, die 80 Prozent abdeckt.

.o-grid{ display:grid; gap:16px; }
@media (min-width:900px){
  .o-grid{ grid-template-columns: 2fr 1fr; }
}

Warum das in Objects gehört: ein Grid ist die Bühne. Eine Card-Component kann oben drauf sitzen, genau wie eine Table-Component. Wenn du das mischst, endet es schnell so, dass eine Card plötzlich Grid-Regeln enthält, und ein anderes Element dann die gleichen Regeln nochmal. Das ist doppelt, und du merkst es meistens erst, wenn du bei Seite acht irgendwas anpassen willst und es überall anders wirkt. Ich hab mir angewöhnt, Layout in Objects zu lassen, sonst wird es schleichend mühsam.

<section class="card">
  <h3>Card in einem Grid</h3>
  <p>Die Card ist Component, das Grid ist Object.</p>
</section>