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.
Daftar Isi
- 1. [Bulma][2] — A modern CSS framework based on Flexbox
- 2. [Milligram][4] — A minimalist CSS framework
- 3. Foundation ~ The most advance responsive front-end framework in the world
- 4. Semantic UI — User Interface is the language of the web
- 5. [Materialize][8] ~ A modern responsive front-end framework based on Material Design
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
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
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
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
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
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 ^^