Arbeiten mit Breakpoints in Drupal 8

In Drupal 8 gibt es keine Benutzeroberfläche zum Bearbeiten von Breakpoints. Da Breakpoints in Konfigurationsdateien definiert sind, ist es auch nicht möglich, eine Benutzeroberfläche in Contrib-Modulen bereitzustellen.

Breakpoints werden verwendet, um die Höhe oder Breite von Ansichtsfenstern (Bildschirme, Drucker und andere Medienausgabetypen) in Stufen zu unterteilen und ermöglichen responsive Designs, die für verschiedene Geräte optimiert sind. Das Breakpoints-Modul standardisiert die Verwendung von Breakpoints und erlaubt es Modulen und Themes, die Breakpoints anderer zu setzen oder zu verwenden. Das Breakpoints-Modul verwaltet Breakpoints basierend auf Höhe, Breite und Auflösung.

Beachten Sie, dass das Definieren Ihrer CSS-Breakpoints in der Datei breakpoints.yml nur notwendig ist, wenn Drupal mit den Breakpoints interagieren muss, wie z. B. beim Responsive Images Modul.

Terminologie

Breakpoints

Ein Breakpoint besteht aus einem Label und einem Media Query. Media Queries sind die formale Kodierung von Breakpoints. Zum Beispiel wird ein Breakpoint mit der Breite 40em als Media Query '(min-width: 40em)' geschrieben. Breakpoints sind im Grunde Media Queries mit zusätzlichen Metadaten wie Name und Multiplikatoren.

Themes und Module können Breakpoints definieren, indem sie eine Konfigurationsdatei namens myThemeOrModule.breakpoints.yml erstellen, wobei myThemeOrModule der Name des Themes oder Moduls ist.

Jeder Eintrag in dieser Datei definiert einen Breakpoint, identifiziert durch einen maschinenlesbaren Namen, z. B. bartik.mobile, und enthält Eigenschaften des Breakpoints:

• label – eine lesbare Bezeichnung für den Breakpoint.
• mediaQuery – der eigentliche Media Query-Text, z. B. 'all and (min-width: 851px)'.
• weight – die Reihenfolge/Gewichtung des Breakpoints.
• multipliers – unterstützte Pixelauflösungs-Multiplikatoren.

Hinweis: Die Reihenfolge der Breakpoints anhand ihres Gewichts ist äußerst wichtig. Breakpoints mit der kleinsten minimalen Breite sollten das kleinste Gewicht haben, Breakpoints mit größerer minimaler Breite entsprechend höhere Gewichte. Standardmäßig sortieren Module Breakpoints vom kleinsten zum größten Wert. Module können diese Reihenfolge bei Bedarf anpassen, z. B. sortiert das Responsive Image Modul die Breakpoints je nach Gewicht vom größten zum kleinsten.

Beispiel (bartik.breakpoints.yml):

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

Breakpoint-Gruppe

Breakpoints können in Gruppen organisiert werden. Module und Themes sollten Gruppen nutzen, um Breakpoints für verschiedene Zwecke zu trennen, etwa Breakpoints für Layouts oder für die Bildgrößenbestimmung.

Eine Breakpoint-Gruppe ist eine Kombination von Breakpoints. Jedes Theme oder Modul kann null oder mehr Breakpoint-Gruppen definieren. Ein Breakpoint wird durch spezielle IDs und Breakpoint-Schlüssel erzeugt. Das Definieren einer Gruppe ist optional; falls keine Gruppe angegeben wird, heißt die Gruppe wie das Theme oder Modul.

Beispiel: In yourtheme.breakpoints.yml können Sie folgende zwei Breakpoint-Gruppen erstellen:

yourtheme.group1.mobile:
  label: narrow
  mediaQuery: ''
  weight: 0
  multipliers:
    - 1x
  group: yourtheme.group1
yourtheme.group1.narrow:
  label: narrow
  mediaQuery: '(min-width: 560px)'
  weight: 0
  multipliers:
    - 1x
    - 2x
  group: yourtheme.group1
yourtheme.group1.wide:
  label: wide
  mediaQuery: '(min-width: 851px)'
  weight: 1
  multipliers:
    - 1x
    - 2x
  group: yourtheme.group1

yourtheme.group2.mobile:
  label: narrow
  mediaQuery: ''
  weight: 0
  multipliers:
    - 1x
  group: yourtheme.group2
yourtheme.group2.narrower:
  label: narrow
  mediaQuery: '(min-width: 400px)'
  weight: 0
  multipliers:
    - 1x
    - 2x
  group: yourtheme.group2
yourtheme.group2.wider:
  label: wide
  mediaQuery: '(min-width: 1001px)'
  weight: 1
  multipliers:
    - 1x
    - 2x
  group: yourtheme.group2

Die Kombination eines Breakpoint-IDs aus Theme- oder Modulnamen, Breakpoint-Namen und Gruppenname im Gruppen-Key erzeugt Breakpoint-Gruppen. Alle Breakpoints mit denselben Gruppenschlüsseln erscheinen in einer Breakpoint-Gruppe.

Derzeit ist es nicht möglich, ein benutzerdefiniertes Label für Breakpoint-Gruppen außerhalb des maschinenlesbaren Namens im Gruppen-Schlüssel zu erstellen. Dies ist das Label, das z. B. in der UI des Responsive Image Moduls angezeigt wird, wenn Breakpoint-Gruppen ausgewählt werden.

Erweiterte Nutzung

Sie können Breakpoints zu Breakpoint-Gruppen hinzufügen, die von anderen Modulen oder Themes definiert wurden, müssen aber den vollständigen Namen verwenden.

Beispiel: In yourmodule.breakpoints.yml können Sie folgendes tun:

yourmodule.yourtheme.group2.superwide:
  label: superwide
  mediaQuery: '(min-width: 1501px)'
  weight: 1
  multipliers:
    - 1x
    - 2x
  group: yourtheme.group2

Dies fügt einen Breakpoint hinzu, der in Ihrem Modul definiert ist, und gehört zur Breakpoint-Gruppe, die in Ihrem Theme definiert ist.

Multiplikatoren

Multiplikatoren geben die Auflösung des Viewport-Geräts an, definiert als Verhältnis zwischen der physischen Pixelgröße des aktiven Geräts und der geräteunabhängigen Pixelgröße. Beispielsweise haben „Retina“-Displays einen Multiplikator von 2x.

Das Breakpoints-Modul definiert Multiplikatoren 1x, 1,5x und 2x. Beim Definieren von Breakpoints können Module und Themes festlegen, welche Multiplikatoren für jeden Breakpoint gelten.

Beispiel:

'1.5x' // unterstützt Android
'2x'   // unterstützt Mac Retina Display

Neuladen von Breakpoint-Dateien

Wenn Sie während des Theme-Testens eine neue Breakpoint-Konfigurationsdatei hinzufügen, können Sie den Cache neu aufbauen, um die neuen Breakpoints sichtbar zu machen.

Ressourcen

• Media Queries: W3C-Empfehlung vom 19. Juni 2012
• Breakpoint-sass.com