Drupal 8 Stacks & UI-Patterns

Seit ich 2005 Drupal entdeckt habe, war die große Herausforderung den Benutzern (Editoren, Content Managern) eine leicht zu bedienende Oberfläche zu bieten, um komplexe Seiten und Layouts zu erstellen und diese mit Inhalt zu füllen. Die Kombination der Module Stacks und UI-Patterns löst diese Herausforderung. Selbst in der Drupal Community ist das noch nicht sehr bekannt.


Die neuen D8 Module Stacks & UI-Patterns geben Content Managern enorme Flexibilität.

Stacks and UI-Patterns

Moderne Info Blöcke

Fügen Sie Ihren Artikeln modern gestylte Info-Blöcke mit CTA Buttons hinzu. Jederzeit einfach änderbar und per Drag & Drop im Artikelformular zu verschieben. Einfacher war Inhaltserstellung mit Drupal noch nie. Alles was Sie auf dieser Seite sehen besteht aus UI-Patterns und Widgets des Stacks Moduls.

Stacks

Das sagen die Entwickler des Stacks Moduls

We love Drupal. It is flexible, feature-rich, cost effective and has a fantastic user community supporting it. It is the Content Management System we use most. However, we will be the first to admit that Drupal isn’t perfect. And perhaps the number one way it isn’t perfect is the page building experience it provides content managers.
 

http://blog.thebrickfactory.com/2017/02/stacks-drupal-module/ 

Content Management und Drupal

 

Drupal ist eines der mächtigsten CMS und Frameworks, wenn es um komplexe inhaltliche Strukturen und eine Vielzahl von Funktionalität geht. Und das alles ist von Version zu Version besser geworden. Es kann sehr schwierige Anforderungen geben, die mit Drupal in erstaunlich kurzer Zeit umgesetzt werden können. Auf der anderen Seite kann es manchmal extrem aufwendig und umständlich sein ein kleines neues Textschnippselchen irgendwo in einer komplexen Struktur einzufügen. Häufig musste dies in der Vergangenheit ein Entwickler tun.

Eine Vielzahl von Modulen hat in den letzten Jahren versucht diese Situation zu verbessern. Eine “State of the art“ Lösung war der Einsatz von Panels, Panels Everywhere und Display Suite. Als Sitebuilder war ich in den letzten 2 Jahren in internationalen Teams tätig, in denen die Sites exakt so aufgebaut wurden. Die Entwickler versuchen mit den genannten Modulen den Redakteuren/Content Manager etwas an die Hand zu geben, um Inhalte in komplexen Strukturen so einfach wie möglich zu erfassen und zu pflegen.

Der Aufwand und damit die Kosten dieses Sitebuilding Modells kann sehr hoch sein. Und häufig kommt es immer noch zu Situationen, in denen ein Enzwickler hinzugezogen werden muss, um etwas ungewöhnliche Änderungswünsche am Inhalt durchzuführen.

Hier kommen die Module Stacks und UI-Patterns ins Spiel

Auf den ersten Blick kommt man nicht unbedingt auf die Idee diese zwei Module zusammen einzusetzen. Aber sie passen perfekt zueinander.
Ohne jetzt zu technisch werden zu wollen, muss ich kurz auf Atomic Design eingehen. Nach dem Modell besteht eine Seite aus:

  • Atomen
  • Molekülen
  • und Komponenten

Und das lässt sich mit UI-Pattern und Stacks perfekt umsetzen. Ein Entwickler erstellt zuerst mit UI-Patterns die kleinsten Einheiten einer Seite:

  • Buttons
  • Headlines
  • Teaser Bereiche

um nur einige zu nennen.

Mit dem Stacks Modul werden dann die größeren Einheiten, die Komponenten, erstellt. Diese heißen in Stacks “Widgets". So würde ein Widget für eine Hero-Section bspw. folgende Ui-Patterns verwenden:

  • Titel
  • Subtitel
  • Teasertext
  • Bild
  • Button

