Grundlagen 6 - 10 Erstaunliche neue Funktionen

Die Entwickler des Foundation-Front-End-Frameworks haben sich nicht gerade auf den Lorbeeren gesetzt, während das Bootstrap-Team an der beeindruckenden neuen Hauptversion gearbeitet hat. Letztes Jahr haben sie an einer großartigen Welttournee teilgenommen, um ihr Wissen mit ihren Benutzern zu teilen und sie zu fragen, wie sie Foundation in ihrer Praxis einsetzen.

Nachdem sie zu ihren Schreibtischen zurückgekehrt waren, fassten sie die Bedürfnisse und Wünsche ihrer Benutzer zusammen und planten die Planung der neuen Hauptversion des Frameworks: Foundation 6.

Es ist noch in der Entwicklung, aber die Pläne sind sehr vielversprechend. Die kommenden Features konzentrieren sich auf 3 Hauptbereiche: Leistung, Anpassbarkeit und Erreichbarkeit. Werfen wir einen Blick auf 10 dieser Funktionen.

1. Optimierter Workflow

Basierend auf den Erfahrungen der Nutzer entwickelte das Foundation-Team einen neuen Slogan, nämlich “Prototyp für die Produktion”, für Foundation 6. Dies bedeutet einen neuen, rationalisierten Workflow, der Designern und Entwicklern die Möglichkeit bietet Vom Prototyp zur Produktion gehen.

Ziel der neuen Foundation 6 ist es, ein flexibles und leicht anpassbares Framework bereitzustellen, das dies ermöglicht Schreiben Sie von Anfang an sauberen und semantischen Code. Die aktuelle Version Foundation 5 ermöglicht auch ein schnelles Prototyping, aber wir können erwarten weitere Workflow-Optimierung in der kommenden Veröffentlichung.

2. Vereinfachter Einrichtungsprozess für die Sass-Version

Eine der erstaunlichsten Eigenschaften des Foundation-Frameworks ist, dass es mit der Sass-Stylesheet-Sprache erstellt wurde. Dies ist also möglich Passen Sie die Standardstilregeln schnell an unsere tatsächlichen Bedürfnisse an.

Der Sass-Setup-Prozess war jedoch für viele Benutzer ein wenig einschüchternd, daher wird die neue Hauptversion dies tun Sie erhalten einen vereinfachten Setup-Vorgang für die Sass-Version. Dies bedeutet, dass das Sass-Setup ausgeführt wird erfordern viel weniger Abhängigkeiten als vorher. Wenn Sie die Vanilla-CSS-Version bevorzugen, können Sie sich natürlich trotzdem dafür entscheiden.

3. Ein neuer Setup-Stack für Maximalisten

Neben der regulären Sass-Version wird Foundation 6 mit einer Auffrischung ausgeliefert Sass-Version, die Entwicklern leistungsstarke Anpassungsoptionen bietet.

ZURB, der Gründer von Foundation, wird seinen eigenen Entwicklungsstack, einschließlich des eigenen, für die Öffentlichkeit eröffnen statischer Standortgenerator, Live-Reload-Server und viele innere Optimierungstechniken einschließlich der Integration von UnCSS zum Entfernen nicht verwendeter Stile und UglifyJS für die JavaScript-Komprimierung.

Grundsätzlich können wir in derselben Entwicklungsumgebung arbeiten, die ZURB intern verwendet.

4. Verringerte Seitenladezeit

Das Foundation-Team musste sich einer konstruktiven Kritik stellen, die behauptete, dass in den meisten Foundation-Projekten etwa 90% des CSS-Codes nicht genutzt werden. Dies gilt nicht nur für Foundation, sondern auch für andere große CSS-Frameworks wie Bootstrap und TopCoat. Als Teil der Antwort entschied sich Zurb, die Dateigröße des ausgegebenen CSS durch eine Code-Reduktion von ca. 40-50% deutlich zu reduzieren.

Es ist interessant festzustellen, dass sie versuchen, sich von Bootstrap zu unterscheiden, indem sie Folgendes angeben:Foundation ist kein Rahmen, der stilistische Klassenrand und Polsterung oder Rundung und Radius aufweist". (Zu Referenzzwecken siehe die neuen Utility-Klassen von Bootstrap 4 in unserem vorherigen Beitrag.).

5. Basisstile als Wireframes

Der andere Teil der Leistungsverbesserungsbemühungen besteht in Erstellen Sie einen Basisstil, der als Drahtmodell anstelle eines endgültigen Entwurfs fungiert. Dies führt in erster Linie zu einem leichteren Thema, hat jedoch einen weiteren großen Vorteil. Da mehr Stilregeln in einzelne Komponenten verschoben werden, haben Entwickler die Möglichkeit dazu leichter gestalten ihr Design.

