Libro de recetas de maquetación CSS
El libro de recetas de maquetación CSS tiene como objetivo reunir recetas para patrones de maquetación comunes, cosas que quizás necesites implementar en tus propios sitios. Además de ofrecer código que puedes usar como punto de partida en tus proyectos, estas recetas muestran las distintas formas en que se pueden usar las especificaciones de maquetación y las decisiones que puedes tomar como desarrollador.
Nota: Si eres nuevo en la maquetación CSS, quizás quieras echar primero un vistazo a nuestro módulo de aprendizaje de maquetación CSS, ya que te dará la base que necesitas para aprovechar las recetas de esta página.
Las recetas
| Receta | Descripción | Métodos de maquetación |
|---|---|---|
| Objetos multimedia | Una caja de dos columnas con una imagen a un lado y un texto descriptivo al otro, por ejemplo, una publicación en redes sociales. | Cuadrícula CSS, float como alternativa, dimensionamiento con fit-content |
| Columnas | Cuándo elegir el diseño multicolumna, flexbox o la cuadrícula para tus columnas. | Cuadrícula CSS, Multicolumna, Flexbox |
| Centrar un elemento | Cómo centrar un elemento horizontal y verticalmente. | Flexbox, Alineación de cajas |
| Pies de página fijos | Crear un pie de página que se sitúa en la parte inferior del contenedor o del viewport cuando el contenido es más corto. | Cuadrícula CSS, Flexbox |
| Navegación dividida | Un patrón de navegación en el que algunos enlaces están separados visualmente de los demás. | Flexbox, margin |
| Navegación con migas de pan | Crear una lista de enlaces que permita al visitante volver a subir por la jerarquía de páginas. | Flexbox |
| Grupo de lista con insignias | Una lista de elementos con una insignia que muestra un contador. | Flexbox, Alineación de cajas |
| Paginación | Enlaces a páginas de contenido (como los resultados de una búsqueda). | Flexbox, Alineación de cajas |
| Tarjeta | Un componente de tarjeta, que se muestra en una cuadrícula de tarjetas. | Diseño de cuadrícula |
| Contenedor de cuadrícula | Para alinear el contenido de la cuadrícula dentro de un contenedor central, permitiendo a la vez que algunos elementos se salgan de él. | Cuadrícula CSS |
Aporta una receta
Como en todo MDN, nos encantaría que aportaras una receta con el mismo formato que las anteriores. Consulta la guía para añadir recetas al libro de recetas de maquetación para ver una plantilla y las pautas para escribir tu propio ejemplo.