Foundation 6 Anleitung mit 8 vorkonfigurierten Templates

Mindestvoraussetzungen: RapidWeaver 7 | Stacks Plugin 4 | Foundation 6 Suite

Zusätzlich benötigst du den kostenlosen Pen Stack von weaver.space

Classes

Der Foundation Framework beinhaltet einige hilfreiche sogenannte Utility-Klassen, mit denen du Webseitenelementen bestimmte Formatierungen bzw. ein bestimmtes Verhalten zuweisen kannst.

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:

  • 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