Libro de recetas de maquetación CSS

El libro de recetas de maquetación CSS tiene como objetivo reunir recetas para patrones de diseño comunes, cosas que podrías necesitar para implementar en tus propios sitios. Además de proporcionar código que puedes utilizar como punto de partida en tus proyectos, estas recetas resaltan las diferentes formas en que se pueden utilizar las especificaciones de diseño y las opciones que puedes tomar como desarrollador.

Nota: Si es nuevo en el diseño de CSS, es posible que primero quiera echar un vistazo a nuestro módulo de aprendizaje de diseño CSS, ya que esto le dará la base básica que necesita para hacer aquí uso de las recetas.

Las recetas

Receta Descripción Metodos de maquetación
Objetos media Una caja con dos-columnas con una imagen en un lado y texto descriptivo en el otro, por ejemplo, una entrada de facebook o un tweet. CSS Grid, alternativa float, dimensionamiento fit-content
Columnas Cuándo elegir el diseño de varias columnas, flexbox o grid para sus columnas. CSS Grid, Multicol, Flexbox
Centrar un elemento Cómo centrar un elemento horizontal y verticalmente. Flexbox, Box Alignment (en-US)
Pies de página pegajosos Creación de un pie de página que se coloca en la parte inferior del contenedor o en la ventana de visualización cuando el contenido es más corto. CSS Grid, Flexbox
Navegación dividida Un patrón de navegación en el que algunos enlaces se separan visualmente de los demás. Flexbox, margin
Navegación con migas de pan Crear una lista de enlaces para permitir al visitante navegar de nuevo a través de la jerarquía de la página. Flexbox
Lista de grupos con insignias Una lista de elementos con una insignia para mostrar un conteo. Flexbox, Box Alignment (en-US)
Paginación Enlaces a páginas de contenido (como los resultados de búsqueda). Flexbox, Box Alignment (en-US)
Tarjeta (en-US) Un componente de tarjeta, que se muestra en una rejilla de tarjetas. Grid Layout

Aporta con una receta

Como con todo en MDN nos encantaría que contribuyeras con una receta en el mismo formato que los que se muestran arriba. Revisa esta página para obtener una plantilla y pautas para escribir su propio ejemplo.