Basscss the best Bootstrap alternatives
Bootstrap logo.

Basscss the best Bootstrap alternatives

  • 22 Jan 2020
  • #html
  • #css

Sebelum jatuh hati dan mantap menggunakan framework Basscss, InsertApps sudah mencoba framework CSS Bootstrap sejak versi 2.3.

Setelah sekian lama ngulik Bootstrap, kami baru berhasil menyelesai sebuah WordPress theme siap pakai saat rilis Bootstrap 4 beta 2.

Begitu Bootstrap 4.0 versi stabil release ke publik, kami sudah migrasi ke Basscss karya Brent Jackson dari Brooklyn, New York.

InsertApps.com performance PageSpeed test
Hasil rapid test kecepatan loading web InsertApps, peringatan 'optimasi CSS' sudah clear.

Alasan beralih ke framework Basscss karena Bootstrap susah lolos Google PageSpeed Insights ke predikat hijau—performa dengan nilai skor 50–89 Google PageSpeed test.

Pengukuran performance PageSpeed website bukan hanya berpatok pada CSS optimize semata, banyak faktor lain seperti, image optimizing, JavaScript minify dan lain-lain.

Kalau melihat ukuran file Bootstrap versi 4.5, CSS file yang full package (include; Layout, Content, Components, Utilities) berkisar di 160KB.

Ukuran tersebut sudah minified (kompress), yaitu filebootstrap.min.css. Sedangkan file yang uncompress bootstrap.css berkisar di 198 KB.

Dengan beban file 160KB, hasil rapid test Google Pagespeed dan GTMetrix susah mendapatkan score 100.

Kalau hasilnya mendapatkan highlight kuning di bagian CSS Optimize untuk performa Dekstop.

Untuk performa Seluler jangan tanya lagi. 😱

Statistik file size dan resource Bootstrap
Perbandingan file size dan resource Bootstrap oleh cssstats.com

Nah.. Itu baru CSS-nya, Bootstrap juga bergantung pada JavaScript bawaannya bootstrap.min.js dan JQuery untuk menghidupkan beberapa komponen, seperti carousel, drop down dan komponen bergerak lainnya.

Tentu hal ini akan menambah beban lagi. 😩

Susah mendapat sertifikat hijau dari Google PageSpeed, bukan berarti framework Bootstrap tidak layak pakai, itu salah ya!

Kalau website atau blog bertenaga share hosting dan tujuan utama SEO optimize, menggunakan CSS Bootstrap di bagian front end, itu baru kurang tepat.

CSS Framework Bootstrap lebih cocok untuk melayout sebuah sistem aplikasi yang komplit atau halaman administrasi sebuah app.

Jadi… Itulah secuil alasan, kenapa Basscss menjadi alternatif CSS Framework pengganti Bootstrap.

Statistik file size dan resource Basscss
Perbandingan file size dan resource Basscss oleh cssstats.

Beberapa poin penting yang menjadikan Basscss sebagai alternatif Bootstrap adalah sebagai berikut;

  1. Paling cepat (Basscss CSS framework paling kecil, simple but powerful.)
  2. Konsepnya sudah modular
  3. Reusable dan flexible
  4. Sederhana
  5. Readable (Penamaan yang mudah dimengerti)
  6. No include Js. Tidak bergantung pada library JavaScript manapun, user bebas memasang JS yang ia suka. Dan ini yang kami suka.
  7. Basscss dipakai untuk style template AMP pada proyek ampstart.com

Masalah responsive bukan lagi jadi patokan utama, karena semua CSS Framework yang sudah ada maupun css framework baru yang akan muncul di kemudian hari, responsive layout adalah basic core.

Inti dari peperangan CSS Framework dimasa yang akan datang, paling siapa yang paling modern, paling wow design komponen dan source yang paling kecil.

Menariknya, Basscss semacam CSS reseter Normalize.css—standarisasi style default browser—yang ditambah fitur grid dan flexbox untuk responsive layout lalu diperkaya dengan utilitas dasar seperti; standar pengaturan jarak margin-padding, type scale, align, border dan typography.

Sedangkan untuk komponen yang non basic, seperti warna, tombol, form, background color, media-object, highlight, progress bar dan lain sebagainya, disediakan secara terpisah atau add on.

Artinya, user diberikan kebebasan untuk memakai modul-modul tambahan tersebut di luar basic core CSS framework itu sendiri.

Statistik file size dan resource Basscss
Perbandingan file size css framework

Basscss menjadi alternatif pengganti CSS framework Bootstrap?

Tidak juga, bahkan beberapa artikel blog yang menulis tentang top CSS Framework 2020, tidak memasukkan Basscss sebagai framework pilihan mereka.

Yang sering mendapatkan rekomendasi pertama ya Bootstrap—sudah menjadi CSS framework generik—lalu baru masuk Foundation, Materialize CSS, Semantic UI, Tachyons, Tailwind CSS, dan lain-lain.

Untuk kategori lightweight CSS framework rata-rata merekomendasikan; Skeleton, Pure CSS, Miligram, Mini.css, Base.org, Picnic CSS, UIkit, dan Dead Simple Grid CSS.

Tapi hanya Basscss satu-satunya CSS Framework yang dipakai oleh pengembang proyek AMP.dev untuk sample layout halaman AMP. Selengkapnya baca sendiri di ampstart.com/howitworks

Oya, satu-satunya tandem yang mampu mengalahkan Basscss dari segi paling ringan, ya cuma Skeleton.

Portofolio website yang menggunakan Basscss:

  1. InsertApps.com
  2. Freebiespic.com
  3. Mitamoto.com/

Comment

comments powered by Disqus