FLUID: Gestione responsive

Descrizione

Il framework FLUID permette di rendere responsive le applicazioni a prescindere dal tema usato. La modalità responsive è attiva in maniera predefinita nei temi Bootstrap e BootstrapZen, ma può essere attivata anche in tutti gli altri temi.

Campi fuori lista e in dettaglio

La struttura dei pannelli FLUID è composta da righe e colonne; è possibile indicare il breakpoint (cioè la larghezza della viewport espressa in px) a partire dal quale una riga si deve spezzare, disponendo i campi che la compongono in verticale invece che in orizzontale. Per impostare il breakpoint è sufficiente che uno dei campi appartenenti alla riga abbia una delle seguenti classi (nella forma {{nomeClasse}}, come nel framework RD3):

• {{col-sm-X}} (col-sm-12, col-sm-11 ....)
• {{col-md-X}} (col-md-12, col-md-11 ....)
• {{col-lg-X}} (col-lg-12, col-lg-11 ....)

Il nome di queste classi richiama quelle utilizzate da Bootstrap. Questa scelta è stata fatta per permettere un porting più facile dei progetti esistenti che già le utilizzavano. A differenza del motore RD3, in Fluid però queste classi non gestiscono la dimensione orizzontale dei campi (che viene gestita con le regole dei ridimensionamenti), ma vengono utilizzate per indicare sotto quale breakpoint la riga si deve spezzare.
Quindi usare nel proprio codice {{col-md-1}} o {{col-md-12}} non fa alcuna differenza, entrambe le classi indicano che la riga si deve spezzare sotto il breakpoint md.

La seguente tabella riassume i breakpoint e le regole applicate:

XS	SM	MD	LG
<=767px	>768px && <=991px	>992px && <=1199px
Tutte le righe si spezzano. I campi sono mostrati con le intestazioni sopra.	Le righe con col-md- e col-lg si spezzano.	Le righe con col-lg- si spezzano

Se una riga contiene campi con classi di breakpoint differenti, si spezzerà al breakpoint più piccolo. Ad esempio se una riga contiene sia col-md-12 che col-lg-12 si comporterà come una riga che contiene solo col-md-12.

Nei temi Bootstrap e BootstrapZen, se non specificato diversamente, i campi usano di default la classe col-md-12, in modo che la riga che li contiene si spezzi al breakpoint sm. Negli altri temi il default non viene applicato e quindi la modalità responsive non è attiva, ma le classi possono comunque essere applicate in maniera esplicita sui campi per renderli responsive. È inoltre possibile modificare la classe di default che verrà applicata oppure aggiungere un default ad un tema non responsive per renderlo tale. In seguito verrà spiegato come ottenere questo risultato.

Frame

Nel caso dei frame è possibile fare in modo che, al raggiungere dei breakpoint, i frame affiancati vadano uno sotto l'altro. Per impostare il breakpoint desiderato è possibile usare queste classi sui frame (nella forma {{nomeClasse}}, come nel framework RD3):

• {{col-sm-X}} (col-sm-12, col-sm-11 ....)
• {{col-md-X}} (col-md-12, col-md-11 ....)
• {{col-lg-X}} (col-lg-12, col-lg-11 ....)

Se non viene definita nessuna classe i temi Bootstrap e BootstrapZen useranno col-md-12 in modo da andare a capo in modalità tablet verticale e inferiori (breakpoint sm). È inoltre possibile modificare la classe di default che verrà applicata oppure aggiungere un default ad un tema non responsive per renderlo tale. In seguito verrà spiegato come ottenere questo risultato.

Campi in lista

Come per il framework RD3 è possibile usare le classi md-visible e lg-visible per indicare che un campo in lista deve essere visible solo dal rispettivo breakpoint in poi. Il breakpoint è compreso, quindi un campo in lista con classe md-visible sarà nascosto automaticamente se il browser viene ridotto di dimensione sotto i 992px (breakpoint sm).

Gestire i default

Le media query che gestiscono la modalità responsive sono presenti in tutti i temi, quindi se vengono esplicitamente usate le classi indicate in precedenza tutti i temi possono essere resi responsive.
Il valore di default di queste classi può essere impostato in qualunque tema valorizzando una specifica variabile css dentro customf.css:

:root {
  --default-responsive-class: "col-md-12" !important;  /* OR col-lg-12 OR col-sm-12 */
}

Nei temi Bootstrap e BootstrapZen questa variabile è già presente e quindi la modalità responsive è attiva di default. Il valore predefinito è 'col-md-12'.
Negli altri temi è sufficiente aggiungerla valorizzandola con uno dei valori indicati in precedenza per attivare la modalità responsive.