Trabajo con breakpoints en Drupal 8
En Drupal 8 no existe una interfaz de usuario para editar breakpoints. Debido a que los breakpoints están definidos en archivos de configuración, tampoco es posible proveer una interfaz en contrib.
Los breakpoints se utilizan para dividir la altura o anchura de las áreas de visualización (pantallas, impresoras y otros tipos de salida multimedia) en etapas y proporcionar un caso donde el diseño responsivo se ajusta para mostrarse correctamente en diferentes dispositivos. El módulo Breakpoints estandariza el uso de breakpoints y permite que módulos y temas establezcan o utilicen los breakpoints de otros. El módulo Breakpoints rastrea breakpoints basados en altura, anchura y resolución.
Ten en cuenta que la introducción de tus breakpoints CSS en un archivo breakpoints.yml solo es necesaria cuando Drupal necesita interactuar con los breakpoints, como en el caso del módulo Responsive Images.
Términos
Breakpoints
Un breakpoint consiste en una etiqueta y una media query. Las media queries son la forma formal de codificar los breakpoints. Por ejemplo, un breakpoint de anchura de 40em se codifica como la media query '(min-width: 40em)'. Los breakpoints son en realidad simplemente media queries con algunos metadatos adicionales, como información de nombre y multiplicador.
Temas y módulos pueden definir breakpoints creando un archivo de configuración llamado myThemeOrModule.breakpoints.yml, donde myThemeOrModule es el nombre de tu tema o módulo.
Cada entrada en este archivo define un breakpoint, identificado de forma única por un nombre de máquina, por ejemplo bartik.mobile, y sus propiedades asociadas:
- label – una etiqueta legible para el breakpoint.
- mediaQuery – el texto de la media query, por ejemplo 'all and (min-width: 851px)'.
- weight – peso posicional (orden) para el breakpoint.
- multipliers – multiplicadores soportados para la resolución de píxeles.
Nota. El orden de los breakpoints basado en el valor de su peso es extremadamente importante. Los breakpoints con la menor anchura mínima deben tener el menor peso, y los breakpoints con la mayor anchura mínima deben tener un peso mayor. Por defecto, los módulos ordenan los breakpoints de menor a mayor. Sin embargo, módulos pueden cambiar este orden cuando sea necesario: por ejemplo, el módulo Responsive Image reordena los breakpoints de mayor a menor según el peso.
Ejemplo (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
Grupo de breakpoints
Los breakpoints pueden organizarse en grupos. Módulos y temas deben usar grupos para separar los breakpoints que deben usarse para diferentes propósitos, tales como breakpoints para diseños o breakpoints para determinar tamaños de imagen.
Un grupo de breakpoints es una combinación de breakpoints. Cada tema o módulo puede definir cero o más grupos de breakpoints. Un breakpoint se crea con un identificador especial y claves de breakpoint. No es obligatorio especificar un grupo; si no lo haces, el grupo tendrá el mismo nombre que tu tema o módulo.
Por ejemplo, en yourtheme.breakpoints.yml puedes crear estos dos grupos de breakpoints:
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
El prefijo del identificador de breakpoints con el nombre de máquina del tema o módulo, el nombre de la breakpoint y luego el nombre de máquina del grupo, y el uso del mismo identificador theme/module.group en la clave group, es lo que crea los grupos de breakpoints. Todos los breakpoints con las mismas claves aparecerán en un mismo grupo de breakpoints.
Actualmente no es posible crear una etiqueta personalizada para grupos de breakpoints fuera del nombre de máquina que aparece en la clave group. Esto será la etiqueta que se muestre, por ejemplo, al seleccionar grupos de breakpoints en la interfaz del módulo Responsive Image.
Uso avanzado
También puedes añadir un breakpoint a grupos de breakpoints definidos por otros módulos o temas, pero debes usar el nombre completo.
Por ejemplo, en yourmodule.breakpoints.yml puedes hacer lo siguiente:
yourmodule.yourtheme.group2.superwide:
label: superwide
mediaQuery: '(min-width: 1501px)'
weight: 1
multipliers:
- 1x
- 2x
group: yourtheme.group2
Esto añadirá el breakpoint definido en tu módulo al grupo de breakpoints definido en tu tema.
Multiplicadores
Los multiplicadores son una medida de la resolución del dispositivo del área de visualización, definida como la relación entre el tamaño físico del píxel del dispositivo activo y el tamaño del píxel independiente del dispositivo. Por ejemplo, las pantallas “retina” tienen un multiplicador 2x.
El módulo Breakpoint define multiplicadores 1x, 1.5x y 2x. Al definir un breakpoint, módulos y temas pueden definir qué multiplicadores se aplican a cada breakpoint.
Ejemplo:
'1.5x' // soporta Android '2x' // soporta pantallas retina de Mac
Cargar nuevos archivos de breakpoint
Si añades un nuevo archivo de configuración de breakpoint durante las pruebas del tema, puedes reconstruir las cachés para que se detecten los nuevos breakpoints.
Recursos
Drupal’s online documentation is © 2000-2020 by the individual contributors and can be used in accordance with the Creative Commons License, Attribution-ShareAlike 2.0. PHP code is distributed under the GNU General Public License.