Da man als Frontend-Entwickler nicht immer das Rad komplett neu erfinden will, gibt es Frameworks, die bereits alles für eine fertige Website an Board haben. Mit vorgefertigten CSS-Klassen, Javascript-Funktionen, Mark-up-Logik und mehr bieten diese Grundlagen für wiederkehrende Praxisfälle. Die zwei wohl bekanntesten Frameworks sind Bootstrap von Twitter und Foundation von Zurb. Beide Frameworks sind kostenlos und ihr Schwerpunkt liegt im logischen Aufbau und intuitiven Einsatz von CSS-Klassen.

Verwendete Einheiten

Der auffälligste Unterschied zwischen den beiden Frameworks sind wohl die Einheiten im CSS. Während Bootstrap Pixel verwendet, baut Foundation auf rem (root em). Rem ist so ähnlich wie em, nur bezieht sich rem immer auf das root-Element, nicht auf die Schriftgröße des direkten Eltern-Elements. Außerdem basiert Bootstrap auf LESS und Foundation auf SASS.

Browsersupport

Was die Browserunterstützung der beiden Frameworks betrifft, wird Internet Explorer 8 und niedriger von Foundation 5 nicht mehr unterstützt. Bootstrap hingegen bietet noch eingeschränkten Support für den Internet Explorer 8. Um aber das responsive Layout mit all seinen Funktionen unterstützen zu können wird ein Polyfill benötigt z.B.: respond.js. Mit CSS3-Attributen kann IE 8 auch nicht umgehen und auf Transitions sollte bis einschließlich IE 9 verzichtet werden. Bei allen anderen auch mobilen Browsern werden die Frameworks aber sauber unterstützt.

Responsivität

Bootstrap hat bei der Responsivität einen adaptiven Ansatz. Das heißt im mobilen Bereich bis zu einer Breite von 798 Pixel wird das Design stufenlos mitskaliert, danach wechselt das Verhalten aber auf fest definierte Ausmaße. Im Gegensatz dazu verfolgt Foundation einen fluiden Ansatz und bleibt für jede Screengröße übergangslos flexibel. Der adaptive Ansatz ist zwar aus gestalterischer Sicht oft einfacher zu bedienen, da es eine überschaubare Anzahl an Layout-Breiten gibt, die Fluide Lösung akzeptiert aber, dass es keine Definition von optimalen Ausmaßen geben kann und passt sich daher an jede Gerätedimension an. Um Bootstrap ein fluides Layout zu verpassen sind Korrekturen an drei Zeilen notwendig.

@media (min-width: 768px) {
    .container {width: 90%;}
}
@media (min-width: 992px) {
    .container {width: 90%;}
}
@media (min-width: 1200px) {
    .container {width: 90%;}
}

User-Interface-Elemente

Fast jedes User-Interface-Element lässt sich durch Einsatz von Klassen in Bootstrap als auch in Foundation realisieren. Jedoch werden die User-Interface-Elemente von Bootstrap in mehreren Versionen in Farbe, Größe, Ausrichtung angeboten, während Foundation eher dazu einlädt die Änderungen des Standardstils selbst zu übernehmen.

Dokumentation

Die Online-Dokumentation der beiden Frameworks ist sehr umfangreich. Bootstrap ist etwas umständlicher in „Getting started“, „CSS“, „Components“ und „JavaScript“ strukturiert. Foundation gliedert ihre Dokumentation nach Einsatzzweck und Bedeutung der Tools. Daher bietet Foundation eine übersichtlichere Nachschlagmöglichkeit.

Standardpaket

So umfangreich der Einsatz von Bootstrap auch ist, das Download-Paket ist etwas mager ausgefallen. Es ist kein Beispiel-Mark-up enthalten und das Zip-Archiv beinhaltet die bootstrap.css und bootstrap-theme.css sowie die Javascript-Funktionen. Die Einbindung von bootstrap-theme.css ist nicht von Nöten, sie reichert die bootstrap.css lediglich mit zusätzlichen Styles an. Außerdem liefert Bootstrap eine eigenen Icon-Font mit im Paket, namens Glyphicons, die 200 verschiedene Icons beinhaltet. Diese können mit einfachen Klassen in das Mark-up eingebunden werden. Der Foundation-Download ist in diesem Zusammenhang um einiges umfangreicher. Neben der foundation.css gibt es die normalize.css , die eine gute Grundlage für fast jedes Webprojekt darstellt und die Unterschiede in den Browser-Stylesheets normalisiert. Weiters enthält das Paket eine zusammenfassende foundation.min.js. Jedes darin enthaltene Plug-in gibt es auch einzeln, somit können Entwickler nur ein Set an Plug-ins zusammenstellen, das benötigt wird und folglich Platz sparen. Zusätzlich gibt es jQuery, Modernizr und einige weitere Nicht-Foundation-Plug-ins mit im Paket. Im Gegensatz zu Bootstrap wird hier auch ein Beispiel-Mark-up in der index.html mitgeliefert, das fast alle Layout- und UI-Elemente von Foundation darstellt.

