1. Bootstrap
Bootstrap pertama kali diciptakan oleh salah satu desainer dan developer Twitter di tahun 2011. Hingga saat ini, framework ini masih jadi yang paling populer daripada framework lainnya. Banyak developer yang menggunakan Bootstrap karena menawarkan banyak fungsi dan elemen desain yang responsif.
Bootstrap juga menjadi framework pertama yang meluncurkan filosofi “Mobile-First”. Filosofi ini muncul mengingat tingginya jumlah pengguna mobile. Apapun jenis elemen yang dipilih, hasilnya akan otomatis menyesuaikan ukuran layar handphone.
Apalagi di tahun 2018, Bootstrap telah mengupgrade versi ke empat (4.0) mereka dengan segudang tambahan fitur. Mulai dari skema warna baru, kelas, sistem grid, layout modern dan sebagainya. Untuk inspirasi, Bootstrap juga menampilkan jejeran contoh desain dari aneka aplikasi dan website.
Intinya dengan framework ini, Anda bisa dengan mudah mendesain aplikasi atau website yang menarik.
Fitur unggulan:
- Desain responsif. Menawarkan sistem grid yang powerful untuk desain responsif, cepat, dan mudah.
- Kaya akan fitur. Memiliki banyak fitur untuk kebutuhan front-end. Mulai dari layout, website template, tema, panel admin, dan banyak koleksi komponen user interface (UI). Ada juga aneka model desain untuk tombol, formulir, kartu, notifikasi yang semuanya bisa menghemat waktu tim desainer Anda.
- Cocok untuk pemula. Bootstrap sudah memfasilitasi Anda dengan banyak tutorial dan guideline yang mudah diikuti.
- Memiliki komunitas developer yang besar. Karena diciptakan oleh salah satu developer Twitter dan bersifat open-source, Bootstrap memiliki komunitas developer yang luas.
- Didukung dengan LESS dan SASS. Bootstrap menjadi salah satu framework CSS yang mendukung LESS dan SASS. Keduanya merupakan bahasa pra-prosesor yang memudahkan Anda untuk menulis kode CSS dengan rapi dan terstruktur.
- Flexbox. Model layout yang berguna untuk mengatur elemen suatu website atau aplikasi. Bertujuan agar Anda bisa mengatur panjang, lebar, dan posisi setiap elemen supaya tidak berhimpit satu dengan yang lainnya.
2. Foundation
Foundation merupakan CSS framework pilihan kedua developer setelah Bootstrap. Hadir sejak 2011 dibawah lisensi MIT (Massachusetts Institute of Technology), Foundation merupakan framework dengan sistem open-source berbasis SASS.
Framework ini menawarkan berbagai elemen yang modern, fleksibel dan mudah untuk dikustomisasi. Untuk menghemat waktu pengerjaan, Foundation juga memfasilitasi Anda dengan berbagai template siap pakai melalui desain-desainnya yang berkelas.
Bahkan, beberapa perusahaan ternama seperti Adobe, eBay, EA, Amazon, dan Mozilla pun juga menggunakan Foundation untuk di beberapa produk mereka.
Fitur unggulan:
- Desain yang responsif. Foundation menganut sistem yang memudahkan Anda untuk memiliki desain front-end yang responsif. Baik untuk website, aplikasi, dan email dengan optimasi yang maksimal di berbagai perangkat.
- Framework email yang mumpuni. Foundation menawarkan framework untuk pembuatan email secara sederhana dengan tampilan yang berkelas.
- Unlimited support dan update. Foundation selalu memberikan bantuan secara penuh bila Anda mengalami kesulitan. Itulah sebabnya, Zurb — perusahaan di balik Foundation — sering mengadakan online seminar secara gratis. Anda bisa memperoleh aneka tips tentang membangun website atau aplikasi yang berkualitas.
- Mudah untuk kustomisasi. Foundation tidak membatasi Anda untuk menciptakan fitur atau elemen tambahan pada komponen UI. Sehingga Anda dapat mengcustom-nya sebebas mungkin.
3. Bulma
Bisa dibilang, Bulma termasuk CSS framework pendatang baru, tetapi namanya sudah cukup banyak dikenal oleh kalangan developer. Daya tariknya ada pada penggunaannya yang mudah, responsif, bersifat open-source, dan bekerja secara optimal di segala perangkat.
Bulma hanya menggunakan komponen berbasis CSS (tanpa JavaScript). Namun tetap tidak menjadikan fiturnya kalah saing dengan framework lain. Buktinya saja saat ini Bulma sudah digunakan oleh 200+ ribu pengembang dengan 30 ribu rating star di GitHub.
Fitur unggul:
- CSS class yang mudah terbaca. Bulma memfasilitasi Anda dengan CSS class yang mudah terbaca dan komponen yang siap pakai dengan interface yang mobile-friendly. Sistemnya juga sangat powerful untuk menciptakan desain yang kompleks, namun dengan pengembangan yang tidak rumit.
- Murni CSS tanpa JavaScript. Bulma diciptakan murni dengan CSS. Artinya, ketika Anda menggunakan framework ini, Anda hanya perlu satu file .css tanpa memerlukan file .js. Meski begitu, Bulma tidak membatasi Anda untuk membuat komponen kustom melalui modifier classes yang mudah.
- Komunitas yang besar. Tak perlu cemas bila Anda adalah seorang pemula. Sebab, Bulma memiliki komunitas yang cukup besar sehingga Anda bisa menjangkau pengembang lainnya bila membutuhkan bantuan.
- Berbasis flexbox. Sistem layouting untuk mengatur elemen box secara fleksibel.
- Didukung dengan SASS. Untuk mempermudah pengkodean dengan CSS.