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
- Layout Settings
- Background Settings
- Site Sizing
- Site Colors
- Component Colors
- Text Colors
- Text Sizing
- List Styles
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.
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
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.
- Text Color,
- Border,
- Font Color,
- Height,
- Margin,
- Opacity,
- Overlay,
- Padding,
- Rounding,
- Shadow,
- Width,
- Custom CSS,
- 3rd Party Stacks
- Wallpaper Swatch
- Text Color Swatch
- Overlay Swatch
- Height Swatch
- Exkurs Font Pro vs. Font Swatch
Layout Stacks
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:
- Text Stack
- Header Stack
- Table Stack
- Picture Stack
- Navigation/Menus
- Blockquote Stack
- Details Stack
- Accordion Stack
- Code Stack
- Definition List Stack
- Label Stack
- Buttons Stacks
- Container Stacks
- Caption Stack
- Forms Stacks
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
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
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:
- Exkurs: Swatches in Templates: Möglichkeit, sie in den Site Styles Stack zu ziehen
- Exkurs: Formatierung von Navigations-Elementen
- Menu Dropzone im Center Logo Stack: Beispiel Einfügen eines Bildes im SVG-Format
- Geräteklassenübergreifende Darstellung einer mit Center Logo Stack erstellten Navigation mit Hilfe des Visibility Stacks
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
- Button Stack: Verwendung als einfacher Button, für für Lightbox, Dropdown oder Off Canvas
- Open Lightbox Button: Verwendung z.B. als Button zum Öffnen einer Lightbox
- Close Button: Verwendung z.B. als optionaler Button zum Schließen einer Lightbox
- Hamburger Button: Verwendung z.B. als platzsparender Menübutton - vielfältig zu verwenden, z.B. zum Öffnen einer Navigation in einer Lightbox
- Weitere Buttons: Submit Button, Reset Button, Link Button
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
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