Auf den ersten Blick scheint es einfach zu sein, Web-Benutzeroberflächen zu bauen. Es stehen einem Entwickler mächtige Mittel wie HTML5, CSS3 und JavaScript zur Verfügung, die es möglich machen, das Aussehen und das Verhalten einer Benutzeroberfläche zu beschreiben. Wenn man jedoch Web-Anwendungen bauen möchte, die mit dem Benutzer stark interagieren, zeigt die Erfahrung von vielen Entwicklern, dass man sehr viel Zeit in die Entwicklung der Benutzeroberfläche investieren kann. Noch spannender wird es, wenn man die verschiedenen, gängigen Web-Browser unterstützen muss, was bei einer Anwendung im Internet vorausgesetzt wird. Bei Web-basierten Anwendungen im Enterprise-Umfeld wird diese Forderung meistens abgeschwächt, da die Unternehmen fast immer unternehmensweit einen bestimmten Browser in einer bestimmten Version einsetzen.
Um die Entwicklung einer Web-Oberfläche effizienter zu machen, kann man Web-UI-Frameworks einsetzen, die komplette UI-Bausteine und Layouthilfen mitbringen. Zwei Frameworks sind zur Zeit besonders interessant, weil sie recht umfangreich sind und auf dem aktuellen Stand der Web-Technologien aufsetzen. Zum einen handelt es sich dabei um Twitter Bootstrap, das sich nach kürzester Zeit auf vielen Websites etabliert hat, und zum anderen um Foundation 3, das umfangreich ist und auch einen starken Fokus auf die Unterstützung von Mobilgeräten hat.
Wir haben uns diese beiden Frameworks angeschaut und einen Feature-Vergleich anhand der umfangreichen Dokumentationen erstellt. Da die Dokumentationen verschieden aufgebaut sind und unterschiedliche Begriffe für die gleichen Dinge benutzt werden, gestaltet sich solch ein Vergleich aufwändig. Um anderen Entwicklern den Aufwand zu ersparen, veröffentlichen wir hier unsere Gegenüberstellung der beiden Frameworks.
Wir verzichten auf eine Wertung und Empfehlung eines Frameworks, da es immer von den konkreten Zielsetzungen und Rahmenbedingungen abhängt, welches man einsetzen möchte. Aber die kompakte Gegenüberstellung in diesem Artikel wird es einfacher machen.
Twitter Bootstrap wurde in der Version 2.0.4 betrachtet.
Twitter Bootstrap Website: Twitter Bootstrap auf github
Foundation wurde in der Version 3.0 betrachtet.
Foundation 3 Website: Foundation 3
Artikel zu Foundation auf smashingmagazine.com: Rapid Prototyping For Any Device With Foundation
Feature | Foundation 3 | Twitter Bootstrap |
---|---|---|
Documentation | Foundation 3 Docs | Twitter Bootstrap Docs |
CSS preprocessor | Sass (Basis: ruby) | Less (Basis: node.js), inoffizielle SASS-Variante verfügbar |
Auslieferungspaket | Ruby Gem | git-Repo (oder als Gem für Rails, siehe Kap. “Weitere Infos” unten) |
Die Notwendigkeit für “CSS preprocessors” liegt darin,
Feature | Foundation 3 | Twitter Bootstrap |
---|---|---|
Documentation | Foundation 3 Docs | Twitter Bootstrap Docs |
Grid System | 12 columns | 12 columns with a responsive twist |
Offsetting columns | ja | ja |
Nesting columns | ja | ja |
Fluid grid | ja | ja (12 responsive, percent-based columns) |
Basic layouts | nein | ja (2 einfache) |
Mobile support | ja (2 mobile Layouts) | ja (3 mobile Layouts) |
Show and hide content by device | ja | ja |
Twitter Bootstrap
<div class="row">
<div class="span4">...</div>
<div class="span4 offset4">...</div>
</div>
Foundation 3
<div class="row">
<div class="eight columns">
Main content...
</div>
<div class="four columns">
Sidebar...
</div>
</div>
Twitter Bootstrap
Foundation 3
Feature | Foundation 3 | Twitter Bootstrap |
---|---|---|
Documentation | Foundation 3 Docs | Twitter Bootstrap Docs |
Form Types | 2 Typen | 4 Typen |
Extended form controls | ja | ja |
Form Control States | ja (error) | ja (focused, disabled, validation styles) |
Features | Foundation 3 | Twitter Bootstrap |
---|---|---|
Documentation | Foundation 3 Docs | Twitter Bootstrap Docs |
Different Button sizes | ja | ja |
Button classes | ja | ja |
Button groups, navigation, toolbars | ja | ja |
Dropdown Buttons | ja | ja |
Split Buttons | ja | ja |
Features | Foundation 3 | Twitter Bootstrap |
---|---|---|
Documentation | Foundation 3 Docs | Twitter Bootstrap Docs |
Horizontal Navigation Bar | ja (mit Dropdown-Menüs usw.) | ja (mit Dropdown-Menüs usw.) |
Vertical Navigation Bar | ja | ja |
Fixed Nav Bar | nein | ja (top or bottom of viewport) |
Kontextsensitive Nav-Bar | nein | ja |
Mitgelieferte Tab Styles | 2 | 2 |
Sub Navigation (z.B. für Filter) | ja | ja |
Breadcrumbs | nein | ja |
Pagination | ja | ja |
Pager (previous, next page) | nein | ja |
Features | Foundation 3 | Twitter Bootstrap |
---|---|---|
Documentation | Foundation 3 Docs | Twitter Bootstrap Docs |
Labels | ja | ja |
Badges | ja (= Labels) | ja |
Alerts | ja | ja |
Features | Foundation 3 | Twitter Bootstrap |
---|---|---|
Documentation | - | Twitter Bootstrap Docs |
Thumbnails | nein | ja |
Features | Foundation 3 | Twitter Bootstrap |
---|---|---|
Documentation | Foundation 3 Docs | Twitter Bootstrap Docs |
Screen Size | ja | ja |
Orientation Detection | ja | nein |
Touch detection | ja | nein |
Siehe auch Abschnitt “Layout”
Twitter Bootstrap beinhaltet ein freies und gutes Iconset, das Request-effizient als Sprite eingebunden werden kann.
Twitter Bootstrap ist mit jQuery integriert (bringt jQuery-Plugins mit). Foundation 3 sagt nichts darüber aus. Es dürfte aber kein Problem sein, jQuery oder ähnliche JavaScript-Frameworks einzubinden.
Features | Foundation 3 | Twitter Bootstrap |
---|---|---|
Documentation | Slideshow, Dialog, Sonstige | JavaScript, Base CSS, Components |
Accordeon | ja | ja |
Modal Dialogs | ja | ja |
Progress Bars | nein | ja (verschiedene Stile) |
Tooltips | ja | ja |
Hover Popovers | nein | ja |
Image/Content slideshow | ja | ja |
Dropdowns | ja | ja |
Scrollspy | nein | ja (siehe “Navigation”, Kontextsensitive Nav-Bar) |
Autocomplete Text | nein | ja |
Video | ja | nein |
Es sind mehrere Lösungen vorhanden, siehe Pat Shaughnessy: Twitter Bootstrap, Less, and Sass: Understanding Your Options for Rails 3.1.
Entweder muss man einen Mix aus LESS und SASS im eigenen Rails-Projekt hinnehmen oder man muss darauf vertrauen, dass eine Bootstrap-Portierung nach SASS in Zukunft zeitnah zu Bootstrap-Releases aktualisiert wird. Im letzteren Fall besteht noch das Risiko, dass die Portierung von LESS nach SASS fehlerhaft ist. Im ersteren Fall bekommt man auf Entwickler-Rechnern eine weitere Toolkette (Node.js, V8-Engine, …).
Ruby on Rails wird direkt durch die Einbindung eines Gems unterstützt: Foundation 3 – Installing with Rails
Wie ist Ihre Meinung zu den vorgestellten Frameworks? Ich freue mich über Ihre Meinung, Ergänzungen oder auch Erfahrungen.