Grids y Responsive

Desde hace ya tiempo CSS va comiéndole terreno a jQuery, a medida que los cambios en CSS3 se estandaricen y se hagan «más crossbrowser», este hecho se hará más palpable y las interfaces de las web apps de andar por casa necesitarán poco (o ningún) Javascript.

La irrupción masiva de móviles y tablets en el mercado de dispositivos crea la necesidad, a desarrolladores y diseñadores de interfaz, de unificar código para web y móvil sin tener que rehacer o discriminar vista web/vista móvil.

El concepto rejilla o grid, o cajas, se adapta perfectamente para dividir información que ha de clasificarse en una aplicación, ya sean imágenes, columnas textuales o productos de una tienda. Trabajar de esta forma permite adaptar rápidamente y naturalmente el paso de una pantalla a otra. Hay nuevas propiedades de CSS3 que nos van a permitir definir este tipo de diseños con mayor facilidad que hasta ahora.

Display:grid / Display: flex (y todas sus variantes). Y esto solamente es pasar de puntillas. En resumen con esto por ejemplo crear menús responsive sin necesidad de utilizar jQuery con la misma estructura de CSS para web y móvil. Aquí tenemos un ejemplo.

Dejo varios enlaces para estudiar sobre el tema e ir utilizándolos en proyectos:

Propiedad CSS Grid Grid

Guía para crear interfaces con Flexbox

Mini Framework CSS basado en Flexbox: Flexbox Grid

CSS Grid Layout

Dejar un comentario

Tu dirección de correo electrónico no será publicada.