Nachdem ich in den letzten Beiträgen einige recht umfangreiche Video-Tutorials kommentiert und aufgearbeitet habe, folgt nun die Aufarbeitung der neuen Videos - in der Hoffnung, das Leben mit Foundation 6 für viele, die sprachlich vielleicht nicht so fit sind, etwas handhabbarer zu machen.

In einem ersten Teil stelle ich den Umgang mit den Stacks vor, die für die Spaltendarstellung der Webseite verantwortlich sind. In einem zweiten Teil werden wird uns mit dem Site Styles Stack und den Swatches befassen.

Eine Übersicht der Videos findest du hier:

Foundation 6 Tutorials

Aber auch ein Klick auf die nachfolgenden fettgeschriebenen Untertitel sollte dich jeweils zum entsprechenden Video (direkt in der YouTube-Plattform) führen:


Columns Stack

Using Columns in Foundation 6 Stacks:

Webseiten sind in Spalten aufgebaut. Wie schon in Foundation 1 gibt es für diese Spalten Columns-Stacks - allerdings reduziert auf je einen

  • 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.

Joe Workman stellt im Video den Umgang mit dem 2 Columns Stack vor, der beispielhaft auch für die anderen Columns Stacks steht: Rechts in der Stacks-Konfiguration kannst du die Größen bzw. Breiten für die jeweiligen Anzeigebreite (bzw. Geräteklasse) 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).

Inhalte müssen immer so angelegt werden, dass sie in das zwölfspaltige Raster des Foundation Frameworks passen: Wenn ich eine Spalte auf 100% setze, wird sie die gesamte Seitenbreite nutzen. Nutzt du einen 2 Columns Stack und setze 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...

  • 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 Spalten
  • 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

Für die Spalten können Spalten-oder Randabstände (= "Gutter") festgelegt werden. Dies machst du über die Margin- und Padding-Einstellungen im Bereich Spacing - und zwar getrennt für die vertikalen und horizontalen Randabstände. Diese Randabstände kannst du auch über Swatches definieren.

Über Alignment (= Ausrichtung) kann du in Abhängigkeit vom Raster und dessen Aufteilung (siehe oben) die horizontale Spaltenposition ändern. Du kannst sie in der Horizontalen beispielsweise rechts/links oder mittig etc. anordnen. Entsprechend gibt es eine Einstellung für die vertikale Ausrichtung.

Über Content Alignment legt du die Ausrichtung der in die Spalten eingefügten Inhalte fest. Auch diese kannst sie rechts/links oder mittig etc. anordnen. Diese Einstellung ist nur für die horizontale Ausrichtung möglich.

Über Visibilty legst du die geräteklassenspezifische Anzeige der Columns fest - wenn du Foundation 1 genutzt hattest: Das entspricht weitgehend den dortigen Einstellungen unter Responsive, nur ist die Einstellung in Version 6 deutlich differenzierter.


Container Stack

Container Stack for Foundation 6 Stacks:

Der Container Stack definiert Bereiche, in welche andere Stacks eingefügt werden können.

  • Möglich sind über den Einstellungsbereich auf der rechten Seite HTML5-Vorgaben (HTML Tags) für bestimmte Abschnitte in der Webseite, diese Angaben haben u.a. suchmaschinentechnische Bedeutung.
  • Möglich sind aber auch spezifische Einstellungen für die Anzeigebreite (Sizing) und du kannst einstellen für das Attribut Overflow.
  • Über Content Alignment kannst du die Ausrichtung der Inhalte verändern
  • Darüber hinaus kannst du Vorgaben machen für die gerätespezifische Anzeige spezifischer Inhalte (Visibility).
  • Und du kannst hier die Ziele von Anchor-Links definieren, sodass bestimmte Container durch Anklicken eines Anchor-Links direkt erreicht werden können

Die Anzeigebreite von Webseiten wird ansonsten im Site Styles Stack unter Site Sizing definiert. Mit diesem Stack befassen wir uns in einem weiteren Blogbeitrag.


1 Columns vs Container Stack

1 Column vs Container in Foundation 6 Stacks:

