Bootstrap, Foundation, UIkit und Semantic UI: 4 Open-Source CSS-Frameworks im Überblick

Beim Entwickeln einer Webseite verwendet man immer wieder typische Gestaltungselemente wie zum Beispiel Buttons, Formular-Elemente, Navigations-, Dropdown- und Breadcrumbs-Menüs, Tabs, Slider oder ein Raster-System. Damit man solche Gestaltungselemente nicht jedes Mal von Grund auf neu schreiben muss, gib es mittlerweile zahlreiche CSS-Frontend-Frameworks, die Webentwicklern ein Grundgerüst zur Verfügung stellen, und damit eine Menge Arbeit abnehmen.

In diesem Artikel stelle ich die 4 größten Open-Source CSS-Frameworks vor. Sie sind alle funktionsreich, lassen sich beliebig anpassen und erweitern, und verfügen über zahlreiche Gestaltungselemente.

Außerdem sind sie alle in einer erweiternden Stylesheet-Sprache wie Sass, Less oder Stylus geschrieben (auch als CSS-Präprozessoren bekannt), stehen aber auch direkt als minifizierte CSS-Dateien zur Verfügung. Der Quellcode steht bei allen Projekten unter der MIT-Lizenz, und kann von GitHub bezogen werden.

Bootstrap #

Screenshot der offiziellen Bootstrap-Webseite

Screenshot der offiziellen Bootstrap-Webseite

Bootstrap wird seit dem 19. August 20111 von Twitter entwickelt, und ist damit das älteste der hier vorgestellten CSS-Frameworks, wahrscheinlich auch das bekannteste. Auf GitHub hat Bootstrap bisher mehr als 65 Tausend Sterne erhalten, die aktuelle Version des Frameworks ist Bootstrap 3.

Zum Ausrichten von Elementen verfügt Bootstrap über ein 12-spaltiges Raster-System (auch als Grid– oder Gitter-System bekannt), was auch responsive ist, und bei verschiedenen Breakpoints umbricht. Außerdem stehen viele grafische Gestaltungselemente wie Navigationsleisten, Buttons, Alerts, Labels und Panels zur Verfügung, sowie ergänzende JavaScript-Komponenten wie Dropdown-Menüs und -Buttons, ScrollSpys, Tabs, Tooltips, Collapses und Sliders (bei Bootstrap Carousel genannt).

Die Basis-Version von Bootstrap ist im Flat-Design gehalten, es wird jedoch auch eine ergänzendes Bootstrap-Theme zur Verfügung gestellt, welches die Basis-Version um Farbverläufe, sowie Box- und Textschatten erweitert.

Bootstrap ist der Stylesheet-Sprache Less geschrieben, es gibt aber auch eine offizielle unterstützte Sass-, sowie eine inoffizielle Stylus-Version. Für die JavaScript-Komponenten wird die jQuery-Bibliothek als Basis benötigt.

Auf der offiziellen Website können neben dem Quellcode auch die minifizierten CSS- und JavaScript-Dateien heruntergeladen werden. Außerdem steht ein Customizer zur Verfügung, in dem einzelne Komponenten ausgewählt werden können, und sich Farben und andere Einstellungen an den generierten Dateien anpassen lassen.

Neben der offiziellen englischen Dokumentation von Bootstrap, die sich auf offiziellen Website befindet, gibt es übrigens auch eine deutsche Übersetzung hiervon.

  • Entwickler: Twitter
  • Grid-System: 12 Spalten
  • responsive: ja
  • Stylesheet-Sprache: Less (original), Sass (offiziell unterstützt), Stylus (inoffiziell)
  • JavaScript-Framework: jQuery
  • Follower auf Twitter: > 179.000
  • Sterne auf GitHub: > 65.000
  • Forks auf GitHub: > 25.000
  • Beobachter auf GitHub: > 3.900
  • Commits bei GitHub: > 9.500
  • Contributors bei GitHub: > 550

Foundation #

Screenshot der offiziellen Foundation-Webseite

Screenshot der offiziellen Foundation-Webseite

Das CSS-Framework Fundation ist seit September des Jahres 2011 verfügbar, und damit rund einen Monat älter als Bootstrap. Seither hat es mehr 17 Tausend Sterne auf GitHub erhalten, was etwas mehr als ein Vierteil der Sterne von Bootstrap entspricht. Foundation 5 ist die aktuelle Version des Projektes.

