Langsung ke konten utama

Mengenal Bulma CSS Framework serta Pembuatan Web Design Fitur "Rencana Belanja" ~ PART4

Bulma CSS : Bulma Modern CSS Framework

Apakah itu Bulma..?

Bulma adalah Modern CSS Framework yang berbasis Flex Box. Intinya Bulma merupakan salah satu responsive css framework yang di bangun dengan Ruby dan Jekyll tool yang dapat memudahkan dalam pembuatan tampilan sebuah web. Seperti Bootsrap, Bulma CSS ini membantu programmer dalam membuat tampilan website yang responsive dengan komponen – komponen yang telah disediakan, namun tidak termasuk JavaScript. 

Jadi untuk membuat sebuah event untuk sebuah komponen, kita perlu membuat fungsi javascript secara manual. Contoh untuk menampilkan yang mengembunyikan modal kita perlu membuat fungsi show hide dengan js, tidak seperti Bootstrap yang hanya perlu set class dan data-target.

 

Kelebihan Bulma

~ Menggunakan konsep Flexible Box

    FlexBox merupakan salah satu layout mode dimaksudkan untuk mengakomodasi ukuran layar yang berbeda dan perangkat tampilan yang berbeda. Nah konsep Flexible Box lah yang membuat Bulma CSS responsive atau dapat berjalan dengan baik walau ukurang layar berbeda. Untuk lebih jelasnya kalian bisa buka Flexible Box.

~ Dapat di Customize dengan mudah

    Bulma CSS juga dapat di Customize lagi agar sesuai dengan keinginan kalian, seperti mengubah warna background default, mengganti warna font untuk title dan lain dengan mendefinikan variable yang ingin di rubah menggunakan SASS pada file variables.sass. Untuk nama nama viriablenya kalian bisa lihat di Dokumentasi Bulma.

~ Layout yang bervariasi

    Nah ini yang paling  suka, karena terkadang  perlu layout yang berbeda beda dalam satu page/web. Seperti Level Layout agar navbar lebih penuh, dan untuk Gallery menggunakan Tiles layout ( seperti Metro ) agar lebih keren.

~ Komponen dan element yang cukup banyak

    Walau tidak sebanyak Bootstrap namun Komponen dan Element pada Bulma rasa cukup banyak. Untuk Komponen yang disediakan cukup umum digunakan oleh Developer Web seperti Navbar, Menu, Card, Dropdown dan lainnya. Bisa dilihat di Components Bulma.

 

Kekurangan Bulma

Framework ini juga memiliki beberapa kekurangan, seperti belum disediakannya Javascript yang dapat mempercepat pembuatan Web, namun dengan belum disediakannya Javascript kita dapat mengurangi ketergantungan menggunakan fungsi jadi. Selain itu sangat sedikit tempalate yang disediakan/dibuat, mungkin karena Bulma CSS belum lama rilis jadi masih sedikit developer yang membuat template menggunakan Framework ini.


Berikut tampilan pembuatan template dari web desain Wlijo:

~ Rencana Belanja dengan Bulma

 

 

Referensi:

https://www.rumahkomunitas.com/article/bulma-css-bulma-modern-css-framework

Komentar

Posting Komentar

Postingan populer dari blog ini

Pembelajaran Dasar React Bagi Pemula

  Apa itu Reactjs? Reactjs adalah sebuah library yang dibuat oleh Facebook untuk membuat UI (user interface) pada Web Mobile juga. Banyak orang menyebutnya sebagai framework , namun secara teknis.. Reactjs bukanlah sebuah framework. Melainkan sebuah library untuk membuat UI.   Oke, mari kita coba membuat aplikasi dengan Reactjs pertama kita buat file html biasa dengan nama hello-world.html , di dalam body kita akan menampilkan teks. <! DOCTYPE html > < html > < head > < meta charset = "utf-8" /> < title > Belajar Reactjs </ title > < script src = "https://unpkg.com/react@16/umd/react.production.min.js" >      </ script > < script src = "https://unpkg.com/react-dom@16/umd/react-dom.production      .min.js" ></ script > < script src = "https://unpkg.com/babel-standalone@6.15.0/babel.min.js" >      </ script > </ head > < bod...
Posting Komentar
Baca selengkapnya

Penambahan Function Pop Up Edit Toko di NextJS

      Apa itu Next.js?  Next.js merupakan sebuah React framework yang dibentuk buat mengatasi kasus client-side rendering yang dimiliki React. Sebuah halaman website yang dibentuk memakai React ‘terasa ringan’ lantaran tampilan website sangat interaktif.  Selain itu, ketika data berubah, React menggunakan efisien akan mengupdate bagian menurut halaman website yang memang perlu diupdate tanpa perlu reload satu halaman penuh.  Untuk menerima itu seluruh, client wajib load seluruh file JavaScript sebelum konten halaman ditampilkan. apabila file JS relatif akbar maka ketika yang diperlukan buat load pertama kali pula sebagai lebih lama.  Masalah lain menurut client-side rendering merupakan SEO, terdapat kemungkinan web crawler berusaha mengindex halaman yang belum terselesaikan dirender sepenuhnya (lantaran ketika load yang lama). Dan menduga web tadi blank.  Kedua kasus diatas bisa diselesaikan menggunakan teknik pre-rendering. Yaitu ...
Posting Komentar
Baca selengkapnya

Pembuatan halaman Home dengan NextJS

      Apa itu Next.js?  Next.js merupakan sebuah React framework yang dibentuk buat mengatasi kasus client-side rendering yang dimiliki React. Sebuah halaman website yang dibentuk memakai React ‘terasa ringan’ lantaran tampilan website sangat interaktif.  Selain itu, ketika data berubah, React menggunakan efisien akan mengupdate bagian menurut halaman website yang memang perlu diupdate tanpa perlu reload satu halaman penuh.  Untuk menerima itu seluruh, client wajib load seluruh file JavaScript sebelum konten halaman ditampilkan. apabila file JS relatif akbar maka ketika yang diperlukan buat load pertama kali pula sebagai lebih lama.  Masalah lain menurut client-side rendering merupakan SEO, terdapat kemungkinan web crawler berusaha mengindex halaman yang belum terselesaikan dirender sepenuhnya (lantaran ketika load yang lama). Dan menduga web tadi blank.  Kedua kasus diatas bisa diselesaikan menggunakan teknik pre-rendering. Yaitu ...
Posting Komentar
Baca selengkapnya