Quelle est l'utilisation de base du fichier breakpoints.yml?

Quel est le but des points d'arrêt définis dans `breakpoints.yml?

Pourquoi les requêtes multimédias sont-elles définies dans breakpoints.yml et non dans des fichiers CSS?

8 theming

— Prakhyat
source

Les points d'arrêt sont l'endroit où une conception réactive s'ajuste afin de s'afficher correctement sur différents appareils. Le module Points d'arrêt standardise l'utilisation des points d'arrêt et permet aux modules et aux thèmes d'exposer ou d'utiliser les points d'arrêt les uns des autres. Le module Breakpoint assure le suivi des points d'arrêt de hauteur, largeur et résolution.

— Clive

Je pense simplement à l'implémenter car j'utilise un thème personnalisé basé sur Foundation, mais il me semble qu'en ce moment cela n'a aucun sens. Oui, il y a le module d'images réactives mais c'est fondamentalement tout ce qu'il est bon pour. Je le vois plus comme une future fonctionnalité qui est bonne, mais je ne sais pas si elle sera utilisée.

drupal.org/documentation/modules/breakpoint

— kmdhrm

Il n'y a aucun moyen d'utiliser les points d'arrêt définis dans un fichier breakpoints.yml en CSS sans pré ou post-traitement. Comme nous n'utilisons pas de processeurs pour le style dans le noyau, les points d'arrêt sont toujours codés en dur dans les fichiers CSS. Dans un thème personnalisé, vous êtes cependant libre d'utiliser des outils comme Gulp ou Grunt et il serait théoriquement possible d'utiliser l'entrée breakpoints.yml pour votre génération CSS.

Actuellement, breakpoints.yml est principalement intéressant pour JavaScript (JS). Jetez par exemple un coup d'œil au module Toolbar dans le noyau. Les informations sur le point d'arrêt sont ajoutées à l'objet JS 'drupalSettings' dans 'src / Element / Toolbar.php' comme ceci:

$breakpoints = static::breakpointManager()->getBreakpointsByGroup('toolbar');
if (!empty($breakpoints)) {
  $media_queries =  array();
  foreach ($breakpoints as $id => $breakpoint) {
    $media_queries[$id] = $breakpoint->getMediaQuery();
  }

  $element['#attached']['drupalSettings']['toolbar']['breakpoints'] = $media_queries;
}

Ensuite, dans JS, les paramètres d'exécution définis ci-dessus sont lus.

var options = $.extend(
  {
    breakpoints: {
      'toolbar.narrow': '',
      'toolbar.standard': '',
      'toolbar.wide': ''
    }
  },
  drupalSettings.toolbar
);

Plus tard, un écouteur d'événements est ajouté par point d'arrêt afin que «quelque chose» puisse être fait lorsque la taille de l'écran change.

for (var label in options.breakpoints) {
  if (options.breakpoints.hasOwnProperty(label)) {
    var mq = options.breakpoints[label];
    var mql = Drupal.toolbar.mql[label] = window.matchMedia(mq);
    mql.addListener(Drupal.toolbar.mediaQueryChangeHandler.bind(null, model, label));
  }
}

En cas de changement, différentes actions peuvent être entreprises par point d'arrêt.

Drupal.toolbar = {
  mediaQueryChangeHandler: function (model, label, mql) {
    switch (label) {
      case 'toolbar.narrow':
        model.set({
          isOriented: mql.matches,
          isTrayToggleVisible: false
        });
        break;

      case 'toolbar.standard':
        // Logic
        break;

      case 'toolbar.wide':
        // Logic
        break;

      default:
        break;
    }
  }
};

Remarque : les exemples de code sont extraits du module Drupal Toolbar et supprimés. Utilisez comme source d'inspiration, pas comme code fonctionnel.

Une bonne explication sur l'utilisation de JS mediaQueries en général peut être trouvée ici: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries

— dmsmidt
source