Share
Der Yeti ist zurück! Foundation 6 wurde heute veröffentlicht, und wir sind absolut begeistert von der neuen Design-Ethik, den Features und den leistungsstarken Werkzeugen, die diese Inkarnation von ZURBs populärem Framework uns bringt! Es gibt sogar ein besonderes "Etwas" mit dieser Version, also tauchen Sie in diesen Artikel ein, um den kompletten Low-Down zu erhalten.
Foundation 6 ist nicht nur eine visuelle Iteration, Code-Restrukturierung oder eine einfache Änderung der Versionsnummer. Das Team von ZURB setzte sich für diesen zu vollständig Überdenken Sie das Framework und sehen Sie, was passiert, um es noch beeindruckender zu machen. Bei Foundation 6 geht es um den gesamten Prozess. vom Prototyp zur Produktion.
Vom Prototyp zur Produktion zu gehen ist jetzt ein Kinderspiel!Einige der Hauptziele des Entwicklungsteams waren:
"Für Foundation 6 haben wir die Dateigröße der gesamten CSS-Datei um die Hälfte reduziert, indem wir die Verwendung von Sass aggressiv optimiert und Komponenten in Struktur und Stil einfacher gemacht haben."
- Geoff Kimball Produktdesigner, ZURB
Wie haben sich diese Ziele auf unseren bevorzugten Rahmen für die Erstellung großartiger Websites ausgewirkt? Lass es uns herausfinden! Wir werden zunächst einige der wichtigsten Funktionen von Foundation 6 durchgehen und uns dann eingehender mit CSS / Sass und JavaScript beschäftigen.
Der Einrichtungsprozess der Sass-Version von Foundation 6 wurde verbessert, sodass Sie Ihre Projekte schneller zum Laufen bringen können. Es gibt viel weniger Abhängigkeiten und Fehler werden viel intelligenter behandelt, so dass Sie weniger Schwierigkeiten haben, den fraglichen Fehler herauszufinden.
Ein weiteres nettes Extra ist, dass ZURB einen aufgemotzten Stack mit eigenem statischen Standortgenerator, Live-Reload-Server und unzähligen Möglichkeiten bietet, Ihren Code mit UNCSS und UglifyJS besser zu optimieren. Es ist derselbe Stack, den die Jungs von ZURB für ihre eigenen Projekte verwenden (dazu später mehr!).
"Foundation for Sites 6 the Movie" kommt 2018. Möglicherweise.Es gab viele Bedenken, dass der von Frameworks (wie Bootstrap und Foundation) verwendete Code in einem Projekt ungenutzt bleibt. Sogar 90% des CSS-Codes werden nicht verwendet, was wirklich unnötig ist und ein Problem für die Leistung darstellt. Vor diesem Hintergrund hat Foundation 6 zunächst einmal eine um 50% reduzierte Code-Reduktion!
Der Yeti hat geklappt und es hat sich ausgezahlt!ZURB ist dieses Problem mit Foundation 6 zweifach angegangen, indem von Anfang an weniger Stile angewendet wurden und Ihnen die Werkzeuge zum Entnehmen der Dateien zur Verfügung gestellt wurden. Jetzt können Sie leichter eigene Stile für die Produktionsversion Ihres Projekts hinzufügen. Die Styles Foundation 6 tut Das Angebot kann leicht über Sass mit Variablen aktualisiert werden.
Außerdem wurden viele Präsentationsklassen entfernt, sodass das generierte CSS sauber bleibt. In dieser Version von Foundation gibt es keine Stilklassen wie Ränder, Polsterungen und Runde und Radius. Durch das Vertraute _settings.scss Datei Es wurde jetzt noch einfacher gemacht, Ihre Module selektiv zu importieren. Durch das selektive Auskommentieren der Komponenten, die Sie nicht verwenden, können Sie unbenutzten CSS-Code leicht entfernen.
Mit einer leichteren Datei von Anfang an, weniger Stilklassen und mehr Kontrolle darüber, was eingefügt werden soll und was nicht, sind Sie jetzt bereit, Ihren Prototyp in produktionsreifen und leichtgewichtigen Code zu überführen.
Die aktualisierte Dokumentation von Foundation 6 in Verbindung mit einem von AJAX unterstützten Suchformular macht es Ihnen leicht, schnell etwas zu finden:
Das Suchformular gibt Ihnen während der Eingabe Vorschläge.Geben Sie einfach die Komponente oder das Thema ein, nach dem Sie suchen, und das Suchformular enthält die relevanten Themen. Es ist ein schönes kleines Extra, das das Eintauchen in die Dokumentation zu einem angenehmen Erlebnis macht.
Die Top Bar selbst hat ein großes Update erlebt. In früheren Versionen war es großartig, für was es gedacht war, aber es war ein wenig unflexibel. Nicht länger! Foundation 6 führt ein Komponenten für die obere Leiste, um es flexibler und einfacher zu machen, bestimmte Elemente für verschiedene Geräte hinzuzufügen und zu entfernen, z.
In Foundation 6 hat ZURB ein flexibleres Mischgitter erstellt, mit dem Sie die Spaltenanzahl in einer Zeile steuern können. Sie könnten so etwas tun:
.container // Wir definieren diese Klasse für die Verwendung von 16 Spalten. @include grid-row (16) .sidebar // 5/16 = 31.25% @include grid-column (5); .main-content // 11/16 = 68,75% @ include-Spalte (11);
Oder sowas:
.Sidebar // Dies bewirkt, dass .sidebar 2 Spalten eines 5-Spalten-Rasters einnimmt @include grid-column (2 of 5); .main-content // Dies bewirkt, dass .main-content 3 Spalten eines 5-Spalten-Gitters aufnimmt. @ include: grid-column (3 von 5);
Erstellen Sie Ihre eigene Spaltenanzahl für ein bestimmtes Element oder erstellen Sie eine fünfspaltige Zeile, ohne die Spaltenanzahl für das gesamte Projekt zu ändern. Mit dieser neuen Funktion können Sie das Raster genauer steuern, sodass Sie Ihr Layout besser an Ihren Inhalt anpassen können.
Foundation 6 hat den Orbit-Schieberegler zurückgebracht, diesmal jedoch mit einem anderen Ansatz: Er wurde als Wireframing-Tool konzipiert. Diese Version enthält nur ein wenig HTML und ein wenig JavaScript. Der anzupassende Code wird innerhalb der Seitenmarkierung erstellt und ist viel einfacher auszuführen.
Ich bin froh, dass Sie alten Freund zurück haben!Wenn Sie in Ihrer Produktionsphase nach einem Schieberegler suchen, empfiehlt das Team von ZURB die Verwendung eines Schiebereglers wie beispielsweise dem Eulenschieberegler. Wie bereits erwähnt, ist der Orbit-Schieberegler lediglich als Drahtmodell gedacht.
In Zusammenarbeit mit ihren eigenen Kunden hat ZURB eine benutzerdefinierte Vorlage für die Bereitstellung von Projekten erstellt. Einschließlich Lenkstangen und auf Libsass aufgebaut, ist dies der aufgebrachte Stapel, den wir zuvor angesprochen haben. Es ist für Sie da, um Ihren eigenen Workflow zu nutzen und zu optimieren, und es heißt Panini:
Eine vorgefertigte Blaupause, die Sie für Ihr nächstes Projekt verwenden können Dieses Gulp-basierte Build-System hat eine Menge zu tun:
Die Vorlage kann auch produktionsbereiten Code erstellen und diese zusätzlichen Schritte hinzufügen:
Vorlagen und Helfer für Lenker machen das Schreiben von dynamischem Code für statische Seiten zum Kinderspiel!
Neu in Foundation 6 ist ein Flexbox-Netz, das Sie anstelle des herkömmlichen Float-Gitters verwenden können. Es funktioniert ähnlich wie das Standard-Float-Raster, enthält jedoch eine Reihe von nützlichen Funktionen, die nur mit Flexbox möglich sind, wie etwa horizontale und vertikale Ausrichtung, automatische Größenanpassung und einfachere Anordnung der Quellen. Wir kennen das Flexbox-Grid von Foundation für Apps und es ist großartig zu sehen, dass wir es jetzt auch in Foundation für Sites verwenden können!
Motion UI ist eine Animationsbibliothek und wurde ursprünglich in Foundation for Apps erstellt und verwendet. Glücklicherweise können Sie jetzt auch in Foundation für Sites benutzerdefinierte CSS-Übergänge und -Animationen erstellen!
Fügen Sie Ihren Foundation-Projekten alle Arten von Übergängen und Animationen hinzu!Diese aktualisierte Version enthält robustere Übergangsoptionen, ein Animationswarteschlangensystem und flexible CSS-Muster, die mit jeder Javascript-Animationsbibliothek kompatibel sind.
Das Anpassen der verschiedenen Übergänge und Animationen ist eine Frage der Manipulation der Sass-Mixins, die in dieser Version der Motion-Benutzeroberfläche enthalten sind. Die Motion-Benutzeroberfläche umfasst auch eine Vielzahl vorgefertigter CSS-Klassen, um Ihre Prototypen schnell auf den neuesten Stand zu bringen.
Die Bibliothek wurde für die Verwendung mit den Foundation-Frameworks entwickelt, kann jedoch an die Animationsbibliothek jedes Frameworks angepasst werden, z. B. Angular oder React.
Wie bereits erwähnt, bestand das große Ziel von Foundation 6 darin, die Verwendung des Frameworks mit Ihrem eigenen, produktionsbereiten Code zu vereinfachen und zu vereinfachen. Werfen wir einen Blick auf einige der coolen Features, die uns Foundation 6 bezüglich CSS und Sass bietet.
Erstellen Sie Ihre eigenen Style-Guides in der neuesten FoundationIn Foundation 5 konnten Sie die Haltepunkte ändern, es war jedoch nicht ganz klar, wo sie zu finden sind und wie sie vorgehen sollen. Nicht länger. Foundation 6 bietet Ihnen eine Übersicht (eine Haltepunktekarte), in der Sie auf einfache Weise Haltepunkte anpassen, hinzufügen und aus dem Projekt entfernen können.
Spitze: Versuchen Sie so weit wie möglich bei den Standard-Haltepunkten zu bleiben. Die Dateigröße steigt mit zusätzlichen Haltepunkten.
Beispiel für die Haltepunktekarte mit der neuen Sass Maps-FunktionMit Foundation 5 mussten Sie eine String-Interpolation durchführen, um Medienabfragen in Ihren Sass-Dateien zu verwenden. Da dies nicht immer wirklich klar war und die Leute häufig die Dokumentation aufrufen mussten, um den richtigen Code zu kopieren und einzufügen, war das Team von ZURB der Meinung, dass dies einfacher möglich wäre. Anstelle der String-Interpolation können Sie also eine andere verwenden @ beinhaltet verschiedene Haltepunkte einschließen. Verwenden Mittel ist beispielsweise für Haltepunkte mittel und höher, nur mittel für, gut, nur Medium, und mittel nach unten für mittelgroße, kleine usw. Sie können sogar eigene Pixel, Rem-Haltepunkte und Retina, Landschaft und Porträt verwenden.
"Wir wollten wissen, wie die Leute Foundation tatsächlich nutzten, also reisten wir um die ganze Welt und stiegen auf Hunderte von Anrufen, um tatsächlich zu schauen, wie die Community das Framework verwendete, und diskutierten, was sie davon brauchten. Es war unglaublich!"
- Brandon Arnold Foundation Lead, ZURB
Das JavaScript wurde ebenfalls grundlegend überarbeitet. Eine Möglichkeit, die Menge an Code in den JavaScript-Plugins von Foundation 6 zu reduzieren, bestand darin, sie in kleinere Dienstprogramme aufzuteilen, die Ereignisse auf größeren Plugins verarbeiten. Indem Sie diese Dienstprogramme öffentlich zugänglich machen, können Sie sie jetzt verwenden, um Ihre eigenen Plugins zu erstellen! Welche Plugins können wir also in Foundation 6 finden? Lass es uns herausfinden:
Plug & Play mit den neuen Helfer-Plugins von Foundations.Foundation 6 enthält eine neue Toggle-API, mit der Benutzer ihre Websites schnell und einfach dynamischer gestalten und Status anzeigen können. Toggler macht das Umschalten von Elementen und das Hinzufügen von Klassen zum Kinderspiel. Es ist großartig für schnelles Bauen und erfordert keine JavaScript-Kenntnisse.
Klassen mit einem Datenattribut umschalten Zum Beispiel:
Erweitern!
Dies ist eine öffentliche Funktion zum Bestimmen von Kollisionen mit der Kante eines Containers. Durch diese Kantenerkennung werden QuickInfos, Dropdown-Listen und mehr im Ansichtsfenster oder Container Ihrer Wahl angezeigt.
Ein Zufallszahlengenerator. Sie können dies zum Hinzufügen von A11Y-Aria-Attributen verwenden, für die beispielsweise IDs erforderlich sind.
Dies ist eine Funktion, zu der ein Ereignis-Listener hinzugefügt werden kann Fenster falls angewendet, feuert ein einzelnes Plug-In-Element mit der [data-yeti-box = 'idOfElement'] schließen. Wenn sich ein anderes Element desselben Plug-In-Typs öffnet, d. H. Wenn Tooltip B geöffnet wird und Tooltip A derzeit geöffnet ist, schließen Sie Tooltip A, bevor Sie B öffnen.
Hier haben wir eine öffentliche Funktion zum Hinzufügen einer Onscroll Ereignis-Listener zu Fenster. Das Markup sieht wie folgt aus: [data-scroll = 'idOfElement']
Eine Funktion zum Hinzufügen von a Größe ändern Ereignis-Listener zu Fenster.
ich habe das gemacht!Fast das gesamte JavaScript wurde mit separaten Dienstprogrammen erstellt, die allgemeine Funktionen wie in den obigen Beispielen behandeln. Dadurch können die Plugins kleiner sein und mit ihnen können Sie jetzt leicht eigene erstellen!
Als kleines Extra hat ZURB auch eine brandneue Desktop Companion App veröffentlicht! Mit ihm können Sie Projekte mit nur einem Mausklick starten. Starten Sie mit Yeti Launch schneller als je zuvor. nett!
Drehen Sie Projekte mit einem einzigen Mausklick hoch!Foundation for Sites 6 hat eine sehr große Überarbeitung erfahren, was die Art und Weise widerspiegelt, wie ZURB eigene barrierefreie Websites erstellt. Durch das Teilen ihres Wissens und ihrer Erfahrung können andere Entwickler und Designer leicht Prototypen erstellen und schnell zur Produktion gelangen.
Der schnellste Yeti nochFazit: Was bekommen wir mit Foundation 6??
Über 125 Themen auf dem Envato-Markt sind mit Foundation 5 kompatibel - werden Sie zuerst etwas verkaufen, das auf Foundation 6 basiert?!
Accentsconagua