Feature-Vergleich von Twitter Bootstrap und Foundation 3

Veröffentlicht am 3. August 2012 von Viktor Schepik

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.

Infos zu den UI-Frameworks

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

Technologische Basis

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)

CSS preprocessors

Die Notwendigkeit für “CSS preprocessors” liegt darin,

  • dass Maße und Proportionen für die Layouts in CSS berechnet werden können,
  • dass deutlich weniger CSS-Code geschrieben werden muss,
  • dass mehr Konsistenz erreicht wird (durch Variablen, Mixins, …)

Layout

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

Code Beispiele

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>
        

Typographie

Twitter Bootstrap

  • Skalierung basiert auf 2 Variablen. Daraus werden alle Ränder, Innenabstände und Zeilenhöhen berechnet.
  • Typographie für (wahrscheinlich) alle HTML-Textauszeichnungen definiert (Headings, Body, Emphasis, Abb reviation, Lists, …)

Foundation 3

  • Skalierung basiert auf einem globalen Verhältnis-Schema und einer Basis-Zeichenhöhe.
  • Eine Basisunterstützung für Druckansichten ist vorhanden.

Formulare

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)

Buttons

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

Navigation

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

Labels etc.

Features Foundation 3 Twitter Bootstrap
Documentation Foundation 3 Docs Twitter Bootstrap Docs
Labels ja ja
Badges ja (= Labels) ja
Alerts ja ja

Thumbnails

Features Foundation 3 Twitter Bootstrap
Documentation - Twitter Bootstrap Docs
Thumbnails nein ja

Support for multiple devices

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”

Icons

Twitter Bootstrap beinhaltet ein freies und gutes Iconset, das Request-effizient als Sprite eingebunden werden kann.

Integration JavaScript-Frameworks

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.

Widgets

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

Twitter Bootstrap Ruby on Rails-Integration

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, …).

Foundation 3 Ruby on Rails-Integration

Ruby on Rails wird direkt durch die Einbindung eines Gems unterstützt: Foundation 3 – Installing with Rails

Meinungen und Ergänzungen

Wie ist Ihre Meinung zu den vorgestellten Frameworks? Ich freue mich über Ihre Meinung, Ergänzungen oder auch Erfahrungen.