6.2 – Breakpoints

Woher die Grenze kommt

Quartz 5 hat für seine Breakpoints keine Option in der quartz.config.yaml. Sie stehen in quartz/styles/variables.scss des Projekts:

$breakpoints: (
  mobile: 800px,
  desktop: 1200px,
);

Das Plugin liest diese Datei, wenn der Bau die Navigation anlegt, und setzt den Wert in sein Stylesheet und sein Skript ein. Wer die Grenze der Site verschiebt, verschiebt sie damit auch für alle Navigationen — ohne eine zweite Stelle, die man vergessen kann.

Kann die Datei nicht gelesen werden, nimmt das Plugin Quartz’ Vorgaben, 800 und 1200 Pixel, und meldet es einmal (9.2).

Mobil heißt: höchstens so breit. Bei mobile: 800px ist ein Fenster von genau 800 Pixeln schon mobil, eines von 801 nicht.

Nach einer Änderung neu starten

Die Datei wird gelesen, wenn die Navigation entsteht, nicht bei jeder Seite. Wer variables.scss ändert, startet npx quartz build --serve neu.

Überschreiben

options:
  breakpoints:
    mobile: 640px

Erlaubt sind Pixel, rem und em; eine bloße Zahl gilt als Pixel. desktop wird angenommen, aber zurzeit von keiner Regel des Plugins benutzt.

In allen Einträgen gleich — oder gar nicht

Das Stylesheet des Plugins gilt für alle Navigationen einer Site, nicht für eine einzelne. Setzt nur ein Eintrag eine abweichende Grenze, landet das Stylesheet zweimal auf der Site, einmal mit jeder Grenze, und beide greifen auf jede Navigation. Zwischen den beiden Werten sieht dann jede Navigation halb mobil aus. Wer eine andere Grenze braucht, ändert sie in variables.scss — oder setzt breakpoints in jedem Eintrag auf denselben Wert.

Wie das mit dem Layout zusammenpasst

Quartz’ eigenes Layout bricht an derselben Grenze um, weil es aus derselben Datei liest. Eine Navigation mit mobile: offcanvas wird also genau dann zum Burger-Button, wenn die Seitenspalten unter den Text rutschen.

Mit Layout-Frames aus QuartzControl gilt das nicht. Ein Frame bringt eigene Grenzen mit, gespeichert in .quartz-gui/layout-breakpoints.json des Projekts, und liest variables.scss nicht. Diese Website ist so ein Fall: Ihr Frame wird unterhalb von 900 Pixeln mobil, variables.scss sagt 800. Beide Einträge tragen deshalb

options:
  breakpoints:
    mobile: 900px

— in jedem Eintrag derselbe Wert, damit das Stylesheet nur einmal auf der Site landet.