Foundation 6.3: Die neuesten Updates und was Dich 2017 erwartet

() translation by (you can also view the original English article)

Die Entwickler bei ZURB und die der Foundation Community haben hart daran gearbeitet, ein umfangreiches Update für Foundation for Sites veröffentlichen zu können. Lasst uns gleich einsteigen und und ansehen, was dabei heraus gekommen ist. Zusätzlich gibt es noch ein Interview mit dem Team über die künftigen Entwicklungen!

Was ist neu?

Foundation 6.3 bringt einige Änderungen am Framework mit, während es aber etablierte Konzepte weiter verfolgt.

UI Cards

Karten (engl. "Cards") werden als Pattern im Web immer populärer – Sie erlauben es Deinen Benutzern zusammengefasste Information auf einen Blick zu verschaffen und eignen sich hervorragend für responsive Webseiten. Aber nicht nur das ... Sie sind auch intuitiv, so lange Du sie korrekt einsetzt.

Es gab einige Diskussionen, ob man Cards in Foundation integrieren sollte – Ist das wirklich eine Komponente, die man unbedingt in einem Framework benötigt, oder sollte man Cards nicht einfach mit den Mitteln, die eh schon durch das Framework vorhanden sind, selbst bauen. Die andere Seite ist, dass Foundation als schnelles Prototyping Framework gilt und die Integration von Karten mir dabei hilft, noch schneller Prototypen zu entwickeln. Aber auch für Live-Seiten sind Cards eine willkommene Erleichterung.

Flexbox Helfer

Flexbox ist genial, weil es uns ermöglicht, mehr (du ahnst es) Flexibilität in unsere Designs zu bringen. Flexbox zielt darauf ab, einen effizienteren Weg zu bieten, Zwischenräume zwischen Elementen unserer Webseite zu definieren und zu verteilen. Und das, und das ist das eigentlich großartige an Flexbox, selbst wenn sich die Größe dieser Elemente, oder der zur Verfügung stehende Raum für sie, dynamisch ändert und somit nicht von Vornherein bekannt ist.

Foundation 6.3 bringt Helfer für Flexbox mit, um das Arbeiten damit zu vereinfachen und dadurch ein noch einfacheres Prototyping zu ermöglichen. Zum Beispiel sind Floats und Clearfix Hacks – Mittel zum Zweck. Um diese zu ersetzen, verwenden wir ab nun Flexbox Helfer.

"Flexbox ist ein wichtiges Werkzeug der modernen Webentwicklung und wir wollen hier dran bleiben." – Kevin, Foundation Community Manager

Eine komplett überarbeitete Off-Canvas Funktionalität

Manche werden sagen, dass dieser Schritt überfällig war, aber endlich ist es geschafft. Das Off-Canvas Element wurde überarbeitet und ist jetzt besser denn je. Du musst nicht einmal Dein Markup ändern, denn es ist abwärtskompatibel.

Das Markup des neuen Off-Canvas Elements ist sogar noch weiter vereinfacht worden; Wir haben nun die Möglichkeit, Off-Canvas als ein Overlay zu verwenden und anstatt den Content zu verschieben, das Overlay von oben oder unten über den Content einfahren zu lassen. Sieh Dir dazu die Dokumentation von Off-Canvas an.

Accordions zu Tabs: Responsive Magie

Hast Du jemals mit Tabs gearbeitet, die auf Desktop Bildschirmen zwar übersichtlich aussehen, mobil aber ein ziemliches Durcheinander ergeben? Von jetzt ab nicht mehr! Mit responsive Accordions zu Tabs kannst Du Dein UI je nach Bildschirmbreite umschalten und dadurch Deine Seiten für Benutzer von mobilen Geräten besser nutzbar machen.

Vertical Rhythm – Lass uns tanzen!

