Grillas

[camilembo]

Grillas

Nombre en Obelisco Grillas

Tipo de componente Guía de estilo

Referencias de Bootstrap Containers

¿Qué tenemos en Obelisco actualmente? Grillas en Estándares | UI Kit | Excel con especificaciones de breakpoints de Desarrollo

Requerimiento: actualizar las grillas del sistema de diseño

Descripción Existen inconsistencias entre las grillas actuales del UI Kit que utilizan los diseñadores y las que se usan en desarrollo. Diseño no cuenta con documentación suficiente para entender cuál fue la lógica constructiva de las grillas. Desarrollo basa sus grillas y breakpoints en las que trae de Bootstrap 4.6. Teniendo en cuenta el análisis de estilos de cara a la V2 y la futura migración a Bootstrap, necesitamos definir grillas nuevas que coincidan entre diseño y desarrollo.

Alcance

• Tener grillas establecidas para Desktop, Tablet y Mobile en el UI Kit

[camilembo]

Tenemos este link de XD que nos pasó Lauti para usar de base si lo necesitamos: https://xd.adobe.com/view/c5e691f2-0643-4e9e-a769-f2252af77984-90b5/grid/

[marusaad]

Durante la revisión de tipografía se anotaron cuestiones a tener en cuenta sobre grillas.

Cambios en la page de Grillas del UI Kit Parecería que los estilos de grillas se copiaron y pegaron de otra librería de Figma, por lo que no coinciden con lo que dispone Bootstrap y evidentemente esta decisión se tomó arbitrariamente. Esto se vió, por ejemplo, en la descripción del componente "grilla Columnas" que está en otros idiomas.

La decisión de crear este componente no está documentada, pero lo que sí sabemos es que las grillas son estilos, no componentes, por lo cual no debería existir. A su vez, la división de las columnas ya está documentada para desarrolladores en Storybook y no es relevante para diseñadores en Figma que utilizan los estilos. Por todas estas razones, se eliminó el componente.

El único lugar donde estaba en uso era en el UI Kit realizado para TAD, en el archivo de entregas al área. Ya se avisó al equipo correspondiente.

Además, se eliminaron frames ilustrativos de la page porque no coinciden con las grillas actuales. Y se colocó la nueva plantilla etiquetada con "en revisión".

Cuestones del componente

• El estilo de grilla de 412px debería eliminarse. No es utilizado por el equipo, ya que los frames que proponemos (en estándares y en la diaria) son de 360px.
• Hay que ver las grillas con desarrollo, por cómo vienen de Bootstrap, para poder empatarnos.
• También hay que considerar los breakpoints, y crear grillas responsivas.
• Evaluar si es necesario crear una grilla para Tablet