Lavorare con i breakpoints in Drupal 8
In Drupal 8 non esiste un’interfaccia utente per modificare i breakpoints. Poiché i breakpoints sono definiti nei file di configurazione, non è possibile fornire un’interfaccia utente nemmeno nei moduli contrib.
I breakpoints vengono utilizzati per suddividere l’altezza o la larghezza delle viewport (schermi, stampanti e altri tipi di output multimediale) in intervalli e consentono al design responsive di adattarsi correttamente alla visualizzazione su diversi dispositivi. Il modulo Breakpoints standardizza l’uso dei breakpoints e permette a moduli e temi di esporre o utilizzare i breakpoints degli altri. Il modulo Breakpoints tiene traccia dei breakpoints in base ad altezza, larghezza e risoluzione.
Nota che l’inserimento dei tuoi breakpoints CSS in un file breakpoints.yml è necessario solo quando Drupal deve interagire con i breakpoints, come nel caso del modulo Responsive Images.
Terminologia
Breakpoints
Un breakpoint è composto da un’etichetta e da una media query. Le media query sono il modo formale di codificare i breakpoints. Ad esempio, un breakpoint di larghezza a 40em viene scritto come media query ‘(min-width: 40em)’. I breakpoints in realtà sono semplicemente media query con alcuni metadati aggiuntivi, come nome e moltiplicatori.
I temi e i moduli possono definire Breakpoints creando un file di configurazione chiamato myThemeOrModule.breakpoints.yml, dove myThemeOrModule è il nome del tuo tema o modulo.
Ogni voce in questo file definisce un breakpoint, composto da un nome macchina che lo identifica univocamente, ad esempio bartik.mobile e le sue proprietà:
- label – etichetta leggibile per il breakpoint.
- mediaQuery – il testo della media query, ad esempio ‘all and (min-width: 851px)’.
- weight – peso (ordine) per il breakpoint.
- multipliers – moltiplicatori di risoluzione dei pixel supportati.
Nota: L’ordine dei Breakpoints in base al peso è estremamente importante. I breakpoints con larghezza minima più piccola devono avere il peso minore, mentre quelli con larghezza minima più grande devono avere un peso maggiore. Per impostazione predefinita i moduli ordinano i breakpoints dal più piccolo al più grande. Tuttavia i moduli possono modificare quest’ordine se necessario: ad esempio, il modulo Responsive Image si occupa di riordinare i breakpoints dal più grande al più piccolo in base al valore di peso.
Esempio (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
I breakpoints possono essere organizzati in gruppi. Moduli e temi devono utilizzare gruppi per distinguere i breakpoints che servono a scopi diversi, ad esempio breakpoints per i layout o breakpoints per le dimensioni delle immagini.
Un breakpoint group è una combinazione di breakpoints. Ogni tema o modulo può definire zero o più breakpoint group. Un breakpoint viene creato utilizzando identificatori e chiavi speciali. Specificare un gruppo non è obbligatorio: se non lo indichi, il gruppo avrà lo stesso nome del tema o modulo.
Ad esempio, in yourtheme.breakpoints.yml puoi creare i seguenti due gruppi di breakpoints:
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
L’utilizzo dell’identificatore che inizia con il nome macchina del tema o modulo, seguito dal nome del gruppo e poi utilizzando lo stesso identificatore nel campo group, è ciò che crea i breakpoint group. Tutti i breakpoint con gli stessi set di chiavi appariranno nello stesso gruppo.
Attualmente non è possibile creare un’etichetta personalizzata per i breakpoint group al di fuori del nome macchina mostrato nella chiave group. Questo è ciò che viene mostrato come etichetta, ad esempio, quando si selezionano i gruppi di breakpoints nell’interfaccia del modulo Responsive Image.
Uso avanzato
Puoi anche aggiungere un breakpoint a un gruppo definito da altri moduli o temi, ma devi utilizzare il nome completo.
Ad esempio, in yourmodule.breakpoints.yml puoi fare così:
yourmodule.yourtheme.group2.superwide
label: superwide
mediaQuery: '(min-width: 1501px)'
weight: 1
multipliers:
- 1x
- 2x
group: yourtheme.group2
Questo aggiungerà un breakpoint definito nel tuo modulo al gruppo di breakpoints definito nel tuo tema.
Moltiplicatori
I moltiplicatori rappresentano una misura della risoluzione del dispositivo, definita come rapporto tra la dimensione fisica del pixel del dispositivo e la dimensione del pixel indipendente dal dispositivo. Ad esempio, i display “retina” hanno un moltiplicatore 2x.
Il modulo Breakpoint definisce i moltiplicatori 1x, 1.5x e 2x. Quando si definisce un breakpoint, moduli e temi possono indicare quali moltiplicatori sono supportati.
Esempio:
'1.5x' // supporta Android '2x' // supporta Mac retina display
Caricare nuovi file breakpoint
Se aggiungi un nuovo file di configurazione breakpoint durante lo sviluppo di un tema, puoi ricostruire le cache per vedere i nuovi breakpoint.