CSS-Frameworks: Bootstrap vs. Foundation

Bootstrap vs. Foundation

CSS- oder Frontend-Frameworks sind unter Web-Entwicklern inzwischen weit verbreitet. Denn sie erleichtern die Entwicklung von responsiven Websites – ohne jedes Mal das Rad neu erfinden zu müssen.

Ein CSS-Framework ist eine Sammlung von Gestaltungselementen und Hilfsmitteln für einfaches und standardisiertes Webdesign mit CSS. Die meisten CSS-Frameworks bieten als Basis ein Raster (Grid-System) sowie grundlegende Gestaltungselemente wie z.B. Schriften (Webtypographie), Farben, Buttons, Menüs und Icon-Fonts oder CSS-Sprites. Darüber hinaus bieten die meisten Frameworks JavaScript-basierte Funktionen bzw. die Integration von jQuery, um dynamische Komponenten wie Slider, Bildgalerien, Accordien und PopUp-Fenster zu realisieren. Die Frameworks sind zudem browserkompatibel, d.h. der Fontend-Entwickler muss sich um browserspezifische Anpassungen kaum Gedanken machen. Die Website funktioniert mit allen modernen Browsern und lässt sich ebenso für große wie auch für kleine Bildschirme optimieren und anpassen. Ein weiterer Vorteil ist, dass alle Standard-HTML-Elemente von der Überschrift bis zum Formularfeld durchgestylt sind und über ein Grundstyling verfügen. Die Standard-Eigenschaften können natürlich den individuellen Wünschen angepasst werden.

Natürlich bringen solche vorgefertigten Standards auch Nachteile mit sich. Da die Frameworks für alle möglichen Arten von Websites funktionieren sollen, bringen sie relativ viel Quellcode mit und die Individualisierung der einzelnen CSS-Elemente erfolgt in der Regel durch Überschreibung der CSS-Eigenschaften in einer Custom-CSS-Datei, was u.U. recht zeitaufwendig ist und einen zusätzlichen Overhead an CSS-Code erzeugt – außer das Framework verfügt über einen CSS-Präprozessor wie z.B. SASS. Dann lassen sich die Grundelemente direkt in der .scss-Datei anpassen. Moderne Frameworks bieten häufig die Möglichkeit den Umfang der Funktionalität anzupassen (Stichwort: Custom Download). Der Vorteil liegt auf der Hand: Wird kein Slider auf der Website eingesetzt, sind auch die Slider-Funktionalitäten (Javascript-Dateien) und -Formatierungen (CSS-Eigenschaften) nicht notwendig.

Der Einsatz eines CSS-Frameworks ist jedoch kein Ersatz für fehlende CSS-Kenntnisse und das Verständnis für den Aufbau von semantischen Websites. Steht man bei einem Web-Projekt vor der Entscheidung ob eines der zahlreichen CSS-Frameworks zum Einsatz kommen soll oder nicht, ist es zudem hilfreich verschiedene Systeme mit ihren Stärken und Schwächen zu kennen.

Eines der wohl bekanntesten und am weitesten verbreitetsten CSS-Frameworks ist sicherlich das Bootstrap-Framework. Bootstrap wurde Mitte 2010 bei Twitter von dem Designer Mark Otto und dem Entwickler Jacob Thornton entwickelt. Bis zu seiner Veröffentlichung im August 2011 wurde es vor allem als firmeninterner Style-Guide für die interdisziplinäre Zusammenarbeit bei der Entwicklung von Anwendungen verwendet. [Twitter, Inc. 2015]
Dem gegenüber steht ZURB Foundation. Das Foundation Framework wurde im Oktober 2011 vom Unternehmen ZURB zum Leben erweckt. Das Unternehmen wurde im Jahr 1998 vom Produktdesigner Bryan Zmijewski unter dem Namen ZB Design gegründet. [Zurb Inc. 2015]

Infodiagramm: Bootstrap vs. Foundation

Bootstrap vs. Foundation im Detail

Beide Frameworks setzen auf ein 12-Spalten-Grid, also ein Rastersystem aus 12 Spalten. Während Bootstrap einen adaptiven Ansatz verfolgt, setzt Foundation auf ein fluides Layout.

