Bootstrap-Alternativen: Die besten Frontend-Frameworks im Überblick

Wer ein Web-Frontend erstellen möchte, hat diverse Herausforderungen zu meistern: Es gilt, der Oberfläche die passende Optik zu verleihen, dabei aber zu keinem Zeitpunkt die Usability aus den Augen zu verlieren. Aufgrund der verschiedenen Geräte und Browser, mit denen User heutzutage auf Inhalte im Web zugreifen, müssen die gewählten visuellen und technischen Elemente darüber hinaus auch plattformübergreifend funktionieren. Und auch Barrierefreiheit und eine gute SEO-Basis sind Aufgabenbereiche, die bei der Frontend-Programmierung nicht außer Acht gelassen werden dürfen.

Um bei der Entwicklung einer Weboberfläche nicht auch noch komplett bei null beginnen zu müssen, machen viele Programmierer von UI-Frameworks (User Interface) Gebrauch. Dabei fällt die Wahl häufig auf das von Twitter entworfene Bootstrap, dessen Bestandteile für mobile Endgeräte und alle gängigen Browser optimiert sind und problemlos an die eigenen Vorstellungen angepasst werden können. Der große Verbreitungsgrad sorgt jedoch auch dafür, dass im Netz viele Websites existieren, die mithilfe der Standard-Bootstrap-Codes gebaut sind und sich aus diesem Grund stark ähneln. Ein kleinerer Kritikpunkt ist zudem die Komplexität des Frontend-Frameworks, das auf sehr viel CSS und JavaScript zurückgreift und zudem das HTML-Mark-up umfänglicher macht – was sich u. a. auf die Ladezeit des Webprojekts auswirken kann. Es ist zwar möglich, reduzierte Skript- und CSS-Dateien herunterzuladen, die nur die benötigten Bootstrap-Komponenten enthalten, allerdings muss man sich zu diesem Zweck zunächst intensiver mit dem Thema auseinandersetzen. Simplizität und Zeitersparnis, die mit der Verwendung eines Frameworks verknüpft sein sollten, gehen auf diese Weise ein Stück weit verloren. Manchem Entwickler mag auch einfach allgemein die Nutzung des UI-Frameworks nicht zusagen, weshalb es durchaus sinnvoll ist, den Einsatz von Alternativen zu Bootstrap in Betracht zu ziehen – ein Unterfangen, das aufgrund der riesigen Auswahl beinahe ebenso schwer ist.

Im Folgenden präsentieren wir Ihnen fünf Frontend-Frameworks, die Sie anstelle von Twitter Bootstrap nutzen können, um ein vollständiges und funktionsfähiges Web-Frontend zu entwickeln. Wir zeigen Ihnen die jeweiligen Vor- und Nachteile sowie die Unterschiede zu Bootstrap auf. Darüber hinaus erfahren Sie, welchen Umfang die Code-Sammlungen haben und für welchen Entwicklertyp sie sich besonders gut eignen. Außerdem beantworten wir die Frage, wie gut das Entwickeln mit der jeweiligen Bootstrap-Alternative funktioniert.

Das modular aufgebaute Foundation-Framework hat seinen Ursprung in einem Style-Guide, den die Webdesign-Agentur ZURB zunächst ausschließlich für Projekte ihrer Kunden verwendete. Später kombinierte und veröffentlichte ZURB die zahlreichen HTML-, CSS- und JavaScript-Komponenten in dem Open-Source-Framework. Das Herzstück, ein zwölfspaltiges, flexibles Grid-Layout, ermöglicht die Gestaltung eines responsiven Layouts, das sich automatisch den verschiedenen Displaygrößen und Auflösungen der verschiedenen Endgeräte anpasst. Neben dem Grid-System bietet Foundation u. a. die folgenden Vorlagen:

• Slider

• Buttons

• Typografie

• Menüleisten und Menüs

• Medien-Container

• integrierte Float- und Visibility-Klassen

Foundation basiert, wie Bootstrap ab Version 4 auch, auf Sass, einer Stylesheet-Sprache, die das Erstellen und Bearbeiten der CSS-Dateien erheblich vereinfacht – allerdings fehlt dem ZURB-Framework die Unterstützung von Less (ebenfalls eine Stylesheet-Sprache), die Bootstrap bietet. Während sich hinsichtlich des Umfangs an JavaScript-Plug-ins und CSS-Snippets kaum Unterschiede festmachen lassen, existieren für Foundation wesentlich weniger Templates, und auch die Unterstützung durch andere Plattformen ist deutlich geringer.

