Înainte de a avea Twitter Bootstrap, a existat (și este) Fundația ZURB, un cadru care vă permite să adăugați butoane destul de bune, blocuri de grilă, bare de progres, tabele de prețuri și multe altele, cu câteva clase CSS bine plasate. Cu tema Fundației ZURB pentru Drupal, puteți dezlănțui toate aceste bling-uri pe site-ul Drupal cu ușurință letală.
Care este Cadrul Fundației ZURB?
Cadrul Fundației ZURB este o colecție de coduri CSS și Javascript pentru o grămadă de lucruri pe care probabil că doriți pe site-ul dvs. Web. Acest lucru include nu numai bomboane ochi clickabile ca butoanele menționate mai sus, dar, de asemenea, unele putere cu adevărat uimitoare receptive.
Utilizați majoritatea acestor funcții adăugând clase speciale CSS. De exemplu:
Aici este .
Și aici este a buton mic.
Cadrul Fundației ZURB este complet separat de Drupal. Oamenii o folosesc pe site-uri WordPress, Joomla, și chiar pe site-uri statice HTML.
Ce este tema Drupal a Fundației ZURB?
Fundația Drupal ZURB temă vă permite să dezlănțuiți această putere ZURBish doar prin descărcarea și activarea unei teme (și citirea documentației și luarea câtorva pași suplimentari, desigur).
De exemplu, fundația ZURB se bazează pe biblioteca jQuery Javascript, deci probabil că va trebui să instalați jQuery Update. Verificați dacă utilizați alte module care se bazează pe jQuery. Dacă utilizați o versiune prea recentă a jQuery, este posibil ca aceste module să nu mai funcționeze.
De asemenea, probabil veți dori să utilizați această temă ca temă de bază pentru propria temă personalizată. Personalizarea este locul unde Fundația ZURB strălucește cu adevărat.
Ai nevoie de această temă pentru a utiliza Fundația ZURB în Drupal?
Tu nu nevoie această temă pentru a utiliza cadrul Fundației ZURB. La cea mai simplă temă, această temă doar adaugă site-ul dvs. ZSSB Foundation CSS și Javascript și puteți face acest lucru manual.
Dar această temă face mai ușoară și include și o altă integrare cu Drupal.
În plus, puteți adăuga module suplimentare mai mici pentru o integrare ulterioară. De exemplu, modulul ZURB Orbit vă permite să creați o prezentare de diapozitive Orbit cu câmpuri de imagine. Modulul de compensare ZURB vă permite să creați cutii de lumină receptive cu ajutorul imaginilor media.
Notă: Încă nu am folosit aceste module minuscule, ca să fie periculoase. De la această scriere, se cere ZURB Clearing
Media-2.x-dev, care ar putea fi o actualizare periculoasă dacă utilizați în prezent Media 1.x. Și o cerință pentru o versiune de dezvoltare a unui modul ar trebui să dea întotdeauna o pauză. Totuși, aceste și alte module ZURB merită să fie analizate.
Alegeți ce versiune a Fundației ZURB să utilizați
Înainte de a descărca tema Fundației ZURB, verificați ce versiune să utilizați. Există diferite versiuni majore ale cadrului Fundației ZURB, iar numărul versiunii majore pentru temă corespunde cadrului cu care lucrează. Asa ca
7.x-3.X versiuni ale temei de lucru cu Fundația 3,
7.x-4.X Versiunile lucrează cu Fundația 4, si
7.x-5.X Versiunile lucrează cu Fundația 5.
Din această scriere, cea mai recentă versiune stabilă a temei este 7.x-4.x, care funcționează cu Fundația 4. Versiunea 7.x-5.x este încă în curs de dezvoltare. Deci, deși site-ul web al Fundației presupune că veți folosi Fundația 5, poate doriți să rămâneți în continuare cu Fundația 4.
De asemenea, rețineți că Fundația 5 are cerințe suplimentare, în special jQuery
1.10. Fundația 4 are nevoie doar de jQuery
1.7+.
Fiți conștienți de versiunea de fundație pe care o utilizați atunci când citiți documentația online. Acest lucru este valabil mai ales dacă nu utilizați cea mai recentă versiune a cadrului. Este ușor să intrăm în citirea docs-ului, să zicem, Fundația 5, apoi să fii frustrat atunci când o nouă caracteristică nu funcționează pe site-ul tău Foundation 4.
De exemplu, Fundația 5 include un set întreg
mediu clase pentru ecrane de dimensiuni medii. În Fundația 4, acestea vor eșua în mod misterios dacă nu faceți pași suplimentari.
Utilizați SASS, Compass și "_variables.scss"!
Dacă aveți de gând să tweak CSS pentru această temă la toate, asigurați-vă că:
- Utilizați tema fundației ZURB ca temă de bază pentru subiectul dvs. personalizat
- Generați acest subtemă folosind
drush comandă furnizată de temă. Asa:
te pentru numele tău
- Călătorii cu plăcere excelent
_variables.scss fişier
_variables.scss fișierul este creat automat de către
drush fst. Acest singur fișier conține variabile pentru aproape orice este posibil să doriți să modificați în tema CSS. Este uimitor! Toate într-un singur loc, puteți seta totul, de la fontul prestabilit, la lățimea ecranului, până la marginea de pe panourile de coacere.
Desigur, puteți seta și alte fișiere suplimentare. Dar
_variables.scss este un loc splendid pentru a începe.
Observați extensia fișierului:
SCSS, nu
css. A folosi
_variables.scss, va trebui să configurați SASS (o limbă de extensie CSS) și Compass (un cadru construit cu SASS). Când alergi
busola compila, ta
SCSS fișierele vor deveni minunate CSS în fișiere separate. (Eu prefer
ceas de compas - aceasta continuă să ruleze și să actualizeze CSS pe măsură ce optimizați
SCSS fișiere.)
Dacă într-adevăr nu vrei să te deranjezi cu SASS, poți să creezi fișiere CSS ca de obicei și să le prezinți în tema
.info fişier. Dar ai încredere în mine - investiția de timp foarte mică pentru a învăța suficient pentru a compila
_variables.scss vor fi plătite aproape instantaneu.
Înainte de a utiliza Fundația ZURB
Fundația ZURB este excelentă, dar nu este singurul cadru front-end care a fost integrat cu Drupal. S-ar putea să doriți să luați în considerare Bootstrap, un cadru similar care are și o temă Drupal. Deocamdată, eu folosesc fundația ZURB, dar asta pentru că cercetarea mea a indicat că era mai ușor să personalizați decât Bootstrap.
De asemenea, componenta Joyride este destul de dulce.
Și dacă utilizați Fundația ZURB, Bootstrap sau alt cadru, asigurați-vă că aveți aceste sfaturi despre utilizarea unui cadru cu Drupal.
