In der riesigen Welt der Rapid-Prototyping-CSS-Frameworks und -Toolkits stehen unzählige Optionen zur Auswahl. Seit Twitter Bootstrap auf Twitter auf den Markt kommt, hat es den Anschein, als hätte es diesen Markt weitgehend verschlungen. Gibt es noch Raum oder Grund für etwas anderes?
Das glauben die Leute von Zurb und werden ihr weithin erfolgreiches Stiftungsprojekt nicht aufgeben. Nachdem ich in der Vergangenheit mehrmals über Bootstrap geschrieben hatte, werde ich heute in die Foundation springen und sehen, was ich denke.
Stiftung kennenlernen
Was ist also die Stiftung? Zurb beschreibt es als "ein einfach zu verwendendes, leistungsfähiges und flexibles Framework zum Erstellen von Prototypen und Produktionscode auf beliebigen Geräten."
Aus dieser Beschreibung kann man ersehen, dass Zurb den geräteübergreifenden Aspekt des Layoutrasters stark betont. Interessanterweise ist das Wort "responsive"? erscheint nirgendwo auf der Foundation-Site (was ich finden kann), aber die Vorteile sind definitiv ähnlich: Entwerfen Sie ein Projekt, das überall funktioniert.
Ist es wie Bootstrap?
Diese beiden Projekte sind sicherlich nicht identisch, aber sie sind in etwa so nah an direkten Konkurrenten wie möglich. Im Grunde sind sie so ähnlich, dass Sie bei der Verwendung der einen die andere wahrscheinlich nicht verwenden.
Sowohl Bootstrap als auch Foundation möchten Ihnen alle Tools zur Verfügung stellen, die Sie benötigen, um CSS-basierte Layout- und Prototyping-Aufgaben mit einigen JavaScript-Goodies schnell auszuführen. Beide werden ebenfalls mit einem starken Schwerpunkt auf sauberem, minimalem Design vermarktet ein Ergebnis des umfangreichen Standardstylings für Dinge wie Typografie. Sogar ihre Homepages sehen bemerkenswert ähnlich aus:
Das Gitter
Das Erste, an das ich mich bei jedem Rahmen wende, ist das Raster. Das Layoutsystem ist oft der Eckpfeiler, auf dem die gesamte Erfahrung aufbaut. Es ist also eine große Sache, dies richtig zu machen.
Mit Foundation beginnen Sie mit einem flexiblen zwölfspaltigen Raster, das gut auf die Größenänderung des Browsers reagiert und Medienabfragen verwendet, um die Umstellung auf kleinere Geräte zu bewältigen. In Bootstrap verfügen Sie außerdem über ein zwölfspaltiges Gitter, in dem häufig Medienabfragen verwendet werden. Hier haben Sie die Wahl zwischen flüssigen und statischen Säulen, was schön ist.
Die Implementierung des Foundation-Grids sollte ein Kinderspiel sein, wenn Sie zuvor andere Grid-Systeme verwendet haben. Ja, es werden nicht-semantische Klassennamen verwendet. Wenn Sie Frameworks aus diesem Grund hassen, wird dies nicht derjenige sein, der Ihre Meinung ändert.
Das System hier ist so einfach, dass Sie es fast sofort abholen können. Jedes Mal, wenn Sie eine neue Zeile wünschen, erstellen Sie ein Div mit der Klasse "Zeile". Von hier haben Sie zwölf Spalten zu füllen. Sie können es mit zwei sechs-Spalten-Divs in zwei Hälften teilen, mit drei vier-Spalten-Divs in Drittel schneiden usw. Wenden Sie einfach eine Klasse an, die der Anzahl der Spalten entspricht, die Sie zusätzlich zu den? Spalten? Füllen möchten. Klasse.
Wenn wir dieses Beispiel in Bootstrap erneut erstellen, ist die Syntax sehr ähnlich, wenn auch knapper. Bootstrap benötigt nicht die zusätzlichen? Spalten? Klasse, so dass Sie Ihre Markup etwas zurückschneiden können. Zugegebenermaßen? Span6? Sicher liest nicht so schön wie? sechs Spalten ?.
Beide Rastersysteme verfügen über alle erweiterten Funktionen, die Sie benötigen: Verschachtelung, Versatz, Drücken / Ziehen usw. Wie bei dem obigen Code werden Sie feststellen, dass die Syntax von Foundation mit diesen Funktionen ein wenig einfacher und lesbarer ist Bootstrap's ist prägnanter.
Wer gewinnt die Gitterschlacht?
Ich bin ein Netzfanatiker und liebe es, herumzureißen und zu sehen, was diese Dinge tickt. Ich habe Seiten mit den Bootstrap- und Foundation-Rastern erstellt und finde beide ehrlich, dass sie hervorragend sind. Sie sind so ähnlich, dass ich glaube nicht, dass dies die entscheidende Funktion für jeden sein wird, der versucht, zwischen den beiden zu wählen.
Wenn Sie einen von ihnen hassen, werden Sie wahrscheinlich beide hassen, und wenn Sie einen von ihnen mögen, ist es nicht schwierig, zum anderen zu wechseln. Früher war es so, dass Bootstrap diesen Kampf ohne einen zweiten Gedanken verloren hätte, aber jetzt, wo Bootstrap 2 reagiert hat, erkläre ich es unentschieden.
Grundlegende Elemente der Benutzeroberfläche
Beide Frameworks enthalten vordefinierte, aber anpassbare Elemente der Benutzeroberfläche, sodass Sie Ihre App oder Webseite schnell nachbilden können, ohne sich Gedanken darüber machen zu müssen, wie Sie unterschiedliche Teile strukturieren.
Beginnen wir mit einem der grundlegendsten UI-Elemente, einer Schaltfläche. Für eine Schaltfläche benötigen Sie im Grunde nur ein Ankertag mit der Taste? Klasse angewendet.
Dies wird jedoch eine unglaublich einfache Schaltfläche erstellen. Wenn Sie es interessanter machen möchten, hat jedes weitere Styling eine andere Klasse. Zum Beispiel habe ich unten einen kleinen, blauen, glänzenden Knopf mit abgerundeten Ecken erstellt.
Die Geschichte ist hier genauso wie beim Raster. Der Stil von Foundation ist viel ausführlicher, aber vor allem in diesem Fall ermöglicht er ein einfacheres Tweak-Erlebnis. Anstatt die Klassen nach dem, was sie tun, aufzuteilen, weist Bootstrap jeder Klasse unterschiedliche Persönlichkeiten zu. Sie können also zwischen? Btn-info? und? btn-warning? für verschiedene Stiloptionen.
Was das Styling angeht, mag ich persönlich den dezenten Verlauf, den Bootstrap besser als den glänzenden Foundation-Look verwendet. Dieser kann jedoch leicht in beiden Frameworks angepasst werden.
Formulare, Registerkarten und Beschriftungen
Es lohnt sich einfach nicht, jedes UI-Element durchzugehen und die Syntax zu vergleichen. Sie sollten das Bild jetzt schon sehen. Beide Frameworks sind mit den am häufigsten verwendeten UI-Elementen bestückt, sodass Sie sie praktisch ohne großen Aufwand implementieren können.
Registerkarten, Navigation, Breadcrumbs, Formulare, Etiketten, Tabellen; wenn du willst, hast du sie, egal welche davon du verwendest. Wenn Sie jedoch nach Menge suchen, übernimmt Bootstrap hier wirklich die Führung und scheint gerade eine Menge interessanter UI-Elemente einzupacken. Jedes Framework hat einige Einzelstücke, die nicht im anderen sind, aber Bootstrap gewinnt das Zahlenspiel.
JavaScript-Goodies
Foundation ist nicht nur eine CSS-Bibliothek, sondern bietet auch einige großartige JavaScript-Funktionen. Eine meiner Lieblingsfunktionen ist die Orbit-Diashow, die wirklich einfach zu implementieren und anzupassen ist.
Alles, was Sie zum Einrichten einer Diashow benötigen, ist ein div mit einigen Bildern (verwenden Sie alt-Tags für Bildunterschriften). Von hier aus richten Sie einfach Ihr JavaScript auf diesen Div und nennen den "Orbit". Funktion. Wenn Sie weiter gehen möchten, gibt es viele Optionen zum Optimieren.
Es gibt auch ein ziemlich cooles modales Fenster-Plugin, einige Tooltips, Registerkartenfunktionen, Dropdown-Menüs, Warnmeldungen und einige nette Formularüberprüfungen. Beim Sprung zu Bootstrap sehen wir die meisten der gleichen Arten von Elementen, die auf subtile Weise implementiert werden. Wieder einmal stellen wir fest, dass das Bootstrap-Angebot etwas robuster ist.
Preprozessor-Unterstützung
Ein Bereich, in dem Foundation und Bootstrap ihre eigenen Wege gegangen sind, ist die Unterstützung des Präprozessors. Foundation ging mit Sass und Compass, Bootstrap mit LESS. Ich habe als LESS-Fan angefangen, bin aber seitdem für die Macht von Sass gewonnen worden. Daher neige ich dazu, Foundation in dieser Hinsicht besser zu mögen, insbesondere angesichts der Compass-Integration.
Compass ist ein Kraftpaket von Präprozessor-Güte und macht es wirklich einfach, Cross-Browser-CSS3 mit wenig Aufwand zu codieren. Ich war immer ziemlich überrascht, dass Bootstrap stattdessen die LESS-Route gewählt hat.
Davon abgesehen ist es interessant zu wissen, dass Bootstrap fast als Kompass für LESS dient. Genau wie bei Compass enthält Bootstrap alle möglichen hilfreichen Mixins, mit denen Sie komplizierte CSS-Funktionen mit nur wenigen Handcodierungen nutzen können.
Unabhängig davon, ob Sie Foundation oder Bootstrap verwenden, wird es durch die Unterstützung der Präprozessorunterstützung wesentlich einfacher, das Framework anzupassen und zu erweitern.
Schneiden Sie den Mist, wer gewinnt?
Es ist schwierig, hier einen Gewinner zu nennen. Wie ich bereits erwähnt habe, war Bootstrap 1 gegenüber Foundation einfach unterlegen, einfach weil das Layout rein statisch und nicht ansprechend war. Mit Bootstrap 2 jedoch hat Twitter sein Spiel wirklich auf den neuesten Stand gebracht und ein außergewöhnliches Toolset entwickelt, und Foundation hat einiges zu tun, wenn es mithalten soll.
Bootstrap hat aus einer strengen Feature-Listen-Perspektive einfach mehr zu bieten. Es ist auch prägnanter codiert, besser organisiert und viel ausführlicher dokumentiert. Hinzu kommt, dass die Entwicklergemeinde Bootstrap bis zu dem Punkt, dass hervorragende Drittanbieter-Themes, Plugins und andere Extras leicht zu finden sind, gründlich angenommen hat.
Davon abgesehen gibt es eine wichtige Frage: Ist größer besser? Nur weil Bootstrap mehr zu haben scheint, bedeutet das nicht unbedingt, dass es überlegen ist. In der Welt des Webdesigns und der Entwicklung ist weniger oft mehr. Foundation hat ein einfacheres, weniger aufgeblähtes Gefühl, das ich wirklich schätze. Es ist wirklich erstaunlich einfach, es herunterzuladen und in kürzester Zeit Webseiten auszusperren.
Bootstrap-Benutzer läuten hier ein und weisen darauf hin, dass das aufgeblähte Argument nicht gilt, da es einen benutzerdefinierten Bootstrap-Download-Builder gibt, mit dem Sie leicht entscheiden können, was Sie in Ihrem Framework tun und was nicht.
Was denkst du ist besser?
Sie sollten beiden Frameworks eine Probefahrt machen, um zu sehen, mit welchem Gel Sie besser arbeiten. Sie sind jedoch wegen einer Stellungnahme hierher gekommen und ich habe eine für Sie. Wenn Sie nur eine dieser Bibliotheken herunterladen möchten, gehen Sie zu Bootstrap. Ich bin kein Bootstrap-Fan und um ehrlich zu sein, habe ich ihn noch nicht einmal in meinen persönlichen Workflow aufgenommen. Des Weiteren sehe ich Foundation als Außenseiter und würde gerne den Preis hier abgeben, aber ich denke, es muss noch einiges nachgeholt werden.
Aber was weiß ich Ihr benutzt diese Werkzeuge jeden Tag und ich möchte hören, was Sie denken. Ist Foundation besser als Bootstrap? Warum oder warum nicht? Möchten Sie eine dieser Optionen in Ihrem Workflow verwenden, wenn Sie dies nicht bereits tun?