Skip to main content

Uporaba teme ZURB Foundation for Drupal

Anonim

Preden je bil Twitter Bootstrap, je bila (in je) ZURB Foundation, okvir, ki vam omogoča, da dodate lepe gumbe, blok omrežja, napredne palice, cenovne tabele in še veliko več z nekaj dobro postavljenimi razredi CSS. Z temo Fundacije ZURB za Drupal lahko s tem zlomom na svoji strani Drupal spustite vse to bling.

Kakšen je okvir ZURB Foundation?

Okvir ZURB Foundation je zbirka CSS in Javascript kode za vrsto stvari, ki jih verjetno želite na svoji spletni strani. To vključuje ne samo klike za oči, kot so zgoraj omenjeni gumbi, ampak tudi nekaj res neverjetno odzivno moč.

Večino teh funkcij uporabljate tako, da dodate posebne razrede CSS. Na primer:

Tukaj je gumb.

In tukaj je majhen gumb.

Okvir ZURB Foundation je popolnoma ločen od Drupala. Ljudje jo uporabljajo na spletnih straneh WordPress, Joomla in celo statičnih spletnih mestih HTML.

Kaj je ZURB Foundation Drupal Theme?

Drupal ZURB Foundation tema vam omogoča, da sprostite vse to moč ZURBish samo s prenosom in omogočanjem teme (ter branjem dokumentacije in seveda nekaj dodatnih korakih).

Na primer, fundacija ZURB temelji na knjižnici jQuery Javascript, zato boste verjetno morali namestiti jQuery Update. Preverite, ali uporabljate druge module, ki se zanašajo na jQuery. Če uporabljate preveč novo različico jQuery, lahko ti moduli prenehajo delovati.

Tudi to temo boste verjetno želeli uporabiti kot osnovno temo za svojo temo po meri. Prilagoditev je, kjer ZURB Foundation resnično sije.

Ali potrebujete to temo za uporabo ZURB Foundation v Drupalu?

Ne boš potreba to temo uporabiti okvir ZURB Foundation. Na svoji najpreprostejši temi ta tema samo dodaja ZURB Foundation CSS in Javascript na vašo spletno stran in to lahko storite ročno.

Ampak ta tema olajša in vključuje tudi nekaj nadaljnjega povezovanja z Drupalom.

Poleg tega lahko dodate manjše dodatne module za nadaljnjo integracijo. Na primer, modul ZURB Orbit vam omogoča izdelavo diaprojekcije Orbit s slikovnimi polji. Modul ZURB Clearing vam omogoča ustvarjanje odzivnih okvirjev s predstavnostnimi slikami.

Opomba: teh majhnih modulov še nisem uporabljal sami, zato so morda obremenjeni z nevarnostjo. Od tega pisanja zahteva ZURB Clearing

Media-2.x-dev, ki bi lahko bila nevarna nadgradnja, če trenutno uporabljate Media 1.x. Zahteva za razvojno različico modula bi morala vedno omogočiti tudi premor. Vseeno pa je vredno ogledati te in druge modele ZURB.

Izberite katera različica Fundacije ZURB za uporabo

Preden prenesete temo ZURB Foundation, preverite, katero različico morate uporabiti. Obstajajo različne večje različice okvira ZURB Foundation, glavna številka različice teme pa ustreza okvirom, s katerim deluje. Torej

7.x-3.x različice teme delujejo z Fundacijo 3,

7.x-4.x različice delujejo z Fundacijo 4, in

7.x-5.x Različice delujejo z Fundacijo 5.

Od tega pisanja je najnovejša stabilna različica teme 7.x-4.x, ki deluje z Foundation 4. Različica 7.x-5.x še vedno v razvoju. Torej, čeprav se na spletni strani okvirnega spletišča predpostavlja, da boste uporabljali Fundacijo 5, boste morda želeli zdaj držati Fundacije 4.

Upoštevajte tudi, da ima fundacija 5 dodatne zahteve, zlasti jQuery

1.10. Foundation 4 potrebuje le jQuery

1.7+.

Zavedajte se, katero različico Fundacije uporabljate, ko preberete spletno dokumentacijo. To še posebej velja, če ne uporabljate najnovejše različice okvira. Smrtno je zlahka zdrsniti v branje dokumentov za, recimo, Fundacija 5, nato pa razočarani, ko nova funkcija ne deluje na spletnem mestu Foundation 4.

Na primer, Fundacija 5 vključuje celo vrsto

srednje razrede za srednje velike zaslone. V Fundaciji 4 bodo ti misteriozno odpovedali, če ne boste naredili dodatnih korakov.

Uporabite SASS, Compass in "_variables.scss"!

Če boste kljub temu prilagodili CSS za to temo, se prepričajte, da:

  • Uporabite temo Fundacije ZURB kot osnovno temo za vašo subtheme po meri
  • Ustvari ta podtek z uporabo

    drus ukaz, ki ga ponuja tema. Všečkaj to:

    drush fst your_theme_name

  • Lepo poizkusite odlično

    _variables.scss mapa

The

_variables.scss datoteko samodejno ustvari

drush fst. Ta posamična datoteka vsebuje skoraj vse spremenljivke karkoli boste morda želeli urejati svojo temo CSS. Neverjetno je! Vse na enem mestu lahko nastavite vse od privzete pisave do širine zaslona do meje na drobtinici.

Seveda lahko vedno nastavite tudi dodatne datoteke. Ampak

_variables.scss je čudovit kraj za začetek.

Obvestilo o razširitvi datoteke:

scss, ne

css. Uporabiti

_variables.scss, boste morali nastaviti SASS (CSS jezik razširitve) in Compass (okvir, zgrajen s SASS-om). Ko tečeš

kompas zbira, tvoj

scss datoteke se bodo v ločenih datotekah spremenile v čudovit CSS. (Raje bi

kompasska ura - to še naprej izvaja in posodablja CSS, ko se potegujete

scss datoteke.)

Če se resnično resnično ne želite truditi s SASS-om, lahko datoteke CSS napišete kot običajno in jih navedete v temi

.info mapa. Toda verjemite mi - majhen čas naložbe, da se naučite dovolj za zbiranje

_variables.scss bo skoraj takoj povrnjen.

Pred uporabo ZURB Foundation

Fundacija ZURB je odlična, vendar ni edini sprednji okvir, ki je integriran z Drupalom. Morda boste želeli razmisliti o Bootstrapu, podobnem okviru, ki ima tudi temo Drupal. Za zdaj uporabljam Fundacijo ZURB, toda zato, ker so moje raziskave pokazale, da je lažje prilagoditi kot Bootstrap.

Tudi komponenta Joyride je precej sladka.

In ali uporabljate ZURB Foundation, Bootstrap ali drug okvir, se prepričajte, da te nasvete dobite pri uporabi okvira z Drupalom.