Bitte klicke jeweils auf den blauen Link - du kommst darüber direkt zum Video.


Überblick

What is a Swatch? Site Styles for Foundation 6 Stacks:

Swatches sind eines der Kernelemente von Foundation 6. Hier werden benutzerdefinierte Vorgaben für die diversen in der Webseite eingefügten Container (Stacks) gemacht. Das Ziel war es, die vielen auf die unterschiedlichen Stacks verteilten Konfigurationsmöglichkeiten an einer Stelle, nämlich im Site Styles Stack zusammenzufassen.

Swatches gibt es für die Einstellungen von:

  • Farben
  • Text
  • Seitenhintergrund
  • Ränder
  • Schriftfarbe
  • Höhe
  • Randabstand (Margin)
  • Transparenz (Opacity)
  • Überlagerung (Overlay)
  • Randabstand (Padding)
  • Position
  • Abrundung der Ecken (Rounding)
  • Schattierungen
  • Breite
  • Transition
  • CSS

Darüberhinaus liefern einige externe bzw. Drittanbieter-Stacks Einstellungsmöglichkeiten für die Swatches mit.

Die einzelnen Swatches stellen im Konfigurationsbereich auf der rechten Seite unterschiedliche Optionen zur Verfügung.

Die Vorgaben im jeweiligen Swatch werden mit den Content-Stacks über Klassen verknüpft, dabei können dem Content Stack eine oder mehrere (durch Leerzeichen getrennte) Klassen zugewiesen werden.

Swatches sind eines der Kernelemente von Foundation 6. Hier werden benutzerdefinierte Vorgaben für die diversen in der Webseite eingefügten Container (Stacks) gemacht. Das Ziel war es, die vielen auf die unterschiedlichen Stacks verteilten Konfigurationsmöglichkeiten an einer Stelle, nämlich im Site Styles Stack zusammenzufassen.


Swatch Selectors

Site Styles Swatch Selectors in Foundation 6 Stacks:

Selektoren kennt man, wenn man um ein paar Grundlagen von CSS weiß: 

Selektoren sind Teile von CSS-Regeln und sind für bestimmte Fomrtaierungsvorgaben verantwortlich. Diese CSS-Regeln verknüpfen an zentraler Stelle gemachte Vorgaben mit den Inhaltsbereichen (bei RapidWeaver sind es die Stacks) auf einer Webseite. Auf einer "zu Fuß" erstellten Webseite Webseite ist diese zentrale Stelle ein oder mehrere Stylesheets, in RapidWeaver-Foundation-6-Projekten ist das der Site Styles Stack mit seinen Swatches. Letztendlich ist diese zentrale Stelle in RapidWeaver aber nur eine Verwaltungsoberfläche im Programm, im Hintergrund sind es auch hier Stylesheets.

Die Verknüpfung erscheint einmal im Konfigurationsbereich des Swatches ganz oben unter:

  • Class: Die Vorgaben sind frei wählbar
  • Components: Hier findet sich in einem Dropdown-Menü eine Vorauswahl möglicher Komponenten. Einstellungen, die du hier vornimmst, wirken sich auf alle davon betroffenen Stacks aus. Über frei wählbare Parent Classes kannst du Content Stacks auch individuell, d.h. unabhängig von übergeordneten formatieren.
  • CSS Selectors: Das ist eine fortgeschrittene Möglichkeit, mit CSS-Selektoren individuell zu arbeiten.

Zum Anderen findest du in den Content Stacks eine Möglichkeit zur Eingabe von Custom Classes

Individuelle Vorgaben kannst du im Konfigurationsbereich der Swatches auch machen über:

  • On State
  • Breakpoint

Hierüber definierst du, bei unter welchen Bedingungen bzw. Bei welcher Anzeigebreite (Breakpoint) die Formatierung wirksam werden soll.


Organisieren von Swatches innerhalb der Site Styles

Organizing Swatches in Site Styles for Foundation 6 Stacks:

Je mehr Swatches du verwendest, desto unübersichtlicher kann das Ganze innerhalb des Site Styles Stacks werden. Folgende Lösungen bieten sich:

  • Die Swatches können beliebig innerhalb des Site Styles Stacks verschoben werden.
  • In der Konfigurationsfläche des Swatches kannst du Namen und Kommentare vergeben, der Name wir im Titel des Swatches angezeigt.
  • Du kannst mit Hilfe des Pen-Stacks Notizen anlegen und entsprechende Swatches in diesen Pen-Stack ziehen.
  • Du kannst bestimmte Swatches direkt aus einem übergeordneten Swatch heraus per Dropdown-Menü zusammenstellen und dieser Zusammenstellung dann in der Konfigurationsfläche über "Label" einen Titel vergeben

Bildquelle: Pexels