Omega: griglie avanzate e responsive design

Omega è un tema per Drupal detto di base, ossia non implementa una grafica di suo, ma mette a disposizione dello sviluppatore tutta una serie di funzionalità avanzate per la realizzazione di temi personalizzati basati sul framework css 960gs e pronti per i dispositivi mobili.

In quest'articolo vedremo come queste due funzionalità sono implementate e come sia possibile usarle per creare il proprio tema.

Iniziamo con le griglie per notare come Omega non usi esattamente il css di 960gs ma una sua versione modificata nelle dimensioni delle colonne e nei margini. Come fare quindi se il design che dobbiamo trasporre in html è stato realizzando (ad esempio in Photoshop) utilizzando 960gs (o un altro sistema a griglie)? Semplice, Omega ci permette di definire nuovi sistemi di griglie da usare nel nostro sito (se usiamo Delta per creare layout diversi possiamo addirittura avere griglie diverse in sezioni diverse del sito).

Ma facciamo un passo indietro e creiamo il nostro primo tema basato su Omega, fortunatamente il compito è decisamente semplice in quanto basta clonare uno dei tre staterkit messi a disposizione: alpha-xhtml, omega-html5 e omega-xhtml. Facciamo quindi una copia di omega-html5 dentro la cartella dei temi (sites/all/themes) dandogli come nome, ad esempio, miotema. All'interno di miotema rinominiamo poi il file starterkit_omega_html5.info in miotema.info, infine all'interno di questo file cambiamo il valore del campo name e description e cancelliamo le due righe:

Dopo aver vuotato la cache dovremmo trovare nella sezione Appearence del sito il nostro nuovo tema, lo abilitiamo e lo impostiamo come default.

Gli unici due sistemi di griglie tra cui possiamo scegliere sono Default (960px) e Fluid e sono entrambi definiti all'interno del tema Alpha (di cui Omega è a sua volta un sottotema); aggiungiamo il nostro. All'interno del file miotema.info vanno aggiunte queste righe:

In questo modo stiamo dicendo a Omega di aggiungere un sistema di griglie di nome 960, che verrà mostrato all'utente come Original (960px), che possiede due layout responsive (vedremo dopo cosa significa) Normal e Narrow e che è suddiviso in 12 colonne. Ora è sufficiente creare la seguente alberatura all'interno del nostro tema: css/grid/960/narrow e css/grid/960/normal e copiarci dentro (per adesso ad entrambe) il css di 960gs rinominato in 960-narrow-12.css e 960-normal-12.css, rispettivamente. Tutto qua, dopo aver vuotato la cache, se scegliamo questo come sistema di griglie Omega caricherà i seguenti file css:

• global.css
• miotema-960-narrow.css
• 960-narrow-12.css
• miotema-960-narrow.css
• 960-normal-12.css

Usando questa tecnica possiamo aggiungere tutti i sistemi a griglie di cui abbiamo bisogno.

A cosa servono però tutti questi file css? Semplice: attraverso il meccanismo delle Media Query Omega fa in modo che solo alcuni file vengano visti da determinati device. Il file global.css è caricato in qualsiasi caso e contiene le regole applicabili a tutti i device, indipendentemente dalla risoluzione (un esempio potrebbero essere i colori o il tipo di font). Gli altri file vengono caricati se il dispositivo che stiamo usando combacia con la Media Query specificata:

Nel nostro esempio abbiamo che i css miotema-960-narrow.css e 960-narrow-12.css sono usati solo se il dispositivo con cui stiamo navigando il sito ha una risoluzione orizzontale di almeno 321 pixel, mentre i css miotema-960-normal.css e 960-normal-12.css sono sono usati se il dispositivo ha una risoluzione orizzontale di almeno 769 pixel. Attenzione che questo comporta il non caricamento del sistema a griglie per dispositivi con risoluzione minore di 321 pixel (960-narrow-12.css e 960-normal-12.css non vengono caricati); tra 321 e 769 pixel vengono caricati global.css, miotema-960-narrow.css e 960-narrow-12.css; infine per dispositivi con risoluzione maggiore di 769 pixel vengono caricati tutti e 5 i file. Questo ci permette di avere layout anche molto diversi a seconda del dispositivo usato. Ovviamente basta definire più layout nel file miotema.info per avere più versioni a cui assegnare le Media Query in modo da creare più passaggi.