Das Framework von ZURB sticht die Twitter-Lösung jedoch deutlich aus, wenn es um die Individualität entwickelter Frontends geht: Der zugrundeliegende CSS-Code gewährt Zugriff auf ein kompaktes Design, das unkompliziert nach den eigenen Wünschen angepasst werden kann. Einige Klassen sind – anders als in Bootstrap – direkt eingebunden, ohne dass Sie diese zunächst hinzufügen müssen. Ein weiterer Vorteil: ZURB bietet verschiedene Kurse und persönlichen Support für Ihr Frontend-Projekt sowie eine spezielle Version des Frameworks zur Gestaltung von E-Mail-Newslettern an.

Wollen Sie Foundation zur Entwicklung Ihrer Weboberfläche nutzen, können Sie entweder das Komplett-Set oder ein individuell zusammengestelltes Paket aus den gewünschten Komponenten kostenfrei auf der offiziellen Website herunterladen. Eine detailliertere Beschreibung des ZURB-Frameworks finden Sie in folgendem Ratgeber.

Mitte 2013 veröffentlichte Yahoo mit Pure.CSS eine Basisstruktur für die Entwicklung von Web-Frontends, die zu Recht als gute Bootstrap-Alternative gilt, aber auch in Kombination mit dem Twitter-Framework genutzt werden kann. Pure basiert auf der Scalable and Modular Architecture for CSS, kurz SMACSS, die dafür sorgt, dass wiederkehrende Elemente wie Tabellen, Buttons oder Formulare vom Basis-Design (Schriftart, Layout etc.) getrennt sind und eigene Konventionen besitzen können. In dem Yahoo-Framework hat daher jedes Modul einen Standard-Klassennamen mit dem Präfix „pure-“ für die reguläre Gestaltung sowie zusätzliche Klassennamen für spezifische Regeln, die für Sub-Module gelten. Ein Formular, bei dem alles untereinander steht, binden Sie in Pure.CSS z. B. ein, indem Sie den Standard-Klassennamen „pure-form“ sowie den Sub-Klassennamen „pure-form-stacked“ angeben.

Das Frontend-Framework, das in einer responsiven und einer nichtresponsiven Variante heruntergeladen werden kann, beinhaltet folgende sechs Module, die in komprimierter, gezippter Form zusammen gerade einmal eine Größe von rund 4 KB (entpackt 16 KB) besitzen:

• Base (base-min.css): Framework-Basis inklusive Regelwerk

• Grids (grids-responsive-min.css): flexibles, responsives Grid-System

• Forms (forms-min.css/forms-nr-min.css): Formulare

• Buttons (buttons-min.css): verschiedene Schaltflächen

• Tables (tables-min.css): Tabellen

• Menus (menus-min.css/menus-nr-min.css): Menüs

Alle Module bauen – wie die Komponenten von Bootstrap und vieler anderer CSS-Frameworks – auf dem Open-Source-Stylesheet Normalize.css auf, das die standardmäßigen Stile von HTML-Elementen durch optimierte, browserübergreifende Stile ersetzt. Im Vergleich zum Frontend-Framework von Twitter enthält das Yahoo-Pendant allerdings keinerlei JavaScript-Anwendungen, auch wenn Sie diese natürlich auf eigene Faust einbinden können. Pure.CSS ist weniger ein fertiges Frontend, das nur an die eigenen Bedürfnisse angepasst werden muss, als vielmehr ein Startpunkt für Ihr Projekt und damit auch mit wesentlich größeren Freiheiten verbunden.

Yahoo hostet das Framework auf seinem eigenen, freien Content Delivery Network (Yahoo CDN), sodass Sie es mithilfe eines einfachen Verweises im <head>-Bereich Ihres Projekts einbinden können. Sie können Pure.CSS natürlich auch herunterladen und selbst hosten. Den aktuellen Link zum CDN sowie die Download-Dateien finden Sie auf der offiziellen Website purecss.io.

2013 veröffentlichte der Programmierer Jack Lukic seine Framework-Lösung zur Frontend-Entwicklung unter dem Namen Semantic UI. Der Kernpunkt dieser Codesammlung liegt darin, das Schreiben von HTML-Code durch nutzerfreundliche, intuitive Konventionen zu vereinfachen. Zu diesem Zweck enthält Semantic UI über 3.000 semantische CSS-Klassen, die einfach anzuwenden sind und den Entwicklungsprozess optimieren sollen. Während Bootstrap im Basispaket nur ein einziges Theme enthält, führt Semantic UI über 20 verschiedene Designvorlagen in der Standardvariante. Auch ansonsten gestaltet sich der Umfang etwas komplexer als bei dem Twitter-Framework: Neben den elementaren CSS- und JavaScript-Dateien enthält das Basispaket Fonts, den PHP-Paketmanager Composer, den Web-Dateimanager Bower sowie den JavaScript-Task-Runner Gulp.

