Overview Bulma Component

Pada blog sebelumnya saya telah menulis tentang konsep flexbox layout pada tampilan antarmuka website. Nah pada kesempatan kali ini saya akan membahas implementasi konsep itu yang telah dibundle kedalam sebuah framework CSS yang bernama Bulma. 

Bulma secara sederhana adalah sebuah framework CSS yang mengadopsi konsep flexbox yang bertujuan membuat tampilan website dapat diakses dari berbagai macam ukuran device. Framework ini sedang kekinian diberbagai forum front-end dan tidak jarang banyak workshop yang membahas Bulma.

Install Bulma;
Menginstall Bulma dapat menggunakan berbagai package manager seperti ini:

-npm install bulma

-yarn add bulma

-bower install bulma

atau dengan menggunakan CDN berikut:

https://cdnjs.com/libraries/bulma

Berikut install Bulma menggunakan NPM

Bulma telah terinstall pada folder project.

Berikut cara memanggil Bulma pada project yang dibuat:

Dan selanjutnya mari kita mulai membedah component dasar pada Bulma.

Secara mendasar component Bulma tidak jauh berbeda dengan yang component css yang lain seperti Bootstrap, Foundation, Materialize, dll. Namun konsep flexbox yang diusung Bulma yang berbeda, membuat kita sedikit "suffer" jika kita sebelumnya pernah menggunakan framework CSS yang lain seperti Bootstrap.

Container:

Seperti pada Bootstrap, component container berfungsi untuk membungkus konten. Pada Bulma sebuah container dapat diatur lebarnya dengan ukuran layar yang kita inginkan dengan mengeset seperti ini pada identifier class: is-widescreen atau is-fullhd.

Columns: 

Pada class .columns berfungsi untuk membungkus banyak class .column dan membagi item tersebut menjadi sama rata lebarnya sesuai dengan lebar device yang digunakan. Class .column bersifat flex.

Column:

Class .column merupakan child yang ada didalam .column. Lebar .column dapat diset seperti grid sistem pada bootstrap dengan meng-override class berikut: .is-1, is-2, is-3 ..., is-12

Implementasi kelas .columns dan .column

Berikut penampakannya:

Tampilan Mobile view, dengan menghilangkan item yang terakhir:

Sekian penjelasan saya mengenai Component pada Bulma, hal mendasar yang perlu dipelajari sebelum memulai menggunakan Bulma adalah mempelajari konsep Flexbox terlebih dahulu pada blog yang saya tulis sebelumnya disini. Sampai bertemu pada tulisan saya selanjutnya :D

References:

http://bulma.io/

https://medium.freecodecamp.org/colorful-fundamentals-the-reward-of-building-with-bulma-7b14883317bd