Una volta interiorizzati i concetti principali del’’HTML, CSS e progettazione responsive, vediamo come applicarli nell’ambiente di Kalì.

Essendo un CMS modulare è bene capire che le pagine web vengono formate tramite automatismi di correlazione, da vari oggetti; quindi,  quando saremo in modalità di editing, avremo a disposizione una griglia  dentro la quale saranno posizionati vari oggetti di kalì, a seconda della natura della pagina:

Contenitori (gestiscono il layout della pagina)

Box di contenuti:
Box editoriali
Informative
Elenchi di informative
Elenchi di sezioni
Correlazioni varie

La maggior parte degli oggetti di Kalì è modulare, ovvero presenta un template di oggetto, nel quale potranno essere inseriti vari elementi tramite gli SHORTCODE (TAG nativi) che mette a disposizione l’oggetto.

Questi shortcode  generano nella pagina un oggetto HTML.

Esempio: il box Informativa mi permette di inserire:

Titolo
Sommario
Abstract
Testo 1, testo2 ecc...
mmagine1, immagine2, ecc...

Master e template di pagina

Kalì offre 2 tipologie di modelli per la gestione delle strutture delle pagine:

la Master Page 

È unica per tutto il sito e ospita gli oggetti comuni a tutte le pagine:
Header, logo, menu di navigazione, footer, css di master, tutti gli script necessari a implementare le funzionalià richieste per il progetto e collegamenti a risorse esterne necessarie.
Ogni modifica fatta alla master si ripercuoterà su tutte le pagine del sito

I Template di pagina

A differenza della Master Page, i Template di pagina possono molteplici, di diversa natura e con funzionionalità 
diverse a secondo delle esigenze (es: pagina interna, home di sezione o elenco).
Forniscono la struttura che ospita a seconda dei casi gli oggetti necessari a costruire la pagina.
I template di pagina si applicano alle sezioni.

Le sezioni e le informative

Le sezioni sono i contenitori o directory, che vengono strutturate a seconda delle esigenza di architettura del sito, in modo che contengano altre sezioni e/o delle informative.
Le informative sono le “schede” che ospitano i contenuti reali della pagina.

Gerarchia dei CSS in kalì

Ogni pagina sarà quindi connessa a una master e a un template di pagina, apparterrà a una sezione, conterrà svariati box di kalì e nel caso di un interna conterrà un informativa 

Ognuno di questi 5 punti puo avere il suo CSS dedicato: 

1) css di Master
2) css di template di pagina
3) css di sezione
4)css di informativa
5) css di box

L’ordine di lettura del CSS rispetta questo modello gerarchico, e l’ultimo sovrascrive il precedente.

In quest’ottica organizzeremo i CSS a cascata, mettendo nel css di master le regole CSS necessarie a tutto il sito in maniera trasversale, nel CSS di template quelle necessarie solo a quel template specifico, nel CSS di sezione solo quelle relative alla sezione, in quello di informativa, quelle relative alla specifica informativa e nel template di Box quelle relative al singolo box.

È importante ottimizzare le regole in modo da evitare ripetizioni e ridondanze, per evitare conflitti e avere sotto controllo la gerarchia delle regole create.

Es:

Se il titolo dell’informativa è dichiarato nel css di master, non dovremo mai piu dichiararlo, a meno che non vogliamo aggiungere un valore extra oltre a quelli già definiti,  in in contesto specifico (template di pagina,  sezione, informativa o box)