Die einzelnen Komponenten sind in folgende sechs Bereiche eingeordnet:

• Globals: Stil-Definitionen auf Basis von Normalize.css; Typografie- und Gestaltungsgrundlagen

• Elements: allgemeine Frontend-Bestandteile wie Buttons, Icons, Container u. v. m.

• Collections: strukturelle Inhalte wie das Grid-System, Menüs, Tabellen oder Formulare

• Views: interaktive Elemente wie Kommentarfelder, Nachrichten-Feeds oder Werbebanner

• Modules: Widgets wie Dropdown-Menüs, Pop-up-Fenster oder Checkboxen

• Behaviors: Schnittstellen zur JavaScript-Programmierung

Für Anfänger und Umsteiger ist das Namenssystem von Semantic UI zunächst befremdlich und in jedem Fall mit einem hohen Maß an Einarbeitung verbunden. Im Endeffekt zahlt sich dieser Aufwand aber aus, denn der HTML-Code Ihres Web-Frontends ist wesentlich intuitiver zu lesen als bei vergleichbaren Frameworks wie Twitter Bootstrap, was insbesondere bei späteren Überarbeitungen von Vorteil sein kann. Es gibt Semantic UI außer in der CSS- auch in einer Less-Variante; mittlerweile existiert zudem eine Sass-Variante, wodurch das semantische Framework in diesem Punkt mit Bootstrap gleichgezogen ist. Ein entscheidender Nachteil der Bootstrap-Alternative ist die Tatsache, dass viele Komponenten von JavaScript abhängig sind und ohne die Skriptsprache nicht funktionieren.

Sie können Semantic UI entweder im Downloadbereich der offiziellen Homepage herunterladen, die Dateien per Verweis auf das Content Delivery Network JSDELIVR einbinden oder auf die einzelnen Code-Snippets im GitHub-Repository des Frameworks zugreifen.

Uikit ist die Open-Source-Lösung zur Frontend-Programmierung der in Hamburg beheimateten Firma YOOtheme, die eine große Expertise bei der Entwicklung von Webapplikationen sowie Themes für WordPress, Joomla und den hauseigenen Website-Builder YOOtheme Pro vorzuweisen hat. Die umfangreiche Sammlung aus HTML-, CSS- und JavaScript-Komponenten untersteht der freien MIT-Lizenz und kann daher bedenkenlos genutzt und verändert werden. Alle CSS-Snippets existieren sowohl in einer Less- als auch in einer Sass-Variante, so dass die Anpassung der Style-Vorlagen für geübte Programmierer erfrischend einfach ist. Die über 30 Core-Module der Bootstrap-Alternative bauen wie schon bei den vorangegangenen Vertretern und dem Framework von Twitter auf Normalize.css auf, weshalb gängige Internetbrowser keinerlei Probleme bei der Darstellung von UIkit-Webprojekten haben.

Die Kernkomponenten sind in folgende sechs Kategorien untergliedert:

• Defaults: Basis für die Normalisierung der HTML-Elemente, mit deren Hilfe die Cross-Browser-Fähigkeit realisiert wird, sowie einige grundsätzliche Style-Maximen

• Layout: Werkzeuge zur Gestaltung des Frontends, z. B. das Grid-System, Inhaltsboxen oder nützliche CSS-Klassen zur Auszeichnung wiederkehrender Inhalte

• Navigations: Alle Elemente, die den Besucher bei der Erkundung Ihrer Weboberfläche unterstützen; u. a. gibt es Module zur Pagination (Seitennummerierung) sowie die klassischen Navigationsleisten

• Elements: Stile für in sich geschlossene Inhaltsblöcke wie Tabellen, Auflistungen und Formulare

• Common: Komponenten, die Sie typischerweise innerhalb Ihrer Inhalte nutzen, z. B. Buttons, Icons, Badges oder Animationen

• JavaScript: Hauptsächlich aus JavaScript bestehende Module zur Implementierung interaktiver Elemente

