Grid

El grid 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.


Breakpoints y tamaños

Los puntos de interrupción o breakpoint que se han establecido para ajustarse al grid son:

RangoBreakpointColumnasMargenGutterTipoPlataformasLibrerías
0 -719XS420px16pxFluidWeb Mobile Portrait
App Portrait
RDS Mobile
RDS App
720-1023S840px16pxFluidTable Portrait
Web Mobile Landscape
App Landscape
RDS Mobile
RDS App
1024-1439M1244px24pxFluidTable Landscape
Web Desktop
RDS Web
1440-1919L1288px32pxFluidWeb DesktopRDS Web
+1920XL12Auto32pxCentradoWeb DesktopRDS Web

Tipos de grid

Grid Full Width

El Grid Full Width se construye dividiendo la anchura de la pantalla en 12 columnas del mismo tamaño. La anchura de las columnas cambiará en función de la anchura de la pantalla, respetando la proporción del grid.

Grid Sidebar

El Grid Sidebar es aquel que cuenta con el menú lateral a la izquierda de la pantlla colapsado.

Grid Persistent Sidebar

El Grid Sidebar es aquel que cuenta con el menú lateral a la izquierda de la pantlla abierto de forma persistente.

Regla de los Tercios

Introducción a la Regla de los Tercios aplicada a Producto Digital

Ir a Regla de los Tercios

Contribuye

¿Tienes alguna sugerencia? Seguimos trabajando en mejorar Oxygen.

Componentes

Conoce las unidades mínimas para construir productos digitales en Repsol.

Recursos

Descarga y accede a todos los materiales que necesitas para trabajar con el sistema de diseño.