Du kannst noch nicht einmal Stacks von Foundation 1 in einem Foundation 6-Projekt nutzen. Es sind zwei unabhängige Systeme, die zwar beide auf dem Foundation Framework von ZURB beruhen, aber eben inkompatibel sind. Und eigentlich ist alles anders...

So mag der Einstieg insbesondere für jene schwierig sein, die bereits mit den Routinen von Foundation 1 vertraut sind. Leider gibt es noch immer keine wirklich brauchbare Dokumentation und es ist angesichts der völlig neuen Wege, die nun beschritten werden, schier unmöglich, Foundation 6 durch Versuch und Irrtum zu erlernen. Das ging bei der Vorversion und das ging auch bei allen anderen auf Stacks basierenden Lösungen, aber Foundation 6 hat eine andere Herangehensweise, die man sich erst einmal erarbeiten muss. Immerhin ist ein Upgrade zu einem um 20% - 50% reduzierten Preis möglich (je nach Kaufdatum vom Version 1).

Ein wenig Hilfe bieten vielleicht die Videos, die Joe Workman in seinem Youtube-Kanal bereitgestellt hat. Aber Videos sind nicht jedermanns Sache und ehrlich gesagt, ist es eine Zumutung, sich durch mittlerweile immerhin 8 - 9 Stunden englischsprachiges Videomaterial quälen zu müssen - zumal die Englischkenntnisse von vielen kaum ausreichen werden, um Joe's Ausführungen folgen zu können.

Ich hab das aber mal für euch gemacht und vielleicht erleichtert mein Überblick über die Inhalte und meine Kommentare euren Einstieg. 

Ich habe versucht eine Art Inhaltsverzeichnis der Videos zu erstellen und über Links könnt ihr jeweils zu den entsprechenden Themen springen. Ein paar Zusatzinformationen sollen euch helfen, die Videoinhalte zu verstehen (hilfreich mag vielleicht auch die optionale Untertitelfunktion der Youtube-Videos sein, die den Text automatisiert in halbwegs verständliches Deutsch übersetzt).


Foundation Framework und Foundation Stacks

Der Foundation Framework von ZURB ist Grundlage der Foundation 6 Stacks Suite. Es gibt hier zwei wesentliche Bestandteile:

  • Foundation for Sites
  • Foundation for Emails

Wir befassen uns hier aber nicht mit dem Email-Framework, sondern mit dem Erstellen von Webseiten.

Foundation ist einer der am Meisten genutzten Frameworks für die Website-Erstellung und hat kaum browser- oder systemübergreifende Kompatibilitätsprobleme

Ein Blick in die Dokumentation des Foundation Frameworks verschafft Einblicke in das Backend, auf welchem die Foundation Stacks aufgebaut sind und hilft, die Funktionen der Stacks zu verstehen.

Vorteile des Foundation Frameworks: Geschwindigkeit auf zwei Ebenen. Dieser Vorteil wurde in den Stacks der Foundation 6 Suite umgesetzt: Die Seiten laden zum einen schneller und in RapidWeaver ist die Vorschau deutlich schneller

Die Foundation 6 Stacks Suite ist modular, es wird immer nur der Code generiert, der auch wirklich benötigt wird. In der Praxis wird der modulare Aufbau durch das Konzept optional nutzbarer Swatches erreicht.

Swatches verknüpfen über benutzerdefinierte Klassen Formatierungsvorgaben mit dem Inhalt; da Formatierungen nicht immer wieder neu angelegt werden müssen, sondern auf bereits in Swatches definierte Vorgaben zurückgegriffen werden kann, wird der Produktionsprozess einer Webseite verkürzt - das ist der zweite Vorteil der Foundation Stacks Suite


Foundation 6 Theme

Foundation 6 benötigt ein neues Foundation-Theme. 

Theme-Auswahl: Foundation 6 Theme

Dieses Theme wird mit der neuen Stacks Suite mitgeliefert


Site Styles Stack

Der Site Styles Stack ist das Kontrollzentrum der Webseite. Wesentliche Einstellungen werden im Stacks-Konfigurationsbereich auf der rechten Seite des RapidWeaver-Programmfensters vorgenommen und dann in der Edit-Ansicht (im mittleren Programmfensterbereich) des Site Styles Stacks angezeigt.


Konfiguration des Site Style Stacks

Hier ein Überblick über mögliche Einstellungen, die du im Site Styles Stack vornehmen kannst

Schrift-Größen werden nicht mehr wie in Version 1 in rem-, sondern in px-Werten definiert; d.h. es müssen für jede Geräteklasse Schriftgrößen in px-Werten definiert werden. Die px-Werte werden im Backend in rem-Werte konvertiert


Features

Features sind optional zu verwendende Einstellung. Da sie optional sind, wird auch hier der zugehörige Code auch nur dann erzeugt, wenn er auf der Seite auch wirklich gebraucht wird. Dadurch wird der Code deutlich schlanker als in Version 1, wo immer alle möglichen nicht benötigten Code mitgeschleppt werden mussten. Webseiten laden dadurch um den Faktor 10 schneller.

Beispiel Font Awesome

Einbindung von Drittanbieter Stacks

Stacks mit entsprechenden Möglichkeiten sind bisher: Agent, Total CMS, Page Safe, SEO Meta Tags und Sitelok, aber auch Font Pro, Pen, Wallpaper, Badges u.a. To be continued...


Fonts

Joe geht in seinem Video auf die Font-Einstellungen im Site Styles Stack ein (das Vorgehen kennen Nutzer der Font-Pro-Stacks, auch wenn Font Pro deutlich leistungsfähiger ist):


Swatches

