Geben Sie ein Suchstichwort ein und klicken Sie auf Suchen, um Resultate anzuzeigen.

Kickstart my (Drupal-)Heart

Christian Schär
Media Designer
Previon Theme
Zu Beginn jedes Drupal-Projekts stellte man sich früher die Frage, welches Theme eignet sich für die bevorstehende Aufgabe am besten. Als Drupal-Integrator seit Version 6 haben wir schon viele Base- und Starter-Themes evaluiert – aber auch ein Theming-Beginn auf der grünen Wiese nur mit dem Drupal-Core hat sich schon als die ideale Lösung erwiesen.

Alles neu in Drupal 8

Mit Lancierung von Drupal 8 und dem Umstieg auf die Template-Sprache Twig atmete die Frontend-Welt auf, denn endlich liegt es im Ermessen des Themers, wo und welche CSS-Klassen mit welchem Markup gesetzt wird. Also lag es auf der Hand, selber ins Theme-Geschehen einzugreifen und was eigenes zu kreieren.

Bisher haben wir uns sehr oft für das Base-Theme «Basic» entschieden, das über eine saubere HTML5-Struktur mit leicht erweiterbaren CSS-Klassen und ID’s verfügt und zudem nicht überladen ist mit unnötigem Ballast. Jedoch mussten wir immer wieder auf eigene Funktionen zurückgreifen, die wir beim darauffolgenden Projekt jeweils wieder dem «neuen» Theme hinzufügen mussten.

Saubere Rollenverteilung 

Dieses Prozedere ist nun Geschichte, können wir doch nun auf unser eigenes Theme zurückgreifen. Es verfügt über ein klassisches Grid-System via Bourbon-Neat – für Firmenlösungen, die eine Lauffähigkeit auf ältere IE-Browsern erfordern – ein Flexbox-Grid oder kann bei Bedarf mit einem CSS Grid Layout erweitert werden. Als Taskrunner fungiert Gulp, der sowohl die Sass-Files und Javascripts kompiliert, als auch ein SVG-Sprite-File generiert, aus dem wir nun praktisch über das svg-use-Element die benötigten Vektor-Grafiken inline integrieren und über das CSS steuern können.

Code Beispiel
Sauber generiertes und minimiertes SVG-Sprite.

Gleichzeitig legt es uns die definierten HTML-Seiten an, um unabhängig von Drupal bereits mit dem Frontend zu beginnen. Die daraus resultierenden Styles und weiteres Markup können wir nun nach bestem BEM-Wissen in die erforderlichen Twig-Files integrieren. So erhält der Themer die Hoheit über den Markup, zugleich beschränkt sich die Arbeit des Entwicklers so auf sein eigentliches Kerngebiet.

Ein Living Styleguide ist immer up to date und zeigt sämtliche Elemente einer Website in Bezug auf Struktur, Design, Funktion und Verhalten.

Living Styleguide

Was uns jetzt noch fehlt, ist die Anbindung an ein statisches Site-Generator-Tool zum Erstellen eines Living Styleguides, der eine gemeinsame Sicht von Client/UX/Dev zulässt, um insbesondere Inkonsistenzen, Wildwuchs und unnötige Doppelarbeit zu vermeiden. Die Wahl des Tools will gut überdacht werden, daher wird sich die Evaluation wohl noch etwas hinziehen. In der Pole Position stehen Fractal, Pattern Lab und Fabricator.