Das adaptive Bootstrap-Layout besitzt drei Breakpoints und differenziert zwischen vier Bildschirmgrößen: large, medium, small und extra small. An den in Pixeln definierten Breakpoints “springt” das Layout in die für die jeweilige Bildschirmgröße optimierte Darstellung.
Die Standard-Breakpoints in Bootstrap liegen bei 768, 992 und 1200 Pixeln.

< 768px Extra small devices - Phones xs (0-767px)
≥ 768px Small devices - Tablets sm (768-991px)
≥ 992px Medium devices - Desktops md (992-1200px)
≥ 1200px Large devices - Desktops lg (>1200px)

Foundation besitzt nur zwei Breakpoints und differenziert zwischen drei Bildschirmgrößen: small, medium und large. Außerdem nutzt Foundation als Grundeinheit rem*.

*rem verhält sich exakt wie em allerdings orientiert sich rem am Eltern-Element beziehungsweise dem „Root-Element“. Ein Vorteil von „rem“ ist eine einfachere Berechnung von verschiedenen Abständen oder Höhen, zum Beispiel der Schriftgröße. Grund dafür ist, dass sich rem nicht kaskadiert. Nachteil: Der Internet Explorer kann erst ab der Version 9 mit der Einheit rem umgehen.

Bei der Verwendung von SASS werden die Breakpoints jedoch trotzdem in Pixeln angegeben. Die Pixelangaben werden über die SASS-Funktion rem-calc() in die relative Einheit rem umgerechnet, wodurch ein „fließen“ des Layouts ermöglicht wird.
Die Standard-Breakpoints liegen bei 640 und 1024 Pixeln.

small: any screen. (0-639 Pixel)
medium: any screen 640 pixels or wider. (640 bis 1023 pixel)
large: any screen 1024 pixels or wider. (>1024 pixel)

Beide Ansätze haben Vor- und Nachteile: Adaptive Design kann die optimale Erfahrung für einen Nutzer auf einem spezifischen Gerät bedeuten, wird aber schnell recht aufwändig, wenn mehrere Geräte bedient werden müssen. Ein fluides Layout hat den Vorteil, dass es mit sehr vielen Geräten und Auflösungen genutzt werden kann, allerdings dann oft suboptimal.

Beide Systeme haben einen ähnlichen Aufbau im HTML-Markup. Folgendes Beispiel zeigt ein Layout mit zwei nebeneinander platzierten Containern.

Bootstrap:

<div class="container">
  <div class="row">
    <div class="col-md-8">
    Zwei drittel Spalte
    </div>
    <div class="col-md-4">
    Ein drittel Spalte
    </div>
  </div>
</div>

Foundation:

<div class="row"> 
  <div class="large-8 columns"> 
  Zwei drittel Spalte 
  </div> 
  <div class="large-4 columns"> 
  Ein drittel Spalte 
  </div> 
</div>

Ein klassisches Grid-System setzt sich aus DIV-Elementen zusammen, denen CSS-Klassen für die Zeilen (rows) und Spalten (columns) hinzugefügt werden.

Bei Bootstrap gibt es zwei zusätzliche Container-Klassen, die sämtliche Zeilen (rows) des Grids umschließen müssen: .container und .container-fluid. Die Klasse .container ist für ein Raster-Layout mit fest-definierten Breiten gedacht; die Klasse .container-fluid für ein Layout, welche die ganze Breite der Seite einnimmt.
Bei Foundation wurde auf den umgebenden Container verzichtet. Dafür werden bei Foundation für die Spaltendefinition zwei CSS-Klassen (large-x und columns) benötigt.

Typographie

Beide Frameworks verwenden als erste Schriftart „Helvetica Neue“. Diese Schriftart ist kostenpflichtig aber auf vielen Mac als eine Standardschrift installiert. Als CSS-Schriftart darf man sie jedoch trotzdem einsetzten; ist sie auf dem Nutzer-System nicht installiert, wird die nächste verfügbare Schriftart aus der Liste der definierten Schriften genutzt. Auf Windows-Systemen ist „Helvetica Neue“ weniger verbreitet.
Bei Bootstrap ist es Helvetica (Mac-Systeme) gefolgt von Arial (Windows-Systeme) und abschließend eine Standard-Schrift aus der Familie der sans-serif-Schriftarten. Foundation setzt zusätzlich noch Roboto ein. Roboto ist seit der Version 4.0 Standard-Schriftart auf Android-Betriebssystemen.

