Drupal 7 : Mencoba Bootstrap, Less dan Gulp 1

Akhirnya ada lagi kesempatan menulis catatan di Pontianak Web & Open Source, kali ini mau buat catatan tentang mencoba Bootstrap di Drupal 7.

Seperti Starterkit Themes lainnya, Bootstrap menyediakan kerangka untuk membuat tampilan sebuah web menjadi lebih "mudah" dan cepat. Sebenarnya bingung juga kalau dibilang mudah, mungkin maksudnya lebih mudah daripada membuat baru. Bayangkan waktu yang diperlukan untuk mulai baru dari mengetik tag <html>.

Nah kebetulan dapat klien baru untuk menambah portofolio Pontianak Web & Open Source, dalam ujicoba ini beberapa versi yang aku gunakan adalah:

Sub Themes dengan Starterkits

Membuat sub themes sendiri dengan Bootstrap sedikit lebih panjang caranya dibandingkan dengan Zen yang cukup dengan menggunakan satu perintah Drush.

Jika Drupal sudah terinstall seperti biasa begitu juga dengan Themes Bootstrap. Aktifkan Bootstrap walapun tidak dijadikan default themes.

Buka folder Bootstrap yang berlokasi di /sites/all/themes/bootstrap. Cari folder starterkits, di dalamnya terdapat dua folder yaitu cdn dan less. Versi CDN ini menurut penjelasan dari websitenya adalah versi yang lebih sederhana, dimana kita hanya perlu menambahkan CSS tambahan untuk menimpa tampilan defaultnya.

Sedangkan versi less ini kita menggunakan LESS pre-processor (Apa itu LESS bisa dicek ke sini). Sampai saat ini sih belum pernah mencoba membadingkan keduanya lebih mendalam, namun sepertinya versi LESS ini kita bisa full modifikasi dengan bantuan LESS pre-processor. Disini mulai aku mengalami kesulitan, karena LESS ini adalah hal baru bagiku. Selama ini menggunakan ZEN dengan COMPASS dan SASS pre-processor. Tapi disitulah tantangan ilmu baru bukan?

Cari folder less dan copas saja folder less itu ke dalam folder /sites/all/themes/. Misal nama sub themes baru kita adalah solusi maka struktur foldernya adalah /sites/all/themes/solusi.

Sampai disini kita samakan struktur foldernya, struktur folder themes aku adalah seperti berikut:

--themes/
---bootstrap
---solusi

Nah setelah sama, berikutnya sama seperti themes standar dari Drupal. Didalam folder solusi, cari file less.starterkit dan ganti nama menjadi solusi.info. Edit file tersebut dengan menyesuaikan name dan description sesuai informasi themes kita. Berikutnya aktifkan sub themes yang sudah kita buat dan jadikan default. Sampai disini jangan kaget jika tampilan berantakan. Karena masih ada tahapan yang harus dilakukan.

Download dan Compile LESS

Tahapan berikutnya kita ambil source file dari bootstrap yang berikutnya kita compile dari LESS menjadi CSS. Karena yang digunakan oleh browser untuk mempercantik halaman website adalah CSS.

Download source bootstrap 3.3.5. Scroll kebawah dan cari yang judulnya Source Code. Bisa pakai yang zip maupun tar.gz sesuai selera. Hasil download tersebut ekstrak saja di folder sub themes kita dan buat nama foldernya menjadi bootstrap. Jadi struktur foldernya adalah sebagai berikut:
--nama_subthemes/
---bootstrap
---css
---less
---templates
---favicon.ico

Berikutnya Compile LESS. Untuk compile LESS pastikan komputer sudah ada compiler LESS. Caranya sederhana, file yang mau kita compile ada di less/style.less menjadi css/style.css.

Berdasarkan panduan less, kita bisa menggunakan perintah lessc styles.less styles.css. Nah dalam contoh sub themes kita maka perintahnya adalah lessc less/style.less css/style.css. Lakukan perintah ini dengan menggunakan terminal didalam folder root sub themes anda.

Refresh browser anda dan lihat hasilnya, subthemes bootstrap anda sudah muncul dengan baik kan? perintah lessc less/style.less css/style.css akan melakukan compile file less/style.less menjadi css/style.css. Jika file css belum ada maka lessc akan membuatnya.

Sampai saat ini sudah selesai, tinggal editing file yang berada didalam folder less saja untuk perubahan yang diinginkan. Biasanya aku edit file overrides.less dan panggil perintah lessc less/style.less css/style.css supaya perubahan diupdate ke file style.css.

Bayangkan capenya kan, tiap perubahan satu barispun harus compile manual. Mending pake SASS dan COMPASS WATCH aja kalo dipikir. Tinggal panggil compass watch di terminal, tiap ada perubahan di file scss yang kita simpan akan langsung update file style.css. Eitt...tunggu dulu setelah googling ada koq caranya otomatis compile bahkan sampai refresh browser. Bayangkan efisiensi waktu yang didapatkan hehehehe.

Sumber : Drupal Bootstrap API.

Kategori Blog:

css

drupal 7.x

lainnya