Swatches sind u.a Teil des Site Style Stacks, hier werden benutzerdefinierte Vorgaben für diverse ⁄ gemacht. 

Die Vorgaben im jeweiligen Swatch werden mit den Content-Stacks über Klassen verknüpft, dabei können dem Content Stack eine oder mehrere (durch Leerzeichen getrennte) Klassen zugewiesen werden. Der Vorteil: Alle Vorgaben werden zentral innerhalb des Site Style Stacks zusammengefasst.

Beispiel: Background Swatch

Weitere Swatches


Layout Stacks

Column Stacks

Grid Pro Stack

Diese Stacks dienen der Gliederung und Positionierung von Inhalten - wie auch schon in der Foundation 1 Suite. Grid Pro ist dabei eine Art "Columns on Steroids".


Content Stacks

Content Stacks sind die Stellen, an welchen du deine Inhalte einfügst - das ist wie bisher. Die Formatierung wird jetzt aber nicht mehr über die Konfiguration auf der rechten Programmfensterseite vorgenommen (ausgenommen Eineige wenige Funktionen), sondern über den Site Styles Stack und über Verknüpfungen mit den Swatches.

Joe geht hier auf die einzelnen Stacks zum Anlegen von Inhalten ein:

Wichtig zur Texterstellung: Text wird nun ausschließlich in Markdown angelegt

Neben den üblichen Bildformaten werden nun auch .svg-Grafiken und sogar .mp3-Animationen unterstützt.


Templates

Templates sind vorgefertigte und vorkonfigurierte Zusammenstellungen von Stacks, welche direkt übernommen werden können oder als Ausgangspunkt für eigene Projekte genommen werden können

Beispiel: Blob Template


Menüs / Navigation

Menus werden in Foundation 6 als formatierbare Linklisten behandelt, damit sollen sie variabler und in ihrer Layout und ihrer Funktionalität nicht so festgelegt sein. In der Praxis bedeutet das, dass du erst die Seiten erstellst und dann das Menu, in welchem du die Verlinkungen auf die jeweiligen Projekt-Seiten anlegst.

Das Menu System in Foundation 6

Die Unterschiede zu Foundation 1

Im Ggs. zu Foundation 1 sind Menu Stacks für das Erstellen von Navigationen nicht vorkonfiguriert, sondern müssen vom Nutzer angelegt werden (ausgenommen RW Menu). Das macht es flexibel in der Anwendung.

Menu-Items und -Aussehen können individuell über Swatches formatiert werden.


RW Menu

Navigation mit Hilfe der Projekt-Struktur ("RapidWeaver Menu")

Ein mit dem RW Menu Stack erstelltes Menü übernimmt die Seitenstruktur des RapidWeaver-Projekts, das solltest du von anderen Navigations-Stacks kennen. Es sind beim RW Menu Stack verschiedene Konfigurationen möglich: Top Seiten, mit/ohne Unterseiten, verschiede Menü-Typen wählbar und untereinander kombinierbar:

  • Top Navigation
  • Full Navigation
  • Vertical Menu
  • Dropdown Menu
  • Dropdown Vertical
  • Drill Down Menu
  • Accordion Menu


Menu Stack, Dropdown Stack, Drilldown Stack, Accordion Stack

Die Menu-Struktur- und -Inhalte müssen individuell angelegt werden

Die Menu-Items sind beliebig verlinkbar.

Die Menu-Items können in einigen Menu Stacks ergänzt werden durch einen Label oder einen "Dropzone" Stack für beliebige Inhalte.

Die Menu-Items etc. können zwischen den verschiedenen Menu Stacks portiert werden.

Exkurs: Formatierung eines Menu-Items


Breadcrumb Stacks

Die Breadcrumb-Navigation sollte bekannt sein

Beschreibung der Navigation mit Hilfe des Breadcrumb Stacks

Beispiel: Scroll to Nav

Exkurs: Menu Templates


Anchor Stack

Beschreibung des Anchor Stacks und der internen Verlinkung (z.B. aus der Navigation)


Center Logo Stack

Erstellung einer Navigation mit einem Logo in der Mitte

Weitere Themen:


TopBar

TopBar Stack: Ein spezialisierter 2 Columns Stack mit Hamburger-Icon auf kleinen Displays

Der TopBar Stack hat nur noch in engen Grenzen mit dem aus der Foundation 1 Suite bekannten Stack zu tun.


Buttons

Beschreibung des Kozenpts der Buttons in Foundation 6 und die Unterschiede zu Foundation 1


Off Canvas

Das Off Canvas Konzept platziert Content, aber auch Navigationen in einen wegklappbaren Bereich an der Seite einer Webseite.

Beschreibung des Off Canvas Stacks

Die Richtung und das Verhalten, in welcher der Off Canvas Bereich aufklappt, lässt sich individuell festlegen


Formulare

Beschreibung der Form Stacks

Diverse Stacks ähnlich Foundation 1, ergänzt um eine Upload-Möglichkeit oder um einen Processing Stack. Darüber hinaus gibt es einige Form Extra Stacks mit Sonderfunktionen.

Die mit Foundation 6 generierten Formulare sind deutlich barrierefreier als in Foundation 1 und damit z.B. auch besser von Screen-Readern zu nutzen.

Form Templates als vorangelegte Formular-Zusammenstellungen


Ich werde in ein oder zwei Folgebeiträgen die Joe's andere Video-Tutorials zu Foundation 6 in vergleichbarer Weise etwas handhabbarer machen - hoffe ich zumindest. Wenn du Fragen und Vorschläge hast, darfst du dich gerne über das Kontaktformular melden.

------

Bildquelle: Screenshot Foundation Demo-Projekt