-
Componentes
-
Módulos
-
Tipos de visualización
Elementos de diseño
Estos elementos nos permiten diseñar una estructura contenedora con unas visualizaciones concretas.
Contenedor
Fragmento > Elementos del diseño > Contenedor
Este es el fragmento básico que permite definir una anchura ajustada a los límites de la página, así como aglutinar otros fragmentos dentro de él y visualizarlos en fila horizontal o vertical.
También se pueden añadir clases CSS desde la pestaña Avanzado para dotarle de diseño definido tanto a él como a los elementos dentro de él.
Anchura fluida o fija
El contenedor tiene dos anchuras, fluida y fija. La anchura fluida sobrepasa los márgenes, mientras que la fija los mantiene.
Puedes editar los anchos desde las opciones en la columna de la derecha.
Estructura avanzada de contenedores
Contenedor de ancho fluido + clases auxiliares + contenedor de ancho fijo
El ejemplo siguiente muestra el uso avanzado e ideal del contenedor. Está formado por:
- Un contenedor fuera de cualquier otro para poder ponerle un ancho fluido y así conseguir que no tenga ningún limite de anchura.
- Ese contenedor lleva 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, hemos 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.
- Un contenedor dentro del anterior, esta vez de ancho fijo, para que así los elementos que se añadan en este no 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.
Ejemplo:
- Visualización de contenido (Las opciones fléxibles desbloquean mas opciones de diseño, para alinear o justificar elementos, es posible que no se aprecie la diferencia hasta que se publique la página)
- Bloquear (Los elementos de dentro se comportarán de forma natural)
- Fila flexible (Los elementos de dentro se veran en fila)
- Columna flexible (Los elementos de dentro se veran en columna)
- Ancho del contenedor (Puede verse condicionado si el contendor esta dentro de un elemento que limite anchura)
- Fluido (Su anchura no tendra limites)
- Ancho fijo (La anchura llegará como máximo a los limites de la página)
Bloquear
Sus elementos se verán en su forma natural y no tendremos opciones avanzadas de alineación o justificación.
- Nombre de Configuracion 1: Información de la configuración 1
- Nombre de Configuracion 2: Información de la configuración 2
Fila flexible
Sus elementos se verán en fila.
- Nombre de Configuracion 1: Información de la configuración 1
- Nombre de Configuracion 2: Información de la configuración 2
Columna flexible
Sus elementos se verán en columna.
- Nombre de Configuracion 1: Información de la configuración 1
- Nombre de Configuracion 2: Información de la configuración 2
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.
- Número de módulos (Zonas donde poder añadir elementos)
- Mostrar medianil (Para tener una pequeña separación entre las columnas)
- Disposición (Número de módulos que aparecerán por fila)
- Alineación vertical (Alineación de los elementos verticalmente por fila)
- Arriba
- Medio
- Abajo
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.