6.5. Arbeiten mit CSS in Drupal. Breakpoints, responsive Einstellungen im Drupal-Theme

In den vorherigen Tutorials haben wir bereits CSS zu unserem Theme hinzugefügt. Dazu haben wir in der Datei drupalbook.info.yml angegeben:

libraries:
  - drupalbook/global-styling

Als Nächstes haben wir die Datei drupalbook.libraries.yml erstellt, in der wir bereits angegeben haben, welche CSS-Datei eingebunden werden soll:

global-styling:
  version: 1.x
  css:
    theme:
      css/style.css: {}
      css/print.css: { media: print }

Ab jetzt betrachten wir detailliert, wie man mit CSS in unserem Theme arbeitet.

Wir haben bereits in einem früheren Artikel erwähnt, dass man für jede CSS-Datei die Medienangabe in geschweiften Klammern angeben kann. Für print.css haben wir media: print angegeben, damit dieses CSS nur für die Druckversion geladen wird. Es gibt außerdem media: all (Standard) für alle CSS-Anzeigemodi und media: screen für alle nicht-druckbezogenen Modi.

CSS-Overrides anderer Bibliotheken

Du kannst libraries-override verwenden, um Kern-CSS-Dateien zu überschreiben:

libraries-override:
  # Ersetzen der gesamten Bibliothek.
  core/drupal.collapse: mytheme/collapse

  # Ersetzen einzelner Teile einer Bibliothek, z. B. einer CSS-Datei.
  subtheme/library:
    css:
      theme:
        css/layout.css: css/my-layout.css

  # Entfernen eines Teils der Bibliothek.
  drupal/dialog:
    css:
      theme:
        dialog.theme.css: false

  # Entfernen der gesamten Bibliothek.
  core/modernizr: false

Breakpoints in Drupal

Breakpoints in Drupal sind Teil der Theme-Konfiguration. Sie ermöglichen die Anpassung des Theme-Aussehens abhängig von der Bildschirmgröße des Geräts, auf dem die Seite angezeigt wird. So lässt sich die Seite adaptiv für verschiedene Geräte gestalten: Desktop-Computer, Tablets, Telefone und sogar Uhren. Das Breakpoint-Modul standardisiert die Nutzung von Breakpoints, überwacht die Geräteauflösung und stellt den gewünschten Breakpoint bereit. Man muss nur die notwendigen Größen für die Breakpoints beschreiben.

Das ist natürlich praktisch, aber wenn du nur Breakpoints im Theme konfigurierst, passiert noch nichts. Beispielhaft kannst du das zusätzliche Kernmodul „Responsive Image“ aktivieren, damit Bilder je nach Breakpoint mit unterschiedlichen Voreinstellungen dargestellt werden können. Fügen wir unserem Theme Breakpoints hinzu.

Ein Breakpoint besteht aus einem Label und einer Media Query. Eine Media Query ist der Standard zur Beschreibung eines Breakpoints. Für einen Breakpoint mit 40em Breite schreibt man zum Beispiel '(min-width: 40em)'. Der Breakpoint ist also einfach eine Media Query, kann aber weitere Informationen enthalten.

Um einen Breakpoint hinzuzufügen, musst du die Datei myTheme.breakpoints.yml erstellen. Mein Theme heißt drupalbook, daher heißt die Datei drupalbook.breakpoints.yml.

Jeder Eintrag in dieser Datei ist ein einzelner Breakpoint, bestehend aus einem Maschinen-Namen (eindeutiger Bezeichner) und den untergeordneten Parametern:

1. label: Titel des Breakpoints
2. mediaQuery: Text zur Definition der Bildschirmgröße des Geräts für diesen Breakpoint
3. weight: Gewicht des Breakpoints. Da sich Media Queries überschneiden können, bestimmt dieses Gewicht, welcher Breakpoint zuerst greift.
4. multiplier: Gibt an, wie viel die Pixelanzahl bei der Media Query multipliziert wird. Manche Geräte wie iPhones verwenden Retina-Displays, bei denen zwei physische Pixel für einen dargestellten Pixel verwendet werden.

drupalbook.breakpoints.yml Beispiel:

drupalbook.mobile:
  label: mobile
  mediaQuery: ''
  weight: 0
  multipliers:
    - 1x
drupalbook.narrow:
  label: narrow
  mediaQuery: 'all and (min-width: 560px) and (max-width: 850px)'
  weight: 1
  multipliers:
    - 1x
drupalbook.wide:
  label: wide
  mediaQuery: 'all and (min-width: 851px)'
  weight: 2
  multipliers:
    - 1x

Diese Datei musst du in dein Theme einfügen, wobei du anstelle von „drupalbook“ den Namen deines Themes verwendest.

Responsive Bilder

Aktivieren wir nun das Modul „Responsive Image“:

Wenn du zur Seite für die Bearbeitung der Responsive Image Styles gehst:

admin/config/media/responsive-image-style

Kannst du den Responsive-Preset „Narrow“ bearbeiten:

admin/config/media/responsive-image-style/narrow

Und einstellen, dass die Narrow-Größen aus deinem Theme verwendet werden:

[Screenshot]

Nun kannst du für den Responsive-Preset „Narrow“ für jeden Breakpoint individuelle Voreinstellungen setzen:

[Screenshot]

Wenn du jetzt ein Feld hast, das mit dem Narrow-Preset angezeigt wird, dann werden je nach Bildschirmauflösung unterschiedliche Bilder dargestellt:

[Screenshot]