Mit Vertical Rhythm für Deine Schriften zu arbeiten, kann das Look and Feel Deiner Seiten extrem verbessern. Mit Foundation war es schon immer einfach, Schriftgrößen von z.B. Überschriften oder Fließtexten zu verändern. Aber mit dem Update auf Foundation 6.3 befindet sich die Konfiguration für Deine Typografie, also z.B. Schriftgrößen, Zeilenabstände usw., an einer einzigen, zentralen Stelle. Besser und einfacher geht es fast nicht.

Überwachen, überwachen ... Mutation Observer

Manchmal können selbst kleine Aufgaben nervig und langwierig werden, aber dann gibt es eben Updates, die uns auch hier entlasten. Das ist z.B. der Fall in Sachen "Mutation Observers", welche im Hintergrund arbeiten und automatisch Veränderungen am DOM registrieren und daraufhin von uns registrierte und definierte Funktionen ausführen. So musst Du Dich bei Änderungen z.B. nicht mehr um das Neuberechnen von Elementen oder das Verarbeiten von Änderungen in Reveal Modals, Sticky Bars, den Equalizern und vieles mehr, kümmern. Genial!

Deep-Linking in Tabs

Deep-Linking ist besonders wichtig, um Deine Benutzer an die richtigen Stellen Deiner Anwendung zu bringen. Beispiele hierfür sind E-Commerce Webseiten und mobile Apps. Mit Foundation 6.3 leitest Du Deine Benutzer über Deep-Linking an die richtige Stelle, selbst wenn Du Tabs verwendest.

Druck-Stylesheets

Noch bis zur letzten Foundation Version musstest Du Dich selbst um das Aufsetzen von Druck-Stylesheets kümmern. Foundation hat bisher immer die mobile Version angezeigt. Immerhin, denn andere Frameworks haben nicht einmal das geleistet und Du musstest Dich zusätzlich auch noch darum kümmern.

Die Tage gehören aber der Vergangenheit an. Dank Foundation 6.3 kannst Du nun exakt festlegen, welcher Breakpoint für Deine Druckansicht verwendet werden soll und Foundation übernimmt den Rest. Klasse!

ZURB: Das Interview

Wir wollten uns ein paar Insider-Informationen darüber einholen, wie das Foundation Framework zu dem geworden ist, das es heute ist. Wir haben ebenfalls nachgefragt, was wir 2017 zu erwarten haben und das ist, was das ZURB Team uns geantwortet hat:

Was waren die größten Herausforderungen, die im Jahr 2016 zu überwinden galt?

Das war auf jeden Fall, wie Browser bestimmte CSS Selektoren und unsere Grids gehandelt haben. Diese funktionieren nun alle perfekt, aber es hat einige Zeit gedauert, bis moderne Browser so weit waren und alle Neuerungen des Webs implementiert hatten.

Unser CSS Grid musste vielseitiger werden, dies ist übrigens immer noch der Fall, und zu einer Kernkomponente avancieren. Wir müssen heraus arbeiten, was dieser Kern unseren Benutzern bietet und wie jeder, der das Framework nutzt, davon profitieren kann.

Welche Ziele sind für 2017 geplant?

Ein wichtiges Ziel an dem wir arbeiten, und das wir ziemlich sicher in 2017 erreicher werden, ist unser JavaScript für das Foundation Framework zu überarbeiten. Wir werden viel mehr der heutigen, modernen Tools nutzen und es zusätzlich für unsere Benutzer einfacher machen, eigene Komponenten zu implementieren und über Plugins zu verwenden.

Ein weiterer wichtiger Punkt ist das Menüsystem. Es ist bereits sehr mächtig, aber wenn Du Menüs abseits der vorgesehenen Anwendungsmöglichkeiten verwenden willst, sind sie doch noch etwas fragil. Wir arbeiten hart daran, sie soweit zu bringen, dass Du sie genau so anpassen und einsetzen kannst, wie das für Dein Projekt nötig ist.

Woruf liegt der Fokus in 2017?

