Travail avec les breakpoints dans Drupal 8
Dans Drupal 8, il n’existe pas d’interface utilisateur pour éditer les breakpoints. Puisque les breakpoints sont définis dans des fichiers de configuration, il est également impossible de fournir une interface utilisateur dans les modules contrib.
Les breakpoints sont utilisés pour diviser la hauteur ou la largeur des zones d’affichage (écrans, imprimantes et autres médias) en étapes, permettant d’adapter le design réactif afin qu’il s’affiche correctement sur différents appareils. Le module Breakpoints standardise l’usage des breakpoints et permet aux modules et thèmes d’en définir ou d’en utiliser mutuellement. Le module Breakpoints suit les breakpoints en fonction de la hauteur, la largeur et la résolution.
Notez que vous devez uniquement déclarer vos breakpoints CSS dans un fichier breakpoints.yml lorsque Drupal doit interagir avec ces breakpoints, comme c’est le cas avec le module Responsive Images.
Terminologie
Breakpoints
Un breakpoint est composé d’un label et d’une media query. Les media queries sont la manière formelle de coder les breakpoints. Par exemple, un breakpoint à 40em de largeur est codé par la media query '(min-width: 40em)'. Les breakpoints sont en réalité des media queries avec des métadonnées supplémentaires telles que le nom et le multiplicateur.
Les thèmes et modules peuvent définir des breakpoints en créant un fichier de configuration nommé myThemeOrModule.breakpoints.yml, où myThemeOrModule est le nom de votre thème ou module.
Chaque entrée de ce fichier définit un breakpoint identifié de manière unique par un nom machine, par exemple bartik.mobile, avec ses propriétés :
- label – libellé lisible du breakpoint.
- mediaQuery – le texte de la media query, ex. 'all and (min-width: 851px)'.
- weight – poids positionnel (ordre) du breakpoint.
- multipliers – multiplicateurs de résolution d’écran pris en charge.
Note : L’ordre des breakpoints selon leur poids est très important. Les breakpoints avec la plus petite largeur minimale doivent avoir le poids le plus faible, et ceux avec la plus grande largeur minimale un poids plus élevé. Par défaut, les modules ordonnent les breakpoints du plus petit au plus grand. Cependant, des modules comme Responsive Image peuvent modifier cet ordre pour l’inverser.
Exemple (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
Groupe de breakpoints
Les breakpoints peuvent être organisés en groupes. Modules et thèmes doivent utiliser des groupes pour séparer les breakpoints destinés à différents usages, comme les breakpoints pour la mise en page ou pour la définition de tailles d’images.
Un groupe de breakpoints est une combinaison de breakpoints. Chaque thème ou module peut définir zéro ou plusieurs groupes de breakpoints. Le groupe est créé via des identifiants spéciaux et la clé group du breakpoint. La déclaration d’un groupe est optionnelle ; sans groupe précisé, le groupe porte le même nom que votre thème ou module.
Par exemple, dans yourtheme.breakpoints.yml, vous pouvez créer deux groupes de 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
Le nom machine du breakpoint commence par le nom machine du thème ou module, suivi du nom machine du groupe, et la clé group reprend ce même identifiant theme/module.group. Tous les breakpoints avec cette clé apparaissent dans le même groupe.
À ce jour, il est impossible de créer une étiquette personnalisée pour les groupes de breakpoints en dehors du nom machine qui sert de clé de groupe. C’est cette étiquette qui s’affichera, par exemple dans l’interface du module Responsive Image lors du choix d’un groupe de breakpoints.
Utilisation avancée
Vous pouvez aussi ajouter un breakpoint à un groupe de breakpoints défini par un autre module ou thème, à condition d’utiliser le nom complet.
Par exemple, dans yourmodule.breakpoints.yml :
yourmodule.yourtheme.group2.superwide:
label: superwide
mediaQuery: '(min-width: 1501px)'
weight: 1
multipliers:
- 1x
- 2x
group: yourtheme.group2
Cela ajoute un breakpoint défini dans votre module au groupe de breakpoints défini dans votre thème.
Multiplicateurs
Les multiplicateurs représentent la résolution de l’appareil de la zone d’affichage, exprimée comme le rapport entre la taille physique du pixel de l’appareil et la taille indépendante de l’appareil. Par exemple, les écrans « retina » ont un multiplicateur de 2x.
Le module Breakpoint définit par défaut les multiplicateurs 1x, 1.5x et 2x. Lors de la définition d’un breakpoint, les modules et thèmes peuvent spécifier les multiplicateurs applicables.
Exemple :
'1.5x' // prend en charge Android '2x' // prend en charge l’écran retina Mac
Recharger les nouveaux fichiers breakpoint
Si vous ajoutez un nouveau fichier de configuration breakpoint pendant le test de votre thème, vous pouvez reconstruire les caches pour voir les nouveaux breakpoints apparaître.