BaseGUI.de

Visibility Utilities sind Klassen, mit denen du Elemente je nach Breakpoint zeigen oder verstecken kannst. Das ist praktisch, wenn du z. B. auf Mobil eine kurze Navigation willst, aber auf Desktop mehr Platz für Details hast. Wichtig ist, dass du Visibility nicht als Ersatz für gutes Layout nutzt. Wenn du etwas nur versteckst, weil dein Grid kaputt ist, reparierst du das Symptom, nicht die Ursache.

<div class="visible-demo">
  <span class="only-desktop">Nur Desktop</span>
  <span class="only-mobile">Nur Mobil</span>
</div>

Breakpoints zentral halten

Ein Framework sollte Breakpoints zentral definieren, sonst driftet es auseinander. Für eine kleine Doku reichen oft zwei: mobil und ab 900px Desktop. Dann kannst du Utilities klar bauen. Typisch ist: Standard versteckt, und ab Breakpoint wieder sichtbar. So bleibt die Regel einfach, und du findest sie später schnell. Wenn du zehn Breakpoints einführst, wird es irgendwann unlesbar, das sieht man leider oft.

.only-desktop{ display:none; }
@media (min-width:900px){ .only-desktop{ display:inline; } }

@media (min-width:900px){ .only-mobile{ display:none; } }

Wann Visibility sinnvoll ist: für kleine Unterschiede. Ein Icon, ein kurzer Hinweis, eine Zusatzspalte in einer Tabelle, die mobil stört. Für ganze Seitenbereiche sollte man vorsichtig sein, weil sonst doppelte Inhalte entstehen und das Pflegen verwirrend wird. Wenn du es trotzdem machst, halte es im Markup klar. Sonst fragt man sich Wochen später, warum ein Element „einfach weg“ ist, das ist dann echt unerquicklich und kostet Zeit.