Farbpalette

Bootstrap bietet zwei Farbschemata: Graustufen und Semantik. Die hexagonalen Werte für die Graustufen-Palette sind von hell nach dunkel: #eee, #777, #555, #333 und #222.
Die semantischen Farben sind: #337ab7 (dunkelblau - primary), #5cb85c (grün - success), #5bc0de (hellblau - info), #f0ad4e (gelb - warning) und #d9534f (rot - danger).

Die Graustufen-Palette in Foundation lautet: #FEFEFE (white), #E6E6E6 (light grey), #CACACA (medium grey), #797979 (dark grey), #0A0A0A (black).
Die semantische Farb-Palette: #2199E8 (blau – primary), #777777 (grau – secondary), #3ADB76 (grün – success), #FFAE00 (gelb – warning) und #EC5840 (rot – alert).

Icon-Fonts

Icon-Fonts sind Schriftarten, die anstelle von Buchstaben und Zahlen eine Auswahl an Icons beinhalten. Diese Schriftarten werden – ebenso wie Webfonts – zusätzlich eingebunden. Ein großer Vorteil von Icon-Fonts ist ihre Skalierbarkeit über die CSS-Eigenschaft font-size. Auch die Farbe der Icons lässt sich per CSS anpassen. 

Bootstrap stellt 263 Icons der Schriftart Glyphicons Halflings (http://glyphicons.com) zur Verfügung.

Weitere Informationen zu den Bootstrap Glyphicons unter: http://glyphicons.bootstrapcheatsheets.com

Eingebunden werden die Icons in HTML über ein Span-Tag:

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Bei Foundation muss der Icon-Font separat runtergeladen werden: http://zurb.com/playground/foundation-icon-fonts-3. Der Foundation Icon-Fonte 3 beinhaltet 283 Icons.    

Die Einbindung in HTML erfolgt über das i-Tag: <i class="fi-[icon]"></i>

Responsive Bilder

Im Gegensatz zu Vektorgrafiken (SVG) sind Pixel-basierte JPG-, GIF- oder PNG-Bilder zunächst nicht skalierbar. Während Bootstrap eine CSS-Klasse .img-responsive zur Verfügung stellt, die das Bild lediglich in seiner optischen Größe den Bildschirmgegebenheiten anpasst – das Datenvolumen (also die Dateigröße) bleibt dabei gleich groß – bietet Foundation eine Methode für adaptive Images. Hierbei werden drei Bilder mit unterschiedlichen Größen (small, medium und large) hinterlegt. Je nach Bildschirmgröße (Media Queries) wird das passende Bild mit optimierter Dateigröße angezeigt. Die Methode erfordert jedoch Javascript.

<img data-interchange="[assets/img/interchange/small.jpg, small], 
[assets/img/interchange/medium.jpg, medium], 
[assets/img/interchange/large.jpg, large]">

Das Problem lässt sich auch serverseitig lösen. Matt Wilcox hat ein PHP-Script geschrieben welches über die .htaccess-Datei adaptive images berechnet und je nach Bildschirmgröße ausliefert. Mit dieser Methode lassen sich auch bereits bestehende Websites nachrüsten. Nachteil hierbei ist jedoch, dass keine anderen Bildausschnitte genutzt werden können; das Bild wird nur in eine andere Größe umgerechnet und als eigenständige Bild-Datei abgespeichert.
Weitere Informationen: http://www.adaptive-images.com

Mit Bootstrap ließe sich mit den Klassen zum Ein- und Ausblenden von Elementen in Abhängigkeit von der Bildschirmgröße eine ähnliche Lösung finden. So könnte man vier Bildgrößen eines Bildmotivs über ein img-Tag einfügen und über Media Queries und den Klassen visible und hidden steuern.

Zukünftig wird hoffentlich das neue HTML5-Elemente picture das img-Tag ersetzten. Das picture-Element bringt genau die fehlenden Möglichkeiten für responsive Bilder mit. Leider wird es bislang vom Internet Explorer nicht unterstützt.

Weitere Informationen zu responsive images unter: https://blog.kulturbanause.de/2014/09/responsive-images-srcset-sizes-adaptive

Bootstrap bringt für Bilder noch ein nette Gimmick mit: Verschiedene Rahmen für Bilder – von rund bis eckig mit abgerundeten Ecken. Die zugehörigen CSS-Klassen lauten: img-rounded, img-circle und img-thumbnail.

Auch bei Boxen, Tabellen und Formularen hat Bootstrap ein reichhaltiges Angebot an CSS-Klassen zur Auswahl. Foundation bietet nur wenige und bei Formularen gar keine zusätzlichen, vordefinierten CSS-Klassen zum Styling der Elemente. 

Navigation / Menüs

Bootstrap nutzt für Menüs die CSS-Klasse .nav, während Menüs bei Foundation .menu heißen. Bei Foundation gibt es ein Basis-Menü, welche sich durch den Zusatz der Klasse .vertical in ein vertikales Menü verwandeln lässt. Horizontale Menüs können auf kleineren Bildschirmen vertikal dargestellt werden.
Die Menüs bei Bootstrap sind alle deutlich durchgestylter. Hier entscheidet man sich zwischen einem Tabulator- (.nav-taps) oder Button- (.nav-pills) Menü. Durch den Zusatz der Klasse .nav-stacked wird für das Buttonmenu ein vertikales Menü erzeugt.

Dropdown-Menüs bieten beide Frameworks, wobei bei Bootstrap der oberste Menüeintrag standardmäßig nicht verlinkbar ist, sondern mit einem Klick das Untermenü anzeigt. Dieses Verhalten ist für mobile Geräte, die nicht über den typischen Hover-Effekt verfügen, sicherlich sinnvoll. Für Desktop-Geräte ist es jedoch ein zusätzlicher Klick und manchmal möchte man das Elternelement auch mit einer Kategorie- oder Blogseite verlinken. Mit einer zusätzlichen CSS-Anweisung kann man diese Lösung optimieren:

ul.nav li.dropdown:hover ul.dropdown-menu {
   display: block;
   margin-top: 0px;
}

In Bootstrap ist die Navbar (.navbar) eine übergeordnete Navigation, die in mobilen Geräten ein- und ausgeklappt werden kann; bei Foundation heißt sie Top Bar (.top-bar). Beide Frameworks bieten für diese übergeordnete Navigation die klassische Hamburger-Navigation (drei Querbalken) für mobile Geräte.

Bootstrap:

<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-  toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>

Foundation:

<span data-responsive-toggle="responsive-menu" data-hide-for="medium" style="display: inline;">
<button class="menu-icon dark" type="button" data-toggle=""></button>
</span>
<div id="responsive-menu" style="display: block;">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu="uehp76-dropdown-menu" role="menubar">
<li class="is-dropdown-submenu-parent opens-right" role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="One" data-is-click="false">
<a href="#">One</a>
</li>
<li role="menuitem">
<a href="#">Two</a>
</li>
<li role="menuitem">
<a href="#">Three</a>
</li>
</ul>
</div>
</div>

Foundation bietet für mobile Geräte zusätzlich ein Off-Canvas-Menü (JavaScript), das sich links oder rechts durch wischen erreichen lässt.

An weiteren Navigationselementen bieten beide Frameworks Breadcrumbs und Pagination an. Bei Bootstrap heißen die zugehörigen CSS-Klassen .breadcrumb und .pagination – bei Foundation . breadcrumbs und ebenfalls .pagination.

Zusammenfassung Menüs:
Insgesamt beinhaltet Bootstrap mehr gestylte Menükomponenten (Tabs, Pills, Button-Dropdown), während Foundation von einem Basis-Menü ausgeht und dabei mehr Funktionalität und weniger vordefinierte Styles bietet. Damit ist das Foundation-Menü-Angebot deutlich funktionaler ausgelegt und einfacher durch eigene zusätzliche CSS-Styles zu individualisieren. Bootstrap bietet sich immer dann an, wenn das Layout nahe am eigenen Projekt liegt.

JavaScript-Komponenten

Sowohl Bootstrap als auch Foundation setzen auf die weit verbreitete, freie JavasScript-Bibliothek jQuery. Bootstrap läuft mit jQuery Versionen ab 1.9.1 aber nicht mit der Version 3.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Foundation setzt ab der Version 5 und 6 auf jQuery 2.x – es hat den gleichen Funktionsumfang ist jedoch nicht kompatibel zu Internet Explorer 6, 7 und 8.

Content Delivery Network (CDN) [https://code.jquery.com oder über Google: https://developers.google.com/speed/libraries/#jquery]: 

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js">
</script>

oder:

<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>

Klassische JavaScript-Anwendungen sind das Accordion, zum Auf- und Zuklappen von Inhalten, Slideshows (Karussell) und PopUp-Fenster.

CSS-Preprozessoren

Ein CSS-Präprozessor ist eine Skriptsprache, die CSS erweitert und anschließend in korrekte CSS-Syntax kompiliert. Es handelt sich also um einen vorgeschalteten Prozess mit dem Ziel sauberen CSS-Code zu schreiben, bei dem Code-Wiederholungen weitgehend vermieden werden sollen. Ein weiterer Vorteil ist, dass es zahlreiche, umfassende Bibliotheken (Mixins) gibt, die Code-Schnipsel für z. B. gängige Browserinkompatibilitäten enthalten. Somit muss man sich beim Erstellen von CSS-Anweisungen über ihre Funktionsfähigkeit in den unterschiedlichen Browsern weniger Gedanken machen. Die Präprozessoren bieten zudem deutlich mehr Programmier-Funktionalität. Während CSS über keinerlei Programmierlogik verfügt, gibt es in CSS-Präprozessoren Variablen, Bedingungen, Schleifen und mathematische Funktionen zur Berechnung von z.B. Farbwerten. Außerdem können Anweisungen geschachtelt werden, wodurch sie einfacher zu lesen und zu schreiben sind. Weiterhin können Stylesheets importiert werden, so dass nach dem Kompilieren eine einzige CSS-Datei erzeugt wird. Dies verringert die Anzahl der http-Requests gegenüber herkömmlichen CSS-Datei-Strukturen. Die Arbeitsabläufe werden durch die Verwendung von CSS-Präprozessoren vereinfacht, da u.a. auch die Kompression von CSS-Dateien automatisiert werden kann.

Die drei verbreitetsten CSS-Präprozessoren sind:

  • SASS (Syntactically Awesome StyleSheet) http://sass-lang.com
  • LESS http://lesscss.org
  • Stylus http://stylus-lang.com

Während früher ein solides Verständnis der Kommandozeile Pflicht war, um CSS-Präprozessoren zu nutzen, existieren heute diverse Tools und Desktop-Anwendungen, die den Einsatz von CSS-Präprozessoren auch ohne die Kommandozeile ermöglichen.

Bootstrap setzte zunächst auf die Stylesheet-Sprache LESS. Doch mit zunehmender Verbreitung und Popularität von SASS ist diese ebenfalls integriert worden. Bei Bootstrap hat man also die Wahl, mit welchem CSS-Präprozessor man arbeiten möchte – die Wahl ist Geschmackssache. Foundation setzt einzig auf SASS.

Die Verwendung von CSS-Präprozessoren ist sicherlich etwas für Frontend-Profis. Beide Frameworks lassen sich auch ganz klassisch durch Überschreiben von CSS-Eigenschaften und ohne Verwendung von CSS-Präprozessoren nutzen.

Mehr Performance durch einen angepassten Funktionsumfang

Beginnt man, sich mit dem einen oder anderen Framework zu beschäftigen, so sollte man auf jeden Fall das Komplettpaket von Bootstrap bzw. Foundation runterladen, um alle Funktionalitäten ausprobieren zu können.
Für viele Websites ist heute jedoch eine hohe Performance gewünscht. Diese kann durch einen Overhead an Programmcode leiden. Deshalb sollte man bei Projekten auf einen angepassten Download zurückgreifen, der nur diejenigen Funktionalitäten enthält, die auch wirklich auf der Website zum Einsatz kommen.
Bootstrap bietet den Custom-Download nur auf seiner offiziellen, englischsprachigen Website unter http://getbootstrap.com/customize an. Foundation bietet den Custom Download direkt unterhalb des Full-Package auf seiner offiziellen Downloadseite unter http://foundation.zurb.com/sites/download.html an.

Dokumentation

Ein Framework ist nur so gut, wie seine Dokumentation. Zeit ist Geld und die Einarbeitung in ein neues Frontend-Framework kostet Zeit. So dient die Online-Dokumentation vorwiegend zum Nachschlagen und sollte deshalb auch viele Code-Schnipsel und Beispiele enthalten. So kann der Entwickler per Copy & Paste die Grundfunktion in seinem Projekt umsetzen.
Bootstrap bietet sich als Einstiegs-Framework an, da die Dokumentation auch in deutscher Sprache vorliegt: http://holdirbootstrap.de. Es gibt eine Basis-Vorlage und neuerdings auch Starter-Templates, die den Einstieg leicht machen.
Foundation ist internationaler ausgerichtet und bietet lediglich eine englischsprachige Dokumentation unter http://foundation.zurg.com/sites/docs. Dafür aber einige Video-Tutorials (in englischer Sprache) und ebenfalls Starter-Templates.

Starter-Themes:

https://startbootstrap.com/template-categories/all/  **NEU**

http://foundation.zurb.com/templates.html oder
http://foundation.zurb.com/develop/building-blocks.html und
http://foundation.zurb.com/sites/resources.html

Community und Verbreitung

Bootstrap ist sicherlich das bekanntere Framework und hat dementsprechend mehr Anhänger. Foundation wird – meiner Ansicht nach – eher von Experten genutzt, während Bootstrap sich insbesondere für Amateure eignet.

Auch für die gängigen Content-Management-Systeme, wie z.B. Wordpress, Joomla, Typo3 und Drupal, existieren Themevorlagen für beide Frameworks.

Joomla! hat sogar ab der Version 3.0 Bootstrap als Standard-Theme im Core integriert. So können Bootstrap-CSS-Klassen in den Standard-Joomla-Themes im Backend eingesetzt werden. Für individuelle Layouts gibt es das Theme Master Bootstrap.

Für Wordpress ist es BootstrapWP; für Foundation steht ein Download auf GitHub oder JointsWP zur Verfügung.

Für Drupal gibt es beides: Bootstrap 3 for Drupal und ZURB Foundation jeweils für Drupal 7 und 8.

Seiten, die Bootstrap nutzen:

Seiten, die mit ZURB Foundation erstellt wurden:

Tipp: Wie findet man einfach heraus, welche Web-Technologien auf einer Website eingesetzt werden? Mit einem entsprechenden Browser-Addon, wie z.B. Wappalyzer [https://wappalyzer.com/] für Firefox [https://addons.mozilla.org/de/firefox/addon/wappalyzer/] oder Chrome [https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg].

Weppalyzer

Lizenz / Copyright / Nutzungsrecht

Sowohl Bootstrap als auch Foundation stehen unter der MIT-Lizenz. „Die MIT-Lizenz, auch X-Lizenz oder X11-Lizenz genannt, ist eine aus dem Massachusetts Institute of Technology stammende Lizenz für die Benutzung verschiedener Arten von Software. Sie erlaubt die Wiederverwendung der unter ihr stehenden Software sowohl für Software, deren Quelltext frei einsehbar ist, als auch für Software, deren Quelltext nicht frei einsehbar ist.“ [Wikipedia]

Fazit

Beide Frameworks eignen sich gut, um moderne, responive Webdesigns umzusetzen. Während Bootstrap deutlich mehr vorgefertigte Komponenten und CSS-Klassen liefert, kommt Foundation mit einem schlankeren Code daher. Dies bietet mehr individuelle Gestaltungsmöglichkeiten, unter Umständen aber auch mehr Aufwand beim Styling von Gestaltungselementen.

Ist das gewünschte Layout nah an einem Bootstrap-Layout, kann ein schnelles Ergebnis erreicht werden. Müssen jedoch viele Farbanpassungen erfolgen, so ist das Überschreiben der CSS-Klassen unter Umständen recht mühselig. Einfacher wird es, wenn man mit einem Preprozessor wie SASS arbeitet.

Für den Einstieg in die Arbeit mit einem CSS-Framework ist Bootstrap – wegen der deutschsprachigen Dokumentation – zu empfehlen. Foundation bietet demgegenüber mehr Individualität beim Styling und zukunftsfähigere Komponenten, die jedoch teilweise im Detail etwas tricky sind und teilweise tiefgehendes Verständnis für Webtechnologien erfordern.

Kategorie

CSS