Grid-Raster

Das Raster des Grid-Systems der beiden Frameworks besteht aus zwölf Spalten, deren Steg zwischen den Spalten eine fixe Breite von 30 Pixel beziehungsweise 1,875 rem hat. Die Breite der Spalten ist flexibel und passt sich an der Breite des Browserfensters (oder Viewports) an. Beide Systeme haben einen ähnlichen Aufbau im HTML-Mark-up. Folgendes Beispiel zeigt ein Layout mit zwei nebeneinander platzierten Containern.
Bootstrap

<div class=“row“>
    <div class=“col-md-8“>
        Zwei drittel Spalte
    </div>
    <div class=“col-md-4“>
        Ein drittel Spalte
    </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>

Bootstrap benötigt zusätzlich ein all umfassendes Block-Element mit der Klasse „container“, damit auch an den Seitengrenzen ein Mindestabstand zum Rand des Browserfensters bestehen bleibt. Bei Foundation bestimmen die Schlüsselbegriffe small, medium und large, bei welcher Viewport-Breite ein Element wie viele Spalten überspannt. Bei Foundation gibt es folgende Bereiche:

• small-*: für Viewports über 0 Pixel Breite
• medium-*: für Viewports über 640 Pixel Breite
• large-*: für Viewports über 1024 Pixel Breite

Beispiel: Container, der auf großen Bildschirmen drei, auf kleinen sechs Spalten umfasst

<div class=“medium-6 large-3 columns“>Inhalt</div>

Die Mobile Darstellung steht bei Bootstrap, sowie Foundation im Mittelpunkt. Die Klasse die ab einer bestimmten Viewport-Breite greift überschreibt die vorherige Klasse. Das bedeutet im Bezug auf das obere Beispiel, dass Bildschirmgrößen unter 641 Pixeln die volle Breite einnehmen würden. Umgekehrt würde ein Container , der nur die Klasse „small-3“ erhält, auch bei großem Viewport drei Spalten einnehmen.

Die Syntax von Bootstrap ist ähnlich zu Foundation. Im Gegensatz dazu, ist die Aufteilung einmal öfter unterteilt und die entscheidenden Kürzel sind xs, sm, md und lg. Für folgende Aufteilung hat sich Bootstrap entschieden:

• col-xs-*: für Viewports ab 0 Pixel Breite
• col-sm-*: für Viewports ab 768 Pixel Breite
• col-md-*: für Viewports ab 992 Pixel Breite
• col-lg-*: für Viewports ab 1.200 Pixel Breite

Im Vergleich zum Foundation Beispiel: ein Container der bei mittleren Viewport drei und bei einem kleinen Viewport sechs Rasterspalten einnehmen soll:

<div class=“col-sm-6 col-md-3“>Inhalt</div>

Obwohl Bootstrap um einen Breakpoint mehr bietet, sieht die Aufteilung unter 768 Pixel etwas mager aus. Foundation nimmt hier weniger Rücksicht auf Gerätestandards und formuliert ihre Breakpoint allgemeingültiger.

Zur Positionierung der Spalten nebeneinander setzen beide Frameworks auf die float-Eigenschaft, da inline-block in bestimmten Kontexten zu ungewollten Abständen führen und das CSS3-Flexbox-Model erst in Zukunft eine ausreichende Browserunterstützung mitbringen kann. Mit dem Css-Standard Box-Model , bei dem sich border und padding auf die Gesamtmaße des Objektes aufaddieren, machen Boostrap und Foundation kurzen Prozess. Mit den Zeilen werden alle Elemente einer neuen Berechnungsgrundlage unterzogen und nach dem Border-Box-Model interpretiert. Nur so lassen sich die Breitenangaben der Spalten in Prozent in Kombination mit den Innenabständen (padding) umsetzen. Das Box-Modell wirkt sich also auf alle Elemente aus.

