Was ist die grundlegende Verwendung der Datei breakpoints.yml?

10

Was ist der Zweck von Haltepunkten, die in `breakpoints.yml definiert sind?

Warum werden die Medienabfragen in breakpoints.yml und nicht in CSS-Dateien definiert?

8 theming Prakhyat
quelle
An Haltepunkten wird ein ansprechendes Design angepasst, um auf verschiedenen Geräten korrekt angezeigt zu werden. Das Haltepunktmodul standardisiert die Verwendung von Haltepunkten und ermöglicht es Modulen und Themen, die Haltepunkte der anderen freizulegen oder zu verwenden. Das Haltepunktmodul verfolgt die Haltepunkte für Höhe, Breite und Auflösung.
Clive
1
Ich denke nur darüber nach, dies zu implementieren, da ich ein Foundation-basiertes benutzerdefiniertes Thema verwende, aber es scheint mir, dass dies im Moment überhaupt keine Bedeutung hat. Ja, es gibt das Modul für reaktionsschnelle Bilder, aber das ist im Grunde alles, wofür es gut ist. Ich sehe es eher als eine zukünftige Funktion, die gut zu haben ist, aber ich weiß nicht, ob sie jemals verwendet wird.
drupal.org/documentation/modules/breakpoint
kmdhrm

Antworten:

7

Es gibt keine Möglichkeit, die in einer breakpoints.yml-Datei definierten Haltepunkte in CSS ohne Vor- oder Nachbearbeitung zu verwenden. Da wir im Core keine Prozessoren für das Styling verwenden, sind die Haltepunkte in den CSS-Dateien immer noch fest codiert. In einem benutzerdefinierten Design können Sie jedoch Tools wie Gulp oder Grunt verwenden, und es wäre theoretisch möglich, die Eingabe breakpoints.yml für Ihre CSS-Generierung zu verwenden.

Derzeit ist die Datei breakpoints.yml hauptsächlich für JavaScript (JS) interessant. Schauen Sie sich zum Beispiel das Toolbar-Modul im Kern an. Die Haltepunktinformationen werden dem JS-Objekt 'drupalSettings' in 'src / Element / Toolbar.php' wie folgt hinzugefügt:

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

Dann werden in JS die oben definierten Laufzeiteinstellungen eingelesen.

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

Später wird ein Ereignis-Listener pro Haltepunkt hinzugefügt, damit bei Änderungen der Bildschirmgröße etwas unternommen werden kann.

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

Im Falle einer Änderung können pro Haltepunkt verschiedene Aktionen ausgeführt werden.

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

Hinweis : Die Codebeispiele stammen aus dem Drupal-Symbolleistenmodul und werden entfernt. Verwenden Sie als Inspiration, nicht als Funktionscode.

Eine gute Erklärung zur Verwendung von JS mediaQueries im Allgemeinen finden Sie hier: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries

dmsmidt
quelle