Thread by @fmontes

✨ ¿Responsive design murió? ✨

Yo creo que ¡SI!

...al menos como lo aprendimos hace algunos años.

🧵 Explico y dejo recursos

Responsive design se trata de "responder" al tamaño de la pantalla.

¿El problema? Millones de pantallas llegaron, con color, paper like y hasta plegables.

Solo media queries no es suficiente... tenemos que maquetar "adaptativamente" o "elásticamente"

El @csswg o como a mí me gusta llamarlo "El estándar" lo notaron así que empezaron a trabajar.

✨ Flexbox ✨

Que ajusta tamaño y posición de cajas en función de su relación con cajas hermanas.

developer.mozilla.org/en-US/docs/Web…

Flexbox es perfecto para organizar los elementos de los componentes y desarrollar componentes que se adaptan al espacio que los contiene.

Algunas propiedades clave de Flexbox que debes aprender como funcionan:

- flex-basis
- flex-grow
- flex-shrink
- flex-wrap

Flexbox resuelve al nivel de components, pero ¿y al nivel de más arriba? ¿el layout?

✨ CSS Grids ✨

Con capacidad de controlar el tamaño y la posición de las cajas y su contenido.

developer.mozilla.org/en-US/docs/Web…

Es decir, CSS Grids nos permite crear "los espacios correctos" para poner los componentes.

Además de entender las propiedades:

- grid-template-columns
- grid-template-rows

Es importante entender...

Las funciones
- repeat()
- minmax()

Entender la diferencia entre auto-fit y auto-fill

Y aprender como funciona la unidad "fr"

Y ya que hablamos de unidades...

✨ Unidades relativas ✨

Suuuuuper importante aprenderlas, como funcionan y cuando usarlas:

- em
- rem
- ch
- vw
- vh
- vmin
- vmax

Aprende esas, pero hay muchas más:

developer.mozilla.org/en-US/docs/Lea…

¿Y qué hacemos con el contenido? Bueno usamos los

✨ CSS sizing properties ✨

- min-content
- max-content
- fit-content

@logrocket tiene un post que lo explica bien: blog.logrocket.com/understanding-…

Y siguiendo, aprende como funcionan los "min" y "max"

- min-width
- min-height
- max-width
- max-height

Te dejo el link al primero y la tarea para que investigues el resto

developer.mozilla.org/en-US/docs/Web…

Y luego... ¿Las imágenes?

Te interesa aprender a usar 3 propiedades:

- aspect-ratio
- object-fit
- background-size

Nuevamente, te dejo el primero: developer.mozilla.org/en-US/docs/Web… y tu te encargas de investigar el resto.

Para cerrar

✨ Container Queries ✨

Crea reglas para los elementos basados en el tamaño del "padre" que los contiene:

developer.mozilla.org/en-US/docs/Web…

¡Esto vino a cambiar todo! y te disminuye aún más la dependencia en media queries.

Para finalizar, los media queries no han muerto, pero si ha cambiado muchísimo la manera como los usamos.

❤️ Si te gustó este contenido

👋🏽 Sígueme para más

🌅 Mi Instagram comparto tips sobre diseño, desarrollo y empleos.

instagram.com/fmontes

Para lucirte en las entrevistas técnicas escribimos este libro:
99.tips

Y para tips este #ebook fmontes.com/99