From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/layout_cookbook/index.html | 77 +++++++++++++++++++++++++++++ 1 file changed, 77 insertions(+) create mode 100644 files/es/web/css/layout_cookbook/index.html (limited to 'files/es/web/css/layout_cookbook') diff --git a/files/es/web/css/layout_cookbook/index.html b/files/es/web/css/layout_cookbook/index.html new file mode 100644 index 0000000000..1b46384b51 --- /dev/null +++ b/files/es/web/css/layout_cookbook/index.html @@ -0,0 +1,77 @@ +--- +title: Libro de recetas de maquetación CSS +slug: Web/CSS/Layout_cookbook +translation_of: Web/CSS/Layout_cookbook +--- +
{{CSSRef}}
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RecetaDescripciónMetodos de maquetación
Objetos mediaUna 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 {{cssxref("float")}}, dimensionamiento {{cssxref("fit-content")}}
ColumnasCuándo elegir el diseño de varias columnas, flexbox o grid para sus columnas.CSS Grid, Multicol, Flexbox
Centrar un elementoCómo centrar un elemento horizontal y verticalmente.Flexbox, Box Alignment
Pies de página pegajososCreació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 divididaUn patrón de navegación en el que algunos enlaces se separan visualmente de los demás.Flexbox, {{cssxref("margin")}}
Navegación con migas de panCrear 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 insigniasUna lista de elementos con una insignia para mostrar un conteo.Flexbox, Box Alignment
PaginaciónEnlaces a páginas de contenido (como los resultados de búsqueda).Flexbox, Box Alignment
TarjetaUn 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.

-- cgit v1.2.3-54-g00ecf