Elementos de diseño

Estos elementos nos permiten diseñar una estructura contenedora con unas visualizaciones concretas.

Contenedor

Fragmento >  Elementos del diseño > Contenedor

Es un fragmento muy utilizado que nos permite definir si queremos una anchura ajustada a los limites de la página, así como visualizar sus elementos en fila horizontal o vertical. También se recurre muchas veces a él para añadirle clases CSS desde la pestaña Avanzado para que tenga un diseño definido él o sus elementos que tenga añadidos.

Bloquear

Sus elementos se verán en su forma natural y no tendremos opciones avanzadas de alineación o justificación.

Párrafo
Párrafo
Párrafo

Fila flexible

Sus elementos se verán en fila.

Párrafo
Párrafo
Párrafo

Columna flexible

Sus elementos se verán en columna.

Párrafo
Párrafo
Párrafo

Estructura avanzada de contenedores

Contenedor de ancho fluido + Clases auxiliares + Contenedor de ancho fijo

Este es un uso del contendor más avanzado. Para esta ocasión hemos puesto un contedor fuera de cualquier otro para poder ponerle un ancho fluido y así conseguir que no tenga ningún limite de anchura. Además, le hemos añadido clases auxiliares, block-dark-mode para que tenga el diseño de elemento oscuro tanto él como los elementos que tiene dentro, una clase para rellenar espaciados verticales (py-space-32) y otra clase de separación de espacios inferiores (mb-space-32).

Para el modo móvil se ha añadido una clase auxiliar de espaciado de relleno horizontal (px-space-16) y este espaciado se lo quitamos en la resolución lg con px-lg-space-0.

Ya hemos terminado con el contenedor de ancho fluido y sus clases auxiliares. Dentro de él se ha añadido otro contenedor, pero esta vez de ancho fijo, para que así los elementos que se añadan en este no se salgan de los límites de la página.

Dominando las clases auxiliares y este tipo de estructuras, las combinaciones de diseño son infinitas.

Párrafo
Párrafo
Párrafo

Cuadrícula

Es un componente que ayuda a diseñar el contenido, es decir, distribuirlo de forma ordenada y clara mediante un sistema de columnas y filas. 

Cuadrícula de cuatro módulos

En este ejemplo, la cuadrícula muestra cuatro módulos, con medianil, dos módulos por fila y con una alineación vertical al medio. 

Si en el modo edición, cambiamos la vista a modo tableta y cambiamos la configuración a un módulo por fila, como es el caso, podremos ver que de esa vista hacia abajo se verá de ese modo, con lo cual podemos tener dos visualizaciones diferentes para escritorio y para el responsivo.

Módulo 1

A paragraph is a self-contained unit of a discourse in writing dealing with a particular point or idea. Paragraphs are usually an expected part of formal writing, used to organize longer prose.

Módulo 2

A paragraph is a self-contained unit of a discourse in writing dealing with a particular point or idea. Paragraphs are usually an expected part of formal writing, used to organize longer prose.

Módulo 3

A paragraph is a self-contained unit of a discourse in writing dealing with a particular point or idea. Paragraphs are usually an expected part of formal writing, used to organize longer prose.

Módulo 4

A paragraph is a self-contained unit of a discourse in writing dealing with a particular point or idea. Paragraphs are usually an expected part of formal writing, used to organize longer prose.