Um Inhalte für die unterschiedlichen Displaygrößen aufzubereiten, hält UIkit verschiedene responsive Klassen bereit. Die zu diesem Zweck bereits vordefinierten Breakpoints – z. B. 1.200 Pixel für besonders große Bildschirme oder 479 Pixel für kleine Smartphone-Displays – können Sie mit Hilfe des Online-Customizers für jedes Theme wunschgemäß anpassen. Um Komplikationen mit anderen CSS-Snippets bzw. -Frameworks zu vermeiden, sind alle Klassen durch das Präfix „uk-“ gekennzeichnet. Nicht im Kern-Framework integriert, aber jederzeit optional wählbar sind zusätzliche CSS- und JavaScript-Elemente, die Sie für die Realisierung komplexerer Weboberflächen benötigen, wenn diese beispielsweise mit einem Administrator-Bereich inklusive Log-in, HTML-Editor und Dateiupload-Funktion ausgestattet sein sollen.

Trotz des beachtlichen Funktionsumfangs fällt die Dateigröße der einzelnen Komponenten sowie des gesamten Frameworks überraschend gering aus. Dies wird ergänzt durch eine sehr ausführliche Dokumentation, die den Einstieg erheblich vereinfacht – auch wenn Bootstrap in dieser Angelegenheit ebenso die Nase vorn hat wie bei der Theme-Auswahl und dem Angebot an Tutorials. Dennoch existieren auch von UIkit bereits rund 1.500 Forks auf GitHub, wo Sie alle Module des Frontend-Frameworks finden und herunterladen können. Das Gesamtpaket gibt es auch zum Download auf der offiziellen Homepage. Allerdings fehlt die Möglichkeit, Module im Vorhinein abzuwählen, sodass Sie diese erst später im entpackten Verzeichnis entfernen können.

Materialize ist ein CSS-Framework, das auf den Prinzipien des Material Designs basiert, das Google 2015 eingeführt hat und mittlerweile in einem Großteil seiner Apps verwendet. Das Designkonzept baut auf kartenähnlichen Flächen auf, die grafisch zwar prinzipiell minimalistisch gestaltet („Flat Design“), aber dennoch mit vielen Animationen und Schatten in Szene gesetzt werden. Die auf diese Weise erzeugten Tiefeneffekte helfen dem Nutzer der Weboberfläche dabei, wichtige Informationen und Interaktionselemente problemlos zu erfassen. Entwickelt haben das MIT-lizenzierte UI-Framework Alvin Wang, Alan Chang, Alex Mark und Kevin Louie – vier Studenten der Carnegie Mellon University in Pennsylvania.

Die Bootstrap-Alternative, die wie das Twitter-Framework ein 12-spaltiges Grid-System besitzt, enthält diverse CSS- und JavaScript-Komponenten, über 700 offizielle Material-Design-Symbole in einem Iconfont sowie Roboto, die Standardschriftart des Google-Designkonzepts. Neben den üblichen CSS-Dateien in normaler und minimierter Variante können Sie, wie bei Bootstrap auch, auf in Sass geschriebene SCSS-Quelldateien zurückgreifen, die die individuelle Gestaltung Ihrer Weboberfläche vereinfachen. Unabhängig von der getroffenen Auswahl stehen Ihnen rund 30 Elemente zur Verfügung:

• CSS: Das elementare CSS-Feature ist wie auch bei Bootstrap und den anderen UI-Frameworks das responsive Grid-System. Es liefert Ihnen die Grundlage für eine Weboberfläche, die auf allen Geräten funktioniert. Das Materialize-Grid beinhaltet drei vordefinierte Displaygrößen – unter 600 Pixel für mobile Geräte, bis 992 Pixel für Tablets und über 992 Pixel für Desktop-PCs. Weitere CSS-Snippets sind eine Farbpalette, die auf den Grundfarben des Material Designs gründet, die bereits erwähnte Schriftart Roboto und verschiedene Klassen, die in Materialize „Helpers“ heißen und Sie bei der Ausrichtung von Inhalten unterstützen.

• Components: Components sind die Bestandteile des Frontend-Frameworks, die Sie für die Realisierung von Navigationselementen und interaktiven Bereichen benötigen. Neben typischen Komponenten wie Codes zum Einbinden von Paginierung, Formularen, Navigationsleisten oder Icons finden Sie hier auch einige Module, die von elementarer Bedeutung für die Umsetzung des Material-Design-Konzepts sind. Dazu zählen beispielsweise „Cards“ (die für Google typischen Objektboxen zur Präsentation von Inhalten) oder die symbolischen „Chips“, mit denen sich Tags oder Kontakte darstellen lassen.

