Mengenal Bulma

Ada yang sudah mengenal Bulma? itu.. Bulma yang di Anime Dragon Ball, yang membuat sebuah capsule yang dilempar dan jadilah sebuah rumah beserta isi dan perabotannya hehehe ūüėÄ #tontonanmasakecil

Bulma di sini adalah CSS Framework Modern berbasis Flexbox Open Source, Responsive untuk Mobile Device dan Modular kita dapat import apa yang kita butuhkan dengan menggunakan SASS.

Mungkin ada yang bertanya kenapa harus menggunakan Bulma?

Hampir sama dengan Bulma yang saya sebut di atas, selain menggunakan CSS Flexbox Bulma juga menyediakan banyak Elements, Components dan Layout siap pakai untuk membuat sebuah Website. Silahkan kunjungi website-nya di sini http://bulma.io/

Dari hasil searching saya menggunakan mbah Google dan setelah saya amati, CSS Framework berbasis Flexbox yang paling komplit Elaments, Components dan Layout-nya adalah Bulma, selain Bootstrap 4 loh ya :D.

Mulai dari Elements Box, Button, Content, Delete, Form, Icon, Image, Notification, Progressbar, Table, Tag, Title, kemudian Components Card, Level, Media Object, Menu, Message, Modal, Nav, Pagination, Panel dan Tabs, lalu Layout Container, Hero, Section dan Footer.

Yang paling penting dari sebuah CSS Framework adalah pada Grid System-nya. Pada Grid nya ini lah CSS Flexbox digunakan.

Udah cukup pengenalannnya, sekarang gimana sih cara make Bulma buat bikin website kita?

Ada beberapa cara untuk menggunakan Bulma, yaitu :

  1. Menggunakan npm untuk install paket Bulma.
  2. Menggunakan cdnjs untuk menghubungkan ke link stylesheet Bulma.
  3. Download dari repository Github.

Cara 1 (Recommended) : Menggunakan npm

Cara 2 : Menggunakan cdnjs CDN

https://cdnjs.com/libraries/bulma

Cara 3 : Download dari repository Github

https://github.com/jgthms/bulma/tree/master/css

Setelah milih salah satu cara di atas, next kita buka Text Editor kita masing-masing yaa ..

# Kode yang diperlukan

Agar Bulma berjalan dengan baik, kamu perlu untuk membuat webpage kamu responsive.

  1. Pakai doctype HTML5

  1. Tambahkan meta tag viewport responsive

# Template awal

Kalau kamu pingin memulai dengan benar, kamu bisa pakai Template awal HTML ini , tinggal copas aja ke file mu dan simpan ke komputer.

Udah, itu aja sih cara make framework Bulma buat bikin website kita, untuk bikin komponen, element, dan lainnya, kalian bisa lihat di Dokumentasi Bulma di https://bulma.io/documentation/overview/start/

 

Sekian tutorial dari saya, terima kasih ūüėÄ

 

Referensi :

https://bulma.io/documentation/overview/start/

https://medium.com/skyshidigital/mengenal-bulma-cb2ea638f755

 

 

Tinggalkan Balasan