Qual è l'uso di base del file breakpoints.yml?

Qual è lo scopo dei breakpoint definiti in `breakpoints.yml?

Perché le media query sono definite in breakpoints.yml e non nei file CSS?

8 theming

— Prakhyat
fonte

I punti di interruzione sono i punti in cui si adatta un design reattivo per essere visualizzato correttamente su dispositivi diversi. Il modulo Punti di interruzione standardizza l'uso dei punti di interruzione e consente ai moduli e ai temi di esporre o utilizzare i punti di interruzione reciproci. Il modulo Breakpoint tiene traccia dell'altezza, della larghezza e dei punti di interruzione della risoluzione.

— Clive

Sto solo pensando di implementarlo poiché utilizzo un tema personalizzato basato su Foundation, ma mi sembra che in questo momento questo non abbia alcun significato. Sì, ci sono il modulo di immagini reattive, ma è praticamente tutto ciò per cui è buono. Lo vedo più come una funzionalità futura che è bello avere ma non so se verrà mai usata.

drupal.org/documentation/modules/breakpoint

— kmdhrm

Non è possibile utilizzare i punti di interruzione definiti in un file breakpoints.yml nei CSS senza pre o post-elaborazione. Poiché non utilizziamo processori per lo styling in core, i punti di interruzione sono ancora codificati nei file CSS. In un tema personalizzato sei comunque libero di usare strumenti come Gulp o Grunt e teoricamente sarebbe possibile usare l'input breakpoints.yml per la tua generazione CSS.

Attualmente breakpoints.yml è principalmente interessante per JavaScript (JS). Dai un'occhiata al modulo della barra degli strumenti nel core. Le informazioni sul breakpoint vengono aggiunte all'oggetto JS 'drupalSettings' in 'src / Element / Toolbar.php' in questo modo:

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

Quindi in JS vengono lette le impostazioni di runtime definite sopra.

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

Successivamente viene aggiunto un listener di eventi per punto di interruzione, in modo che "qualcosa" possa essere fatto quando cambiano le dimensioni dello schermo.

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

In caso di modifica è possibile intraprendere diverse azioni per breakpoint.

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 : gli esempi di codice sono presi dal modulo Drupal Toolbar e rimossi. Usa come ispirazione, non come codice funzionale.

Una buona spiegazione sull'uso di JS mediaQueries in generale è disponibile qui: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries

— dmsmidt
fonte