Wie Bootstrap auch, besitzt Fundation ebenfalls ein 12-spaltiges Raster, bietet aber nicht so viele Gestaltungselemente wie Bootstrap. Dafür besitzt es allerdings einige Elemente, die in Bootstrap nicht enthalten sind, wie Off-Canvas-Navigationen, Preis-Tabellen oder Joyrides.

Die grafische Gestaltung der Elemente ist sehr einfach und minimal gehalten, sodass Foundation ohne weitere Anpassungen nicht besonders elegant aussieht. Dafür wird es aber einfacher, die Gestaltungselemente mit eigenen CSS-Regeln an die Anforderungen der Website grafisch anzupassen. Foundation eignet sich also weniger als alleiniges CSS-Stylesheet, dafür aber umso mehr als Raster-Framework, bei dem man sich um die optische Gestaltung der Elemente selbst kümmert.

Besonders deutlich wird der Unterschied, wenn man die Tabs von Foundation mit denen von Bootstrap vergleicht. Während die Tabs bei Bootstrap einen Rahmen sowie abgerundete Ecken besitzen, und der Wechsel eines Tabs zum nächsten animiert ist, besitzen die Tabs von Foundation lediglich einen grauen Hintergrund, und keine Übergangs-Animation.

Fundation ist in Sass geschrieben, zudem existiert auch eine in Stylus portierte Version, die allerdings noch nicht den vollen Funktionsumfang unterstützt. Ein Customize steht ebenfalls zur Verfügung, in dem sich die benötigten Komponenten auswählen, und ein paar Einstellungen festlegen lassen.

  • Grid-System: 12 Spalten
  • responsive: ja
  • Stylesheet-Sprache: Sass (original), Stylus (inoffiziell, momentan nicht vollständig)
  • JavaScript-Framework: jQuery
  • Follower auf Twitter: > 30.000
  • Sterne auf GitHub: > 17.000
  • Forks auf GitHub: > 3.700
  • Beobachter auf GitHub: > 1.400
  • Commits bei GitHub: > 7.000
  • Contributors bei GitHub: > 500

UIkit #

Screenshot der offiziellen UIkit-Webseite

Screenshot der offiziellen UIkit-Webseite

UIkit ist ein relativ neues CSS-Frontend-Framework, was am 19. Juli 2013 vom deutschen Theme-Entwicklerstudio YOOtheme veröffentlicht wurde. Alle seitdem entworfenen Themes der Entwicklers bauen auf dem UIkit-Framework auf. Es besitzt ein 1- bis 10-spaltiges Gestaltungsraster, und bietet aufgrund der speziellen Entwicklung für WordPress- und Joomla-Themes auch ein spezielles Gestaltungselement für Kommentare.

UIkit steht in drei Design-Varianten zur Verfügung: In einer Basis-, einer „Gradient“- sowie in einer „Almost-Flat“-Variante. Die Basis-Variante stellt lediglich eine grundlegende Gestaltungs-Basis ohne weitere Effekte zur Verfügung, lässt den Designern somit Freiraum bei der Gestaltung und erinnert daher sehr an Fundation. Die Gestaltungselemente in der „Almost-Flat“-Variante besitzen hingegen zusätzlich auch Rahmen mit abgerundeten Ecken, sowie grundlegende Schatten-Effekte. Und in der „Gradient“-Variante sind dann auch Farbverläufe, sowie erweiterte Schatten-Effekte vorhanden.

Die aktuelle Version des CSS-Frameworks ist UIkit 2.8. Der Quellcode ist dabei in der Stylesheet-Sprache Less geschrieben, es gibt aber auch eine in Stylus portierte Version. UIkit kann auf der zugehörigen Website entweder direkt in den drei Basis-Varianten heruntergeladen werden, oder vorher über einen umfassenden Customizer beliebig angepasst werden.

  • Grid-System: 1 bis 10 Spalten
  • responsive: ja
  • Stylesheet-Sprache: Less (original), Stylus (inoffiziell)
  • JavaScript-Framework: jQuery
  • Follower auf Twitter: > 1.400
  • Sterne auf GitHub: > 2.900
  • Forks auf GitHub: > 500
  • Beobachter auf GitHub: > 280
  • Commits bei GitHub: > 1.300
  • Contributors bei GitHub: > 20

Semantic UI #

Screenshot der offiziellen Webseite von Semantic UI

Screenshot der offiziellen Webseite von Semantic UI

