Qual é o uso básico do arquivo breakpoints.yml?

10

Qual é o propósito dos pontos de interrupção definidos em `breakpoints.yml?

Por que as consultas de mídia são definidas em breakpoints.yml e não em arquivos CSS?

8 theming Prakhyat
fonte
Os pontos de interrupção são onde um design responsivo se ajusta para exibir corretamente em diferentes dispositivos. O módulo Pontos de interrupção padroniza o uso de pontos de interrupção e permite que módulos e temas exponham ou usem os pontos de interrupção uns dos outros. O módulo Breakpoint controla os pontos de interrupção de altura, largura e resolução.
Clive
1
Estou pensando em implementar isso, já que uso o tema personalizado baseado em Foundation, mas parece-me que, no momento, isso não tem sentido algum. Sim, há o módulo de imagens responsivas, mas é basicamente para isso que serve. Eu vejo isso mais como um recurso futuro que é bom ter, mas não sei se ele será usado.
drupal.org/documentation/modules/breakpoint
kmdhrm

Respostas:

7

Não há como usar os pontos de interrupção definidos em um arquivo breakpoints.yml no CSS sem pré ou pós-processamento. Como não usamos processadores para estilizar o núcleo, os pontos de interrupção ainda são codificados nos arquivos CSS. No entanto, em um tema personalizado, você é livre para usar ferramentas como Gulp ou Grunt e, teoricamente, seria possível usar a entrada breakpoints.yml para sua geração de CSS.

Atualmente, o breakpoints.yml é principalmente interessante para JavaScript (JS). Veja, por exemplo, o módulo Barra de ferramentas no núcleo. As informações do ponto de interrupção são adicionadas ao objeto JS 'drupalSettings' em 'src / Element / Toolbar.php' da seguinte maneira:

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

Em JS, as configurações de tempo de execução, conforme definidas acima, são lidas.

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

Posteriormente, um ouvinte de evento é adicionado por ponto de interrupção, para que 'algo' possa ser feito quando o tamanho da tela for alterado.

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

No caso de uma mudança, diferentes ações podem ser realizadas por ponto de interrupção.

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 : os exemplos de código são retirados do módulo Drupal Toolbar e removidos. Use como inspiração, não como código funcional.

Uma boa explicação sobre o uso do JS mediaQueries em geral pode ser encontrada aqui: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries

dmsmidt
fonte