Im obligatorischen Site Styles Stack werden diverse Formatierungen vorgenommen und Effekte konfiguriert, auch die Schrift-Einstellungen werden hier vorgenommen.

Wie bisher versuche ich, die Inhalte der Videos von Joe Workman für deutschsprachige Nutzer etwas handhabbarer zu machen. Um zu den Videos zu gelangen, klicke bitte auf den blau markierten Link.


Font Swatches

Site Styles Fonts in Foundation 6 Stacks:

Innerhalb des Site Styles Stacks gibt es eine Möglichkeit, verschiedene Font Swatches hinzuzufügen:

  • Font Style
  • Google Webfonts
  • Verschiedene weitere Font Swatches, u.a. einen Font Pro Swatch (nur wenn die entsprechenden Stacks auch installiert sind)


Font Styles

Hier werden die grundlegenden Schrifteinstellungen vorgenommen:

  • Fontgröße
  • Fontschritt
  • etc.

Die Formatierungen können über den Konfigurationsbereichauf der rechten Seite (Page Elements) auf bestimmte Seitenelemente beschränkt werden. Die Vorgaben einzelner Stacks können damit überschrieben werden.

Die Verknüpfung zwischen Swatch und Stack erfolgt über Custom Classes - das hatten wir bereits in vorangehenden Blogbeiträgen erarbeitet.


Websafe Fonts

Über diesen Swatch definierst du die Schriftfamilie, die auf der Webseite benutzt werden soll. In diesem Fall geht es um sogenannte websichere Schriften.


Google Fonts

Etwas vergleichbares machst du über diesen Swatch, nur geht es hier um die Einbindung von Google Fonts. Beachte bitte, dass es sich bei diesen Schriften um Schriften handelt, die vom Google Server geladen werden müssen - das hat datenschutzrechtliche Folgen und beeinflusst de Ladegeschwindigkeit der Webseite.

Die Schriften legst du der die Eingabe des Namens des jeweiligen Fonts fest. Die Google Fonts Bibliothek findest du online - hier findest du auch den exakt zu übernehmenden Namen, aber auch in welcher der jeweilige Font überhaupt vorliegt.


Hover Effekt

Styles Hover Effects for Foundation 6 Stacks:

Mit Hilfe von Swatches lässt sich auch ein Cover-Effekt generieren. Letztlich benötigst du dazu zwei Swatches - einen der den passiven Zustand ohne Hoher-Effekt und einen der den aktiven Zustand definiert.

Du musst eine Klasse vergeben um Swatches und Stack miteinander zu verknüpfen, z.B. über hoverbox. Wichtig für die Konfiguration des Cover-Effekts ist die Festlegung des Hover-Effektes unter Optional Conditions für den aktiven Zustand.

Möglich ist das Hinzufügen eines Transition-Effektes - das passiert auf gleiche Weise mit einem weiteren Swatch, in dem der Transition-Effekt definiert wird.

Bildquelle: Pexels