Prima c'era Twitter Bootstrap, c'era (ed è) ZURB Foundation, un framework che ti permette di aggiungere pulsanti, griglie di blocco, barre di avanzamento, tabelle dei prezzi e molto altro con poche classi CSS ben posizionate. Con il tema ZURB Foundation per Drupal, puoi scatenare tutto questo bling sul tuo sito Drupal con fatale facilità.
Cos'è il Framework della Fondazione ZURB?
Il framework ZURB Foundation è una raccolta di codice CSS e Javascript per un sacco di cose che probabilmente vorrai sul tuo sito web. Ciò include non solo un eye-candy cliccabile come i pulsanti sopra menzionati, ma anche un incredibile potere reattivo.
Puoi utilizzare la maggior parte di queste funzionalità aggiungendo speciali classi CSS. Per esempio:
Ecco un .
Ed ecco un piccolo bottone.
Il framework ZURB Foundation è completamente separato da Drupal. Le persone lo usano su WordPress, Joomla e persino siti HTML statici.
Qual è il tema Drupal della Fondazione ZURB?
La Fondazione Drupal ZURB tema ti permette di liberare tutto questo potere ZURBish semplicemente scaricando e abilitando un tema (e leggendo la documentazione e facendo alcuni passi extra, ovviamente).
Ad esempio, ZURB Foundation si affida alla libreria Javascript di jQuery, quindi probabilmente dovrai installare jQuery Update. Verifica se stai utilizzando altri moduli che si basano su jQuery. Se usi una versione nuova di jQuery, questi moduli potrebbero smettere di funzionare.
Inoltre, probabilmente vorrai utilizzare questo tema come tema base per il tuo tema personalizzato. La personalizzazione è dove la Fondazione ZURB brilla davvero.
Hai bisogno di questo tema per utilizzare la Fondazione ZURB in Drupal?
Non lo fai bisogno questo tema per utilizzare il framework ZURB Foundation. Nel modo più semplice, questo tema aggiunge solo ZURB Foundation CSS e Javascript al tuo sito e puoi farlo manualmente.
Ma questo tema lo rende più semplice e include anche un'ulteriore integrazione con Drupal.
Inoltre, è possibile aggiungere moduli aggiuntivi più piccoli per un'ulteriore integrazione. Ad esempio, il modulo ZURB Orbit ti consente di creare uno slideshow Orbita con campi immagine. Il modulo ZURB Clearing ti consente di creare lightbox reattivi con le immagini multimediali.
Nota: non ho ancora usato questi piccoli moduli, quindi potrebbero essere pieni di pericoli. Al momento della stesura, richiede ZURB Clearing
Media-2.x-dev, che potrebbe essere un aggiornamento pericoloso se attualmente stai utilizzando Media 1.x. E un requisito per una versione di sviluppo di un modulo dovrebbe sempre dare una pausa. Tuttavia, questi e altri moduli ZURB meritano di essere esaminati.
Scegli quale versione di ZURB Foundation usare
Prima di scaricare il tema ZURB Foundation, controlla quale versione dovresti usare. Esistono diverse versioni principali del framework ZURB Foundation e il numero di versione principale per il tema corrisponde al framework con cui lavora. Così la
7.x-3.X le versioni del tema funzionano con Foundation 3, il
7.x-4.X le versioni funzionano con Foundation 4, e il
7.x-5.X Le versioni funzionano con Foundation 5.
Al momento della stesura di questo articolo, l'ultima versione stabile del tema è 7.x-4.x, che funziona con Foundation 4. La versione 7.x-5.x è ancora in sviluppo. Quindi, anche se il sito Web della struttura della Fondazione presuppone che utilizzerai Foundation 5, per il momento potresti voler continuare con Foundation 4.
Si noti inoltre che Foundation 5 ha requisiti aggiuntivi, in particolare jQuery
1.10. Foundation 4 ha bisogno solo di jQuery
1.7+.
Tieni presente la versione di Foundation che stai utilizzando quando leggi la documentazione online. Questo è particolarmente vero se non stai usando l'ultima versione del framework. È fatalmente facile scivolare nella lettura dei documenti per, ad esempio, Foundation 5, quindi sentirsi frustrati quando una nuova funzione non funziona sul sito di Foundation 4.
Ad esempio, la Fondazione 5 include un'intera serie di
medio classi per schermi di medie dimensioni. In Foundation 4, questi falliranno misteriosamente a meno che non prendiate ulteriori misure.
Usa SASS, Bussola e "_variables.scss"!
Se hai intenzione di modificare il CSS per questo tema, assicurati di:
- Usa il tema ZURB Foundation come tema base per il tuo sottotema personalizzato
- Genera questo subtheme usando il
Drush comando fornito dal tema. Come questo:
drush fst your_theme_name
- Leggere attentamente l'eccellente
_variables.scss file
Il
_variables.scss il file viene creato automaticamente da
drush fst. Questo singolo file contiene variabili per quasi nulla potresti voler modificare il tuo tema CSS. È fantastico! Tutto in un unico posto, puoi impostare qualsiasi cosa, dal carattere predefinito alla larghezza dello schermo, fino al bordo dei breadcrumb.
Naturalmente, puoi sempre impostare anche altri file. Ma
_variables.scss è un posto splendido per iniziare.
Si noti l'estensione del file:
SCSSno
css. Usare
_variables.scss, dovrai configurare SASS (un linguaggio di estensione CSS) e Compass (un framework creato con SASS). Quando corri
compila bussola, il tuo
SCSS i file diventeranno adorabili CSS in file separati. (Preferisco
orologio da bussola - questo continua a funzionare e ad aggiornare il CSS mentre modifichi il
SCSS File.)
Se davvero, davvero non vuoi preoccuparti di SASS, puoi scrivere i file CSS come al solito e elencarli nel tuo tema
.Informazioni file. Ma fidati di me - il piccolo investimento nel tempo per imparare abbastanza da compilare
_variables.scss sarà rimborsato quasi istantaneamente.
Prima di utilizzare ZURB Foundation
La ZURB Foundation è eccellente, ma non è l'unico framework front-end che è stato integrato con Drupal. Potresti prendere in considerazione Bootstrap, un framework simile che ha anche un tema Drupal. Per ora, sto utilizzando ZURB Foundation da solo, ma è perché la mia ricerca ha indicato che è più semplice da personalizzare rispetto a Bootstrap.
Inoltre, la componente di Joyride è piuttosto dolce.
E se usi ZURB Foundation, Bootstrap o qualche altro framework, assicurati di avere questi suggerimenti sull'uso di un framework con Drupal.
