Sebelum terdapat Twitter Bootstrap, ada (dan) Yayasan ZURB, rangka kerja yang membolehkan anda menambah butang yang cantik, menyekat grid, bar kemajuan, jadual harga dan banyak lagi dengan beberapa kelas CSS yang diletakkan dengan baik. Dengan tema ZURB Foundation untuk Drupal, anda boleh melepaskan semua bling ini di laman Drupal anda dengan mudah membawa maut.
Apakah Rangka Kerja Yayasan ZURB?
Rangka kerja Yayasan ZURB adalah koleksi kode CSS dan Javascript untuk banyak hal yang mungkin Anda inginkan di laman web Anda. Ini termasuk bukan sahaja permen mata yang boleh diklik seperti butang yang disebutkan di atas tetapi juga beberapa kuasa responsif yang sangat menakjubkan.
Anda menggunakan sebahagian besar ciri-ciri ini dengan menambah kelas CSS khas. Sebagai contoh:
Berikut adalah .
Dan ini adalah a butang kecil.
Rangka kerja Yayasan ZURB sepenuhnya terpisah dari Drupal. Orang menggunakannya di WordPress, Joomla, dan juga tapak HTML statik.
Apakah Tema Drupal Yayasan ZURB?
Yayasan Drupal ZURB tema membolehkan anda melepaskan semua kuasa ZURBish ini hanya dengan memuat turun dan membolehkan tema (dan membaca dokumentasi dan mengambil beberapa langkah tambahan, sudah tentu).
Contohnya, Yayasan ZURB bergantung pada perpustakaan Javascript jQuery, jadi anda mungkin perlu memasang Kemas Kini jQuery. Semak sama ada anda menggunakan sebarang modul lain yang bergantung kepada jQuery. Jika anda menggunakan terlalu banyak versi jQuery, modul ini mungkin berhenti berfungsi.
Juga, anda mungkin mahu menggunakan tema ini sebagai tema asas untuk tema tersuai anda sendiri. Penyesuaian adalah di mana Yayasan ZURB benar-benar bersinar.
Adakah Anda Perlu Tema ini Menggunakan Yayasan ZURB di Drupal?
Anda tidak keperluan tema ini menggunakan kerangka Yayasan ZURB. Pada yang paling mudah, tema ini hanya menambah CSS ZURB Foundation dan Javascript ke laman web anda, dan anda boleh melakukannya secara manual.
Tetapi tema ini menjadikannya lebih mudah, dan ia juga menyertakan beberapa lagi integrasi dengan Drupal.
Tambahan pula, anda boleh menambah modul tambahan yang lebih kecil untuk integrasi selanjutnya. Sebagai contoh, modul Orbit ZURB membolehkan anda membina tayangan Orbit dengan medan imej. Modul Kliring ZURB membolehkan anda membuat peti cahaya yang responsif dengan imej Media.
Nota: Saya belum menggunakan modul kecil ini sendiri, jadi mereka mungkin penuh dengan bahaya. Sehingga penulisan ini, ZURB Clearing memerlukan
Media-2.x-dev, yang boleh menjadi peningkatan yang berbahaya jika anda sedang menggunakan Media 1.x. Dan keperluan untuk versi pembangunan modul harus selalu memberi satu jeda. Namun, modul-modul ZURB dan lain-lain ini perlu dipertimbangkan.
Pilih Versi Yayasan ZURB Yang Digunakan
Sebelum anda memuat turun tema ZURB Foundation, periksa versi yang harus anda gunakan. Terdapat pelbagai versi utama rangka kerja Yayasan ZURB, dan nombor versi utama untuk tema itu sesuai dengan kerangka kerja yang ia kerjakan. Jadi
7.x-3.x versi tema dengan Yayasan 3, yang
7.x-4.x versi bekerja dengan Yayasan 4, dan juga
7.x-5.x Versi bekerja dengan Yayasan 5.
Sehingga penulisan ini, versi stabil tema terkini adalah 7.x-4.x, yang berfungsi dengan Yayasan 4. Versi 7.x-5.x masih dalam pembangunan. Oleh itu, walaupun tapak web rangka kerja Asas menganggap anda akan menggunakan Foundation 5, anda mungkin mahu tetap dengan Yayasan 4 untuk sekarang.
Juga ambil perhatian bahawa Foundation 5 mempunyai keperluan tambahan, terutama jQuery
1.10. Yayasan 4 hanya memerlukan jQuery
1.7+.
Perhatikan versi Yayasan yang anda gunakan apabila anda membaca dokumentasi dalam talian. Ini benar terutamanya jika anda tidak menggunakan versi terkini kerangka kerja. Sudah cukup mudah untuk menyelinap membaca dokumentasi, katakan, Yayasan 5, kemudian kecewa apabila ciri baru tidak berfungsi pada tapak Yayasan 4 anda.
Sebagai contoh, Yayasan 5 merangkumi satu set keseluruhan
sederhana kelas untuk skrin bersaiz sederhana. Di Yayasan 4, ini akan gagal secara misteri kecuali anda mengambil langkah tambahan.
Gunakan SASS, Compass, dan "_variables.scss"!
Jika anda akan mengubah CSS untuk tema ini sama sekali, pastikan anda:
- Gunakan tema Yayasan ZURB sebagai tema asas untuk subtema tersuai anda sendiri
- Menjana subtema ini dengan menggunakan
drush arahan yang diberikan oleh tema. Seperti ini:
drush fst your_theme_name
- Rawat dengan teliti yang sangat baik
_variables.scss fail
The
_variables.scss fail dicipta secara automatik oleh
drush fst. Fail tunggal ini mengandungi pemboleh ubah hampir apa-apa anda mungkin mahu tweak dalam CSS tema anda. Ianya hebat! Semua dalam satu tempat, anda boleh menetapkan segala-galanya dari font lalai ke lebar skrin ke sempadan pada serbuk roti.
Sudah tentu, anda sentiasa dapat menyediakan fail tambahan. Tetapi
_variables.scss adalah tempat yang bagus untuk bermula.
Perhatikan sambungan fail:
scss, tidak
css. Untuk menggunakan
_variables.scss, anda perlu menyediakan SASS (bahasa sambungan CSS) dan Kompas (rangka kerja yang dibina dengan SASS). Apabila anda berlari
kompilasi kompas, anda
scss fail akan berubah menjadi CSS yang indah dalam fail berasingan. (Saya lebih suka
jam tangan kompas - ini terus berjalan dan mengemas kini CSS sambil anda tweak
scss fail.)
Jika anda benar-benar tidak mahu mengganggu dengan SASS, anda boleh menulis fail CSS seperti biasa dan menyenaraikannya dalam tema anda
.info fail. Tetapi percayalah kepada saya - pelaburan masa yang kecil untuk belajar cukup untuk dikompilasi
_variables.scss akan dibayar hampir serta-merta.
Sebelum Anda Menggunakan Yayasan ZURB
Yayasan ZURB paling baik, tetapi bukan satu-satunya kerangka depan yang telah disepadukan dengan Drupal. Anda mungkin ingin mempertimbangkan Bootstrap, rangka kerja serupa yang juga mempunyai tema Drupal. Buat masa ini, saya menggunakan Yayasan ZURB sendiri, tetapi itu kerana penyelidikan saya menunjukkan bahawa lebih mudah untuk menyesuaikan daripada Bootstrap.
Juga, komponen Joyride sangat manis.
Dan sama ada anda menggunakan Yayasan ZURB, Bootstrap, atau beberapa rangka kerja lain, pastikan anda mendapatkan tip ini menggunakan rangka kerja dengan Drupal.
