Templates sind vorgefertigte Zusammenstellungen von Stacks, die für bestimmte Zwecke genutzt werden können. So kann man mit einem entsprechenden Template in aller Schnelle ein Kontaktformular in eine Webseite einfügen - man muss nur ein paar marginale Einstellungen vornehmen und schon funktioniert es.
Templates bieten gute Möglichkeiten, sich in Foundation 6 einzuarbeiten und den Umgang mit dieser Suite zu erlernen. In die Foundation 6-Suite sind einige Templates integriert, die du als Ausgangspunkt für eigene Projekte nehmen kannst.
Joe Workman hat einige Templates in einem seiner aktuellen Videos zu Foundation 6 vorgestellt. Das Video habe ich hier einmal "auseinandergenommen". Du musst nur auf die einzelnen Punkte klicken um genau zum jeweiligen Abschnitt im Video zu springen
Vorstellung eines Split Menu Templates, eines Open LightBox Templates und ein Social Buttons Templates.
Anhand des Social Buttons Template erläutert Joe kurz, wie er die Button-Grafiken als SVG eingefügt hat und dann die Formatierung der Buttons mittels benutzerdefinierter Klassen
Ein anderes Template für einen ähnlichen Zwecks ist das Social Media Button Group Template. Grundsätzlich erfolgt die Formatierung wie auch im anderen Social Media Template.
Vorstellung eines Multi Step Templates, welches auf Tabs Stacks und Anchor Stacks aufgebaut ist und welches z.B. für Tutorials oder mehrstufige Formulare verwendet werden könnte. Über Buttons, die mit Tab Stacks erstellt wurden, kann zwischen verschiedenen Inhalten gewechselt werden und eine mit dem Progress Bar Stack erstellter Fortschrittsbalken zeigt dem Seitenbesucher den Bearbeitungsstand an. Anhand der Tabs Buttons zeigt Joe wie man mit einer benutzerdefinierten Klasse Inhalte verstecken kann
Vorstellung eines Multi Step Form Templates, welches in vergleichbarer Weise aufgebaut ist und für mehrstufige Formulare verwendet werden könnte. Joe erläutert in Zuge dessen, welche Buttons und Funktionen für ein solches Template genutzt werden könnten
Vorstellung eines Footer Templates, das den Grid Pro Stack für die Aufteilung der Elemente und einen Menu Stack für die Erstellung der Links nutzt.
Vorstellung eines Off Canvas Templates, das für weitere Zecke, nicht nur für Menüs genutzt werden kann. Das Template enthält einen Top Bar Stack. Das Canvas Menu kann nicht nur von der Seite, sondern auch von rechts, oben oder unten geöffnet werden, diese Funktion lässt sich über Button Stacks steuern, die Verknüpfung erfolgt über IDs.
Vorstellung eines Header Segments Templates. Dieses ermöglicht unterschiedliche Gestaltungen, z.B. unterschiedliche Schriften oder Schriftformatierungen in den verschiedenen Abschnitten eines Headers. Die Verknüpfung mit den Vorgaben in den Swatches wird hier über HTML-Code erreicht.
Templates erstellen: Joe zeigt an zwei Beispielen, wie man Templates erstellt: Ein Template, das auf Tabs und eines welches auf Accordion aufbaut.
FAQ
Die Template-Bibliothek wird regelmäßig aktualisiert und erweitert werden. Es wird in 2020 eine Möglichkeit geben, wo Foundation-6-Nutzer ihre eigenen Templates öffentlich zur Verfügung stellen können. Vorerst können nutzergenerierte Templates auf der weaver.space-Plattform veröffentlicht werden oder direkt an Joe geschickt werden
Die Navigations Stacks in Foundation 6 sind grundsätzlich alle responsiv. Beispielsweise verändert sich der TopBar Stack von einem Dropdown-Menu auf großen Bildschirmen in ein DrillDown-Menü auf Mobilgeräten
Es funktionieren grundsätzlich alle Drittanbieter-Stacks mit der Foundation 6 Stacks Suite. Ausnahme: Die Stacks der Foundation 1 Suite sind nicht kompatibel - und natürlich funktionieren die Stacks anderer Framework-Lösungen nicht in Foundation 6, aber das war auch schon vorher so
Font Awesome wird von Foundation unterstützt. Einige Bearbeitungsmöglichkeiten sind noch nicht vollständig umgesetzt.
SEO Helper ist nicht mehr Teil der von Foundation, sondern ein eigenes Produkt.Für Nutzer von Foundation 1 gibt es einen reduzierten Upgrade-Preis für die eigenständigen SEO Helper Stacks. Page Speed ist nicht mehr Teil der SEO Stacks, dafür soll es demnächst eine eigenständige Page Speed Stacks Suite geben
Vorläufiges Fazit:
Es ist nicht ganz einfach, Foundation 6 nach dem ersten Schreck mit großer Begeisterung zu begegnen. Es ist einfach alles anders. Ich bin sicher, du dich eingearbeitet hast, wird es aber einfacher als vorher werden und die Webseiten werden auch vom optimierten Seiten-Unterbau profitieren. Das werden alle jene bemerken, die Erfahrungen mit Foundation 1 haben und nun von Foundation 1 auf Foundation 6 umsteigen.
Was Foundation 6 nicht ist:
Ein Webbaukasten, mit dem man sich ohne grundlegende Kenntnisse über Webdesign einfach mal eine Seite zusammenklicken kann. Das war schon mit Foundation 1 ein zweifelhaftes Unterfangen, aber immerhin war Foundation 1 im Handling nicht allzu weit entfernt von den anderen Stacks-Projekten.
Bei Foundation 6 ist alles anders.
Ja, auch das ist ein Webbaukasten, aber das Vorgehen weicht deutlich von dem ab, was du bisher über die Arbeit mit Stacks wusstest. Du musst in Foundation 6 zwar nicht Code schreiben, aber du musst z.B. verstehen was Classes sind. Und ausschöpfen wirst du die Formatierungsmöglichkeiten letztlich auch nur dann, wenn du mit CSS umgehen kannst - trotz Webbaukasten.
Anfänger sollten sich nach anderen Framework-Lösungen umschauen, wenn sie eine Seite vorlagenunabhängig aufbauen wollen. Pro-User werden schnell merken, dass Foundation 6 das bessere Foundation ist.
Für Pro-User ist Foundation 6 ganz sicher das richtige Werkzeug.
