Dapatkan Kekuatan Kerangka Dasar ZURB dalam Tema Drupal
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 adalah tombol . Dan ini adalah tombol kecil tombol kecil . Kerangka Yayasan ZURB benar-benar terpisah dari Drupal. Orang menggunakannya di WordPress, Joomla, dan bahkan situs HTML statis . Tema Drupal ZURB Foundation 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. Anda tidak memerlukan 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 bisa menjadi upgrade berbahaya jika Anda saat ini menggunakan Media 1.x. Dan persyaratan untuk versi pengembangan modul harus selalu memberikan jeda. Namun, modul-modul ZURB ini dan lainnya layak dicermati. 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. Jadi, versi 7.x- 3.x dari tema berfungsi dengan Foundation 3 , versi 7.x- 4 .x bekerja dengan Foundation 4 , dan versi 7.x- 5 .x bekerja dengan Foundation 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 membutuhkan 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 keseluruhan kelas menengah untuk layar berukuran sedang. Di Foundation 4, ini secara misterius akan gagal kecuali Anda mengambil langkah tambahan. Jika Anda akan men-tweak CSS untuk tema ini, pastikan Anda: File _variables.scss dibuat secara otomatis oleh drush fst. File tunggal ini berisi variabel untuk hampir semua hal yang mungkin ingin Anda ubah dalam tema CSS 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: scss, bukan css. Untuk menggunakan _variables.scss, Anda harus mengatur SASS (bahasa ekstensi CSS) dan Kompas (kerangka kerja yang dibuat dengan SASS). Ketika Anda menjalankan kompilasi kompas, file scss Anda akan berubah menjadi CSS yang indah dalam file terpisah. (Saya lebih suka menonton kompas - ini terus berjalan dan memperbarui CSS saat Anda men-tweak file scss.) Jika Anda benar-benar tidak ingin repot dengan SASS, Anda dapat menulis file CSS seperti biasa dan mencantumkannya dalam file .info tema Anda. Tetapi percayalah pada saya - investasi waktu kecil untuk belajar cukup untuk mengkompilasi _variables.scss akan dibayarkan kembali seketika. 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 . Apa itu Tema Drupal Yayasan ZURB?
Apakah Anda Membutuhkan Tema Ini Untuk Menggunakan Yayasan ZURB di Drupal?
Pilih Versi ZURB Foundation yang Mana yang Digunakan
Gunakan SASS, Compass, dan & # 34; _variables.scss & # 34 ;!
Sebelum Anda Menggunakan Yayasan ZURB