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 .
Ja tässä on a 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 -säätiö teema voit vapauttaa kaiken tämän ZURB-tehon vain lataamalla ja ottamalla käyttöön teeman (ja lukemalla dokumentaatiota ja tekemällä muutama ylimääräinen vaihe tietenkin).
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?
Ette tarve tämä teema 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ästä kirjoituksesta ZURB Clearing vaatii
Media-2.x-dev, mikä voi olla vaarallinen päivitys, jos käytössäsi on Media 1.x. 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. Joten
7.x-3.x teemojen versiot säätiön kanssa 3,
7.x-4.x versiot toimivat säätiön kanssa 4, ja
7.x-5.x Versiot toimivat säätiön kanssa 5.
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. Säätiö 4 tarvitsee vain jQueryn
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 säätiö 5 sisältää koko joukon
keskikokoinen luokat keskikokoisille näytöille. Säätiössä 4 nämä salaperäisesti epäonnistuvat, ellet ota ylimääräisiä askelia.
Käytä SASS, Compass ja "_variables.scss"!
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ä subtheme käyttäen
drush teeman tarjoama komento. Kuten tämä:
drush fst your_theme_name
- Leisurely peruse erinomainen
_variables.scss tiedosto
_variables.scss tiedosto luodaan automaattisesti
drush fst. Tämä yksittäinen tiedosto sisältää muuttujia melkein mitä vain saatat haluta nipistää teema-CSS: ään. 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. Käyttää
_variables.scss, sinun on määritettävä SASS (CSS-laajennuskieli) ja Compass (SASS: llä rakennettu kehys). Kun suoritat
kompassi koota, sinun
SCSS tiedostot muuttuvat kauniiksi CSS: ksi erillisissä tiedostoissa. (Minä suosin
kompassikello - tämä ylläpitää ja päivittää CSS: tä kun teet
SCSS tiedostot.)
Jos et todellakaan halua häiritä SASSin kanssa, voit kirjoittaa CSS-tiedostoja tavalliseen tapaan ja luetella ne teemasi
.tiedot tiedosto. Mutta luottaa 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.
