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 una .
I aquí hi ha una petit botó.
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?
La Fundació Drupal ZURB tema 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 ho fas necessitat Aquest tema usarà 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'aquesta escriptura, ZURB Clearing requereix
Media-2.x-dev, que podria suposar 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. Doncs el
7.x-3.x Les versions del tema funcionen amb la Fundació 3, el
7.x-4.x Les versions funcionen amb la Fundació 4, i la
7.x-5.x Les versions funcionen amb la Fundació 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
mitjà classes per a pantalles de grandària mitja. A la Fundació 4, aquests fracassaran misteriosament si no feu més passos.
Utilitzeu SASS, Compass i "_variables.scss"!
Si aneu a modificar el CSS per a aquest tema, assegureu-vos que:
- Utilitzeu el tema de la Fundació ZURB com a tema base per al vostre propi subtema personalitzat
- Genereu aquest subtema amb el
embogir ordre proporcionada pel tema. Com això:
perdureix el vostre nom_elme
- Passeu-vos un cop d'ull a l'excel·lent
_variables.scss dossier
El
_variables.scss L'arxiu es crea automàticament per
drush fst. Aquest únic fitxer conté variables per a gairebé qualsevol cosa és possible que vulgueu modificar el vostre CSS 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.
Tingueu en compte l'extensió del fitxer:
scss, no
css. Usar
_variables.scss, haurà de configurar SASS (un llenguatge d'extensió CSS) i Compass (un marc construït amb SASS). Quan s'executi
Compilació de brúixola, el vostre
scss Els fitxers es convertiran en CSS encantadors en fitxers separats. (Prefereixo
rellotge de brúixola - això continua funcionant i actualitzant el CSS a mesura que ajusteu el
scss fitxers).
Si realment, realment no voleu molestar-vos amb SASS, podeu escriure fitxers CSS com de costum i enumerar-los al vostre tema
.info dossier. Però confia en mi: la inversió en el temps per aprendre prou com per compilar
_variables.scss 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.