Semantic UI ist das jüngste der hier vorgestellten Frameworks, und hab bisher erst die Versionsnummer 0.19 erreicht. Die aller erste Version 0.1 wurde am veröffentlicht23, dennoch hat das Projekt bereits mehr als 8,5 Tausend Sterne auf GitHub erhalten. Bisher ist es aber noch nicht so weit ausgereift wie die anderen CSS-Frameworks.

Die Besonderheit an Semantic UI ist, wie der Name schon erahnen lässt, dass man für alle Gestaltungselemente semantische CSS-Klassen verwendet. Dadurch soll die Entwicklung mit dem CSS-Framework intuitiver werden. Was dies bedeutet, wird auf der Startseite von Semantic UI ersichtlich, auf der typischer HTML-Code von Semantic UI mit dem von Bootstrap vergleichen werden.

Semantic UI besitzt ein 16-spaltiges Layout-Raster, und bietet einige Gestaltungselemente, welche die anderen Front-End-Frameworks nicht haben. So steht beispielsweise eine Stern-Bewertung, oder ein Aktivitäts-Feed zur Verfügung. Auch für Kommentare gibt es Gestaltungselemente, die ansonsten nur noch in UIkit zur Verfügung stehen.

Der Source-Code von Semantic UI ist in Less geschrieben, es existiert aber auch eine inoffizielle Version für Sass, um das CSS-Framework z.B. unter dem Webframework Ruby on Rails zu verwenden.

  • Grid-System: 16 Spalten
  • responsive: ja
  • Stylesheet-Sprache: Less (original), Sass (inoffiziell)
  • JavaScript-Framework: jQuery
  • Sterne auf GitHub: > 8.500
  • Forks auf GitHub: > 800
  • Beobachter auf GitHub: > 500
  • Commits bei GitHub: > 1.600
  • Contributors bei GitHub: > 60

Fazit #

Ich habe bisher hauptsächlich mit Bootstrap in der Version 2 oder 3 gearbeitet, da es sich flexibel mit eigenen CSS-Regeln erweitern lässt, und es zudem auch für meine favorisierte Stylesheet-Sprache Stylus verfügbar ist. Fundation und UIKit habe ich selbst noch nicht verwendet, mit UIKit könnte ich mir jedoch durchaus vorstellen zu arbeiten.

Mit Semantic UI habe ich ebenfalls noch nichts zu tun gehabt, in finde das Projekt jedoch besonders interessant, und werde es vielleicht in einem zukünftigen Projekt verwenden.

Neben den hier vorgestellen CSS-Frameworks möchte ich noch auf die englische Webseite CSS Frontend Frameworks hinweisen, auf der mehr als 40 verschiedene Frameworks in einer übersichtlichen Tabelle eingeordnet sind, und man so einen groben Überblick über die einzelnen Frameworks erlagen kann. Darunter sind neben den 4 großen auch viele weitere kleine Frameworks, bis auf Yaml und das Less Framework waren mir diese zuvor jedoch noch nicht bekannt.

Abschließend noch der Google-Trends-Bericht zu Bootstrap, Foundation, UIKit und Semantic UI. Hier sieht man anhand der Anzahl der Suchanfragen, wie stark das Interesse zu einem bestimmten Thema – oder in diesem Fall CSS-Framework – ist:

Diese Daten sollten jedoch mit Vorsicht genossen werden, da es teilweise andere Bedeutungen der Framework-Namen gibt. Ich habe jedoch versucht, solche gleichnamigen Bedeutungen so weit wie möglich aus den Ergebnissen rauszufiltern.

VN:F [1.9.22_1171]
Bewertung: 4.3/5 (8 Bewertungen)
Bootstrap, Foundation, UIkit und Semantic UI: 4 Open-Source CSS-Frameworks im Überblick, 4.3 out of 5 based on 8 ratings
  1. Quelle: https://blog.twitter.com/2011/bootstrap-twitter 

  2. Quelle: https://github.com/Semantic-Org/Semantic-UI/releases/tag/0.1 

  3. Anmerkung: Der erste Commit im GitHub-Repository fand übrigens bereits am 9. April 2013 statt. 

Regelmäßige Beiträge über Node.js

nodecodeAbonniere den kostenlosen NodeCode-Newsletter, und bleibe auf dem laufenden über neue Beiträge zum Thema Node.js. Darunter:

  • Informationen und Neuigkeiten rund um Node.js und zugehörigen Modulen
  • Vorstellung von interessanten Frameworks und Bibliotheken
  • Anleitungen und Tutorials zu Node.js und weiterführenden Technologien
  • Sowie vieles mehr...

hinterlasse einen Kommentar