Gridy☺

Documentación

01. Estructura del Proyecto

Estructura de carpetas recomendada para una configuración limpia de Gridy.

    /assets
      /img
      /js
      /css
        style.css

02. Variables de Cuadrícula

En style.css, define primero las variables de la cuadrícula para personalizar el sistema. Sin esto, Gridy usa valores predeterminados.

    :root{
      --pl:32px;
      --pr:32px;
      --gp:32px;
      --mw:960px;
    }

Estas controlan:
• --pl / --pr → relleno de página izquierdo/derecho
• --gp → separación de la cuadrícula
• --mw → ancho máximo del contenedor

03. Superposición de Cuadrícula

Pulsa Mayús + G para activar/desactivar la superposición de cuadrícula. Úsala para alinear elementos y depurar el espaciado.

04. Columnas de la Cuadrícula

Gridy utiliza un sistema de 12 columnas. Los ejemplos están ordenados de 1 columna hasta ancho completo.

La estructura del diseño se compone de tres capas:
.con establece el ancho del contenedor principal y el relleno de la página,
.grd define el sistema de cuadrícula de 12 columnas,
y .c-* controla cuántas columnas ocupa cada elemento.

1 Columna (12 × 1)

2 Columnas (6 + 6)

3 Columnas (4 + 4 + 4)

4 Columnas (3 + 3 + 3 + 3)

6 Columnas (2 × 6)

Ancho Completo (12)

05. Inicio de Columna

Usa las clases s-* para desplazar elementos horizontalmente.

.c-4 .s-2

.c-3 .s-6

.c-2 .s-11

06. Utilidades Flex

Usa las clases auxiliares flex para alineación y distribución.

.f-r .j-b .a-c

izquierda

centro

derecha

.f-c .f-c

elemento

.f-c .j-c .a-c

centro

07. Alineación de Texto

Clases utilitarias para la alineación horizontal del texto.

.t-l

texto alineado a la izquierda

.t-c

texto centrado

.t-r

texto alineado a la derecha

08. Espaciado

Las utilidades de margen y relleno siguen el ritmo de base. Las clases de espaciado usan incrementos verticales consistentes para equilibrar el diseño.

Margen Superior

.mt-8

.mt-16

.mt-32

.mt-44

.mt-64

Margen Inferior

.mb-8

.mb-16

.mb-32

.mb-44

.mb-64

Relleno Superior

.pt-8

contenido

.pt-16

contenido

.pt-32

contenido

.pt-44

contenido

.pt-64

contenido

Relleno Inferior

.pb-8

contenido

.pb-16

contenido

.pb-32

contenido

.pb-44

contenido

.pb-64

contenido

09. Sistema de Imágenes

Utilidades de imagen de altura fija para una composición de diseño rápida. Combina .img con utilidades de altura para crear bloques de imágenes consistentes.

.img .img-80

.img .img-160

.img .img-192

.img .img-240

.img .img-320

.img .img-480

.img .img-560

.img .img-640

.img-fit

10. Sistema Responsive

Por debajo de 900px, Gridy cambia automáticamente a 4 columnas. Todas las clases de columnas se convierten en ancho completo.

escritorio: .c-3