*,
*:before,
*:after {
    -webkit-box-sizing_ border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Außerdem sind in beiden Frameworks Verschachtelungen möglich. Mit einer neuen Klasse „row“ kann ein neues in einem bestehenden Element eröffnet werden. Hier können wieder neue Elemente verteilt werden. Grundlage des Spaltenrasters ist in diesem Fall die neue „row“ mit ihrem zwölf-Spalten-Raster. Wenn man aus dem vorgegeben Raster ausbrechen will, können die Container ebenfalls um Spalten verschoben werden.

Bootstrap

<div class=“col-md-4 col-md-offset-2“>Bootstrap</div>

Foundation

<div class=“large-4 large-offset-2 columns“>Foundation</div>

Wie man sieht ist das Aufbauen von Layouts intuitiv umsetzbar, aber nur solange man sich in dem zwölf-Spalten-Raster bewegt. Ein eigenes Grid mit alternativer Spaltenanzahl und Steg-Breite ist mit der Standard-Version nicht möglich.

LESS- und SASS-Variante

Für Entwickler, die mit LESS und SASS umgehen können, bietet Bootstrap und Foundation die unkomprimierten Less- und SASS-Dateien zum Download an. Somit ergeben sich einige Vorteile.

Spaltenanzahl im Spaltenraster

Über den Customizer lässt sich zwar die gewünscht Spaltenanzahl definieren, aber an eine spätere Änderung dieser ist nicht zu denken. Im Gegensatz dazu hat die LESS- und SASS-Variante diese Werte in Klassen hinterlegt und diese können an einen zentralen Punkt editiert und angepasst werden.

Breakpoints

Dies gilt auch für die Definition der Breakpoints. In den SASS- und LESS-Files lassen sich diese leicht editieren. Im Standard-Download ist das zwar auch möglich, aber nur durch Suchen im Code und Bearbeitungen an mehreren Stellen.

Semantisches CSS

Da Maschinen das CSS nicht semantisch auswerten können, wird oft darüber gestritten, ob es so etwas wie Semantik im CSS überhaupt geben kann. Trotzdem wichtig dabei ist, dass keine Grid-Klassennamen direkt in das Mark-up geschrieben werden sollten. Stattdessen sollte eine sprechende Klasse vergeben werden, die die Funktion und den Kontext des Elements beschreibt. Dann kann diese Klasse anschließend mit Hilfe von Mixins, diese Funktionen aus dem Pool an Framework-Funktionen erhalten. Somit kommt es zu weniger Wiederholung von Klassennamen, ein aufgeräumtes Mark-up, und eine saubere Trennung von Framework- und eigenen Elementen. Außerdem lässt sich somit theoretisch das Framework auf jedes bestehende Projekt münzen.

Upgrade

In der Vergangenheit hat sich gezeigt, dass sich Funktionennamen oder Klassennamen aufgrund eines Updates manchmal ändern. Durch Berücksichtigung eines semantischen CSS müssen diese Änderungen nur an zentralen Stellen in den LESS- oder SASS-Files, anstatt im ganzen Projekt mit jedem einzelnen Einsatz im HTML geändert werden.

Anpassen von fertigen Elementen

Wenn der Standard-Stil eines UI-Elements nicht ausreicht und aufgrund des projektspezifischen Designs abgeändert werden muss, sollte das nicht in der Bootstrap-Klasse passieren. Das heißt wenn beispielsweise das Aussehen des Standard-Buttons abgeändert wird, sollte eine neue Klasse erstellt werden, die auf den Stil des Standard-Buttons aufbaut. Mit zum Beispiel einer Klasse „btn-mystyle“, können nun Eigenschaften in nur wenigen CSS-Zeilen überschrieben und ergänzt werden. So wird auch in Bootstrap intern bei den verschiedenen Variationen eines Buttons gearbeitet, wie beispielsweise „btn-primary“, „btn-sucess“ etc.

<button class=“btn btn-mystyle“>Mein Button</button>

Foundation funktioniert nach dem gleichen Prinzip, motiviert aber in der Dokumentation sehr früh eine Element-Klasse (z.B. einen Button) nach eigenen Parametern mit Hilfe der Mixins von SASS zu erstellen.

Je nach Design-Anforderungen des Projektes, kann es vorkommen, dass zahlreiche Attribute immer wieder ergänzt oder überschrieben werden müssen, manchmal so viel, dass sich die Verwendung der Basisklasse kaum noch lohnt. Hier sind die Grenzen des Frameworks spürbar, an die jedes Framework einmal stoßen muss. In diesem Fall ist das Ummodeln der UI-Elemente oft mühsamer, als selbst ein neues Element zu erstellen. Im Netz haben schon einige Entwickler das Standard-Layout von Bootstrap angepasst und neue Themes entwickelt, die sie zum Download zur Verfügung stellen. Auf bootswatch.com findet man einige Alternativen zum Standard-Layout und auf blacktie.co erreichen die Themes Qualitäten von vollständigen Webseiten. Im Gegensatz dazu sind solche Angebote für Foundation schwer zu finden, was wohl auf die Philosophie des Frameworks zurückzuführen ist.

Javascript

Bootstrap und Foundation haben aber nicht nur in CSS viel zu bieten, sie enthalten auch einige hilfreiche Javascript-Tools, von denen hier einige erwähnt werden:

Foundation: Interchange:

Qualität und Performance im Responsive Design treffen irgendwann einmal auf das Problem der Bildgrößen. Auf einem Smartphone müssen die Bilder nicht in voller Größe geladen werden, oder auf einem Retina Display müssen die Bilder doppelt oder sogar dreifach so große als die Anzeige ausgespielt werden etc. Obwohl sich viele Quellen im Internet mit diesen Problem befassen und es noch immer keine perfekte Lösung gibt, befasst sich auch Foundation mit diesen Thema und bietet mit „Interchange“ eine Lösung. Auf der Grundlage der gerade zutreffenden Media Queries lädt Foundation die entsprechend passende der zuvor im „data-interchange“-Attribut angegebenen Bildquelle.

Bootstrap: Affix:

Manchmal sollen Elemente fix positioniert werden. Mit position:fixed; ist dieses Szenario umsetzbar , aber das Problem ist, dass diese Elemente oft Objekte überdecken oder überdeckt werden sobald gescrollt wird. Affix bietet eine Lösung dieses Problems mit einer bedingten Fixierung via Javascript.

Foundation: Offcanvas-Menu:

Das Seitenmenü, das in mobiler Ansicht durch einen Touch auf ein Symbol oben rechts oder links seitlich hereinflattert wird hier umgesetzt. Bootcamp bietet dieses simple Tool nicht.

Foundation: Formular-Validation:

Foundation bietet eine Inline-Formular-Validierung. Zwar kümmert sich dieses Tool keineswegs um die nachträgliche Servervalidierung aber sie verbessert die Usability.

Bootstrap und Foundation: Diashow:

In Foundation “Orbit“ und in Bootstrap „Carousel“ genannt. Die Anwendung ist in beiden Fällen simpel, jedoch unterstützt nur Foundation Swipe-Gesten durch den eingebauten Touch-Screen-Support.

Foundation: Fastclick:

Standard-Klick-Ereignisse unterliegen auf Touch-Screens einer gewissen Verzögerung, die beseitigt und somit die Nutzungserfahrung verbessert wird.

Foundation: Joyride:

Mit diesem Tool können „Touren“ erstellt werde, die zum Beipiel neue Funktionen erklären. Mithilfe von Scrolling, Tooltips und Fading werden dabei einzelne Elemente hervorgehoben und erörtert.

Über diese Javascript-Utilities hinaus bietet Bootstrap und Foundation eine Menge an Standard-Interface-Elementen: Modal-Window (Pop-ups), Dropdowns, Tab-Navigation, Tooltips uns ebenfalls Scrollposition-Abhängige Navigationslösungen.

Fazit

Foundation liegt eine komplett andere Philosophie zugrunde als Bootstrap, die sich aber trotzdem gegen den Riesen durchsetzen kann. Besonders auffällig ist die konsequente Ausrichtung an die Zukunft des Internets. Bootstrap hingegen sticht durch eine größere Variation an Userinterface-Elementen hervor und durch Out-of-the-Box-Erweiterungen aus dritter Hand.

Für schnelle Mockups , die nahe an der Funktionalität von Twitter-Frameworks liegen, eignet sich Bootstrap hervorragend. Für andere Anwendungen ist Foundation ein guter Tipp. Beide Frameworks bieten erst bei Verwendung der LESS- bzw. SASS-Variante ihren vollen Funktionalitätsumfang.

Quellen:

Lemme, M. (2014, Juni). Bootstrap vs. Foundation. Screenguide, (21), 60–66.
http://getbootstrap.com/
http://foundation.zurb.com/