An Hand einiger Beispiele zeigt Joe Workman, wie den Umgang mit einigen Swatches und die Konfiguration der diversen Content Bereiche funktioniert. Zu verstehen, wie Swatches und Content Stacks zusammenarbeiten, ist elementar um Foundation 6 zu verstehen und damit zu arbeiten ohne ausschließlich aus vorgefertigte Templates zurückgreifen zu müssen.

Ich habe dem Beitrag absichtlich nicht den Titel "Was ist neu in Foundation 6.1." gegeben, denn schwerpunktmäßig geht es ja genau um dieses Zusammenspiel von Swatches und Content Stacks. Ein Klick auf den fettgeschriebenen Titel sollte dich jeweils zum entsprechenden Abschnitt im Video führen:


Hover Effect (Swatches):

Configuration eines Hover-Effekt mit Hilfe von Background-Swatches. In den Settings wird eine eindeutige Klasse zugewiesen und ein Status zugewiesen. Die Klasse (Class) verknüpft den Swatch mit einem Content Stack und der Status (On State) legt fest, was gemacht werden soll (Hover).

Für einen einfachen Hovereffekt werden zwei Swatches benötigt. Einer legt den "Ruhezustand" fest, der andere legt den Effekt fest. Den Swatches wird jeweils eine eigenständige Klasse zugewiesen. Die Klasse wird dann im jeweiligen Content Stack eingearbeitet und verknüpft so den Content Stack mit den Vorgaben der zugehörigen Swatches.


Hover-Effekt mit Transition Swatch:

Um den Wechsel des Hovereffektes sanfter zu gestalten kannst du einen Transition Swatch nutzen. Dieser wird über oben angelegte Klasse mit den Background Swatches und den Content Stacks verknüpft. Die Art des Wechsel im kannst du in den Einstellungen des Transition (General Setup) Swatches verändern.


‌On State Hover - Button Corners:

Mit Hilfe eines Rounding Swatches können die Ecken von Content Stacks abgerundet werden. Auch hier erfolgt die Verknüpfung von im Swatch gemacht Vorgaben mit den Content Stacks über eindeutige Klassen. Die Form des Buttons kann über die Einstellungen des Rounding Swatches definiert werden (Round Corners). Bei einen zweiten Rounding Swatch kann dem Button ein Hovereffekt zugewiesen werden, hierzu muss der Status unter On State auf Hover gesetzt werden.


‌On State Hover - States:

Die Swatch Einstellung unter On State entspricht den Pseudoklassen in CSS. Über Pseudoklassen wird ein bestimmter Zustand abgefragt bzw. vorgegeben. Du kannst darüber also das Verhalten eines bestimmten Elements steuern.


Swatch Breakpoints:

Mit Einstellungsmöglichkeiten zum Breakpoint (in den Settings des jeweiligen Stacks lassen sich Vorgaben so anlegen, dass sie sich nur bei bestimmten Seitenbreiten auswirken. So kannst du beispielsweise festlegen, dass abgerundete Ecken nur auf Desktop-Monitoren, nicht aber auf dem iPad angezeigt werden.


Site Styles - Component Colors:

Die Anzeige des Component Color Swatch wurde in Foundation 6.1 verbessert.


Site Styles - Pen:

Die Funktionalität des Pen Stacks zum Annotieren bestimmter Swatches wurde mit Foundation 6.1 integriert. In den Pen Stack lassen sich ein oder mehrere Swatches hineinziehen, dadurch kann eine sehr übersichtliche Anordnung der Swatches erreicht werden.


Site Styles - Pen:

Der Grid Pro Stack wurde in Foundation 6.1 in Columns Pro umbenannt.


Site Styles - Pen:

Der Grid Pro Stack wurde in Foundation 6.1 in Columns Pro umbenannt. In diesem Stack lassen sich nun senkrechte Divider nutzen. Die Divider lassen sich geräteklassenabhängig anzeigen über Custom Classes z.B. farbig gestalten.


New Launcher Stack:

Es gibt einen neuen Launcher Stack. Damit lassen sich Inhalte z.B. in einer Lightbox, in einer Dropbox oder als Canvas anzeigen.


Vertical Grid:

Mit Vertical Grid sind, vergleichbar der horizontalen Gliederung durch Columns, vertikale Grids möglich. In diesem Stack können die Höhen genau festgelegt werden, entweder durch einen Swatch oder durch eine im Stack integrierte Einstellung.


Page Safe:

Page Safe ist in Site Styles integriert und hat mit Version 6.1. ein Update erfahren.


Pre Loader:

Pre Loader ist in Site Styles integriert. Es sind unterschiedliche Animationen möglich, die angezeigt werden, während die (veröffentlichte) Seite lädt.


‌Lists Position and Indent:

Über Einstellungen im Site Styles Stack ist es möglich, die Position von Listenpunkten zu verändern.


Forms - ‌HoneyPot 3:

HoneyPot ist ein Sicherheitsfeature für Formulare, die verhindern soll, dass Spambots automatisiert Formulare absenden. Den Spammer wird ein bestimmtes Formularfeld vorgegaukelt und lässt den Eintrag ins Leere laufen.


‌Forms reCaptcha:

Eine andere Sicherheitsmaßnahme gegenüber Spambots ist reCaptcha. reCaptcha ist allerdings an einen Google Dienst gebunden - du musst die entsprechenden Keys in den Einstellungen des reCaptcha Stacks eintragen.

----------

Bildquelle: Pexels