5

Puntos clave del Curso de Diseño Web con CSS Grid y Flexbox

Flujo del documento

El flujo normal es el como se comportan los elementos de HTML por defecto, es decir, como elementos en bloque, este comportamiento se puede alterar con el valor inline y sus variantes.

  • block: puede tener ancho, alto, padding, margin y básicamente lo que hace es ocupar todo su ancho disponible.

  • display: inline-flex; En este caso, flex es el comportamiento interno del contenedor, mientras que inline es el comportamiento externo del contenedor ante todo el HTML. Lo mismo pasa con inline-grid y también con grid y flex (que en realidad son block-grid y block-flex).

    • Primer valor: Comportamiento externo de un contenedor.
    • Segundo valor: Comportamiento interno de un contendor.

*inline funciona como si fuesen palabras, no ocupan todo el ancho y se van pegando unos elementos al lado de otros. Los elemento inline no pueden tener un ancho, alto, etc…

Contexto de Bloque (BFC)

El contexto de bloque son basicamente mini estructuras dentro de nuestra estructura general, nuestro html layout. Se caracteriza por contener elementos flotantes.
.
Un ejemplo de creación de BFC es cuando usamos position;absolute y/o position fixed. Estas propiedades y valores sacan el contenedor del flujo normal del documento.
.
Flexbox y CSS Grid también crean un BFC, pero no se llaman igual. Se llaman Contexto de Formato Flexible y Contexto de Formato de Cuadricula, respectivamente.

Posicionamiento

Las posiciones nos permiten ubicar los bloques unos al lado de otros, encima, debajo u arriba.
.
Cuando estamos creando y diseñando para la web debemos tener en cuenta 3 ejes:

  • Eje Y: apunta hacía arriba o abajo.
  • Eje X: apunta hacía los lados.
  • Eje Z: apunta hacía el usuario (se sale de la pantalla). Es un eje imaginario pero se debe tener muy en cuenta. Un caso muy común donde lo podemos ver es en los modales que se sobreponen a los demás elementos.

Contexto de apilamiento

El contexto de apilamiento es como una “pila” que se va sobreponiendo o anteponiendo a los demás elementos HTML. Aquí algunas formas en las cuales podemos manejar el contexto de apilamiento:

Flexbox y CSS Grid


¿Diferencias?

  • Flexbox es un sistema unidimensional. Solo en una dirección, de forma vertical u horizontal.
  • CSS Grid es sistema de diseño bidimensional. Nos permitirá ubicar elementos en filas y columnas.

¿Similitudes?

  • Relaciones entre padres e hijos inmediatos. Los padres tienen hijos y los hijos pueden tener padres.
  • Los dos cuentan con propiedades para alinear los métodos en sus respectivos ejes. justify (inline axis) align (block axis).

¿Cuando usar cada uno?
.
Flexbox es más recomendado para componentes pequeños, de una escala pequeña en todo el layout de nuestro sitio.
.
CSS Grid está diseñado para elementos de mayor escala. Como la estructura de todo un sitio web.
.
Sí se puede y es muy recomendable usarlos juntos.

Design system

Un Design System es un conjunto de componentes reutilizables guiados por unos estándares. Puede ser creado por diseñadores (principalmente), desarrolladores, product managers, etc…
.
Un Design System es, entonces:

  • Un plan maestro
  • La fuente de toda la verdad
  • Una referencia para que todos trabajan de la misma forma (consistencia)

Ponernos las gafas de un Dev

Ponernos las gafas de desarrollador es trabajar primero la estructura principal de un diseño y luego en los detalles.
.
Principios de diseño:

  • Planificar antes de diseñar y antes de escribir cualquier línea de código
  • Tener jerarquía (elementos más grandes que otros)
  • Tener buen contraste (colores en botones)
  • Tener proximidad (alejar elementos por mini-secciones)
  • Tener balance. Pueden tene el mismo tamaño pero ser más relevantes.

Algunas tendencias de diseño:

  • Ilustraciones animadas
  • Micro-interacciones. Darle a entender a él usuario de que si está realizando alguna acción
  • Neumorphism. Es una tendencia que quiere lograr que todo el diseño sea muy “soft”. Hacer que los componentes y colores sean semejantes.
  • Asymmetrical layout. Elementos ubicados en diferentes posiciones de una página de forma no simétrica.
  • Storytelling. Ir contándole una historia al usuario a medida que hace scroll.

El futuro de CSS Grid

  • No habrá CSS4 pero habrán actualizaciones que irán agregando nuevas funcionalidades a CSS o bien, CSS3.
  • CSS Subgrid es una nueva funcionalidad de CSS que hereda el mismo tamaño y número de tracks de una cuadricula principal (está en proceso y aún no es estándar, no se debería usar).
  • Native CSS Massonry Layout: es un layout similar al de Pinterest, ahora mismo no se tiene de forma nativa pero se esta trabajando en él para que podamos usarlo solo con CSS.
  • CSS feature queries: @support: con @support podemos escribir una mini prueba de CSS para saber si un navegador es compatible con lo que queremos usar. Funcionaría algo así: @support (display: grid) {}. Si es compatible con display grid lo usa, si no lo es, no lo usa.

Algunos enlaces de interes

Escribe tu comentario
+ 2