Bootstrap - Drupal Theme terpopuler saat ini

Submitted by Drupal Indonesia on Tue, 16/08/2016 - 00:00
Drupal Bootstrap

Drupal Theme Bootstrap merupakan tema website berbasis Framework Bootstrap. Tema ini telah mengalami peningkatan pesat sejak rilis awalnya di tahun 2012, dan hingga saat ini telah lebih dari 117 ribu website yang menggunakan tema ini, dan merupakan contributed theme paling banyak digunakan di Drupal mengalahkan Zen theme yang telah lebih dulu unggul selama bertahun-tahun.

Kelebihan paling utama dari Bootstrap tentunya adalah kemudahan dalam penggunaan tema. Tema Bootstrap memiliki penulisan kode yang rapi, semantic layout dan menerapkan modern teknologi dalam implementasinya. Fleksibilitas dalam theming bisa dilihat dari kemampuan tema Bootstrap untuk dikustomisasi menggunakan css style klasik atau css preprocessor LESS (berbasis Javascript) dan SASS (berbasis Ruby). 

Bagi Drupal builder tentunya memiliki selera masing-masing dalam meng-kustomisasi tema, ada yang lebih suka utak-atik tema berbasis javascript, preprocessors code, ada juga yang lebih suka di visual dan cukup hanya standard css. Dan tema Bootstrap mendukung kesemuanya ini. Bahkan bisa dikatakan tanpa mengubah apapun, cukup instal tema saja kita sudah bisa mendapat tampilan website yang profesional.

Kelebihan lainnya adalah kemudahan untuk membuat subtheme, sehingga tema inti atau core Bootstrap tidak perlu kita utak-atik, kita hanya modif layout di subtheme saja.

Dalam pengaturan layout, tema Bootstrap sungguh sangat memanjakan kita, bisa dikata hampir apapun layout yang kita inginkan bisa dibuat.

Format penulisan kodenya pun hampir mirip dengan kode html pada table.

Table HTML

<table>
<tr>
<td>Penulisan konten/data disini</td>
</tr>
</table>

Format Bootstrap

<div class="container">
<div class="row">
<div class="col-md-6">Penulisan konten/data disini</div>
</div>
</div>

Jadi cukup mengingat kalau table terdiri dari : table, tr dan td sedangkan Bootstrap terdiri dari : container, row dan column-x-x. Cukup mudah dimengerti bukan! 

Dan selain itu, untuk pengaturan fungsi kolom juga sudah menggunakan semantic code, cukup menggunakan class seperti :

  • col-xs-12 (bisa dibaca column-extra-small-12 artinya kita menggunakan setting 12 kolom untuk ukuran extra small (xs). Ukuran Extra small jenis layar smartphone, dan layar gadget dengan ukuran dibawah 768px).
  • col-sm-6 (bisa dibaca column-small-6 artinya kita menggunakan setting 6 kolom untuk ukuran small. Ukuran small untuk ukuran tablet atau lebar layar 768px keatas)
  • col-md-6 (bisa dibaca column-medium-6 artinya kita menggunakan setting 6 kolom untuk ukuran medium. Ukuran medium untuk ukuran layar pc desktop atau lebar layar 992px keatas)
  • col-lg-6 (bisa dibaca column-large-6 artinya kita menggunakan setting 6 kolom untuk ukuran large. Ukuran large untuk ukuran layar pc desktop wide-screen atau lebar layar 1200px keatas)

*) Istilah column/kolom bisa juga menggunakan istilah grid. Di bootstrap menggunakan standar ukuran 12 grid untuk lebar website.

Berikut contoh grid yang diterapkan di dalam sebuah layout website : 

Contoh grid bootstrap

Keterangan: Warna garis pink terdiri dari 12 garis, per garis disebut colum/kolom/grid. 

Untuk mempelajari lebih detail fungsi grid dalam pengaturan layout bisa membaca dokumentasi Bootstrap Grid

Dengan fungsi grid inilah, kita bisa dengan leluasa mengatur bagaimana tampilan website di PC, Tablet, Smartphone ataupun media digital apapun.

Dari segi dukungan module, kontributor Drupal sangat aktif menyediakan module pendukung tema Bootstrap, seperti module utama :

API

Shortcodes (Bootstrap in content)

Theming/Layouts

Images/Slideshows

Menus

Modals

Forums

UX, administration

 

Tema Drupal lainnya yang berbasis Bootstrap : 

  1. Tweme — Ultra lightweight Bootstrap theme for Drupal powered by official Bootstrap base theme. Built-in footer sitemap, sharing buttons and Atoms support.
  2. Beginning - A theme that is for design artist. Designers can begin theme designing, web designing without worrying about theme structure, layout and responsiveness as per device width.
  3. Kalatheme - This theme helps you if you know Panels very well as its combination of Panopoly and Bootstrap.
  4. Bootstrap Business
  5. Bootstrap Barrio - a sub-theme of bootstrap, integrated with Skinr, customizable widths, 1, 2 or 3 columns.
  6. Radix + Radix Layouts - Radix is a base theme for Drupal. It has Bootstrap, Sass, Gulp, Bower, BrowserSync and Font Awesome built-in.
  7. Bootstrap lite - Bootstrap lite - Backport of Backdrop bootstrap based theme.

 

Dan berikut contoh-contoh penerapan Tema Drupal Bootstrap :

Jaime and Jaimie - http://www.jaimeandjaimie.com

Archipelago 4 U - https://archipelago4u.com/

Strapfreak - http://www.strapfreak.com/

Kaloyanova - http://www.kaloyanova.com/

Wikacell - http://www.wikacell.com/

 

Ringkasan:

Tema Drupal Bootstrap merupakan sebuah tema universal atau tema serba bisa yang cocok digunakan segala kalangan, baik oleh pemula, desainer web hingga profesional web developer. Dengan kemampuannya yang sangat luar biasa, dokumentasi yang lengkap dan module penunjang yang banyak, mungkin inilah tema yang bisa disebut One-Stop-Theme. Silahkan mencoba!.