Dieser Site Styles Stack ist das Kontrollzentrum der gesamten Webseite. Erstelle ein erstes und leeres RapidWeaver-Projekt. Füge das Stacks-Plugin hinzu und ziehe in die Arbeitsfläche den Site Styles Stack der Foundation 6 Suite. Von oben nach unten siehst du in diesem Stack:


Arbeitsfläche

Die Arbeitsfläche des Stacks gibt einen Überblick über alle grundlegenden Konfigurationen, die auf der jeweiligen Seite wirksam werden.


Component Colors

Hier werden die Farben diverser Komponenten der Webseite, z.B. Container, Buttons, Menü etc. für Farben erhalten sollen. Die Farben werden im Konfigurationsbereich rechts im Programmfenster vorgenommen.


Text Colors

Hier werden alle Farben für Texte, Header, Links etc. vorgenommen. Auch diese Farben werden Die Farben werden im Konfigurationsbereich auf der rechten Seite vorgenommen.


Features

Hier lassen sich spezielle Konfigurationen vornehmen, teilweise sind es Möglichkeiten, die andere Stacks liefern - wie beispielsweise der Page Safe Stack , aber auch einige Drittanbieter-Stacks.


Fonts

Diese Bereich in in Teilen vergleichbar mit dem Font Pro Stack- er bietet einige Einstellungsmöglichkeiten für Fonts. Beispielsweise wählst du hier aus, welche Schriftart du auf der Webseite nutzen möchtest.


Swatches

Swatches sind eines der Kernelemente von Foundation 6. Hier werden benutzerdefinierte Vorgaben für die diversen in der Webseite eingefügten Container (Stacks) gemacht. 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. Der Vorteil: Alle Vorgaben werden zentral innerhalb des Site Style Stacks zusammengefasst.


Konfigurationsbereich

Layout

Hier lassen durch durch Klick auf Detailed Style Pallettes genaue Angaben zu den Farbwerten in der Arbeitsfläche anzeigen.

Aktivieren von Display Sizing Chart zeigt ein Diagramm, welches im Wesentlichen die Größenverhältnisse visualisieren soll, wenn du mit bestimmten Pixel-Werten arbeitest. Diese Werte werden in zahlreichen Swatches genutzt.


Background

Hier definierst du den Seitenhintergrund. Du hast folgende Möglichkeiten

  • Color: Du definierst bestimmte Hintergrundfarben
  • Image / Warehousing: Du fügst ein Hintergrundbild ein. Dies funktioniert wie bisher vom Image Stack gewohnt, in gerätespezifischen Pixelgrößen
  • CSS: Hier kannst du benutzerdefinierten CSS-Code zur Gestaltung eines Seitenhintergrundes einfügen. Den Code kannst du dir von diversen CSS-Generatoren erstellen lassen oder von irgendeiner Quelle kopieren

Du kannst Bild und Farbe miteinander kombinieren indem du sowohl den Color- wie auch den Image- bzw. Warehouse-Button aktivierst.

Wenn du Bilder einfügst, sollten diese diese in 3 unterschiedlichen Größen eingefügt werden:

  • eine Bilddatei mit max 320px Breite für die Mobilansicht
  • eine Bilddatei mit max 768px Breite für die iPad-Ansicht
  • eine Bilddatei beliebiger Größe für die Desktopansicht

Site Sizing

Hier legst du die Seitenbreite fest. Voreingestellt sind 1200 px.


Site Colors

Hier definierst du die Farben für den Bereich Component Color. Nur ist die Möglichkeit, Grauwerte exakt festzulegen.


Text Colors

Hier definierst du die Farben für den Bereich Text Colors.


Text Sizing

Hier legst du die Größen für die diversen Textelemente fest. Die Größen werden geräteklassenspezifisch in Pixelwerten festgelegt und nachher im Backend in Krem-Werte umgerechnet.


List Styles

Hier werden die Formatierung für Listenelemente vorgenommen, also wie Liste gestaltet werden sollen, ob sie z.B. einen Punkt oder einen Kreis als Listenelement bekommen sollen, ob es sich um Listen mit Buchstaben oder Zählern sein sollen etc.


Global Radius

Hier machst du Vorgaben für die Abrundung der Ecken von eingefügten Containern bzw. Stacks.

Joe Workman stellt die den Site Styles Stack und seine Konfigurationsmöglichkeiten in einem Video vor:

Sites Styles Overview for Foundation 6 Stacks

Ich werde mich darum bemühen, die Inhalte der Video-Tutorials, die ja alle in Englisch sind und für viele so kaum nutzbar sind, hier in Schrift und Text aufzubereiten. Das macht es dir sicherlich leichter, dich einzuarbeiten.

----------

Bildquelle: Pexels