6.5. Werken met CSS in Drupal. Breakpoints en responsieve instellingen in het Drupal-thema

In eerdere tutorials hebben we al CSS aan ons thema gekoppeld. Hiervoor hebben we in het bestand drupalbook.info.yml het volgende aangegeven:

libraries:
  - drupalbook/global-styling

Vervolgens hebben we het bestand drupalbook.libraries.yml aangemaakt, waarin we hebben aangegeven welk CSS-bestand moet worden ingeladen:

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

Vanaf nu zullen we in detail bekijken hoe we met CSS in ons thema kunnen werken.

We hebben in een eerder artikel al geschreven dat je media kunt specificeren voor elk CSS-bestand tussen accolades. Voor print.css hebben we media: print opgegeven zodat deze CSS alleen wordt geladen voor de afdrukversie. Er is ook media: all (standaard) voor alle weergavemodi van CSS, en media: screen voor niet-afdrukmodi.

CSS-overschrijvingen van andere bibliotheken

Je kunt libraries-override gebruiken om CSS-bestanden van de core te overschrijven:

libraries-override:
  # Vervangt de volledige bibliotheek.
  core/drupal.collapse: mytheme/collapse
   
  # Vervangt afzonderlijke delen van een bibliotheek, zoals een CSS-bestand.
  subtheme/library:
    css:
      theme:
        css/layout.css: css/my-layout.css
   
  # Verwijdert een deel van de bibliotheek.
  drupal/dialog:
    css:
      theme:
        dialog.theme.css: false
   
  # Verwijdert de volledige bibliotheek.
  core/modernizr: false

Breakpoints in Drupal

Breakpoints in Drupal maken deel uit van de thema-configuratie. Ze stellen je in staat om het uiterlijk van het thema aan te passen afhankelijk van de schermgrootte van het apparaat waarop de site wordt weergegeven. Hierdoor kun je de site responsief maken voor verschillende apparaten — desktopcomputers, tablets, telefoons en zelfs horloges. De module Breakpoint standaardiseert het gebruik van breakpoints; deze maakt het mogelijk om de schermresolutie van een apparaat te controleren en het juiste breakpoint te leveren. Je hoeft alleen de gewenste groottes voor de breakpoints te beschrijven.

Dat is natuurlijk handig, maar als je breakpoints alleen in het thema configureert, gebeurt er nog niets zichtbaar. Als voorbeeld kun je de aanvullende core-module Responsive Image inschakelen, die het vervolgens mogelijk maakt om, met behulp van breakpoints, afbeeldingen met verschillende presets voor verschillende schermformaten weer te geven. Laten we breakpoints toevoegen aan ons thema.

Een breakpoint bestaat uit een kopregel en een media query. Een media query is de standaardmanier om een breakpoint te beschrijven. Bijvoorbeeld, voor een breakpoint van 40em breed, zou je schrijven: '(min-width: 40em)'. Hier is het breakpoint slechts een media query, maar breakpoints kunnen extra informatie bevatten.

Om een breakpoint toe te voegen, moet je het bestand myTheme.breakpoints.yml aanmaken. In mijn geval heet het thema drupalbook, dus het bestand zal drupalbook.breakpoints.yml heten.

Elke vermelding in dit bestand is een afzonderlijk breakpoint, bestaande uit een machine-naam die het unieke naam van het breakpoint definieert, en onderliggende elementen met de parameters van het breakpoint:

1. label: de titel van het breakpoint
2. mediaQuery: de tekst die de schermgrootte van het apparaat bepaalt voor dit breakpoint
3. weight: gewicht van het breakpoint. Je kunt breakpoints definiëren met overlappende mediaQuery-groottes, dus het gewicht bepaalt welk breakpoint als eerste wordt uitgevoerd.
4. multipliers: toont hoeveel pixels moeten worden vermenigvuldigd om de mediaQuery te bepalen. Sommige apparaten, zoals iPhones, gebruiken retina-displays waarbij in feite twee fysieke pixels worden gebruikt om één pixel van de site weer te geven.

drupalbook.breakpoints.yml:

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

Je moet een dergelijk bestand toevoegen aan je thema — alleen zal de naam van jouw thema in plaats van drupalbook worden gebruikt.

Responsieve afbeelding

Laten we nu de module Responsive Image inschakelen:

Als je nu naar de pagina voor het bewerken van responsieve afbeeldingsstijlen gaat:

admin/config/media/responsive-image-style

Dan kun je de responsieve preset Narrow bewerken:

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

En aangeven dat de Narrow-groottes moeten worden overgenomen uit ons thema:

screenshot

Nu kun je voor de responsieve Narrow-preset afzonderlijke instellingen maken voor elk breakpoint:

screenshot

Als we nu een veld instellen om te worden weergegeven via de Narrow-preset, dan zullen we verschillende afbeeldingen tonen bij verschillende schermresoluties:

screenshot