• JavaScript: In Sachen JavaScript-Anwendungen zählt Materialize ohne Zweifel zu den besten Bootstrap-Alternativen. Egal, ob Sie Bilder in der Karussell-Ansicht anzeigen lassen, interaktive Dialogfenster hinzufügen, Ziehharmonika-Elemente einbauen oder der Oberfläche mit dem Parallax-Effekt Leben einhauchen wollen, haben Sie entsprechende JavaScript-Snippets jederzeit griffbereit. Das rüstet Sie bestens für die Aufgabe, eine Weboberfläche zu gestalten, die sich sowohl auf mobilen Geräten als auch auf Desktop-PCs durch eine hohe Nutzerfreundlichkeit auszeichnet.

Die Dateien des Materialize-Projekts können Sie entweder auf GitHub oder auf der Homepage materializecss.com herunterladen. Dort finden Sie auch die zwei verfügbaren Templates „Starter“ und „Parallax“, sowie den Mark-up-Code für den Bezug der Projektdateien über das Content Delivery Network cdnjs.

Die vorgestellten Alternativlösungen haben für gewöhnlich viel mit dem Twitter-Framework gemeinsam: Die zentrale Komponente ist in allen Fällen ein Grid-System, das sich durch Flexibilität auszeichnet und einen großen Anteil an der erfolgreichen Realisierung geräteübergreifender Weboberflächen hat. Die vordefinierten Mindest- bzw. Maximalmaße für die verschiedenen Displaygrößen unterscheiden sich zwar von Framework zu Framework, allerdings haben Sie hierbei als Entwickler in der Regel große Freiheiten bei der Anpassung. Das gilt nicht nur für Gitternetze, sondern auch für die übrigen CSS-Elemente, die in einigen Fällen außerdem sehr intuitiv eingebunden werden können, was bei Bootstrap nicht immer der Fall ist. Unterschiede existieren außerdem bei den Klassensystemen der Bootstrap-Alternativen, wobei insbesondere Semantic UI heraussticht. Anstelle typischer CSS-Klassen hat das UI-Framework seinem Namen folgend über 3.000 eigene semantische Klassen integriert, die das Code-Programmieren noch intuitiver machen sollen. Vereinfachung beim Codieren gewähren die meisten Sammlungen darüber hinaus durch die Unterstützung der Stylesheet-Sprachen Less und Sass, mit deren Hilfe Sie die Stylesheets Ihres Webinterfaces unkompliziert anpassen, bevor Sie diese anschließend in das gewohnte CSS-Format umwandeln, damit sie der Internetbrowser des Besuchers lesen und richtig interpretieren kann. Lediglich Pure.CSS verzichtet auf beide CSS-Präprozessoren, bietet mit der Scalable and Modular Architecture for CSS (SMACSS) aber einen interessanten Ansatz für die Nutzung von CSS. Die verschiedenen Alternativen zu Bootstrap überzeugen auf ganz unterschiedlichen Ebenen, weshalb es auch nicht möglich ist, eine einzelne zur Königslösung für die Frontend-Programmierung zu deklarieren. Machen Sie Ihre Entscheidung daher in erster Linie von den Ansprüchen Ihres Webprojekts abhängig und stellen Sie sich die folgenden Fragen:

• Sind die Komponenten ansprechend strukturiert?

• Bietet das Grid-System die gewünschten Optionen?

• Wie wichtig ist die Unterstützung älterer Browserversionen?

• Entspricht der Umfang an CSS- und JavaScript-Modulen den Anforderungen?

• Ist die Größe der Codes (komprimiert und nicht komprimiert) verhältnismäßig?

• Sind große Freiheiten bei der Anpassung der Codes notwendig und wenn ja, welche Möglichkeiten offeriert das UI-Framework?

• Legen Sie Wert auf eine große Community (Weiterentwicklung, Erweiterungen, Templates, Foren, Tutorials, etc.)?

Wenn Sie zwischen mehreren Bootstrap-Alternativen schwanken, ist ein Blick in die Online-Manuals empfehlenswert. Dort sind die Module oftmals inklusive anschaulicher Code-Beispiele aufgeführt. Noch direkter können Sie sich von den Möglichkeiten der einzelnen Vertreter überzeugen, indem Sie diese selbst ausprobieren, wobei das Online-Tool Codeply eine große Hilfe darstellen kann: Dort testen Sie die Komponenten der verschiedenen UI-Frameworks direkt im Browser, ohne eine einzige Datei heruntergeladen zu haben.