Extra Swatches für Foundation 6.

Die Vorgehensweise bei Foundation 6 unterscheidet sich deutlich vom bisherigen Vorgehen von RapidWeaver in Verbindung mit Stacks. Nichts ist mehr wie vorher, doch vieles ist besser. Ein Teil dieser Neuerungen ist das Konzept der Swatches, über welche die Darstellung von Stacks-Inhalten formatiert werden. Und nun gibt es ein Update für diese Swatches.

Worum es bei Swatches geht: Du legst mit diesen Swatches fest, welche Randabstände der Inhalt haben soll, welche Farbwerte z.B. ein Text oder eine Überschrift ausgegeben werden sollen etc. Dieses Muster ist bei allen Swatches, so sehr verwirrend das auf den ersten Blick auch sein mag, - ich hatte dies bereits genauer beschrieben.

Nun gibt es ein Extra-Update für diese Swatches, das im Paket erworben werden kann. Wenn du dann in Site Styles Stack in den Bereich Swatches gehst und auf den Plus-Button in General oder Components gehst, findest du diese Swatches nach der Installation durch ein kleines Plus-Icon markiert:

Screenshot Swatches in einem RapidWeaver Foundation Projekt

Im Einzelnen umfasst das Paket insgesamt über 20 zusätzliche Funktionen, von denen einige hier beschrieben sind:


General

Aspect Ratio

Mit kannst du diesem Stack ein bestimmtes Seitenverhältnis vorgeben. Das wirkt sich insbesondere auf die geräteübergreifende Darstellung aus, denn die Seitenverhältnisse der damit formatierten Inhalte bleiben erhalten.


Clip-Path

Damit kannst du Inhalte eine Form rahmen - v.a. wird das wohl bei Bildern hilfreich sein.


Cursor

Mit dem Cursor-Swatch kannst du einen bestimmten Cursor definieren, der dann erscheint, wenn der Seitenbesucher seinen Cursor über einen bestimmten Seitenbereich bewegt.


Display & Custom Visibility

Mit diesem Swatch kannst du die CSS-Vorgaben für jeden einzelnen Inhalt so beeinflussen, das sich diese Bereiche abhängig von der Anzeigebreite entsprechend verschieben oder auch ausgeblendet werden. Letzteres geht über die Möglichkeiten beispielsweise der Visibility-Einstellungen der F6-Stacks deutlich hinaus.


Gradients

Mit Hilfe dieses Swatches lassen sich differenzierte Farbverläufe innerhalb bestimmter Inhalte definieren. Es stehen 3 verschiedene Swatches zur Auswahl, mit denen du arbeiten kannst.


Toggler

Der Toggler-Swatch ermöglicht die Definition von bestimmten Interaktionen auf der Seite. Geht der Seitenbesucher beispielsweise über einen bestimmten Inhalt, wird eine bestimmte Animation (Skalierung, Rotierung, Verschiebung etc.) des Bereiches ausgelöst.


Underscore

Mit diesem Swatch lassen sich Unterstriche z.B. in einer Navigation oder bei Links differenzierter gestalten.

Weitere General Swatches sind:

  • Background Props
  • Perspective
  • Pseudo Content
  • Transition Multi
  • Unset
  • Z-Index


Components

Equalizer

Mit diesem Swatch definierst du, dass Inhaltsbereiche innerhalb eines Containers in identischer Höhe angezeigt werden.


FA5 Styles

Damit kannst du du die Font Awesome-5-Icons in deutlich differenzierter Weise nutzen, insbesondere kannst du mehr Einfluß auf Farbgebung und Größe nehmen.


SVG

Mit dem SVG-Swatch kannst du sowohl die Umrisse wie auch die Füllungen von SVG-Grafiken beeinflussen.


Table Styles

Mit diesem Swatch kannst du deine Tabellen bzw. Einzelne Eheleute in Tabellen (z.B. Tabellenspalten, Tabellentitel etc.) differenziert gestalten.

Weitere Component Swatches sind:

  • Color Override
  • Gutters
  • Render Performance

Wie bei allen solchen Updates und Zusatzmöglichkeiten hat das Ganze natürlich einen nicht zu umgehenden Haken: Foundation 6 ist an sich schon recht komplex. Mit den Zusatz-Swatches wird es nicht übersichtlicher.

Das neue Zusatz-Swatch-Pack erhältst du hier: Swatch Pack