Frontend-Frameworks sind bei vielen Web-Entwicklern unglaublich beliebt. Sie erleichtern das Erstellen von optisch und funktional modernen Websites immens. Auch die Kompatibilität mit den wichtigsten Web-Browsern und die meist große Auswahl an UI-Komponenten sind weitere Vorteile. Wer die Suchmaschine anwirft, findet aber eins am schnellsten: Bootstrap. Doch es gibt noch viele andere, die je nach Projekt auch die bessere Wahl sein können.

Das von Twitter entwickelte Frontend-Framework Bootstrap dürfte wohl zu den bekanntesten und zugleich beliebtesten Kits fürs Web-Frontend gehören. Das seit 2011 unter Open-Source-Lizenz gestellte Toolkit beinhaltet neben umfangreichen Komponenten für HTML, CSS und JavaScript auch einige spannende Themes, mit denen das Design nochmal deutlich aufgehübscht werden kann. Bootstrap, das sich inzwischen in der Version 4 befindet, hat bei allen Komponenten auf Responsive wie auch Mobile-First-Design gesetzt.

Passend dazu: Von Themes bis Tutorials: Das sind die besten Quellen für Bootstrap-Entwickler

Auch wenn Bootstrap eine riesige Community hat und voller Funktionen und CSS-Klassen ist: Vor allem kleine Projekte sollten nicht blind auf das Twitter-Framework setzen. Denn es ist fraglich, ob wirklich alle Bootstrap-Komponenten benötigt werden. Später im Artikel stellen wir noch andere minimalistische Frameworks vor, die nicht so vollgepackt sind wie Bootstrap.

Semantic UI lässt sich in vielerlei Hinsicht mit Bootstrap vergleichen. Es gibt eine breite Auswahl an vordefinierten Komponenten in HTML, CSS und JavaScript. Ein wichtiger Bestandteil des Frameworks ist jedoch die Anpassbarkeit. So gibt es neben rund 50 Elementen auch über 3.000 Variablen, mit denen die vordefinierten Komponenten kinderleicht angepasst werden können. Die Individualisierungsmöglichkeiten gehen dabei weit über das simple Ändern von Button-Farben hinaus. Das Framework ermöglicht sogar das einfache Erstellen von komplett eigenen Themes.

Foundation ist ein weiteres Framework mit einer großen Anzahl an vordefinierten Elementen. Neben den einzelnen Komponenten gibt es auch komplett zusammengestellte HTML-Templates, Blöcke oder UI-Kits. Mit an Bord sind neben der Möglichkeit, Elemente mit Attributen anpassen zu können, auch Mobile-First- und Responsive Design. Die Individualisierung hat hier jedoch ihre Grenzen. Wer also Wert darauf legt, ein komplett eigenes Theme mit vielen individuell anpassbaren Möglichkeiten zu entwickeln, sollte sich lieber Semantic UI angucken. Für Anfänger mit wenig Programmiererfahrung oder für einen Projekt-Start mit schnellem Fortschritt dürfte Foundation ideal sein.

Wem das von Google entwickelte Material Design gefällt, sollte sich das CSS-Framework Materialize genauer anschauen. Webentwicklern stehen hier neben den üblichen in CSS beschriebenen Komponenten einige spannende JavaScript-Elemente zur Verfügung. Darunter Bilder mit Parallax-Effekten oder die im Material Design klassische Wellen-Animation beim Drücken eines Buttons.

Bulma ist ein kostenloses Open-Source-CSS-Framework auf Basis von Flexbox, das momentan von mehr als 150.000 Entwicklern genutzt wird. Es wurde 2016 veröffentlicht und trägt somit wenig Altlasten mit sich herum. Mit seiner sehr aktiven Community ist es eine ernstzunehmende Alternative zu Bootstrap. Bulma benötigt kein JavaScript, hat eine einfach zu lernende Syntax und bietet Support für die aktuelle Version von Font Awesome. Zum Lieferumfang gehören neben einem einfachen und schlanken Grid-System auch mehr als 100 kleine und hilfreiche CSS-Tools.

Neben den riesigen UI-Kits und -Bibliotheken gibt es aber auch einige kleine – nennen wir sie mal Frameworks –, die teilweise aus nur einer CSS-Datei bestehen. Doch auch sie können eine große Wirkung erzielen und einige Probleme lösen.

Ein wohl niemals endendes Problem für Webentwickler sind die vielen verschiedenen Browser. Auch wenn die meisten inzwischen wohl Chrome, Firefox oder Safari nutzen, sollte die Website mit allen Web-Browsern gleich gut aussehen. Das will Normalize vereinfachen, denn jeder Browser hat einige vordefinierte CSS-Eigenschaften. Ein klassisches Beispiel sind unterschiedliche Padding- und Margin-Werte. Normalize ist dabei mehr als eine kleine CSS-Datei. Hier werden nicht einfach alle Browser-Einstellungen zurückgesetzt, sondern die nützlichsten beibehalten, viele Styles normalisiert (daher der Name) und Bugs behoben. Normalize unterstützt zusätzlich die neuen Elemente von HTML5 sowie die Browser Chrome, Firefox, Safari, Edge, Internet Explorer und Opera.

Der Name ist Programm: Milligram ist ein sehr minimalistisches CSS-Framework, das komprimiert nur zwei Kilobyte groß ist. Beschränkt wird sich auf die wichtigsten Komponenten in einem einfachen Design. Wer bei seiner Website den Fokus auf Schnelligkeit und das Wesentliche legen will, sollte überlegen, Milligram der größeren Konkurrenz um Bootstrap und Co. vorzuziehen.

Nicht ganz so klein wie Milligram, aber trotzdem weniger als 300 Kilobyte groß ist das nächste CSS-Framework. Das finnische Unternehmen Imperavi hat mit Kube UI ein minimalistisches und schnell zu implementierendes Framework entwickelt. Kube wurde in Sass entwickelt und verspricht seinen Nutzern, mit nur grundlegenden HTML-, CSS- und optional JavaScript-Kenntnissen schnell zu einer eigenen Website zu kommen.

Dieser Artikel wird regelmäßig aktualisiert. Letztes Update des Artikels: 1. Juli 2019.

Passend dazu:

• Mit diesen CSS-Konventionen macht Debuggen fast schon wieder Spaß
• Keine Angst vor CSS: Diese Grundkenntnisse solltet ihr haben
• Kein Bock auf Reload? Neues Tool zeigt Live-Vorschau für HTML und CSS
• CSS3: Was sind die Unterschiede zwischen Grids und Flexbox?