Foundation 6: Bessere Geschwindigkeit der Vorschau beim Designprozess

Wer mit Rapidweaver und diversen Frameworks Webseiten erstellte, kannte ein Hauptproblem: Die Dauer der Vorschau verlängerte sich mit der Anzahl an verwendeten Stacks. Das lag daran, dass jeder Stack eine Vielzahl an Einstellungsmöglichkeiten mitbrachte und diese auch in den Code der Seite eingebunden werden mussten.
Das hat sich nun geändert. Durch ein neues Konzept mit dem Namen Swatches, ist jeder Foundation Stack nun sehr viel schlanker und bringt überraschend wenig Einstellungsmöglichkeiten mit. Die Konfiguration der Einstellungen erfolgt nun in den Swatches, welche sich nun im generalüberholten SiteStyle Stack befinden.

Foundation 6 mit Swatches-Palette


Wenn wir uns ein Swatch wie eine Klasse im CSS vorstellen, dann übertragen wir die Einstellung einfach auf einen gewünschten Stack, indem wir den Namen des Swatches nun einfach in die Klasse des gewünschten Stacks eintragen. Wer sich mit CSS und die Programmierung von Webseiten auskennt, wird das Konzept kennen. Auf diese Weise werden Einstellungen zentral und global in der SiteStyle-Palette eingerichtet und können so ganz einfach auf andere Stacks angewendet werden. Einfach und sehr effektiv. Änderungen sind nun ein Kinderspiel, denn man ändert nicht mehr jeden Stack einzeln in den Einstellungen, sondern an einer Stelle.

Am Anfang benötigt man für das Konzept ein wenig Eingewöhnungszeit, aber schon nach den ersten erfolgreichen Änderungen merkt man die Möglichkeiten und den Geschwindigkeitsvorteil.

Durch dieses Konzept ist der Code schlank und schnell und ist fast nicht von handprogrammiertem Framework-Code zu unterscheiden. Eine Vorschau dauert nur einen kurzen Augenblick. Google Page Speed Insights liebt schnellere Webseiten und belohnt diese mit einem besseren SEO-Ranking.

Das neue Foundation 6 bietet nahezu alle Freiheiten im Webdesign

Es sind durch das neue Konzept Dinge möglich, die vorher nicht so einfach umzusetzen waren. Als Beispiel stellen wir uns einen Button vor, der mit einem Bild versehen werden soll. Wir legen einfach einen Swatch an, wählen ein Hintergrundbild und vergeben dem Swatch den Namen "buttonBild". Fügen wir nun einen Button in die Seite ein (es gibt nun für jeden Anwendungszweck verschiedene Button in Foundation 6), dann brauchen wir nur in die Klasse des Buttons den Namen "buttonBild" hineinschreiben - voila: der Button hat ein Hintergrundbild.

Unterstützung von separaten Stacks


Der Programmierer Joe Workman bietet auf seiner Webseite eine vielzahl an Stacks an. Einige bekommen nun eine Unterstützung von Foundation 6. Hat man z.B. den Stack "Page Safe" in seiner Sammlung, dann zeigt sich in der Style-Palette nun ein Punkt zum Hinzufügen eines Swatches für Page Safe. Einstellungen können nun zentral hier getätigt werden und wenn man ein Partial aus der Style-Palette erstellt, ist alles an seinem Platz.

Weitere Stacks mit diesen Möglichkeiten sind bisher:

  • FontPro
  • FontAwesome 4 (Version 5 wird kostenlos nachgeliefert werden)
  • Total CMS
  • Sitelok
  • Agent
  • Pen
  • Wallpaper
  • Fit Text

Unterschiede zu Foundation 1

Es sind wirklich unglaublich viele Unterschiede und man könnte sie hier jetzt nicht alle aufzählen. Aber hier einige wichtige Unterscheidungen:

  • Es gibt keine Erweiterungspacks mehr. Alle verfügbaren Stacks sind in einem Paket erhältlich.
  • Menüs können nun mit einem universellen Menü-Tool selber gebaut werden. Darunter eine TopBar, Hamburger-Menü, Dropdown, Drilldown, Accordion Menü, etc.
  • GridPro ist ein auf Flexbox basierendes, universelles Spalten und Grid tool.
  • Schriftgrößen basieren nun auf Pixel und nicht mehr auf REM
  • SVG-Support
  • Texte können nun einfach mit Markdown formatiert werden
  • Bilder können nun sehr elegant mit Child Stacks in beliebig viele Media Queries eingebaut werden, auch als Retina-Versionen
  • Unterstützung von "scrollen zu" Anker-Punkten ist eingebaut

Was sind die Vorteile von Foundation 6 zu Foundation 1 für Rapidweaver?

Die Vorteile sind vor allem der schlankere Code, die schnellere Vorschau und das erheblich schnellere Ändern und Aufbauen der Webseite.

Es gibt auch eine Set an Utility-Klassen. So kann man z.B. ganz einfach den Abstand eines Objekts ändern, in dem man in das Feld für die Klasse p:64 hineinschreibt. Das ist das kurze Kommando von Padding:64 Pixel. Der Kurzbefefehl pb:12 ist dann Padding-Bottom:12 Pixel. So braucht man dafür kein neues Swatch anlegen, hat aber wieder einen Bereich, den man lokal und nicht mehr global ändern muss. Mehrere Klassen können mit einem Leerzeichen getrennt hineingeschrieben werden.

Was sind die Nachteile?

Foundation 6 ist auf dem ersten Blick nicht ganz so intuitiv wie die erste Version. Anfangs sucht man die Stacks-Einstellungen wie gewohnt in der Seitenleiste und findet dort nur minimale Möglichkeiten. Hat man aber das Konzept verstanden, möchte man keine Sekunde zurück.

Einige Dinge fehlen noch und werden mit den nächsten Updates kommen. Darunter ist die Unterstützung von FontAwesome 5. Auch sind bisher nicht alle Animationen vorhanden und ein animiertes Hamburger-Menü ist noch nicht möglich, soll aber ebenfalls kommen.

Ist Foundation 6 das Tool, auf das wir Rapidweaver-Webdesigner so lange gewartet haben?

Meiner Meinung nach ist Foundation 6 das wichtigste Tool für meine Arbeit als Webdesigner für die nächsten Jahre. Es gibt mittlerweile diverse Frameworks für Rapidweaver, welche die Arbeit erleichtern. Foundation 6 jedoch geht einen großen Schritt voraus, indem es auf ein neues, schlankes und effektives Bedienungskonzept setzt. Für meine Arbeit ist es wichtig, dass man nicht verschiedene Tools ankratzt, sondern sich tief in eine Lösung einarbeitet. Nur so kann man effektiv, schnell und sauber Webseiten in sehr guter Qualität umsetzen. Foundation 6 ist hier in vielerlei Hinsicht führend und wird meine Arbeit für die nächsten Jahre maßgebend beeinflussen.

Ich kann es nur jedem wärmstens empfehlen, der moderne Webseiten erstellt und ein flexibles Werkzeug sucht – ganz gleich privat und beruflich. Foundation 6 ist in jedem Fall ein Gewinner.