Abajo hay un resumen de algunos de los proyectos que he estado trabajando. Algunos son proyectos de varios meses y otros de un par de horas.
Si tienes un proyecto en mente, no dudes en contactar conmigo para comentarlo sin compromiso.
2021-04-12
Usando CSS3 grid para diseñar un formulario que se adapta a sobremesa, tableta y móvil con una presentación garantizada
Lo más importante en el diseño de una estructura que aprovecha CSS3 grid para posicionar los elementos es pensar de antemano donde colocar todo.
La belleza de CSS3 grids, es que puedes tener un orden muy distino en varios dispositivos. La primera fila en sobremesa puede ser la última en móvil, sin tener que modificar nada del HTML, tener código duplicado o código solamente para un tipo de dispositivo.
Mediante @media queries, se puede indicar al navegador la estructura que debería de presentarse en pantalla.
En este caso, el objetivo era presentar un formulario de busqueda para una empresa de alquier de coches.
Empecé diseñando la estructura sobre papel, sabiendo que algunos campos necesitaban más espacio que otros, y que el flujo de un campo a otro era importante - No se debía ir de la selección de oficina a un horario y luego de vuelta a otra selección de oficina por ejemplo.
Una vez que la estructura era definida sobre papel, a cada fila se asignaba sus "coordenadas". (También se puede asignar un nombre que el CSS reconoce como referencia). Con estas coordinadas, solo quedaba aplicar a cada div sus coordenadas según el tamaño de pantalla.