Wiederverwendbarkeit

Alle Komponenten können jederzeit und überall wiederverwendet werden. Egal auf wievielen Seiten Sie eine Komponente einsetzen, wenn ein Fehler entdeckt wird oder aus einem anderen Grund etwas geändert werden soll, muss die Änderung lediglich an einer Stelle im Code vorgenommen werden. Das bedeutet eine große Zeit- und Kostenersparnis.  Komponenten können problemlos in unterschiedlichen Projekten eingesetzt werden. So kann mit der Zeit eine Bibliothek wiederverwendbarer Komponenten entstehen.
 

Voransichten

Von jeder Komponente steht eine Voransicht zur Verfügung. Diese Voransicht ist vollkommen unabhängig von der Verwendung und Struktur in Drupal. Sie wird mit Dummy-Text erstellt und kann so sehr schnell mit unterschiedlichen Textlängen getestet werden. Damit stehem Kunden und Entwickler ein sehr gutes Kontrollwerkzeug zur Verfügung. Erst, wenn eine Komponente völlig fehlerfrei ist, wird sie zur Verwendung in Drupal freigegeben.

Hier können Sie ein Beispiel sehen: Voransicht einer Infocard

Dokumentation

Im Code für die Voransichten kann der Entwickler eine Dokumentation der Komponente erstellen. Alle Beteiligten können so jederzeit nachlesen aus welchen Einzelelementen eine Komponente besteht, was beim Einsatz zu berücksichtigen ist, ob es irgendwelche Einschränkungen gibt usw. usf. Dieses Kriterium kann nicht genug betont werden.

Voransicht einer einfachen Komponente

Wiederverwendbarkeit, Voransichten und Dokumentationen

Wiederverwendbarkeit, Voransichten und die Möglichkeit die Komponenten zu dokumentieren, gehören zu den Alleinstellungsmerkmalen von UI-Patterns.

UI-Patterns

UI-Patterns

The UI Patterns module allows you to define and expose self-contained UI patterns as Drupal 8 plugins and use them seamlessly as drop-in templates for panels, field groups, views, Display Suite view modes and field templates.The module also generates a pattern library page that can be used as documentation for content editors or as a showcase for business and clients

Zitat Antonio De Marco Entwickler des Moduls

Layout Wechsel on the fly

Entwickler können für ein Stacks Widget verschiedene Varianten erstellen. Z.B. eine Hero-Section mit Hintergrundfarbe oder mit einem Hintergrundbild. Sie als Content Manager können jederzeit die eine oder die andere Variante auswählen, ohne das der Inhalt in irgendeiner Weise in Mitleidenschaft gezogen wird. Das kann ein wertvolles Mittel bei A/B Tests sein.


Das Layout eines Widgets kann jederzeit durch 2 Klicks durch ein anderes ersetzt werden.

Widgets

Drupal Entwicklung seit 2005

Meinolf Droste

Mich haben die Möglickeiten dieser zwei Module innerhalb weniger Tage restlos überzeugt. Endlich ist Inhaltserstellung und die Möglichkeit verschiedene Layoutblöcke in einem Artikel zu verwenden kein Geheimwissen mehr. Schreiben Sie mir, wenn Sie diese Möglichkeiten auch auf Ihrer Drupal 8 Site einsetzen möchten. Viele Komponenten stehen Ihnen Out of the box zur Verfügung.

Und schauen Sie Hin- und wieder hier vorbei, um sich weiter über Atomic Design mit Drupal 8 zu informieren.
GertYourSite ist ein Service von mdwp - Digital Consulting & Services
Impressum

UI-Patterns Dokumentation

Hier geht's zur Dokumentation des UI-Patterns Moduls.

Einführung des Stacks Moduls

Hier wird das Stacks Modul vorgestellt.

Dokumentation des Stacks Modul

Hier geht's zur Dokumentation des Stacks Modul.