ManticoreCSS – Grid Framework 1.0

Autore: Sara Mancini

ManticoreCSS è un sistema di griglie a 12 colonne pensato per l’impaginazione rapida e ordinata di siti web. Si ispira al concetto classico dell’impaginazione a tabelle degli anni 2000: ogni griglia può essere vista come una struttura a celle, dove le colonne agiscono come blocchi indipendenti che si dispongono nello spazio come un tempo accadeva con le <table>, ma usando solo CSS moderno e responsive.

Come funziona

Ogni griglia ha una classe grid-XYZ e usa classi collegate come .col-1, .col-2, ecc., assegnate tramite grid-area. La suddivisione è basata su 12 colonne virtuali, che possono essere combinate in proporzioni classiche (6/6, 4/8, 3/9, 3/3/3/3...) oppure in combinazioni personalizzate.

Griglie disponibili

GRID-66

GRID-84

GRID-48

GRID-39

GRID-93

GRID-57

GRID-75

GRID-210

GRID-102

GRID-624

GRID-642

GRID-246

GRID-264

GRID-426

GRID-462

GRID-444

GRID-2433

GRID-4233

GRID-3324

GRID-3342

GRID-3243

GRID-3423

GRID-1533

GRID-5133

GRID-3351

GRID-3315

GRID-3513

GRID-3153

GRID-1623

GRID-1632

GRID-6132

GRID-6123

GRID-3162

GRID-3612

GRID-2163

GRID-2613

GRID-3333

Responsive di default

Tutte le griglie sono già ottimizzate per dispositivi mobili: sotto i 768px, le colonne vengono impilate verticalmente con spaziatura automatica. Non è necessario scrivere media query aggiuntive.

Per iniziare

1. Includi manticore.css nella tua pagina HTML.
2. Usa una delle classi grid-XYZ per la sezione da impaginare.
3. Inserisci i contenuti usando classi .col-1, .col-2, ecc.
4. Crea un file style.css a parte dove aggiungere tutti gli stili personalizzati del tuo sito (colori, font, spaziature, animazioni...).