Sebelum ada Twitter Bootstrap, ada (dan) ZURB Foundation, kerangka kerja yang memungkinkan Anda menambahkan tombol cantik, memblokir kotak, bilah kemajuan, tabel harga, dan banyak lagi dengan beberapa kelas CSS yang ditempatkan dengan baik. Dengan tema ZURB Foundation untuk Drupal, Anda dapat melepaskan semua bling ini di situs Drupal Anda dengan mudah.
Apa itu Kerangka Yayasan ZURB?
Kerangka Dasar ZURB adalah kumpulan kode CSS dan Javascript untuk banyak hal yang mungkin Anda inginkan di situs web Anda. Ini termasuk tidak hanya permen mata yang dapat diklik seperti tombol yang disebutkan di atas tetapi juga beberapa kekuatan responsif yang benar-benar menakjubkan.
Anda menggunakan sebagian besar fitur ini dengan menambahkan kelas khusus CSS. Contohnya:
Ini dia .
Dan ini dia tombol kecil.
Kerangka Yayasan ZURB benar-benar terpisah dari Drupal. Orang menggunakannya di WordPress, Joomla, dan bahkan situs HTML statis.
Apa itu Tema Drupal Yayasan ZURB?
Yayasan Drupal ZURB tema memungkinkan Anda untuk melepaskan semua kekuatan ZURBish ini hanya dengan mengunduh dan mengaktifkan tema (dan membaca dokumentasi dan mengambil beberapa langkah tambahan, tentu saja).
Sebagai contoh, ZURB Foundation bergantung pada pustaka jQuery Javascript, jadi Anda mungkin harus menginstal pembaruan jQuery. Periksa apakah Anda menggunakan modul lain yang bergantung pada jQuery. Jika Anda menggunakan versi jQuery yang terlalu baru, modul ini mungkin berhenti berfungsi.
Juga, Anda mungkin ingin menggunakan tema ini sebagai tema dasar untuk tema khusus Anda sendiri. Kustomisasi adalah tempat ZURB Foundation benar-benar bersinar.
Apakah Anda Membutuhkan Tema Ini Untuk Menggunakan Yayasan ZURB di Drupal?
Kamu tidak perlu tema ini untuk menggunakan kerangka Yayasan ZURB. Pada dasarnya, tema ini hanya menambahkan ZURB Foundation CSS dan Javascript ke situs Anda, dan Anda dapat melakukannya secara manual.
Tapi tema ini membuatnya lebih mudah, dan itu juga mencakup beberapa integrasi lebih lanjut dengan Drupal.
Plus, Anda dapat menambahkan modul tambahan yang lebih kecil untuk integrasi lebih lanjut. Sebagai contoh, modul Orbit ZURB memungkinkan Anda membangun slideshow Orbit dengan bidang gambar. Modul Clearing ZURB memungkinkan Anda membuat lightbox yang responsif dengan gambar Media.
Catatan: Saya belum pernah menggunakan modul kecil ini sendiri, jadi mereka mungkin penuh bahaya. Pada tulisan ini, ZURB Clearing membutuhkan
Media-2.x-dev, yang dapat menjadi peningkatan berbahaya jika saat ini Anda menggunakan Media 1.x. Dan persyaratan untuk versi pengembangan modul harus selalu memberikan jeda. Namun, modul-modul ZURB ini dan lainnya layak dicermati.
Pilih Versi ZURB Foundation yang Mana yang Digunakan
Sebelum Anda mengunduh tema ZURB Foundation, periksa versi mana yang harus Anda gunakan. Ada berbagai versi utama dari kerangka Yayasan ZURB, dan nomor versi utama untuk tema sesuai dengan kerangka kerjanya. Sehingga
7.x-3.x versi dari karya tema dengan Yayasan 3, yang
7.x-4.x versi bekerja dengan Yayasan 4, dan
7.x-5.x Versi bekerja dengan Yayasan 5.
Pada tulisan ini, versi stabil terbaru dari tema adalah 7.x-4.x, yang bekerja dengan Yayasan 4. Versi 7.x-5.x masih dalam pengembangan. Jadi, meskipun situs web kerangka kerja Yayasan berasumsi Anda akan menggunakan Foundation 5, Anda mungkin ingin tetap menggunakan Foundation 4 untuk saat ini.
Juga perhatikan bahwa Foundation 5 memiliki persyaratan tambahan, terutama jQuery
1.10. Yayasan 4 hanya butuh jQuery
1.7+.
Sadarilah versi Foundation mana yang Anda gunakan saat membaca dokumentasi online. Ini terutama berlaku jika Anda tidak menggunakan versi terbaru dari framework. Sangat mudah untuk menyelinap ke dalam membaca dokumen untuk, katakanlah, Yayasan 5, kemudian frustrasi ketika fitur baru tidak berfungsi di situs Yayasan 4 Anda.
Misalnya, Yayasan 5 mencakup seluruh rangkaian
medium kelas untuk layar berukuran sedang. Di Foundation 4, ini secara misterius akan gagal kecuali Anda mengambil langkah tambahan.
Gunakan SASS, Compass, dan "_variables.scss"!
Jika Anda akan men-tweak CSS untuk tema ini, pastikan Anda:
- Gunakan tema ZURB Foundation sebagai tema dasar untuk sub tema khusus Anda sendiri
- Hasilkan subtema ini menggunakan
drush perintah yang disediakan oleh tema. Seperti ini:
drush fst your_theme_name
- Dengan santai membaca dengan teliti
_variables.scss mengajukan
Itu
_variables.scss file dibuat secara otomatis oleh
drush fst. File tunggal ini mengandung variabel untuk hampir apa pun Anda mungkin ingin men-tweak di CSS tema Anda. Sungguh menakjubkan! Semua di satu tempat, Anda dapat mengatur semuanya dari font default ke lebar layar ke perbatasan pada breadcrumbs.
Tentu saja, Anda selalu dapat mengatur file tambahan juga. Tapi
_variables.scss adalah tempat yang bagus untuk memulai.
Perhatikan ekstensi file:
scsstidak
css. Menggunakan
_variables.scss, Anda harus mengatur SASS (bahasa ekstensi CSS) dan Kompas (kerangka kerja yang dibuat dengan SASS). Saat Anda berlari
kompas kompilasi, Anda
scss file akan berubah menjadi CSS yang indah dalam file terpisah. (Saya lebih memilih
jam tangan kompas - ini terus berjalan dan memperbarui CSS saat Anda men-tweak
scss file.)
Jika Anda benar-benar tidak ingin repot dengan SASS, Anda dapat menulis file CSS seperti biasa dan mencantumkannya dalam tema Anda
.info mengajukan. Tapi percayalah pada saya - investasi waktu kecil untuk belajar cukup untuk dikompilasi
_variables.scss akan dibayar kembali seketika.
Sebelum Anda Menggunakan Yayasan ZURB
ZURB Foundation sangat baik, tetapi bukan satu-satunya kerangka front-end yang terintegrasi dengan Drupal. Anda mungkin ingin mempertimbangkan Bootstrap, kerangka kerja serupa yang juga memiliki tema Drupal. Untuk saat ini, saya menggunakan ZURB Foundation sendiri, tetapi itu karena penelitian saya mengindikasikan bahwa itu lebih mudah untuk disesuaikan daripada Bootstrap.
Juga, komponen Joyride cukup manis.
Dan apakah Anda menggunakan ZURB Foundation, Bootstrap, atau beberapa kerangka kerja lainnya, pastikan untuk mendapatkan kiat-kiat ini dalam menggunakan kerangka kerja dengan Drupal.