Beide Stacks machen auf den ersten Blick das gleiche und können andere Stacks als Inhalt aufnehmen, aber nur im 1 Columns Stack gibt es Möglichkeiten einer differenzierten, d.h. vom Breakpoint abhängigen Konfiguration der horizontalen Ausgabegröße. Du findest diese Einstellung rechts unter Sizing. Du kannst hier beispielsweise festlegen, dass die Breite des Links anzuzeigenden Inhaltes beispielsweise 50% der Seitenbreite betragen soll. Der Workaround mit einem 2 Columns Stack aus Foundation 1, bei dem eine Spalte leer bleibt, ist somit nicht nötig.

Besonders einfach ist es, über die Sizing-Einstellungen des 1 Columns Stacks, einen Inhaltsbereich mit einer individuellen Anzeigebreite zu konfigurieren.

Die Ausrichtung des Inhaltes wird im 1 Columns Stack über die Einstellung Content Alignment im Konfigurationsbereich rechts festgelegt.


Columns Pro Stack

Columns Pro Stack Foundation 6 Stacks:

Columns Pro ist ein Stack mit erweiterten Möglichkeiten, z.B. für Padding und Alignment. Dieser Stack ist sicher einer der wenigen Foundation 6 Stacks, die man nicht weiter erklären muss.

Du kannst einen oder mehrere Columns Stacks in den Columns Pro Stack ziehen, auf die sich diese Einstellungen auswirken. Einige Einstellungen der eingefügten Columns Stacks überschreiben jedoch die Vorgaben des Columns Pro Stacks.


Responsives Verhalten von Spalten

Column Ordering and Swapping Columns in Foundation 6 Stacks:

Ein wichtiger Punkt beim Erstellen responsiver Webseiten ist das vom Breakpoint abhängende geräteübergreifende Verhalten von Inhaltsbereichen: Wenn du zwei auf dem Desktop-Monitor nebeneinander liegende Inhaltsbereiche hast, , sollen die sich auf kleineren Displays ab einem bestimmten Breakpoint übereinanderlegen.

Um die Umsetzung bei einem Foundation 6-Projekt zu erleichtern, gibt es ein Columns Swap Template. Das Template beinhaltet einen Columns Pro Stack, in welchem Bild- und Textinhalte vorangelegt sind, diese Inhalte wiederum liegen in einem Columns Stack. Wesentlich für die gerätespezifische Ausgabe der Webseite ist hier die Einstellung "Ordering" im Columns Stack: Hier legst du fest, wie sich die Inhalte auf den jeweiligen Geräten bzw. Browserfenstergößen anordnen sollen.


Vertikale Ausrichtung

Column Vertical Alignment in Foundation 6 Stacks:

Die vertikale Ausrichtung kann im Columns Pro Stack über die Einstellungen "Alignment" > "Vertical Align" eingestellt. Hier gibt es mehrere Auswahlmöglichkeiten, voreingestellt ist "Stretch" - d.h. die Höhe der Inhaltsbereiche geht über gesamte Höhe des jeweiligen vom Columns Pro Stack, diese Höhe wird bestimmt durch den Inhaltsbereich mit der größten vertikalen Ausdehnung. Überschrieben werden können diese Einstellungen durch die Vorgaben für die eingefügten Columns Stacks.


Webseitenraster

Using Block Grid in Foundation 6 Stacks:

Der Block Grid Stack ist hilfreich zum Erstellen rasterartig aufgebauter Webseiten. Dieser Stack funktioniert ein wenig anders als die Columns Stacks:

  • Über die Sizing-Einstellungen kannst du geräteabhängig die Zahl der Spalten festlegen
  • Unter Alignment machst du Vorgaben für die horizontale und vertikale Ausrichtung der eingefügten Inhaltsbereiche

Einzelne Zellen (Block Cell) kannst du über das Plus-Zeichen hinzufügen. Für diese Zellen kannst du geräteabhängig bzw. Abhängig vom Breakpoint festlegen, ob sie im Browser angezeigt werden sollen oder nicht.

-----

Bildquelle: Pexels