Zum Inhalt springen
HTML und CSS

Ausblick auf Frameworks

Vier Tage reines HTML und CSS. In echten Projekten begegnen dir oft Werkzeuge, die darauf aufbauen. Dieses Kapitel ordnet sie ein. Es enthält keine Übungen. Du kannst jetzt verstehen, was diese Werkzeuge tun, und nicht nur, wie man sie bedient.

Was du am Ende kannst

Abschnitt betitelt „Was du am Ende kannst“
  • die drei verbreiteten Ansätze unterscheiden
  • begründen, wann ein Framework hilft und wann nicht

Drei Ansätze

Abschnitt betitelt „Drei Ansätze“
Bootstrap Tailwind CSS Design-System
Idee fertige Komponenten kleine Hilfsklassen statt eigenem CSS Regeln und Komponenten einer Organisation
Du schreibst class="btn btn-primary" class="px-4 py-2 rounded bg-indigo-700 text-white" <firma-button> oder Klassen nach Vorgabe
Stärke schnell ein ordentliches Ergebnis volle Kontrolle, kein Namensproblem Einheitlichkeit über viele Anwendungen
Schwäche sieht schnell gleich aus, Überschreiben ist mühsam lange Klassenlisten, braucht einen Build teuer zu bauen und zu pflegen

Bootstrap

Abschnitt betitelt „Bootstrap“

Bootstrap liefert Komponenten wie Karten, Menüs und Dialoge und ein Spaltenraster.

<div class="card">
  <div class="card-body">
    <h3 class="card-title">Kartons besorgen</h3>
    <a class="btn btn-primary" href="#">Öffnen</a>
  </div>
</div>

Gut geeignet für interne Werkzeuge, wenn kein eigenes Design gefragt ist. Vieles, was du gelernt hast, steckt darin: Die Klasse .card setzt Rundung, Schatten und Abstände, die du jetzt selbst schreiben könntest. Darum findest du dich auch in den DevTools zurecht.

Tailwind CSS

Abschnitt betitelt „Tailwind CSS“

Tailwind besteht aus sehr vielen kleinen Klassen, von denen jede nur eine Sache tut.

<li class="rounded-lg bg-white p-4 shadow">
  <h3 class="font-semibold">Kartons besorgen</h3>
  <a class="mt-2 inline-block rounded bg-indigo-700 px-4 py-2 text-white hover:bg-indigo-900" href="#">Öffnen</a>
</li>

Das sieht zunächst nach dem verpönten style-Attribut aus, ist aber mehr: Es gibt feste Stufen statt beliebiger Werte, Zustände wie hover: und Umbruchpunkte wie md:. Ein Build-Schritt liefert nur die verwendeten Klassen aus. Wer Tailwind benutzt, schreibt weiterhin CSS, nur in anderer Form. Die Konzepte von Box-Modell, Flexbox und Grid brauchst du unverändert.

Design-Systeme

Abschnitt betitelt „Design-Systeme“

Größere Organisationen legen Farben, Abstände, Schrift und Komponenten verbindlich fest. Oft bestehen sie aus:

  • Design Tokens: benannte Werte, oft als Custom Properties, genau wie unsere --farbe-akzent
  • Komponenten: als CSS-Bibliothek oder als Web Components
  • Regeln: wann welche Komponente, wie schreibt man Texte, was gilt für die Barrierefreiheit

Bekannte öffentliche Beispiele sind Material Design von Google, Fluent von Microsoft und KERN, ein offener Standard für die deutsche Verwaltung. Frage in deiner Organisation nach, ob es so etwas schon gibt, bevor du anfängst.

Wann was?

Abschnitt betitelt „Wann was?“
Situation Empfehlung
kleine Seite, wenige Komponenten eigenes CSS, wie in dieser Schulung
internes Werkzeug, kein Design-Anspruch Bootstrap oder ein ähnliches Baukastensystem
größere App mit eigenem Design und Team Tailwind oder eigenes CSS mit festen Regeln
viele Anwendungen in einer Organisation Design-System

Warum die Grundlagen trotzdem zählen

Abschnitt betitelt „Warum die Grundlagen trotzdem zählen“

Frameworks wechseln, und alle paar Jahre ist ein anderes populär. HTML und CSS bleiben. Jede Abweichung vom Standard-Aussehen und jeder Layoutfehler führt dich am Ende in die DevTools zu display, Spezifität und dem Box-Modell, und auch Barrierefreiheit erledigt kein Framework für dich.

Wie geht es weiter?

Abschnitt betitelt „Wie geht es weiter?“