Werken met breakpoints in Drupal 8
In Drupal 8 is er geen gebruikersinterface om breakpoints te bewerken. Omdat breakpoints gedefinieerd zijn in configuratiebestanden, is het ook niet mogelijk om een gebruikersinterface hiervoor te voorzien in contrib.
Breakpoints worden gebruikt om de hoogte of breedte van viewports (schermen, printers en andere soorten media-output) in fasen te verdelen en ondersteunen situaties waarin responsive design wordt aangepast voor correcte weergave op verschillende apparaten. De Breakpoints-module standaardiseert het gebruik van breakpoints en stelt modules en thema’s in staat breakpoints van elkaar te definiëren of te gebruiken. De Breakpoints-module volgt breakpoints op basis van hoogte, breedte en resolutie.
Merk op dat het invoeren van je CSS-breakpoints in een breakpoints.yml-bestand alleen nodig is wanneer Drupal met de breakpoints moet communiceren, zoals in het geval van de Responsive Images-module.
Terminologie
Breakpoints
Een breakpoint bestaat uit een label en een media query. Media queries zijn de formele manier om breakpoints te coderen. Bijvoorbeeld, een breedte-breakpoint van 40em wordt genoteerd als de media query '(min-width: 40em)'. Breakpoints zijn eigenlijk gewoon media queries met extra metadata, zoals informatie over naam en multiplier.
Thema’s en modules kunnen breakpoints definiëren door een configuratiebestand te maken met de naam myThemeOrModule.breakpoints.yml, waarbij myThemeOrModule de naam is van jouw thema of module.
Elke entry in dit bestand definieert één breakpoint, bestaande uit een machine name waarmee het breakpoint uniek wordt geïdentificeerd, bijvoorbeeld bartik.mobile, en zijn eigenschappen:
- label - een leesbaar label voor het breakpoint.
- mediaQuery - de eigenlijke media query, bijvoorbeeld 'all and (min-width: 851px)'.
- weight - de positionele waarde (volgorde) voor het breakpoint.
- multipliers - ondersteunde pixelresolutie-multipliers.
Opmerking. De volgorde van breakpoints volgens hun gewicht is zeer belangrijk. Breakpoints met de kleinste minimale breedte moeten het laagste gewicht hebben, en breakpoints met grotere breedtes een hoger gewicht. Standaard ordenen modules breakpoints van klein naar groot. Modules kunnen deze volgorde echter wijzigen indien nodig: bijvoorbeeld, de Responsive Image-module herordent breakpoints van groot naar klein op basis van het gewicht.
Voorbeeld (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 group
Breakpoints kunnen georganiseerd worden in groepen. Modules en thema’s moeten groepen gebruiken om breakpoints te scheiden die voor verschillende doeleinden gebruikt worden, zoals breakpoints voor layouts of breakpoints voor afbeeldingsformaten.
Een breakpoint group is een combinatie van breakpoints. Elk thema of module kan nul of meer breakpoint groups definiëren. Een group wordt aangemaakt met speciale ID’s en keys. Het opgeven van een group is optioneel; indien je geen group opgeeft, krijgt de groep dezelfde naam als jouw thema of module.
Bijvoorbeeld, in yourtheme.breakpoints.yml kun je de volgende twee breakpoint groups maken:
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
Door de ID van breakpoints te laten beginnen met de machine name van het thema of module, gevolgd door een punt en de machine name van de group, en door dezelfde identificatie theme/module.group in de group-key te gebruiken, worden breakpoint groups aangemaakt. Alle breakpoints met dezelfde set keys verschijnen in dezelfde group.
Het is momenteel niet mogelijk om een aangepast label te maken voor breakpoint groups buiten de machine name die in de group-key staat. Dit is wat getoond wordt als label, bijvoorbeeld bij het selecteren van breakpoint groups in de interface van de Responsive Image-module.
Geavanceerd gebruik
Je kunt ook een breakpoint toevoegen aan breakpoint groups die door andere modules of thema’s gedefinieerd zijn, maar je moet dan de volledige naam gebruiken.
Bijvoorbeeld, in yourmodule.breakpoints.yml kun je het volgende doen:
yourmodule.yourtheme.group2.superwide
label: superwide
mediaQuery: '(min-width: 1501px)'
weight: 1
multipliers:
- 1x
- 2x
group: yourtheme.group2
Dit voegt een breakpoint, gedefinieerd in jouw module, toe aan een breakpoint group die in jouw thema gedefinieerd is.
Multipliers
Multipliers zijn een maat voor de schermresolutie van een apparaatviewport, gedefinieerd als de verhouding tussen de fysieke pixelgrootte van het actieve apparaat en de device-onafhankelijke pixelgrootte. Bijvoorbeeld, “retina”-schermen hebben een multiplier van 2x.
De Breakpoints-module definieert multipliers van 1x, 1,5x en 2x. Bij het definiëren van breakpoints kunnen modules en thema’s aangeven welke multipliers gelden voor elk breakpoint.
Voorbeeld:
'1.5x' // ondersteunt Android '2x' // ondersteunt Mac retina display
Nieuwe breakpoint-bestanden laden
Als je een nieuw breakpoints-configuratiebestand toevoegt tijdens het testen van een thema, kun je de caches herbouwen om de nieuwe breakpoints zichtbaar te maken.