Работа с breakpoints в Drupal 8

В Drupal 8 нет пользовательского интерфейса для редактирования breakpoints. Из-за того, что breakpoints определены в файлах конфигурации, также невозможно предоставить пользовательский интерфейс в contrib.

Breakpoints используются для разделения высоты или ширины областей просмотра (экранов, принтеров и других типов вывода мультимедиа) на этапы и обеспечивают случай, когда адаптивный дизайн настраивается для правильного отображения на разных устройствах. Модуль Breakpoints стандартизирует использование breakpoints и позволяет модулям и темам выставлять или использовать breakpoints друг друга. Модуль Breakpoints отслеживает breakpoints по высоте, ширине и разрешению.

Обратите внимание, что ввод ваших breakpoints CSS в файл breakpoints.yml необходим только тогда, когда Drupal необходимо взаимодействовать с breakpoints, как в случае с модулем Responsive Images.

Терминология

Breakpoints

Breakpoints состоит из метки и медиа-запроса. Медиа-запросы - это формальный способ кодирования breakpoints. Например, breakpoints ширины в 40em записывается как медиа-запрос '(min-width: 40em)'. Breakpoints на самом деле являются просто медиа-запросами с некоторыми дополнительными метаданными, такими как информация об имени и множителе.

Темы и модули могут определять Breakpoints, создавая файл конфигурации с именем myThemeOrModule.breakpoints.yml, где myThemeOrModule - это название вашей темы или модуля.

Каждая запись в этом файле определяет одну Breakpoints, состоящую из имени компьютера, по которому уникально идентифицируется запись точки останова, например, bartik.mobile и его дочерние элементы, определяющие свойства точки останова:

• label - удобочитаемая метка для breakpoint.
• mediaQuery - собственно текст медиа-запроса, например, 'all and (min-width: 851px)'.
• weight - Позиционный вес (заказ) для breakpoint.
• multipliers - Поддерживаемые множители разрешения пикселей.

Примечание. Порядок расположения Breakpoints по значению их веса чрезвычайно важен. Breakpoints с наименьшей минимальной шириной должны иметь наименьший вес, а Breakpoints с наименьшей минимальной шириной должны иметь большее значение веса. По умолчанию модули упорядочивают Breakpoints от наименьшего к наибольшему. Однако модули могут изменить этот порядок в случае необходимости: например, модуль Responsive Image заботится о переупорядочении Breakpoints от самых больших до самых маленьких в зависимости от значения веса.

Пример (bartik.breakpoints.yml):

bartik.mobile:
  label: mobile
  mediaQuery: ''
  weight: 0
  multipliers:
    - 1x
bartik.narrow:
  label: narrow
  mediaQuery: 'all and (min-width: 560px) and (max-width: 850px)'
  weight: 1
  multipliers:
    - 1x
bartik.wide:
  label: wide
  mediaQuery: 'all and (min-width: 851px)'
  weight: 2
  multipliers:
    - 1x

Breakpoint group

Breakpoints могут быть организованы в группы. Модули и темы должны использовать группы для разделения Breakpoints, которые должны использоваться для различных целей, таких как Breakpoints для макетов или Breakpoints для определения размера изображения.

Breakpoint group - это комбинация точек останова. Каждая тема или модуль может определять ноль или более breakpoint group. Breakpoint создается с помощью специальных идентификаторов и ключей Breakpoint. Указывать группу необязательно, если вы не укажете группу, группа будет называться так же, как ваша тема или модуль.

Например, в yourtheme.breakpoints.yml вы можете создать следующие две breakpoint groups:

yourtheme.group1.mobile:
  label: narrow
  mediaQuery: ''
  weight: 0
  multipliers:
    - 1x
  group: yourtheme.group1
yourtheme.group1.narrow:
  label: narrow
  mediaQuery: '(min-width: 560px)'
  weight: 0
  multipliers:
    - 1x
    - 2x
  group: yourtheme.group1
yourtheme.group1.wide:
  label: wide
  mediaQuery: '(min-width: 851px)'
  weight: 1
  multipliers:
    - 1x
    - 2x
  group: yourtheme.group1

yourtheme.group2.mobile:
  label: narrow
  mediaQuery: ''
  weight: 0
  multipliers:
    - 1x
  group: yourtheme.group2
yourtheme.group2.narrower:
  label: narrow
  mediaQuery: '(min-width: 400px)'
  weight: 0
  multipliers:
    - 1x
    - 2x
  group: yourtheme.group2
yourtheme.group2.wider:
  label: wide
  mediaQuery: '(min-width: 1001px)'
  weight: 1
  multipliers:
    - 1x
    - 2x
  group: yourtheme.group2

Запуск идентификатора breakpoints с именем машины темы или модуля, точки, а затем имени машины для группы, а затем использование того же идентификатора theme/module.group в ключе группы - это то, что создает breakpoint groups. Все breakpoint  с теми же наборами ключей появятся в одной breakpoint groups.

В настоящее время невозможно создать пользовательскую метку для breakpoint groups за пределами имени машины, которое отображается в ключе группы. Это то, что будет отображаться в качестве метки, например, при выборе breakpoint groups в пользовательском интерфейсе модуля Responsive Image.

Расширенное использование

Вы также можете добавить breakpoint в breakpoint groups, определенные другими модулями или темами, но вы должны использовать полное имя.

Например, в yourmodule.breakpoints.yml вы можете сделать следующее:

yourmodule.yourtheme.group2.superwide
  label: superwide
  mediaQuery: '(min-width: 1501px)'
  weight: 1
  multipliers:
    - 1x
    - 2x
  group: yourtheme.group2

Это добавит breakpoint, определенную в вашем модуле, к breakpoint groups, определенной в вашей теме.

Множители

Множители представляют собой меру разрешения устройства области просмотра, определяемую как соотношение между физическим размером пикселя активного устройства и независимым от устройства размером пикселя. Например, дисплеи «retina» имеют множитель 2x.

Модуль Breakpoint определяет множители 1x, 1,5x и 2x. При определении breakpoint модули и темы могут определять, какие множители применяются к каждой breakpoint.

Пример:

'1.5x' // supports Android
   '2x' // supports Mac retina display

Загрузить новые файлы  breakpoint

Если вы добавите новый файл конфигурации breakpoint  во время тестирования темы, вы можете перестроить кэши для просмотра новых  breakpoint.

Ресурсы

• Медиа-запросы: рекомендация W3C 19 июня 2012 г.
• Breakpoint-sass.com