Hoffentlich bedeutet dies, dass Websites auf Basis von Foundation erstellt werden weniger ähnlich, standardisiert aussehen, und Designer haben mehr Platz zum Exponierenmit einer schönen und einzigartigen LösungIonen, die die jüngsten Sorgen über ein langweiliges Netz widerlegen.

6. Erleichterter selektiver Import

In Foundation 5 können Entwickler nur die Komponenten auswählen, die sie verwenden möchten. Die Stiftung 6 wird dieses Bestreben auf die nächste Stufe bringen Verschieben der selektiven Importfunktion in die Sass-Datei _settings.scss.

Auf diese Weise wird _settings.scss ein wirklich universelle Konfigurationsdatei, Wir können mit dieser Hilfe nicht nur Funktionen wie Zeilenbreite oder Standardschriftarten anpassen, sondern auch ganz einfach das Ausblenden der Komponenten brauchen wir nicht. Wenn wir dies tun, können wir eine weitere Leistungsverbesserung erreichen.

7. Magerer und sauberer Sass

Im Neugestaltungsprozess hat das Foundation-Team jeden Aspekt des Frameworks überarbeitet, also auch sie Die Art und Weise, wie sie die Sass-Stylesheet-Sprache verwendet haben, wurde geändert. Sie stellten fest, dass sie in einigen Fällen Sass, das zu den Folgen führte, überstrapaziert hatten unnötige Überkomplikation der CSS-Ausgabe. Mit dem Ziel einer schlankeren und saubereren Codebasis haben sie auch ihre Sass-Struktur rationalisiert.

In Foundation 6 können wir Sie erwarten geringere Verschachtelung und Spezifität sowie optimierte Medienabfragen (sie haben sich wiederholenden Code zusammengeführt) und zurückgesetzte Komponenten-Mixins. Letzteres bedeutet, dass es weniger Komponenten-Mixins gibt und die restlichen weniger Parameter haben, was zu einem einfacheren und logischeren Code führt

Wenn Sie Mixins lieben, machen Sie sich keine Sorgen, jede Komponente wird sie noch haben. Sie werden nur so überarbeitet, dass sie effizienter und nützlicher sind, als sie derzeit sind.

8. Verbesserte Grid Mixins

Bei der Reduzierung von Komponenten-Mixins wird Foundation 6 mitgeliefert verbesserte Grid-Mixins das wird uns erlauben Erstellen Sie ein benutzerdefiniertes Raster.

Zurb verspricht, dass wir es können leicht als kompliziertes Rastersystem aufzubauen wie wir wollen, einschließlich anspruchsvollere benutzerdefinierte Reihen und verschachtelte Gitter, und die Fähigkeit, die Standardklassen in semantisches Markup umzuwandeln. Die verbesserten Grid-Mixins machen den Strom aus Die Netze können noch intuitiver, flexibler und schneller erstellt werden.

9. Nahtlose Integration von benutzerdefinierten JavaScript-Plugins

Foundation 5 bietet derzeit viele JavaScript-Komponenten wie coole modale Dialoge, QuickInfos, klebrige Navigationsleiste, Leuchtkästen und viele andere, die eine moderne Website benötigt Schreiben Sie unsere benutzerdefinierten JavaScript-Plugins den Stiftungskern nutzen. In beiden Fällen ist es ein großer Schritt nach vorne Benutzerfreundlichkeit und Leistung.

In der Zukunft werden wir das können Zugriff auf die integrierten Initialisierungsmethoden, Toggle-Auslöser und Haltepunkte, und nutzen Sie alle anderen Funktionen des globalen JavaScript von Foundation.

10. Volle Zugänglichkeit

Die wohl erstaunlichste Eigenschaft der neuen Foundation 6 ist, dass sie vollständig zugänglich ist. Jedes Komponenten- und Code-Snippet enthält die entsprechenden WAI-ARIA-Attribute und Orientierungspunkte. Darüber hinaus werden Entwickler sogar dabei sein mit einer Bedienungsanleitung versehen Über wie man die a11y-webstandards verwendet.

Wenn wir also unseren Kunden eine vollständig zugängliche Website zur Verfügung stellen möchten, müssen wir nichts weiter tun, als unser Design mit Foundation 6 zu erstellen. Bitte beachten Sie, dass wir dies weiterhin tun müssen Fügen Sie die entsprechenden ARIA-Regeln selbst in unsere HTML-Seiten ein, obwohl Zurb's a11y Gebrauchsanweisung den Lernprozess erleichtern wird.