Resumen

Llegó el momento que nos pongamos rudos y definamos cómo se va a comportar nuestro sistema. Para esto necesitamos crear un sistema de columnas.

  • Antes de hacerlo vamos a cuestionar si usaremos un layout al que tengamos que seguir, pues esto es bastante importante para la reglamentación de nuestro grid.
  • Utilizaremos el sistema de doce columnas como lo hace Bootstrap, basados en un layout.
  • Una vez definido tenemos cómo funcionan nuestras columnas, el departamento de diseño tienen que estimar cómo es que sus componentes se van a comportar y para ello este sistema les ayudara cuando estén diseñando.
  • Una parte importante es que el documento de diseño como programación, siga las mismas reglas.
  • Dentro de nuestro wrapper, donde definiremos el contenido construiremos los grid, podemos basarnos en librerías de grids que ya existen en internet, solo tenemos que modificar los estilos para que tengan sentido dentro de nuestro sistema.
  • Hay tres cosas importantes qué definir dentro del grid de nuestro sistema:
  1. Nomenclatura de columnas
  2. Nomenclatura de los brakepoints
  3. Obtener los tokens de nuestro sistema para esta definición.