Foundation 6 ist fast bereit, die Beta zu verlassen, und sie ist besser als ihre Vorgänger auf fast jeder erdenklichen Art und Weise: Sie ist schlanker, einfacher und doch etwas ausgefeilter. Zurb haben sich selbst übertroffen.
Wie Sie selbst sehen werden, wenn Sie es endlich installiert haben - einfach genug unter OSX oder Linux, aber unter Windows, kann Node knifflig sein - Foundation 6 kann heutzutage nur noch über den Paket-Manager installiert werden. Ich fühle mich, als würde ich alt werden und von der guten alten Zeit träumen, als CSS-Frameworks in .zip-Dateien und nicht von einem Terminal-Befehl kamen.
Trotzdem habe ich nicht gelogen, als ich sagte, dass Foundation 6 großartig ist. Nun, ich sollte "Foundation for Sites" sagen, denn Foundation ist nicht mehr nur ein Framework. Neben der Foundation for Apps war auch Zurb damit beschäftigt, einige Tools zu entwickeln, um die Entwicklung zu beschleunigen.
In dieser Version dreht sich alles um Leistung ... Sie können Websites schneller erstellen, diese Websites werden schneller heruntergeladen und das JavaScript wird schneller ausgeführt.
Erstens, da ist der Stiftung CLI , die jede Version von Foundation für Sie installieren kann, komplett mit Starter-Projekten. Das vorkompilierte CSS in Foundation for Sites wird nach der endgültigen Veröffentlichung separat heruntergeladen. Im Moment ist jedoch das CLI der richtige Weg, um diese Änderungen zu erhalten und vor der endgültigen Veröffentlichung auf dem neuesten Stand zu bleiben.
Dann gibt es Panini , einen statischen Seitencompiler mit Handle-Vorlagen und verschiedene andere Funktionen, mit denen Sie statische Prototypen und / oder Sites schnell erstellen können. Es kompiliert den Sass, fügt alles JavaScript in eine Datei ein, es kann Ihren gesamten Code komprimieren und mehr.
Jetzt kommt nicht auf die Idee, dass diese Foundation-Version weniger Features enthält - sie hat immer noch alles, was Sie brauchen und mehr - aber es sollte beachtet werden, dass einige Elemente, die besser für Apps als Sites geeignet waren, entfernt wurden. Diese Elemente sind jetzt ein Teil von Grundlage für Apps .
Der Rest der Arbeit in dieser Version ging es darum, redundanten Code loszuwerden und alles, was übrig war, zu straffen.
Anstatt beispielsweise drei verschiedene Menükomponenten für drei verschiedene Menüentwürfe zu erstellen, gibt es nur eine Menükomponente mit mehreren Variationen. Für die Person, die den HTML-Code schreibt, gibt es keinen großen Unterschied: Fügen Sie eine Klasse hinzu und Sie haben ein Menü; Ändern Sie ein paar Klassen, und Sie haben ein Menü, das ganz anders aussieht.
Tatsächlich werden viele der Klassen und Markups bei allen Unterschieden sehr vertraut aussehen, wenn nicht sogar gleich. Es ist alles auf Sass gebaut, so dass Sie es wie immer anpassen können.
In dieser Version dreht sich alles um Leistung. Sobald Sie erfahren haben, wie Sie Websites schneller erstellen können, werden diese Websites schneller heruntergeladen und das JavaScript wird schneller ausgeführt. Fundament in etwa halb so schwer wie es in Bezug auf die Dateigröße war. Hälfte .
Ältere Versionen unterstützten RTL (von rechts nach links) Sprachen wie Arabisch in gewissem Maße; aber sie brauchten einige Feinabstimmungen. Stiftung 6 hat Unterstützung eingebaut.
Das Flex-Grid ist genau das, was Sie denken: Es ist die Grid-Komponente, die mit Flexbox neu erstellt wurde. Auf der einen Seite gibt es eine Reihe von Features und Optionen, die ein reguläres Float-basiertes Grid nicht verarbeiten kann. Auf der anderen Seite ist es wahrscheinlich nicht so gut unterstützt, vor allem von IE. Es ist ein Kompromiss.
Ein paar coole Verbesserungen wurden für die Typografie im Stil der Website hinzugefügt. Insbesondere gibt es Hilfsklassen, mit denen typografische Layouts ein wenig einfacher zu handhaben sind:
Wie oben erwähnt, wurden alle vorherigen Navigationskomponenten in eine große flexible Komponente zusammengeführt. Dies bedeutet, dass alle Navigationstypen gut miteinander spielen. Es bedeutet auch, dass Sie verschiedene Arten der Navigation für verschiedene Bildschirmgrößen wählen können.
Möchten Sie Drilldown-Navigation auf einem Smartphone und eine horizontale Leiste auf einem Desktop? Einfach gemacht mit den Bildschirmgrößen-spezifischen Klassen. Willst du deine "Top Bar" zurück? Fügen Sie einfach ein Wrapper-Div um die Standardmenükomponenten hinzu.
Aber obwohl es insgesamt einfacher zu verwenden ist, ist es immer noch mit Funktionen geladen. Schauen Sie sich unbedingt die Dokumentation an über Menüs und Navigation .
Du kennst diese kleinen Kreise oder Quadrate - normalerweise auf oder in der Nähe von Symbolen - mit winzigen Zahlen darin? Wie wenn Sie Facebook-Benachrichtigungen haben? Das nennt man Abzeichen.
Du lernst jeden Tag etwas Neues. Auch Foundation hat sie jetzt.
Müssen Sie etwas auf dem Bildschirm bleiben lassen, während der Benutzer scrollt? Willst du es an einem bestimmten Punkt stoppen? Sticky ist dein Plugin! Dies ist auch die richtige Anwendung, wenn Sie das Magellan-Menü wie in Foundation 5 verwenden möchten.
Falls Drop-Downs, Akkordeons, Drilldowns, Tooltips und Modals nicht genug sind, ist hier eine allgemeine Möglichkeit, um Dinge erscheinen oder verschwinden zu lassen. Es ist ein einfaches JavaScript-basiertes Toggle-Ereignis, das auf praktisch alles angewendet werden kann.
Ich stelle mir vor, dass es für jene Zeiten ist, in denen keine der anderen Komponenten dem Zweck entspricht oder übertrieben wäre. Es integriert die Motion UI-Bibliothek, so dass Sie das Verschwinden-Ereignis beliebig animieren können.
Nun, der Name klingt wie ein Element, in das man ein Video oder ein Flash-Objekt einbetten kann (yuck), und das könnte man auch machen. Dafür ist es wichtig, ein beliebiges Medienobjekt wie ein Bild neben Textinformationen anzuzeigen.
Sie können beispielsweise den Avatar eines Benutzers neben seinem Benutzernamen und seinem Kommentar in einem Kommentarabschnitt platzieren. Oder Sie verwenden es, um das Veröffentlichungsdatum eines Films, Hauptdarsteller und andere Metadaten neben einer Filmkritik zu platzieren. Überprüfen Sie die Dokumentation zum Beispiel.
Jede Funktion wurde aktualisiert oder neu geschrieben. Viele sind jedoch funktionell unverändert. Überprüfen Sie die Dokumentation, um sicherzustellen, dass Sie die richtigen Klassen haben, überprüfen Sie einige der Upgrades und gehen Sie. Hier sind diese mehr oder weniger die gleichen Funktionen, in alphabetischer Reihenfolge:
Jep. Der erneute Fokus auf Baustellen (im Gegensatz zu einem Framework, das versucht, die Anforderungen von Websites und Apps zu erfüllen) ist erfrischend, und eine reduzierte Größe ist immer ein Pluspunkt.
Freue mich schon sehr darauf, dass es bald geht.