List css framework selain Bootstrap yang wajib kamu cek!

29 Jul 2022
1900

Buat kamu para frontend developer pasti tidak asing lagi dengan istilah css framework bukan? CSS framework adalah library CSS yang digunakan untuk membuat standarisasi layout dan tema html dari website. Dengan CSS framework kita bisa membuat front-end website dengan lebih cepat mengingat beberapa layout dan komponennya sudah disediakan.

Bootstrap CSS Framework adalah salah satu CSS Framework yang terkenal dan mungkin paling banyak dipakai saat ini. Menurut data dari [www.w3tech.com,][1] “Bootstrap is used by 20.7% of all the websites” . Dengan market share yang lumayan besar itu, tentu saja CSS Framework ini sangat wajib untuk dicoba dan dipelajari oleh para front-end developer.

Namun kali ini kita mau membahas CSS Framework apa saja sih yang kira-kira wajib dipelajari selain Boostrap?

1. [Bulma][2] — A modern CSS framework based on Flexbox

List css framework selain Bootstrap yang wajib kamu cek!

Bulma

Dengan total bintang lebih dari 18,000 di repo githubnya, Bulma menjadi CSS framework yang cukup diminati di tahun 2017 ini. Dirancang dengan dasar flexbox, SASS, modular, flat dan sangat mudah untuk di implementasikan.

Dari segi dokumentasinya juga sangat lengkap, jadi kalian tidak usah takut kebingungan lagi saat mencoba framework ini. Penamaan _class-class _nya mirip dengan Boostrap jadi buat kalian yang mau migrasi dari Boostrap ke Bulma akan lebih mudah.

GIthub : https://github.com/jgthms/bulma
Dokumentasi : [http://bulma.io][2]

2. [Milligram][4] — A minimalist CSS framework

List css framework selain Bootstrap yang wajib kamu cek!

Milligram

Diposisi kedua kita punya Miligram. Dari namanya framework satu ini mempunyai kelebihan yaitu ukurannya yang sangat kecil yang hanya **2kb gzipped. **Namun jangan salah, dengan ukuran sekecil itu, framework ini sudah memiliki fitur yang lengkap seperti heading, form, button dan fungsi umum lainnya yang dibutuhkan dalam merancang sebuah tampilan website.

Framework ini memang di desain untuk memiliki performa yang lebih cepat dan lebih produktif untuk kamu para frontend developer.

Github : https://github.com/milligram/milligram
Dokumentasi : http://milligram.io/

3. Foundation ~ The most advance responsive front-end framework in the world

List css framework selain Bootstrap yang wajib kamu cek!

Foundation

Foundation pertama kali dibuat tahun 2008 dengan nama ZURB style guide. Dengan umur yang sudah sangat lama, tentunya framework yang satu ini sudah sangat dewasa dilihat versi terakhir saat artikel ini dibuat adalah versi 6. Jika css framework biasanya digunakan untuk membuat desain web yang responsive, maka Foundation juga bisa digunakan untuk membuat email, mobile dan web template. Jika kalian ingin belajar Foundation, maka dokumentasinya sudah sangat lengkap dan dukungan komunitas juga sangat besar seperti di situr stackoverflow.com

Github : https://github.com/zurb/foundation-sites

Dokumentasi : http://foundation.zurb.com/sites/docs/

4. Semantic UI — User Interface is the language of the web

List css framework selain Bootstrap yang wajib kamu cek!

Semantic UI

Satu hal yang menarik dari sematik adalah frontend framework yang bisa diintegrasikan dengan framework lainnya. Jadi kamu bisa memasang tema framework lain seperti bootstrap, google material, github atau yang lainnya dengan sangat mudah. Ada ribuan pilihan tema lainnya, baik dari komunitas atau official dari Foundation. Fitur-fitur yang bisa kamu gunakan seperti form, dropdown, menu, tab dan lainnya sangat mudah di implementasikan. Buat kalian yang baru belajar frontend framework, sematic ui bisa menjadi pilihan yang pas karena penamaannya sangat human friendly.

Github: https://github.com/semantic-org/semantic-ui/

Dokumentasi : https://semantic-ui.com/

5. [Materialize][8] ~ A modern responsive front-end framework based on Material Design

List css framework selain Bootstrap yang wajib kamu cek!

Materialize

Sesuai namanya, framework ini dibuat berdasarkan gaya google material design. Ada beberapa komponen umum yang sudah disediakan seperti form, button, cards dan icons. Selain itu ada tambahan fitur-fitur khas material design seperti drag-out mobile menus, material-based design shadows, colors, typography, animasi ripple-effect , dan SASS mixins. Jadi buat kalian yang mau membuat frontend website atau aplikasi dengan gaya material design, framework ini wajib dicoba.

Github: https://github.com/Dogfalo/materialize

Dokumentasi: http://materializecss.com/

Itulah beberapa top front-end css framework yang bisa kalian pilih sebagai alternatif dari Boostrap. Dilihat dari list diatas dapat disimpulkan trend css framework akan semakin sematic, dokumentasi yang bagus, flat design, fleksibel dan juga harus mudah digunakan dan dimengerti oleh orang-orang yang baru belajar. Namun tetap tidak mengesampingkan dari segi kemampuan dan fitur-fitur yang disediakan.

Jadi apa front-end framework apa yang menjadi pilihan kamu? Ingat komen dibawah ya dan jangan lupa like & share ^^

Artikel Lainnya

Artikel lain yang mungkin menarik juga untuk kamu baca.

Apa itu Persistance Layer?

Kali ini kita akan membahas tentang apa itu persistance layer khususnya dalam PHP OOP. Persistance layer biasa dijelaskan sebagai layer tempat untuk CREATE, UPDATE, DELETE data.
Agus Yusida
5 min read 2413

Tips untuk simple code: part 4. Batasi penggunaan variable yang tidak perlu

Tips untuk simple code adalah membatasi penggunaan variable yang tidak perlu. Mau tahu implementasinya seperti apa? Yuk baca artikel ini lebih lanjut.
Agus Yusida
5 min read 1656

Tips untuk simple code: part 3. satu level indentation

Part ketiga dari tips membuat kode kamu lebih simple ini adalah bagaimana caranya agar kode yang kamu buat memiliki minimal satu level indentation di dalam fungsi yang kamu buat. Kedengarannya memang susah sih, tapi kita lihat dahulu sample kode di bawah ini.
Agus Yusida
5 min read 1594

© 2024