Wir werden definitiv daran arbeiten, das Framework noch einfacher verwendbar und erweiterbar zu machen. Dazu arbeiten wir an Dingen, wie z.B. wiederverwendbaren Blöcken und Plugins, so dass unsere Nutzer Ihren eigenen Code einfach integrieren können. Mehr Pluginfunktionalität bereit zu stellen erlaubt es, vielseitigere Komponenten zu verwenden und wiederverwendbare Blöcke machen das Prototyping noch schneller und sauberer.

Was kommt Neues in 2017?

Wir werden uns mehr auf SVGs konzentrieren, da diese im flexiblen und responsive Webdesign eine immer größere Rolle spielen. Wir werden daran arbeiten, SVGs so verwenden zu können, dass sie für verschiedene Zustände und auch Bildschirmbreiten funktionieren. Ein wichtiger Punkt ist deswegen, SVGs einfacher und komfortabler in Foundation for Sites Projekte integrieren zu können.

Habt Ihr Angst davor, dass Foundation irgendwann zu überladen werden kann?

Darauf muss man immer ein Auge haben. Einerseits helfen uns viele verschiedene Komponenten dabei, Prototypen und echte Entwicklungen schneller umsetzen zu können. Andererseits bedeuten viele Komponenten meist viel ungenutzten Code, der dann zu unnötig großen Projektdateien führt. Wir optimieren vor allem, wie verschiedene Komponenten integriert werden können, so dass sich die Nutzer entscheiden können, welche Komponenten sie für ein bestimmtes Projekt einbinden möchten und welche nicht. Ein wichtiger Punkt, auf den wir immer ein Auge haben, ist, dass der Kern des Foundation Frameworks immer kompakt und frei von unnötigem Code gehalten wird.

Wie geht es mit der Motion UI voran?

Das ist eine gut Frage! Wir arbeiten im Moment hart daran, Motion UI in Sachen Accessibility besser aufzustellen. Wir sehen uns darüber hinaus auch an, wie Entwickler in Zukunft eigene Animation mit der Motion UI zusammen nutzen können.

Eine Sache, die im Moment noch etwas fehlt, ist eine umfassende und hilfreiche Dokumentation. Wir denken, dass dies ein Grund dafür ist, dass unsere Benutzer Motion UI noch nicht so umfangreich nutzen, wie wir uns das wünschen. Motion UI ist jetzt schon wirklich eine leistungsstarke Bibliothek. Wir werden Euch weiterhin in unserem Blog und unseren Newsletter über die Entwicklung von Motion UI auf dem Laufenden halten.

"Motion UI ist auch jetzt schon extrem leistungsstark, aber wir müssen die Dokumentation weiter verbessern, um die Implementierung für unsere Nutzer zu vereinfachen." – Rafi, Foundation Advocate

Ist Flexbox die Zukunft für Foundation?

Wir lieben Flexbox. Es ist wirklich ein großer Schritt vorwärts in Richtung flexible und dynamische Komponenten. So wie wir die Entwicklung von Foundation voran treiben, arbeiten wir auch immer in Richtung Zukunft, in der auch Flexbox eine große Rolle spielen wird. Wir werden immer mehr Komponenten mit dem flex Attribut integrieren und verschiedenste Flexbox-Modi für alle Komponenten verwenden.

Fazit

Ok, hier hast Du es also: Ein geniales Framework, das immer besser und besser wird. Mit Foundation 6.3 und der immer besseren Motion UI, werden wir Entwickler die Möglichkeit haben, Prototypen und echte Anwendungen noch schneller als zuvor bauen zu können. Das passt perfekt zum fünften Geburtstag von Foundation. Alles Gute!

"Ein großes Dankeschön geht an unsere engagierte Community von Entwicklern, die die Entwicklung von Foundation jeden Tag voran treiben. Danke Leute!" – Kevin, Foundation Community Manager