Sistema de diseño
Layout
El layout es la distribución que se hace de los elementos en la pantalla en función de su tamaño, cómo se reparte el contenido y los espacios que debe ocupar para convivir de forma equilibrada con otros elementos.
El layout de los productos digitales de Repsol está pensado para que nos ayude a estructurar contenido en la página. Está planteado de forma dinámica, para que sea fácil de reorganizar el contenido entre resoluciones y distintas pantallas. Esto nos ayuda a garantizar la consistencia entre los distintos productos y herramientas de Repsol.
Reglas de uso del layout
- Se recomienda utilizar el layout como referencia para colocar el contenido y definir su comportamiento al pasar de un breakpoint a otro
- Los layouts se aplican normalmente a la página completa, aunque se pueden aplicar dentro de un contenedor. En caso de aplicar a un contenedor, el breakpoint correspondiente sería el acorde a su ancho.
- Es importante tener en cuenta que los breakpoints más pequeños tienen menos columnas, por lo que elementos que el número de columnas que utiliza un elemento puede ir variando.
Grid general
El layout de los productos digitales de Repsol está pensado para que nos ayude a estructurar contenido en la página. Está planteado de forma dinámica, para que sea fácil de reorganizar el contenido entre resoluciones y distintas pantallas. Esto nos ayuda a garantizar la consistencia entre los distintos productos y herramientas de Repsol.
Tabla de Breakpoints
Por defecto, utilizamos el tamaño XL (1440px) al diseñar en Desktop, y el tamaño XS (375px) al diseñar en Mobile
Breakpoint
Rango
Margen
Gutter
Columnas
Uso
XS
320-719 px
16 px
16 px
4
Mobile default
S
720-1023 px
40 px
16 px
8
Tablet
M
1024-1279 px
44 px
24 px
12
Tablet / Desktop
L
1280-1439 px
64 px
32 px
12
Desktop
XL
1440-1919 px
96 px
32 px
12
Desktop default
XXL
+ 1920 px
Auto
32 px
12 (96px columna)
Desktop centrado
Grids específicos
Los puntos de interrupción o breakpoint que se han establecido para ajustar el layout nos sirven de guía para ver cómo se debe comportar el contenido en función de los tamaños de dispositivo.
Tabla de Breakpoints específicos para layouts con barra lateral
Estos tamaños no están disponibles por debajo del breakpoint M, ya que se considera que en esos casos la sidebar se debe reemplazar por otro tipo de navegación más adecuada para el dispositivo (Menús hamburguesa, expandir la sidebar mediante un overlay, etc.)
Los breakpoints se aplican en el contenedor que queda junto a la sidebar, cuando la vista completa tiene sidebar.
Los breakpoints se aplican en el contenedor que queda junto a la sidebar, cuando la vista completa tiene sidebar.
Breakpoint
Rango
Margen
Gutter
Columnas
Uso
M
1024-1279 px
L: 56px R: 64px
24 px
12
Small
L
1280-1439 px
L: 88px R: 96px
32 px
12
Default
XL
1440-1919 px
Auto
32 px
12
Centrado
M (Persistent)
1024-1279 px
40 px
16 px
12
Small
L (Persistent)
1280-1439 px
L: 92px R: 104px
32 px
12
Default
XL (Persistent)
1440-1919 px
Auto
32 px
12
Centrado
Recursos adicionales
Encuentra más información y documentación específica para cada plataforma
