Menggunakan Tema Yayasan ZURB untuk Drupal

Dapatkan Kekuatan Rangka Kerja Yayasan ZURB dalam Tema Drupal

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 ini dengan menambahkan kelas CSS khas. Sebagai contoh:

Berikut adalah butang .

Dan di sini adalah butang kecil>> 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?

Tema Drupal ZURB Foundation membolehkan anda melepaskan semua kuasa ZURBish ini hanya dengan memuat turun dan membolehkan tema (dan membaca dokumentasi dan mengambil beberapa langkah tambahan, tentu saja).

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 perlu tema ini untuk menggunakan rangka kerja 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, versi 7.x- 3 .x tema berfungsi dengan Yayasan 3 , versi 7.x- 4 .x bekerja dengan Yayasan 4 , dan versi 7.x- 5 .x 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 kelas sederhana untuk skrin sederhana. Di Yayasan 4, ini akan gagal secara misteri kecuali anda mengambil langkah tambahan.

Gunakan SASS, Kompas, dan & # 34; _variables.scss & # 34 ;!

Jika anda akan mengubah CSS untuk tema ini sama sekali, pastikan anda:

Fail _variables.scss dibuat secara automatik dengan drush fst. Fail tunggal ini mengandungi pembolehubah untuk hampir apa sahaja yang 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, bukan css. Untuk menggunakan _variables.scss, anda perlu menyediakan SASS (bahasa sambungan CSS) dan Kompas (rangka kerja yang dibina dengan SASS). Apabila anda menjalankan kompilasi kompas, fail scss anda akan berubah menjadi CSS yang indah dalam fail berasingan. (Saya lebih suka menonton kompas - ini terus berjalan dan mengemas kini CSS semasa anda tweak fail scss.)

Jika anda benar-benar tidak mahu mengganggu dengan SASS, anda boleh menulis fail CSS seperti biasa dan menyenaraikannya dalam fail .info tema anda. Tetapi percayalah saya - pelaburan masa yang kecil untuk belajar cukup untuk menyusun _variables.scss akan dibayar kembali 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 .