6.5. Lavorare con i CSS in Drupal. Breakpoint e impostazioni responsive nel tema Drupal

Nei tutorial precedenti abbiamo già collegato i file CSS al nostro tema. Per farlo, abbiamo indicato nel file drupalbook.info.yml quanto segue:

libraries:
  - drupalbook/global-styling

Successivamente, abbiamo creato il file drupalbook.libraries.yml, dove abbiamo specificato quale file CSS includere:

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

Da ora in poi, analizzeremo nel dettaglio come lavorare con i CSS nel nostro tema.

Abbiamo già scritto in un articolo precedente che è possibile specificare il parametro media per ogni file CSS tra parentesi graffe. Per il file print.css abbiamo impostato media: print, in modo che questo CSS venga collegato solo nella versione di stampa. Esiste anche media: all (impostazione predefinita) per tutti i tipi di visualizzazione e media: screen per le modalità non di stampa.

Sovrascrivere i CSS di altre librerie

È possibile utilizzare libraries-override per sovrascrivere i file CSS del core:

libraries-override:
  # Sostituire l'intera libreria.
  core/drupal.collapse: mytheme/collapse
   
  # Sostituire singole parti di una libreria, come un file CSS.
  subtheme/library:
    css:
      theme:
        css/layout.css: css/my-layout.css
   
  # Rimuovere una parte della libreria.
  drupal/dialog:
    css:
      theme:
        dialog.theme.css: false
   
  # Rimuovere l'intera libreria.
  core/modernizr: false

Breakpoint in Drupal

I breakpoint in Drupal fanno parte della configurazione del tema e consentono di personalizzare l’aspetto del tema in base alla dimensione dello schermo del dispositivo su cui il sito viene visualizzato. Questo permette di rendere il sito responsive per vari dispositivi: computer desktop, tablet, telefoni e persino orologi. Il modulo Breakpoint standardizza l’uso dei breakpoint, consentendo di monitorare la risoluzione del dispositivo e fornire il punto di interruzione desiderato. È sufficiente descrivere le dimensioni necessarie per i vari breakpoint.

Questo, ovviamente, è utile, ma se configuri i breakpoint solo nel tema, non accadrà nulla. Come esempio, puoi abilitare il modulo aggiuntivo del core Responsive Image e questo permetterà, utilizzando i breakpoint, di visualizzare immagini con preset diversi per differenti breakpoint. Aggiungiamo dunque i breakpoint al nostro tema.

Un breakpoint è composto da un’intestazione e una media query. La media query è il modo standard per descrivere un breakpoint. Ad esempio, per un breakpoint di larghezza 40em, si scrive (min-width: 40em). Qui, il breakpoint è solo una media query, ma i breakpoint possono contenere informazioni aggiuntive.

Per aggiungere un breakpoint, è necessario creare il file myTheme.breakpoints.yml. Nel mio caso, il tema si chiama drupalbook, quindi il file sarà drupalbook.breakpoints.yml.

Ogni voce in questo file rappresenta un singolo breakpoint, costituito da un nome macchina che definisce il nome univoco del breakpoint e da elementi secondari che specificano i parametri del breakpoint:

1. label: titolo del breakpoint
2. mediaQuery: testo che determina la dimensione dello schermo del dispositivo per questo breakpoint
3. weight: peso del breakpoint. È possibile impostare breakpoint con dimensioni di mediaQuery sovrapposte, quindi è necessario il peso per determinare quale breakpoint verrà eseguito per primo.
4. multipliers: indica di quanto moltiplicare il numero di pixel per determinare la mediaQuery. Alcuni dispositivi, come l’iPhone, utilizzano schermi retina, dove in realtà vengono usati due pixel fisici per visualizzare un singolo pixel del sito.

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

È necessario aggiungere un file di questo tipo al nostro tema, ma con il nome del tuo tema al posto di drupalbook.

Immagine responsive

Ora attiviamo il modulo Responsive Image:

Ora, se vai nella pagina di modifica degli stili delle immagini responsive:

admin/config/media/responsive-image-style

Puoi entrare nella modifica del preset responsive Narrow:

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

E specificare che prenda le dimensioni Narrow dal nostro tema:

screenshot

Ora puoi impostare i preset per il profilo responsive Narrow separatamente per ciascun breakpoint:

screenshot

Adesso, se impostiamo un campo affinché venga visualizzato tramite il preset Narrow, verranno mostrate immagini diverse in base alle diverse risoluzioni dello schermo:

screenshot