¿Cuál es el uso básico del archivo breakpoints.yml?

10

¿Cuál es el propósito de los puntos de interrupción definidos en `breakpoints.yml?

¿Por qué las consultas de medios se definen en breakpoints.yml y no en archivos CSS?

8 theming Prakhyat
fuente
Los puntos de interrupción son donde un diseño receptivo se ajusta para mostrarse correctamente en diferentes dispositivos. El módulo de puntos de interrupción estandariza el uso de puntos de interrupción y permite que los módulos y temas expongan o usen los puntos de interrupción de los demás. El módulo de punto de interrupción realiza un seguimiento de los puntos de interrupción de altura, ancho y resolución.
Clive
1
Solo estoy pensando en implementar esto ya que uso un tema personalizado basado en la Fundación, pero me parece que en este momento esto no tiene ningún significado. Sí, existe el módulo de imágenes receptivas, pero eso es básicamente todo para lo que es bueno. Lo veo más como una característica futura que es bueno tener, pero no sé si alguna vez se usará.
drupal.org/documentation/modules/breakpoint
kmdhrm

Respuestas:

7

No hay forma de usar los puntos de interrupción definidos en un archivo breakpoints.yml en CSS sin procesamiento previo o posterior. Como no utilizamos procesadores para diseñar en el núcleo, los puntos de interrupción todavía están codificados en los archivos CSS. Sin embargo, en un tema personalizado puede usar herramientas como Gulp o Grunt y, en teoría, sería posible usar la entrada breakpoints.yml para su generación de CSS.

Actualmente, breakpoints.yml es principalmente interesante para JavaScript (JS). Eche un vistazo al módulo de la barra de herramientas en el núcleo. La información del punto de interrupción se agrega al objeto JS 'drupalSettings' en 'src / Element / Toolbar.php' así:

$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;
}

Luego, en JS, se lee la configuración del tiempo de ejecución como se definió anteriormente.

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

Más tarde, se agrega un detector de eventos por punto de interrupción para que se pueda hacer "algo" cuando cambia el tamaño de la pantalla.

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 caso de cambio, se pueden realizar diferentes acciones por punto de interrupción.

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;
    }
  }
};

Nota : los ejemplos de código se toman del módulo Drupal Toolbar y se eliminan. Úselo como inspiración, no como código funcional.

Puede encontrar una buena explicación sobre el uso de JS mediaQueries en general aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries

dmsmidt
fuente