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

Mengenal Layouting dengan Flexbox CSS-3

Hello Sahabat Nostra, kembali lagi dengan saya pada kesempatan kali ini yang akan membahas mengenai konsep Layouting Flexbox pada CSS 3. 

Oke, pertama kita harus tahu dulu apa sih yang dimaksud dengan Flexbox itu? Dan apa faedahnya penggunaan sistem Layouting Flexbox pada tampilan antarmuka yang kita buat?

Yak menurut pemahaman yang saya baca dari berbagai sumber, Flexbox atau Flexible Box merupakan suatu module dalam CSS 3 yang berfungsi membuat suatu container pada tampilan halaman website menjadi fleksibel terhadap konten-konten yang ada didalamnya dengan memanfaatkan space yang tersedia. Dengan kata lain manfaat flexbox tersebut adalah kita tidak perlu lagi melakukan styling yang rumit pada setiap device yang resolusinya berbeda-beda karena konten secara otomatis melakukan penyesuaian dengan container yang telah kita set sebagai flex tadi.

Yang perlu dipahami, suatu container flex dibentuk berdasarkan 2 garis secara horizontal (main axis) dan vertical (cross axis). Berikut ilustrasi sebuah container flex:

Secara default garis horizontal (main axis) tersebut akan meletakan item-item(item flex) dimulai dari kiri kekanan pada container flex. Dan garis vertical pada flex container (cross axis) akan meletakan item flex dari atas kebawah pada container flex.

Dibawah ini merupakan beberapa property dari module flex yang perlu dipahami:

-display: flex  = Untuk menginisialisasi container sebagai flex.

-justify-content: #value =  Untuk mengatur item flex secara horizontal.

-align-items: #value = Untuk mengatur item flex secara horizontal.

-flex-direction: #value = Untuk mengatur penempatan item pada container.

Berikut ini adalah cara belajar mengenal konsep flexbox dengan cara interaktif melalui link ini :

 http://flexboxfroggy.com/

Tampilan Flexbox Froggy

Nah sekian pengenalan mengenai flexbox layout, sampai jumpa pada kesempatan selanjutnya.

References:

http://www.tutorial-webdesign.com/tutorial-flexbox-basic/

http://learnlayout.com/flexbox.html

https://www.w3schools.com/css/css3_flexbox.asp