CSS Framework di 2021

Setalah lama tidak menyentuh front end, saya menyeleksi kembali CSS framework untuk digunakan. Sebelumnya ada beberapa hal baru yang saya pelajari:

1. Flexbox sudah mainstream disupport browser, malah muncul component CSS baru: grid. yang dapat mengatur blok dalam 2 dimensi
2.  Jquery masih dipakai
3. Bootstrap masih kuat meski banyak tantangan, Zurb Foundation semakin sulit digunakan 😜

CSS Framework

List ini saya buat dengan beberapa pertimbangan ketika memilih

• Relative simple untuk memulai, cukup SCSS 
• Mobile First, artinya breakpoint dihitung dari bawah lalu ke atas
• Grid dengan Flexbox saya rasa pilihan paling tepat antara fitur dan dukungan
• Modular. Kita bisa compile hanya apa yang kita butuhkan
• Menggunakan penamaan class yang simple (xs-12 md-6)

1. Flexbox Grid

Buat yang membutuhkan grid tanpa basa basi. Gak element aneh, JS dll. Yang saya sukai syntax simple dan mobile first responsive

http://flexboxgrid.com/

2. Bootstrap

Saya gak pernah pakai karena terlalu mainstream - sehingga hasil design relatif mudah dideteksi - namun saya rasa tetap perlu melihat Bootstrap sebagai benchmark. Yang saya suka kini bootstrap memakai Flex dan Mobile first

https://getbootstrap.com/docs/5.0/getting-started/introduction/

3. Materialize

Buat yang ingin komponen lengkap namun menghindari Bootstrap bisa melirik Materialize yang mengimplementasi UI guideline nya google. Cukup lengkap, namun sangat konservatif menggunakan grid div float, mungkin untuk kepentingan backward compatibility 

https://materializecss.com

4. Spectre

Cukup lengkap, saya rasa dapat menyamai Bootstrap namun dengan desain lebih sederhana dan clean. Dokumentasi masih perlu diperbaiki dan beberapa komponen masih tahap uji coba.

https://picturepan2.github.io/spectre/layout/grid.html

5. Primer by Github

Lebih dari sekedar CSS framework, lebih tepat UI/UX guideline seperti Google Material, namun dengan implentasi CSS. Layak dicoba dengan komponen cukup lengkap hingga figma. Kekurangan, sangat Github banget desainnya yang akan sangat mudah dikenali.

https://primer.style/css/

Mungkin bisa dilirik

Beberapa yang saya keluarkan dari list karena satu dua alasan personal, namun tetap merupakan system yang layak ada lihat:

6. Zurb Foundation - Semakin rumit untuk memakai, tidak tersedia versi SCSS! Menariknya menyediakan Flebox dan GridXY system.

7. Bulma - Saya memakai untuk sebuah proyek kecil, namun berpikir untuk menghapus dari rekomendasi karena tidak mobile first, sehingga merusak pola desain.

8. Tailwind. Masih terlalu rumit buat saya