Foundation 6 ist komplett anders und es braucht ohne Zweifel eine hohe Einarbeitungskurve und am Anfang vielleicht sogar Gutre Nerven. Nähern wir uns dem Ganzen einmal anhand des Video-Tutorials"Foundation 6 Stacks for RapidWeaver for Beginners", das Joe Workman vor Kurzem online gestellt hat und das einen Überblick für Anfänger bieten soll (du kannst wie bisher auf die blau hinterlegten Links klicken, um zum jeweiligen Abschnitt im Video zu gelangen.

Die Vorversion Foundation 1 ist übrigens schon fast 7 Jahre alt. Kinder, wie die Zeit vergeht...


Ein paar Worte vorab:

Vorab möchte ich ein paar Statements wiederholen, die ich in einem vergangenen Beitrag bereits machte:


Was Foundation 6 nicht ist:

Foundation 6 ist kein Webbaukasten, mit dem du dir ohne grundlegende Kenntnisse über Webdesign einfach mal eine Seite zusammenklicken kannst. 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 Foundation 6 ist ein Webbaukasten, aber das Vorgehen weicht deutlich von dem ab, was du bisher über die Arbeit mit Stacks oder über Foundation 1 wusstest. Du musst in Foundation 6 zwar auch keinen Code schreiben, aber du musst z.B. verstehen was Classes sind und wie die Formatierungsvorgaben innerhalb des Site Styles Stack mit den Content Stacks verknüpft werden. Und ausschöpfen wirst du die Formatierungsmöglichkeiten letztlich auch nur dann, wenn du mit CSS umgehen kannst bzw. Ein gewisses Grundverständnis mitbringst - Webbaukasten hin oder her.

Als blutiger Anfänger, der vielleicht mal eine Webseite für sein Kleinunternehmen zusammenstellen will, solltest du dich besser nach themenbasiertenLösungen umschauen. Wennn es denn unbedingt eine frei gestaltbare Framework-Lösungen sein muss, solltest du dich als Anfänger besser nach Alternativen umschauen, beispielsweise Foundry - hier kannst du eine funktionierende Seite innerhalb weniger Stunden "zusammenklicken". Als Pro-User wirst du allerdings schnell merken, dass Foundation 6 der bessere und differenzierte Framework ist. Für Pro-User ist Foundation 6 also ganz sicher das geeignetere Werkzeug.

Schauen wir uns jetzt das Video-Tutorial Foundation 6 Stacks for RapidWeaver for Beginners an und erarbeiten wir uns die einzelnen Abschnitte:


Was ist RapidWeaver?

RapidWeaver ist ein Webbaukasten, mit dem du eine Webseite mit Hilfe von Themes, welche v.a. Vorgaben für das Layout einer Seite machen, aufbauen kannst.

Die andere Komponente sind Plugins, welche Funktionen bereitstellen. Das wichtigste Plugin ist das Stacks-Plugin. Es hat die Arbeit mit RapidWeaver revolutioniert. Das Stacks-Plugin beinhaltet einzelne Stacks: Einige mitgeliefert, die Mehrzahl kommt von Drittanbietern und dienen der Lösung unterschiedlichster Anforderungen. Stacks zieht du einfach in die Entwicklungsoberfläche, arrangierst sie und konfigurierst ihre Funktionen.

Unabhängig von den in Stacks eingefügten Inhalten kannst du einer bestehenden Webseite das Theme wechseln und der Seite so ein komplett neues Layout zuweisen.

Zusammenfassend solltest du RapidWeaver weniger als einen Webbaukasten, sondern als eine Webentwicklungsplattform begreifen. Der Begriff Webbaukasten ist oft negativ besetzt und eher auf jene oft webbasierten Tools anwendbar, mit denen eine Seite mal so eben fast nebenbei zusammengeklickt werden kann. Das hat RapidWeaver schon längst hinter sich gelassen.

Für die grundsätzliche Arbeit habe ich eine Einführung geschrieben, die als Ebook vorliegt.

Was ist RapidWeaver?


Was ist Foundation?

Der große Nachteil der Themes ist ihre Unveränderbarkeit und teilweise auch ihre Komplexität, sowohl im Backend als auch in der Konfiguration. Das trifft besonders auf die sehr anspruchsvollen Themes zu und leider kocht hier jeder Entwickler sein eigenes Süppchen. Ein wirklich individueller Look, z.B. entsprechend eines Corporate Designs ist damit kaum umzusetzen. Auch mit viel benutzerdefiniertem Code ist da kaum etwas zu machen und die Gefahr, sich etwas zu zerschiessen Ost groß.

Foundation ist als Version 1 seit einigen Jahren am Markt und versuchte, diese Begrenzung zu umgehen. Es gibt einige konkurrierende Systeme, das erste war das heute fast verschwundene FreeStacks von BlueBall Design.

Foundation 1 und auch das neue 6 basieren auf Stacks und baut auf einem gleichnamigen Backend, dem Foundation Framework von ZURB, auf. Das von RapidWeaver benötigte Foundation Theme dient lediglich zur Verknüpfung mit der RapidWeaver Software, ansonsten funktioniert die Zusammenarbeit der Foundation 6 Stacks Suite mit RapidWeaver nicht. Foundation ermöglicht dir komplett themenabhängige und freie Layouts deiner Webseite und liefert rund 60 Stacks für spezifische Lösungen mit. Drittanbieter-Stacks lassen sich unkompliziert einbinden.

Was ist Foundation?


Foundation 6 als Nachfolger von Version.

Foundation 6 reformiert Version 1 von Grund auf.

Die Vorgehensweise erscheint erst einmal ähnlich, denn du stellst dir mit Hilfe von Foundation Content Stacks eine Seite zusammen und konfigurierst sie über einen Site Styles Stack. Soweit ist das Vorgehen in Version 6 identisch.

Allerdings ist der Unterbau von Foundation 6 neu geschrieben worden und auch die Art und Weise der Konfiguration bzw. Formatierung von Inhalten hat sich komplett geändert, so dass du eine mit Version 1 gebaute Seite nicht einfach nach Version konvertieren kannst. Du musst sie von Grund auf neu bauen und das ist auch ein erheblicher Wermutstropfen.

Foundation 6 Stacks Suite


Die Grundlage von Foundation.

Foundation ist ein Open Source Framework für Webseiten, auf dem zahlreiche Webseiten basieren. ZURB (siehe oben) stellt als kommerzieller Anbieter diesen Framework in aufbereiteter Form zur Verfügung. Der Framework ist sehr performant und ressourcenschonend, das wirkt sich auf die Ladegeschwindigkeit einer Webseite aus.

Der Framework besteht aus unterschiedlichen vorgefertigten Code-Snippets für verschiedene Bestandteile einer Webseite, z.B. für Buttons, für Menüs etc. Alle diese Elemente sind auf der ZURB-Seite dokumentiert und können als Code heruntergeladen werden.

Du die Elemente des Foundation Frameworks nutzen, musst dann aber das eigentliche Gehäuse der Webseite selbst coden. Diese Notwendigkeit nimmt dir die Foundation 6 Stacks Suite in Zusammenarbeit mit RapidWeaver ab und packt die einzelnen Elemente des Frameworks in Stacks.

Die Foundation 6 Suite basiert auf diesem Foundation Framework und transformiert ihn in eine Zusammenstellung verschiedener Stacks. Stacks definieren als Content Stacks die Inhalte der Webseite, formatiert werden die Inhalte über einen zentralen Site Styles Stack.

Organisiert werden die Content Stacks innerhalb eines 12-spaltigen Rasters. Dieses Raster wird in der Arbeitsoberfläche von RapidWeaver über Columns Stacks festgelegt. Die Columns Stacks sind auch verantwortlich für die geräteübergreifende Darstellung von Inhalten, z.B. ob sich Inhalte, die auf einem Desktop-Monitor nebeneinander liegen auf, z.B. auf dem iPhone übereinander anordnen sollen. In die Columns Stack können Content Stacks eingefügt werden.

Die Grundlage von Foundation


Templates für die Foundation 6 Stacks Suite.

Eine Erleichterung im Umgang mit der Foundation 6 Stacks Suite bieten Templates. Diese findest du in der RapidWeaver Arbeitsoberfläche innerhalb der Stacks Bibliothek. Diese kostenlosen Templates sind ein guter Ausgangspunkt für eigene Projekte, sie sollen auch noch weiter ausgebaut werden und werden teilweise bei der Installation des Foundation 6 Stacks direkt mitinstalliert. Weitere Templates findest du auf der Foundation Stacks-Seite unter Downloads. Hier findest du auch ein Demo-Projekt Foundation6Upgrade.

Die Templates brauchst du nur in die Entwicklungsoberfläche ziehen. Du kannst sie jederzeit individualisieren, entweder über die Möglichkeiten des Site Styles Stacks oder über die Konfigurationsbereich des jeweiligen Stacks. Um sie bearbeitbar zu machen musst du die Templates allerdings erst entpacken. Dabei kannst du sie in ein Partial oder in ein External konvertieren.

Die Templates funktionieren ausschließlich innerhalb einer mit Foundation 6 Stacks gebauten Seite. Das Template-Angebot wird noch ausgebaut werden und es wird, so eine Ankündigung von Joe Workman, auch eine eigene Plattform für Templates geben.

Templates für Foundation 6


Site Styles Stack und Swatches.

Der Site Styles Stack ist die zentrale Schaltstelle einer mit Foundation 6 erstellten RapidWeaver-Webseite und muss als Stack auf der Bibliothek in die Entwicklungsoberfläche gezogen werden. Dieser Stack ist der erste Stack, den du deinem Projekt und auch jeder einzelne Seite hinzufügen musst.

Grundsätzlich kannst du den Site Styles Stack an einer beliebigen Stelle deiner Seite einfügen, es macht aber Sinn, ihn an der obersten Stelle einzufügen.

Wenn du den Stack als Partial anlegst, kannst du identische Konfigurationen auf allen Seiten verwenden. Die Erstellung von Partials ist RapidWeaver-Grundwissen, auf das ich hier nicht näher eingehe.

Der Site Styles Stack beinhaltet alle Grundkonfigurationen für die Content Stacks:

  • Seitenbreite
  • Farbeinstellungen für Content Stacks
  • Farbeinstellungen für Schriften
  • Schriftauswahl, -größen und sonstige Einstellungen; insbesondere die Größeneinstellungen müssen gerätespezifisch vorgenommen werden
  • Listenstile
  • Swatches

Swatches ist etwas neues in Foundation 6. Hier werden spezifische Formatierungseinstellungen für einzelne Stacks oder Contentbereiche vorgenommen. Das können z.B. Farben sein, Randabstände etc. Die Einstellungen der Swatches werden mit den Content Stacks über Classes verknüpft.

Die Swatches bieten insofern einen großen Vorteil, da du nun im Gegensatz zu Foundation 1 alle Formatierungen und Konfigurationen an einer zentralen Stelle vornehmen kannst. Außerdem wird ins Backend deiner Webseite immer nur der Quellcode geschrieben, der auch wirklich gebraucht wird. Das wirkt sich positiv auf die Ladegeschwindigkeit deiner Webseite aus. Der Code, der durch Foundation 6 erzeugt wird, hat ohnehin in etwa nur ein Drittel des Umfangs als der Code, den Version 1 erzeugt (insbesondere wird die RapidWeaver-eigene grassierende "Divitis" reduziert - Pro User wissen, was ich damit meine).

Die jeweiligen Einstellungen werden rechts im Konfigurationsbereich des Site Styles Stacks und der Swatches vorgenommen. Die Einstellungsmöglichkeiten unterscheiden sich je nach Aufgabe des jeweiligen Swatches.

Es gibt Swatches für unterschiedlichste Aufgaben, diese sind über ein Dropdown-Menü auswählbar. Beispielsweise kannst du für bestimmte Content Stacks ein Hintergrundbild festlegen, welches dann über den Background-Swatch eingefügt wird.

Site Styles und Swatches


Container Stack vs. Columns Stack.

Der Container Stack ist eine basaler Inhaltsbereich, in den du Content Stacks ziehen kannst. Über den Container Stack legst du u.a. fest, in welcher Breite ein Inhalt angezeigt werden soll:

Container Setup > Sizing 

Möglich sind:

  • Automatisch
  • Seitenbreit (mit und ohne Spaltenabstände)
  • Volle Breite (mit und ohne Spaltenabstände)

Es macht Sinn, unterschiedliche und jeweils gleich formatierte Inhaltsbereiche in unterschiedliche Container zusammenzufassen, z.B. den Footer oder den Header in einen eigenen Container etc.

Unterschiedliche Container machen auch dann Sinn, wenn du bestimmte Inhaltsbereiche über einen Anchor-Link erreichen willst (dazu findest du unter HTML die Möglichkeit zur Vergabe einer Anchor ID), oder wenn du bestimmte Bereiche gerätenklasseabhägig anzeigen oder ausblenden willst.

Die Columns Stacks hingegen legen fest, wie sich Inhalte innerhalb des 12-spaltigen Rasters verhalten. Zur Erläuterung: Inhalte müssen immer so angelegt werden, dass sie in das zwölfspaltige Raster des Foundation Frameworks passen: Wenn du eine Spalte auf 100% setzt, wird sie die gesamte Seitenbreite nutzen. Nutzt du einen 2 Columns Stack und setzt beide Spalten auf 100%, werden die Inhalte übereinander und nicht nebeneinander angeordnet, da es über 100% Spaltenbreite hinaus keinen Raum mehr gibt. Setzt du eine Spalte auf 33%, bleibt in der horizontalen Anordnung Platz für weitere Spalten. Etc...

Es gibt:

  • 1 Columns Stacks
  • 2 Columns Stacks
  • 3 Columns Stacks
  • 4 Columns Stacks
  • Ergänzend gibt es noch einen Columns Pro Stack und einen Block Grid Stack.

Rechts in der Stacks-Konfiguration kannst du über Sizing die Größen bzw. Breiten für die jeweiligen Anzeigebreite (bzw. Geräteklassen) festlegen. Die Größen können automatisch oder ein- bis zwölfspaltig über Prozentwerte festgelegt werden (maximal zwölfspaltig, weil der Foundation Framework mit zwölf Spalten arbeitet):

  • Shrink to Content bewirkt, dass die Spaltenbreite von den Abmessungen des eingefügten Contents abhängig ist.
  • Auto nutzt die maximal mögliche Spaltenbreite in Abhängigkeit von der Breite der jeweils anderen Spalte
  • Inherit (= "geerbt") generiert eine Spaltenbreite, die von der Breite der anderen Spalten abhängt

Die Einstellungen für die Spaltenbreite müssen für jeweils drei Anzeigebreiten vorgenommen werden:

  • Small
  • Medium
  • Large

Container Stack vs. Columns Stack


Fazit

Wenn du die Vorgehensweise erst einmal begriffen hast, erkennst du auch die Vorteile von Foundation 6. Wichtig ist, das Chaos der Swatches handhabbar zu halten und den Überblick über die Classes nicht zu verlieren.

Bildquelle: Pexels