Memakai Bulma pada NextJs

Saat membuat website menggunakan NextJs, banyak artikel yang mencontohkan untuk memakai Tailwind sebagai css frameworknya. Salah satunya adalah artikel ini. Tailwind memang sedang naik daun. Tapi untuk membuat website sederhana menurut saya overkill. Bulma adalah salah satu pilihan praktis sebagai alternatif yang lebih simple dan ramah pemula.

Bagi saya, dua poin utama berikut adalah kelebihan Bulma dibanding Tailwind yang paling menonjol.

Kode yang lebih sedikit

Tailwind memberikan lebih banyak keleluasaan kustomisasi sehingga membuat overwhelmed dan horor bagi pemula. Misalnya untuk kasus ingin memberi warna pada tag html button. Begitu panjangnya halaman docs yang menjelaskan tentang color di Tailwind: https://tailwindcss.com/docs/customizing-colors

Sedangkan untuk Bulma hanya ada 6 pilihan warna yaitu primary, link, info, success, warning, dan danger. Begitu compact dan singkat penjelasan di halaman dokumentasinya sehingga langsung mudah dipahami https://bulma.io/documentation/overview/modifiers/

Komponen yang dapat digunakan out-of-the-box

Konsep Tailwind adalah memberi kita kebebasan untuk memodifikasi html class supaya css yang diterapkan flexible sesuai keinginan. Ini juga horor bagi pemula karena harus manual menulis banyak class padahal ingin langsung membuat sebuah komponen tanpa memilih-milih class yang harus dipakai misalnya untuk Navbar (singkatan Navigation Bar, terletak di bagian atas website atau biasa disebut header).

Untuk contoh membuat sebuah basic Navbar , berikut perbandingan kode yang dibutuhkan.

Tailwind: https://tailwindui.com/components/application-ui/navigation/navbars

Ini adalah cuplikan kodenya. dapat dilihat class yang harus ditulis panjang-panjang sehingga terkesan bloated.

# class terpanjang pada tag button html
<!-- Mobile menu button-->
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
      

Bulma: https://bulma.io/documentation/components/navbar/#basic-navbar

Cuplikan:

tidak ada yang memiliki lebih cari 2 class dalam 1 tag html sehingga enak dibaca.

Meanwhile, Tailwind fans right now. Ready to argue this article :)

Yuk langsung mulai tutorialnya

Berikut langkah singkat memasang Bulma pada NextJs.

Install Next js

npx create-next-app
# or
yarn create next-app

Install Bulma

Karena default nextjs menggunakan yarn, maka kita install bulma dengan yarn

yarn add bulma

Setup simple page

Ubah isi file pages/index.js di dalam return menjadi seperti ini

return (
  <div>
    <section className="section">
      <div className="container">
        <h1 className="title">
          Hello World
        </h1>
        <p className="subtitle">
          My first website with <strong>Bulma</strong>!
        </p>
        <button className="button is-primary">Tombol</button>
      </div>
    </section>
  </div>
);

Saat kamu run websitenya dengan yarn devmaka tampilannya akan menjadi html biasa:

Setting SASS

Salah satu pain-point pembuatan website adalah mengaplikasikan tema sesuai design dari UI. dengan mengaplikasikan lima langkah singkat ini, websitemu langsung memiliki tema sesuai design yang dibuat.

1. Hapus isi file styles/globals.css

2. Buat file styles/global.scss lalu isi dengan kode berikut

@charset "utf-8";
// Set your brand colors
$purple: #7200ff;
// Update Bulma's global variables
$primary: $purple;
// Update some of Bulma's component variables
$box-padding: 0.75rem;
// Import all bulma component / element
@import "../node_modules/bulma/bulma.sass";

3. Install package node-sassuntuk men generate file .cssdari file .scss

yarn add node-sass

4. Tambahkan bagian script di file package.json agar menjadi seperti ini:

"scripts": {
  "dev": "yarn css-build && next dev",
  "build": "next build",
  "start": "next start",
  "css-build": "node-sass --omit-source-map-url styles/globals.scss styles/globals.css"
}

Perbedaan dari sebelumnya adalah peritah css-build yang ditambahkan pada dev . css-build sendiri self-explanatory yaitu men generate file dari styles/globals.scss ke styles/globals.css.

5. Langkah setting SASS selesai. Silahkan stop website dengan ctrl+c , lalu yarn devlagi. Jika langkah-langkahnya benar, maka sekarang bulma sudah menggunakan style dan tema baru yang kita definisikan di styles/globals.scss

Pelengkap

Di file globals.scss tadi ada bagian yang tertulis$box-padding:0.75rem; itu adalah contoh kustomisasi yang dapat dilakukan pada element/component lain di bulma sesuai keinginan. Seperti gambar di atas, bisa dilihat list variable apa saja yang bisa diubah untuk element box.

Hyperjump Update!

We just launched our free and open source synthetic monitoring tool called Monika on Product Hunt! Your review and upvote are greatly appreciated! 🤝

Hyperjump is an open-source-first company providing engineering excellence service. We aim to build and commercialize open-source tools to help companies streamline, simplify, and secure the most important aspects of their modern DevOps practices.