Erst mal was am Rande:

Joe Workman hat seine Demos mit Astronauten-Bildern geschmückt. Ich habe mich in den letzten Beiträgen daran gehalten. Jetzt gehen mir aber schlichtweg die Raketen-Bilder aus. Schauen wir mal, wie wir das hinkriegen...


Klassen, Site Styles Stack und Webinhalte

Vorab dies: Webseiteninhalte formatierst du über Klassen, die im Hintergrund in die Webseite geschrieben werden, wenn du die Einstellungen im Site Styles Stack vornimmst. Oder du definierst benutzerdefinierte Klassen z.B. in Swatches. Diese Klassen verknüpfen die von die vorgegebenen Formatierungen mit den Webseitenhinhalten.

Welche Klassen das sind, erfährst du, indem du deinem Projekt den Classes Stack hinzufügst - dieser bietet eine Übersicht der von Foundation bereitgestellten Klassen. Da gibt es z.B. Klassen für:

  • Schriftgrößen und -farben
  • Textgrößen und -farben
  • Textausrichtung
  • Schattierungen
  • Listenstile
  • Gerätespezifische Sichtbarkeit
  • Formatierung der Ränder
  • Positionierungen
  • etc.

Beispielsweise definierst du eine bestimmte Farbe und Größe für die Hauptüberschrift. Diese wird durch die Klasse h1 definiert und deine Einstellungen, die du für die H1-Überschriften gemacht hast, natürlich vom Header-Stack übernommen, soweit dieser auf H1 gesetzt wird, aber auch über all dort, wo du h1 als benutzerdefinierte Klasse bei Webseitenihalten festlegst. Beispielsweise kannst du einen Text-Stack nehmen, dort Text schreiben und diesen dann als H1-Überschrift formatieren, indem du in den Einstellungen des Text-Stacks unter Custom Classes h1 einträgst.

Um zu verstehen, was hier passiert, solltest du dich mit etwas CSS auskennen, denn hier sprengt RapidWeaver und insbesondere die Foundation Site die grenzen des reinen Webbaukastens, mit dem du dir mal so nebenbei eine Webseite zusammenflicken kannst.


Utility Classes

In den Site Styles gibt es sogenannte Features (ist das eigentlich schon ein Swatch...?). Diese Features beinhalten einige optional zu verwendende Einstellungen. U.a. gibt es hier die Möglichkeit ein Utility Class Feature hinzuzufügen.

Diese Utility Classes fügen der Webseite einige Klassen hinzu, die nicht durch die Formatierungen des Site Styles Stacks oder von irgendwelchen Swatches definiert werden. Eine Übersicht aller möglichen Klassen erhält du, wenn du deinem Projekt den Classes Stack hinzufügst. Hier hast du nicht nur eine Übersicht, welche Klassen dein Foundation Projekt nutzt, sondern auch -soweit du die Anzeige aktivierst-, welche Utility Classes du nutzen kannst.Es gibt Utility Classes für:

  • Innere und äußere Randabstände
  • Höhe und Breite
  • Z-Index, mit dem die Ebene definiert wird, in der das Element ausgegeben wird
  • Text- und Hintergrundfarben


Beispiel für Randabstände:

Du möchtest obere und untere Randabstände von jeweils 24px nutzen. Das geht -soweit das Utility Classes Feature in Site Styles eingefügt ist- durch die Klassen pt:24 bzw. pb:24. pt definiert dabei die oberen und pb die unteren Randabstände. t steht für top und b für bottom.

Oder du möchtest einen äußeren Randabstand von 48px definieren. Da geht dann über die Klasse m:48. Der Zusatz x bzw. y definiert die horizontalen bzw. vertikalen Randabstände, also beispielsweise px:12 oder my:24. Möglich ist auch die Verwendung negativer Werte, beispielsweise -pb:12.

Weiter ist es möglich, Klassen geräteklassenspezifisch anzulegen. Wenn du z.B. die Klasse m:64 definiert hast,, die geräteklassenübergreifend gilt, kannst du für medium-sized Displays wie beim iPad mini durch z.B. md:m:32 einen anderen Randabstand festlegen, md steht dabei für medium, lg für large.

Die Klassen fügst du dann im Content Stack, beispielsweise im Container Stack oder einem Text Stack, unter Custom Classes ein und du wirst in der Vorschau beobachten können, wie sich diese Klassen auf die Randabstände auswirken.


Beispiel für Inhaltsbreite:

Die Breite von Inhaltsbereichen wird über die Klasse w definiert:

  • w:screen = seitenbreit
  • w:512 = der Inhalt läuft über einer breite von 512px
  • md:w:192: = der Inhalt läuft auf medium-size Displays über 512px
  • lg:w:screen = der Inhalt läuft auf großen Displays über die komplette Seitenbreite

Die Breite der Inhalte kann auch, abhängig vom 12-spaltigen Gestaltungsraster in Verhältniswerten angegeben werden, also z.B.:

  • w:1/2
  • w:2/3
  • etc.


Beispiel für Inhaltshöhe:

Die Höhe von Inhaltsbereichen wird über die Klasse w definiert:

  • Dabei definieren Zahlenwerte eine statische Höhe, beispielsweise h:256 begrenzt den Inhalt auf einen statischen Wert von 256px
  • Und Zahlenwerte mit vorgesetztem v legen Verhälntiswerte bezüglich der Browserfensterhöhe fest: h:75h definiert eine Höhe des Inhaltsbereiches, der über 75% der Browserfensterhöhe geht.
  • Auch das lässt sich mit dem Zusatz m oder l geräteklassenspezifisch definieren


Beispiel für Farben:

Natürlich werden auch Farben über Klassen definiert. Festgelegt werden sie primär in den Site Styles Options, aber über Ultitily Classes lassen sich sich spezifisch auf bestimmte Inhalte anwenden. Beispielsweise so

  • color:primary = Zuweisen der Primärfarben wie im Site Styles Stack festgelegt
  • color:secondary = Zuweisung der Sekundärfarben
  • Etc.


Swatches vs. Utility Classes

Natürlich kannst du all diese Formatierungen auch mit Swatches erreichen. Aber du müsstest womöglich eine Unzahl von Formatierungen und Definitionen in die Swatches schreiben und ebenso viele benutzerdefinierte Klassen anlegen. Mit Utility Classes ist einiges einfacher und vielleicht auch übersichtlicher.

Allerdings: Utility Classes werden auf den einen Inhaltsbereich angewandt, dem du sie zugeordnet hast. Swatches steuern Formatierungen zentral und wenden sie auf alle damit verknüpften Inhalte an.

Hat also alles Vor- und Nachteile. Wenn du eine Utility Class sehr oft anwendest, solltest du über einen Swatch nachdenken.

Bildquelle: Pexels