En este apartado documentamos el sistema de grilla de Bodystyle.
Bodystyle utiliza un sistema de grillas basado en contenedores, filas (rows) y columnas
para crear diseños responsivos y flexibles que se adapten a cualquier tamaño de pantalla.
Row / Fila
El sistema de grillas de Bodystyle está dividido en 12 columnas.
Para crear una fila, utilizamos la clase row. Dentro de esta fila,
asignamos a cada elemento hijo las clases de columna apropiadas para distintos tamaños de pantalla.
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
Nota: Recuerda que la suma total de las clases de columna en una fila no debe exceder 12.
La idea de esta distribución es asignarle a cada elemento hijo la cantidad de columnas que ocupará en
función del tamaño de pantalla en el que se visualice.
Ejemplo: 4 Columnas
En este ejemplo, vemos cómo los elementos ocupan 4 columnas cada uno
en todos los dispositivos. Esto permite que 3 elementos se ajusten perfectamente en una fila de 12 columnas.
1
2
3
1
2
3
Nota: Cada elemento ocupa 4 columnas (cl-4).
Al multiplicar 4 × 3 elementos = 12 columnas totales, se utiliza el ancho completo de la fila.
Responsive
En la mayoría de los casos, querrás que tu diseño sea responsivo, es decir, que se adapte a diferentes tamaños
de pantalla.
Para lograr esto, puedes utilizar las clases específicas para cada tamaño de pantalla:
cl-[n] para pantallas grandes (large)
cm-[n] para pantallas medianas (medium)
cs-[n] para pantallas pequeñas (small)
cxs-[n] para pantallas extra pequeñas (extra small)
1
2
3
Nota: Las clases se aplican del más pequeño al más grande. En este ejemplo:
cxs-12 → Pantalla extra pequeña: 12 columnas (ancho completo)
cs-6 → Pantalla pequeña: 6 columnas (medio ancho)
cm-6 → Pantalla mediana: 6 columnas (medio ancho)
cl-4 → Pantalla grande: 4 columnas (un tercio del ancho)
Esto asegura que el diseño se adapte adecuadamente a diferentes dispositivos.
Clase
Descripción
cl-[n]
Define el número de columnas que un elemento ocupará en pantallas grandes (large). Rango: 1-12.
cm-[n]
Define el número de columnas que un elemento ocupará en pantallas medianas (medium). Rango: 1-12.
cs-[n]
Define el número de columnas que un elemento ocupará en pantallas pequeñas (small). Rango: 1-12.
cxs-[n]
Define el número de columnas que un elemento ocupará en pantallas extra pequeñas (extra small). Rango: 1-12.
Ejemplo Completo
Ahora vamos a un ejemplo completo donde adaptaremos una configuración diferente para
cada tamaño de pantalla:
Pantallas grandes: cada elemento ocupará 3 columnas (cl-3)
Pantallas medianas: cada elemento ocupará 4 columnas (cm-4)
Pantallas pequeñas: cada elemento ocupará 6 columnas (cs-6)
Pantallas extra pequeñas: cada elemento ocupará 12 columnas (cxs-12)
1
2
3
4
Si redimensionas el tamaño de la ventana del navegador, podrás ver cómo los elementos se reorganizan
automáticamente según las clases de columna asignadas a cada breakpoint (tamaño de pantalla).
1
2
3
4
Offset
Es posible utilizar un desplazamiento (offset), para generar configuraciones de grilla
más complejas y controlar el espacio en blanco antes de un elemento.
Para ello, utilizamos las clases de offset según el tamaño de pantalla:
offset-l-[inicio]-[n] para pantallas grandes (large)
offset-m-[inicio]-[n] para pantallas medianas (medium)
offset-s-[inicio]-[n] para pantallas pequeñas (small)
offset-xs-[inicio]-[n] para pantallas extra pequeñas (extra small)
Donde [inicio] es la columna de inicio del desplazamiento y [n] es el número de columnas que ocupará el elemento.
Clase
Descripción
offset-l-[inicio]-[n]
Define el desplazamiento y ancho en pantallas grandes (large). [inicio] es la columna inicial (1-12), [n] es el ancho del elemento.
offset-m-[inicio]-[n]
Define el desplazamiento y ancho en pantallas medianas (medium). [inicio] es la columna inicial (1-12), [n] es el ancho del elemento.
offset-s-[inicio]-[n]
Define el desplazamiento y ancho en pantallas pequeñas (small). [inicio] es la columna inicial (1-12), [n] es el ancho del elemento.
offset-xs-[inicio]-[n]
Define el desplazamiento y ancho en pantallas extra pequeñas (extra small). [inicio] es la columna inicial (1-12), [n] es el ancho del elemento.
Ejemplo de Offset
En este ejemplo, el primer elemento ocupa 4 columnas sin desplazamiento. El segundo elemento
está desplazado según el dispositivo con offsets responsivos.
Elemento 1 Sin offset
Elemento 2 offset responsivo
Ejemplo Avanzado
Aquí mostramos cómo usar offset para crear layouts más sofisticados con elementos desplazados estratégicamente
en diferentes dispositivos.
Elemento 1
Elemento 2
Elemento 1
Elemento 2
Elemento 1
Elemento 2
Nota: El offset desplaza el elemento desde la izquierda, creando espacio en blanco.
Es importante notar que en el ejemplo, cada dispositivo tiene su propio offset configurado:
offset-xs-1-11 → Extra pequeño: comienza en columna 1, ocupa 11 (full width menos 1)
offset-s-1-5 → Pequeño: comienza en columna 1, ocupa 5
offset-m-5-7 → Mediano: comienza en columna 5, ocupa 7
offset-l-8-4 → Grande: comienza en columna 8, ocupa 4
Esto permite crear layouts complejos y asimétricos que se adapten perfectamente a cada dispositivo.