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 |
| 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 |
| Paginación | Enlaces a páginas de contenido (como los resultados de búsqueda). | Flexbox, Box Alignment |
| Tarjeta | 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.