HowTo: Ein Subtheme mit Zurb Foundation in Drupal 8 erstellen

In meinem vorherigen Artikel haben wir gelernt, ein benutzerdefiniertes Sub-Theme mit Bootstrap zu erstellen. In diesem Artikel werden wir lernen, wie man ein Sub-Theme mit Zurb Foundation als Basistheme in Drupal 8 erstellt. Wir werden auch darauf eingehen, was das Zurb Foundation Framework ist, wie man es installiert und welche Feature-Komponenten es hat.

Warum Zurb Foundation als Framework verwenden?

Zurb Foundation ist das erste Mobile-First-Responsive-Frontend-Framework. Eine fortschrittliche Grid-Struktur und Feature-Elemente unterscheiden dieses Framework von anderen Frameworks. Hier sind einige davon:

• Fortschrittliches Grid
  • X-Y Grid (Neu)
  • Flex Grid
  • Float Grid
     
• Feature-Komponenten
  • Off Canvas Container
  • Responsive Akkordeon-Tabs
     
• Navigationen
  • Dropdown-Menü
  • Drilldown-Menü
  • Akkordeon-Menü
  • Responsive Navigation
  • Magellan

Zusätzlich ist dieses Framework sehr einfach anzupassen.

Erstellen eines Sub-Themes mit Zurb Foundation

• Laden Sie das Zurb Foundation Theme von Drupal.org herunter. Verschieben Sie es in Ihren Theme-Ordner. 
   
• Installieren Sie es mit Composer. Die Composer-Installation verwaltet alle Drupal-Site-Abhängigkeiten.

  $ composer require 'drupal/zurb_foundation:^6.0'

• Zurb Foundation kann einfach durch seine Sub-Themes erweitert werden. Daher werden wir keine Dateien in Zurb Foundation oder in seinem Ordner ändern, sondern ein Sub-Theme von zurb_foundation erstellen, das sich in einem Ordner außerhalb des Root-Ordners zurb_foundation/ befindet.
  
  Die folgenden Beispiele gehen davon aus, dass zurb_foundation und Ihr Sub-Theme in themes/ installiert werden.
• Der Zweck der Erstellung eines Sub-Themes ist es, das Upgrade des Basisthemes (Zurb Foundation) zu vereinfachen. Das Sub-Theme sollte in einem separaten Ordner unter einem benutzerdefinierten Theme-Ordner platziert werden.
   
• Die Standard-Ordnerstruktur ist:

  theme/
    -- contrib/
      -- zurb foundation/
  -- custom/
      -- my_theme/

Manuelle Sub-Theme-Einstellung

Zurb Foundation bietet ein Starter Kit mit einem Basistheme.

• Kopieren Sie den Starter-Ordner aus Zurb Foundation heraus und platzieren Sie ihn unter dem benutzerdefinierten Theme-Ordner und benennen Sie ihn mit Ihrem Theme-Namen um.
   
• Ihr Theme-Name muss mit einem alphabetischen Zeichen beginnen und darf nur Kleinbuchstaben, Zahlen und Unterstriche enthalten.

Einrichten der grundlegenden Informationen des Sub-Themes

Hier müssen Sie die Datei STARTER.info.yml.txt mit Ihrem Theme-Namen umbenennen.

• Nehmen wir an, Ihr Theme-Name ist "my_theme". Entfernen Sie hier die Erweiterung .txt und benennen Sie die Datei dann in my_theme.info.yml um.
   
• Bearbeiten Sie Ihre my_theme.info.yml-Datei und ändern Sie "name: Foundation Sub-theme Starter" in "name: My Theme" und "description".
   
• Die Info-Datei beschreibt die grundlegenden Dinge über Ihr Theme: seinen Namen, seine Beschreibung, seine Funktionen, seine Template-Regionen und seine Bibliotheken. Weitere Informationen dazu finden Sie im Drupal 8 Theme Guide. 
   
• Bearbeiten Sie Ihr Sub-Theme mit den entsprechenden Funktionsnamen und benennen Sie dann STARTER.theme in my_theme.theme um.
   
• Bearbeiten Sie die Dateien my_theme.theme und theme-settings.php und ersetzen Sie ALLE Vorkommnisse von "STARTER" durch den Namen Ihres Sub-Themes.

Einrichten des Standard-Themes Ihrer Website

• Melden Sie sich als Administrator auf Ihrer Drupal-Site an, gehen Sie zur Seite Darstellung unter admin/appearance und klicken Sie auf den Link "Aktivieren und als Standard festlegen" neben Ihrem neuen Sub-Theme.
• 
• Bower und npm 
  Dieses Theme verwendet Bower und npm. Sie benötigen beides auf Ihrem Rechner, um Ihr Theme zu entwickeln.
   
• Sobald Sie beides auf Ihrem Rechner installiert haben, führen Sie diese Befehle im Stammverzeichnis Ihres Sub-Themes aus:
  • `npm install`
  • `bower install`
     
• Führen Sie nun gulp aus, um das Sass zu kompilieren, oder gulp watch, das jedes Mal erneut ausgeführt wird, wenn wir die Sass-Datei speichern. Um die Überwachung von Dateien zu beenden, drücken Sie Strg+C.    

Was müssen Sie noch tun?

• Markup in den Template-Dateien der Foundation Core Themes ändern
• Benutzerdefinierte CSS- und JS-Dateien zu Ihrem Sub-Theme hinzufügen