Gridy☺

Documentazione

01. Struttura del Progetto

Struttura di cartelle consigliata per una configurazione pulita di Gridy.

    /assets
      /img
      /js
      /css
        style.css

02. Variabili della Griglia

In style.css, definisci prima le variabili della griglia per personalizzare il sistema. Senza queste, Gridy usa i valori predefiniti.

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

Queste controllano:
• --pl / --pr → padding della pagina sinistra/destra
• --gp → spaziatura della griglia
• --mw → larghezza massima del contenitore

03. Sovrapposizione della Griglia

Premi Maiusc + G per attivare/disattivare la sovrapposizione della griglia. Usala per allineare elementi ed eseguire il debug della spaziatura.

04. Colonne della Griglia

Gridy utilizza un sistema a 12 colonne. Gli esempi sono ordinati da 1 colonna fino alla larghezza completa.

La struttura del layout è composta da tre livelli:
.con imposta la larghezza del contenitore principale e il padding della pagina,
.grd definisce il sistema a griglia a 12 colonne,
e .c-* controlla quante colonne occupa ogni elemento.

1 Colonna (12 × 1)

2 Colonne (6 + 6)

3 Colonne (4 + 4 + 4)

4 Colonne (3 + 3 + 3 + 3)

6 Colonne (2 × 6)

Larghezza Completa (12)

05. Inizio Colonna

Usa le classi s-* per spostare gli elementi orizzontalmente.

.c-4 .s-2

.c-3 .s-6

.c-2 .s-11

06. Utilità Flex

Usa le classi helper flex per l'allineamento e la distribuzione.

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

sinistra

centro

destra

.f-c .f-c

elemento

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

centro

07. Allineamento del Testo

Classi di utilità per l'allineamento orizzontale del testo.

.t-l

testo allineato a sinistra

.t-c

testo centrato

.t-r

testo allineato a destra

08. Spaziatura

Le utilità di margine e padding seguono il ritmo di base. Le classi di spaziatura usano incrementi verticali coerenti per l'equilibrio del layout.

Margine Superiore

.mt-8

.mt-16

.mt-32

.mt-44

.mt-64

Margine Inferiore

.mb-8

.mb-16

.mb-32

.mb-44

.mb-64

Padding Superiore

.pt-8

contenuto

.pt-16

contenuto

.pt-32

contenuto

.pt-44

contenuto

.pt-64

contenuto

Padding Inferiore

.pb-8

contenuto

.pb-16

contenuto

.pb-32

contenuto

.pb-44

contenuto

.pb-64

contenuto

09. Sistema di Immagini

Utilità per immagini ad altezza fissa per una composizione di layout rapida. Combina .img con le utilità di altezza per creare blocchi di immagini coerenti.

.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

Al di sotto di 900px Gridy passa automaticamente a 4 colonne. Tutte le classi di colonna diventano a larghezza completa.

desktop: .c-3