BaseGUI.de

Objects sind Layout-Muster. Sie lösen ein Problem, das immer wieder auftaucht. Embed ist so ein Klassiker: ein Video, eine Karte oder ein iFrame soll responsiv sein, ohne dass du jedes Mal neu bastelst. Wichtig ist dabei, dass ein Object neutral bleibt. Es beschreibt Struktur und Verhalten, nicht das Theme. Dadurch bleibt dein Code aufgeräumt und du trennst Layout sauber von Komponenten.

<div class="embed">
  <iframe src="https://example.com" title="Demo"></iframe>
</div>

Aspect Ratio statt fester Höhe

Früher hat man sich mit Padding-Hacks beholfen. Heute ist aspect-ratio die entspannte Lösung. Du gibst dem Wrapper das Seitenverhältnis, und das iFrame füllt die Fläche. Das ist besonders wichtig auf mobilen Geräten, weil feste Höhen sonst entweder riesige Lücken machen oder Inhalte abschneiden. Ein Framework sollte so etwas einmal sauber anbieten, damit alle Seiten die gleiche Logik nutzen.

.embed{ aspect-ratio:16/9; position:relative; }
.embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

Warum das ein Object ist

Ein Embed-Wrapper ist keine Component wie ein Button. Er hat keine Varianten wie “primary” oder “ghost”. Er ist eine Bühne. Auf dieser Bühne kann später eine Karte liegen, ein Video oder eine Dokumentation. Wenn du das einmal verstanden hast, wird der Aufbau eines CSS-Frameworks ziemlich logisch: Base gibt dir Standards, Content macht Text sauber, Objects bauen Struktur, Components liefern UI, Utilities sind die Werkzeuge obendrauf. Wenn man das mischt, wird es irgentwann schwer, weil du nie weißt, wo du etwas richtig reparieren solltest.