Patrones Flexbox: bloques de construcción listos para usar para su diseño

Si alguna vez profundizaste en Flexbox como una alternativa al clásico modelo de caja CSS, probablemente no quieras volver atrás. El problema es que necesitas tratarlo en profundidad, y quién tiene suficiente tiempo para eso en estos días. Por lo tanto, a menudo nos atascamos con métodos antiguos para hacer las cosas, simplemente porque sabemos cómo alcanzar la meta usándolos. Cambiemos eso. Hoy les mostraré el proyecto Flexbox Patterns como una introducción rápida a Flexbox.

Flexbox: buceando más profundo

Si tiene tiempo, asegúrese de ver el video tutorial gratuito sobre el que informé a los colegas de t3n aquí. Recibirás 160 minutos de conocimiento esencial.

Patrones de Flexbox: página de destino

Ya hemos hablado de Flexbox en Noupe aquí. En el artículo, cubrimos el tema de la creación de una sección de comentarios receptivos con Flexbox.

Patrones de caja flexible

Afortunadamente, el diseñador de interfaz CJ Cenizal también investigó Flexbox y comenzó una colección de mejores prácticas listas para usar en el sitio web. Patrones de caja flexible. Por el momento, solo hay alrededor de una docena de módulos terminados disponibles. Sin embargo, el proyecto acaba de comenzar y los módulos disponibles ya cubren los casos de aplicación más importantes.

Ejemplo: filas alternas a través de Flexbox

Cenizal brinda una explicación detallada y comprensible de lo que hizo, la forma en que lo hizo y por qué lo hizo para cada módulo. También se incluyen los respectivos fragmentos de código, así como los ejemplos de trabajo de los elementos. En general, todos los elementos de la interfaz de usuario se pueden usar mediante copiar y pegar, pero Cenizal recomienda usarlos en el contexto de un concepto semánticamente correcto, como los elementos HTML5, por ejemplo.

Flexbox Patterns ha recibido mucha atención desde que llegó a la página de inicio de Búsqueda de productos. Al menos eso demuestra que existe una demanda importante para un servicio como ese.

(dpe)