Käyttämällä ZURB Foundation teemaa Drupalille

Hanki ZURB Foundation Frameworkin voima Drupal-teemalla

Ennen kuin oli Twitter Bootstrap , oli (ja on) ZURB-säätiö, kehys, jonka avulla voit lisätä kauniita painikkeita, lohkareita, etenemispalkkeja, hinnoittelutaulukoita ja paljon muuta muutamia hyvin sijoitettuja CSS-luokkia. Drupalin ZURB-säätiön teemalla voit vapauttaa kaikki tämän blingin Drupalin sivustolla kuolemaan.

Mikä on ZURB Foundation Framework?

ZURB Foundation -kehys on kokoelma CSS- ja Javascript-koodia niille tavaroille, joita luultavasti haluat sivustossasi. Tämä ei sisällä vain klikattavaa silmäkakkua kuten edellä mainitut painikkeet, mutta myös todella hämmästyttävä herkkä teho.

Käytät useimpia näistä ominaisuuksista lisäämällä erityisiä CSS-luokkia. Esimerkiksi:

Tässä on -painike .

Tässä on pieni painike

ZURB-säätiön puitteet ovat täysin erillään Drupalista. Ihmiset käyttävät sitä WordPress-, Joomla- ja jopa staattisissa HTML- sivustoissa.

Mikä on ZURB-säätiön Drupal-teema?

Drupal ZURB Foundation teema mahdollistaa tämän ZURB-voiman vapauttamisen vain lataamalla ja ottamalla käyttöön teeman (ja lukemalla dokumentaatiota ja tietenkin muutamalla ylimääräisellä askeleella).

Esimerkiksi ZURB-säätiö tukeutuu jQuery-Javascript-kirjastoon, joten jQuery Update -päivitys on todennäköisesti asennettava. Tarkista, käyttävätkö muita jQueryn luotuja moduuleja. Jos käytät jQuery-versiona liian uutta, nämä moduulit voivat lopettaa toimintansa.

Lisäksi luultavasti haluat käyttää tätä teemaa oman teemasi perusaiheena. Räätälöinti on ZURB-säätiön todella loistava.

Tarvitsetko tämän teeman käyttää ZURB Foundationia Drupalissa?

Sinun ei tarvitse tätä teemaa käyttää ZURB-säätiön puitteita. Yksinkertaisimmillaan tämä teema lisää vain ZURB Foundation CSS: n ja Javascriptin sivustoosi, ja voit tehdä sen manuaalisesti.

Mutta tämä teema tekee siitä helpompaa, ja se sisältää myös jonkin verran liittämistä Drupaliin.

Lisäksi voit lisätä pienempiä lisäominaisuuksia integraation lisäämiseen. Esimerkiksi ZURB Orbit -moduulin avulla voit luoda Orbit-kuvaesityksen kuvakentillä. ZURB Clearing -moduulin avulla voit luoda reaaliaikaisia ​​lightboxeja mediatiedostoihin.

Huomaa: En ole käyttänyt näitä pieniä moduuleja vielä itse, joten ne voivat olla vaarassa. Tämän kirjoittamisen jälkeen ZURB Clearing vaatii Media-2.x-dev, joka voi olla vaarallinen päivitys, jos käytät Media 1.x -palvelua. Ja vaatimus moduulin kehittämistarpeesta pitäisi aina antaa yhden tauon. Silti nämä ja muut ZURB-moduulit kannattaa tarkastella.

Valitse ZURB-säätiön käytettävä versio

Ennen kuin lataat ZURB-säätiön teeman, tarkista, minkä version haluat käyttää. ZURB-säätiön puitteissa on useita tärkeimpiä versioita, ja teeman pääversion numero vastaa kehystä, jonka kanssa se toimii. Teeman 7.x-3.x-versiot toimivat Foundation 3: n kanssa , 7.x-4.x-versiot toimivat Foundation 4 : n kanssa ja 7.x-5.x-versiot toimivat Foundation 5: n kanssa .

Tämän kirjoittamisen jälkeen teeman viimeisin vakaa versio on 7.x-4.x, joka toimii Foundation 4: n kanssa. 7.x-5.x-versio on vielä kehittymässä. Joten vaikka säätiön puitekanta-sivusto olettaa käyttävänsi säätiötä 5, sinun kannattaa kiinnittää säätiö 4 nyt.

Huomaa myös, että säätiöllä 5 on ylimääräisiä vaatimuksia, erityisesti jQuery 1.10. Foundation 4 tarvitsee vain jQuery 1.7+.

Ole tietoinen säätiön version, jota käytät, kun luet online-dokumentaatiota. Tämä pätee erityisesti, jos et käytä kehyksen uusinta versiota. On fiksu helppokäyttöistä, kun lukee dokumentteja, kuten säätiötä 5, sitten turhautuu, kun uusi ominaisuus ei toimi Säätiön 4 sivustolla.

Esimerkiksi Foundation 5 sisältää keskikokoisten näytöksien koko joukon keskiluokkia. Säätiössä 4 nämä salaperäisesti epäonnistuvat, ellet ota ylimääräisiä askelia.

Käytä SASS, Compass ja & # 34; _variables.scss & # 34 ;!

Jos aiot muuttaa tämän teeman CSS: tä, varmista, että:

• Käytä ZURB-säätiön teemaa oman teemasi alamaailman perusteemana
• Luo tämä alamaite käyttämällä teeman tarjoamaa puuohjetta . Näin: drush fst your_theme_name
• Hitaasti koota erinomainen _variables.scss-tiedosto

_variables.scss-tiedosto luodaan automaattisesti drush fst: stä. Tämä yksittäinen tiedosto sisältää muuttujia melkein mitä haluat tehdä tweak-teeman teema-CSS: ssä. Se on mahtavaa! Kaikki yhdessä paikassa voit asettaa kaiken oletusfontista ruutun leveyteen leivänrutiinien reunaan.

Tietenkin, voit myös luoda ylimääräisiä tiedostoja. Mutta _variables.scss on loistava paikka aloittaa.

Huomaa tiedostopääte: scss, ei css. Jos haluat käyttää _variables.scss: ää, sinun on määritettävä SASS (CSS-laajennuskieli) ja Compass (kehys, joka on rakennettu SASS: lla). Kun suoritat kompassin kääntämisen, skss-tiedostosi muuttuvat kauniiksi CSS-tiedostoiksi erillisissä tiedostoissa. (Mieluummin kompassikelloa - tämä jatkaa CSS: n päivittämistä, kun scss-tiedostoja muutetaan.)

Jos todella et halua häiritä SASS: ia, voit kirjoittaa CSS-tiedostoja tavalliseen tapaan ja luetella ne teemasi .info-tiedostossa. Mutta luota minuun - pieni aika investoida oppimaan tarpeeksi koota _variables.scss maksetaan takaisin lähes välittömästi.

Ennen kuin käytät ZURB-säätiötä

ZURB-säätiö on erinomainen, mutta se ei ole ainoa Front-End-kehys, joka on integroitu Drupaliin. Haluat ehkä harkita Bootstrap , samanlaista kehystä, jolla on myös Drupal-teema. Tällä hetkellä käytän ZURB -säätiötä itse, mutta siksi tutkimukseni mukaan se oli helpompi muokata kuin Bootstrap.

Myös Joyride-komponentti on melko makea.

Ja käytätkö ZURB-säätiötä, Bootstrapia tai jotain muuta kehystä, varmista, että saat nämä vinkit käyttämään kehystä Drupalin kanssa .