Ús del Tema de la Fundació ZURB per a Drupal

Obteniu el poder del Marc de la Fundació ZURB en un tema de Drupal

Abans hi havia Twitter Bootstrap , hi havia (i és) la Fundació ZURB, un marc que us permet afegir botons bonics, quadres de bloqueig, barres de progrés, taules de preus i molt més amb algunes classes CSS ben col·locades. Amb el tema de la Fundació ZURB per a Drupal, podeu desbloquejar tot aquest bling en el vostre lloc Drupal amb una facilitat mortal.

Què és el marc de la Fundació ZURB?

El marc de la Fundació ZURB és una col·lecció de codis CSS i Javascript per a un munt de coses que probablement desitgeu al vostre lloc web. Això inclou no només els dolços d'ulls que es poden fer clicar com els botons abans esmentats, sinó també un poder de resposta veritablement sorprenent.

Utilitzeu la majoria d'aquestes funcions afegint classes CSS especials. Per exemple:

Aquí hi ha un .

I aquí hi ha un botó petit .

El marc de la Fundació ZURB està totalment separat de Drupal. La gent la fa servir a WordPress, a Joomla i fins i tot a llocs HTML estàtics .

Què és el Tema Drupal de la Fundació ZURB?

El tema de la Fundació Drupal ZURB us permet desbloquejar tot aquest poder de ZURBish simplement baixant i habilitant un tema (i llegint la documentació i prenent alguns passos addicionals, és clar).

Per exemple, la Fundació ZURB es basa en la biblioteca jQuery Javascript, per la qual cosa probablement haureu d'instal·lar l'actualització jQuery. Comproveu si feu servir altres mòduls que es basen en jQuery. Si utilitzeu una versió nova de jQuery, aquests mòduls podrien deixar de funcionar.

A més, probablement voldreu utilitzar aquest tema com a tema base per al vostre propi tema personalitzat. La personalització és on realment brilla la Fundació ZURB.

Necessiteu aquest tema per utilitzar la Fundació ZURB a Drupal?

No necessiteu aquest tema per utilitzar el marc de la Fundació ZURB. En el més senzill, aquest tema només afegeix la Fundació ZURB CSS i Javascript al vostre lloc, i podeu fer-ho manualment.

Però aquest tema fa que sigui més fàcil, i també inclou una major integració amb Drupal.

A més, podeu afegir mòduls addicionals més petits per a una major integració. Per exemple, el mòdul Orbit ZURB us permet crear una presentació de diapositives amb camps d'imatge. El mòdul ZURB Clearing us permet crear caixes de llum sensibles amb imatges multimèdia.

Nota: Encara no he utilitzat aquests petits mòduls, de manera que poden estar plens de perill. A partir d'aquest escrit, ZURB Clearing requereix Media-2.x-dev, que podria ser una actualització perillosa si actualment utilitzeu Media 1.x. I un requisit per a una versió de desenvolupament d'un mòdul sempre ha de donar una pausa. Tot i així, val la pena observar aquests i altres mòduls ZURB.

Trieu quina versió de la Fundació ZURB utilitzar

Abans de descarregar el tema de la Fundació ZURB, verifiqueu la versió que haureu d'utilitzar. Hi ha diferents versions principals del marc de la Fundació ZURB, i el número de versió principal del tema correspon al marc amb què funciona. Així doncs, les versions 7.x- 3.x del tema funcionen amb Foundation 3 , les versions 7.x- 4 .x funcionen amb Foundation 4 i les versions 7.x- 5 .x funcionen amb Foundation 5 .

A partir d'aquest escrit, l'última versió estable del tema és 7.x-4.x, que funciona amb la Fundació 4. La versió 7.x-5.x encara està en desenvolupament. Així doncs, encara que el lloc web de Foundation Foundation assumeixi que utilitzarà la Fundació 5, potser voldreu quedar-se amb Foundation 4 per ara.

Tingueu en compte també que la Fundació 5 té requisits addicionals, especialment jQuery 1.10. La Fundació 4 només necessita jQuery 1.7 +.

Tingueu en compte la versió de la Fundació que feu servir quan llegiu la documentació en línia. Això és especialment cert si no utilitzeu la versió més recent del marc. És fatal que sigui fàcil de llegir els documents per, per exemple, de la Fundació 5, i després es frustra quan una nova característica no funciona al vostre lloc de Foundation 4.

Per exemple, la Fundació 5 inclou tot un conjunt de classes mitjanes per pantalles de grandària mitja. A la Fundació 4, aquests fracassaran misteriosament si no feu més passos.

Utilitzeu SASS, Compass i & # 34; _variables.scss & # 34 ;!

Si aneu a modificar el CSS per a aquest tema, assegureu-vos que:

El fitxer _variables.scss es crea automàticament per drush fst. Aquest fitxer únic conté variables per gairebé qualsevol cosa que vulgueu modificar al CSS del vostre tema. És fantastic! Tot en un sol lloc, podeu configurar tot des de la font predeterminada fins a l'amplada de la pantalla a la vora de la barra de migració.

Per descomptat, sempre podeu configurar fitxers addicionals. Però _variables.scss és un lloc esplèndid per començar.

Noteu l'extensió del fitxer: scss, no css. Per utilitzar _variables.scss, haureu de configurar SASS (un llenguatge d'extensió CSS) i Compass (un marc construït amb SASS). Quan executeu la compilació de compàs, els vostres fitxers scss es convertiran en CSS encantadors en fitxers separats. (Prefereixo veure la brúixola: això continua funcionant i actualitzant el CSS a mida que ajusteu els fitxers scss).

Si realment no voleu molestar-vos amb SASS, podeu escriure fitxers CSS com de costum i enumerar-los al fitxer .info del vostre tema. Però confia en mi: la inversió de temps diminuta per aprendre prou com per a compilar variables _vàlvics es pagarà gairebé instantàniament.

Abans d'utilitzar la Fundació ZURB

La Fundació ZURB és excel·lent, però no és l'únic marc d'interfície que s'ha integrat amb Drupal. És possible que vulgueu considerar Bootstrap , un entorn similar que també té un tema de Drupal. De moment, estic utilitzant la Fundació ZURB, però això és perquè la meva investigació indica que era més fàcil personalitzar que Bootstrap.

A més, el component Joyride és bastant dolç.

I si utilitzeu ZURB Foundation, Bootstrap o algun altre marc, assegureu-vos d'obtenir aquests consells sobre com utilitzar un marc amb Drupal .