Folosind tema Fundației ZURB pentru Drupal

Obțineți puterea cadrului fundației ZURB într-o temă Drupal

Î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 un buton .

Și aici este un buton "mic"> 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?

Tema Fundației Drupal ZURB vă permite să dezlănțuiți toată 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?

Nu aveți nevoie de 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, ZURB Clearing necesită Media-2.x-dev, ceea ce 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ă. Deci, versiunile 7.x- 3 .x ale temei lucrează cu Fundația 3 , versiunile 7.x- 4 .x lucrează cu Fundația 4 și versiunile 7.x- 5 .x 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 de clase medii 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 & # 34; variables.scss & # 34;!

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
• Generează acest subtemă folosind comanda drush oferită de temă. La fel ca și în cazul în care: numele tău este numele tău
• Citiți cu ușurință fișierul excelent _variables.scss

Fișierul _variables.scss este creat automat de drush fst. Acest singur fișier conține variabile pentru aproape orice 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. Pentru a utiliza _variables.scss, va trebui să configurați SASS (limbaj de extensie CSS) și Compass (un cadru construit cu SASS). Când compilați compasul, fișierele dvs. scss se vor transforma în CSS minunat în fișiere separate. (Prefer ceas de compas - acest lucru continuă să ruleze și să actualizeze CSS pe măsură ce modificați fișierele scss.)

Dacă într-adevăr nu doriți să vă deranjezi cu SASS, puteți scrie fișiere CSS ca de obicei și le puteți arăta în fișierul .info al temei. Dar credeți-mă - investiția de timp pentru a învăța suficient pentru a compila _variables.scss va fi plătită 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 .