Tampilan website merupakan hal yang harus diperhatikan. Untuk mempercantik tampilan website, biasanya programmer akan menyematkan CSS dalam websitenya. Berbeda dengan jaman dulu, saat ini programmer sangat terbantu oleh adanya CSS Framework. Framework ini akan menyediakan berbagai komponen siap pakai bagi developer, seperti grid,UI patterns, web typography, tooltips, buttons, form elements, hingga icons. Elemen siap pakai ini akan memangkas waktu pengembangan, sekaligus me-responsive-kan website kita dalam berbagai device. Saat ini terdapat banyak pilihan framework CSS. TAS Official telah merangkumnya dalam 10 Framework CSS Terbaik di tahun 2020. Apa aja ya? Cekidot!
1. Bootsrap
Bootstrap adalah framework CSS yang paling umum. Twitter mempopulerkan framework ini pada tahun 2011. Nah, ketika kita memasukkan bootstrap class ke website, maka framework ini akan otomatis meng-adjust tampilan web dalam berbagai ukuran layar. Bootstrap memiliki banyak plugin dan theme builder yang akan membuat pengembangan tampilan website kita menjadi lebih cepat. Versi terbaru Boostrap adalah Bootsrap 4. Bootsrap 4 mendukung fitur SAAS. Dengan demikian, Bootsrap dapat mendukung LESS maupun SAAS. Keren kan? Nah, untuk melihat dokumentasinya silahkan klik link ini.
2. Foundation
Foundation adalah saingan berat bagi Boostrap. Framework foundation dikembangkan oleh lima perusahaan besar Facebook, Ebay, Mozilla, Adobe, dan bahkan Disney. Seperti Bootstrap, Foundation juga memiliki 12 grid yang mambuat halaman website respomsive untuk berbagai device. Foundation mengusung teknologi Saas seperti Bootstrap. Fitur paling keren dari foundation adalah Fastclick.js yang mempercepat proses rendering pada mobile device. Foundation bersifat open source. Dokumentasi lengkap Foundation dapat dilihat pada link ini.
3. Bulma
Bulma adalah framework yang relatif baru. Framework ini juga bersifat open source loh. Bulma mengusung Flexbox Layout model. Flexbox Layout akan membuat tampilan yang konsisten pada berbagai ukuran layar yang berbeda. Uniknya, Bulma tidak memerlukan Javascript. Pengembangannya 100% CSS. Bulma mengusung pendekatan ‘mobile-first’. Framework ini bersifat ringan dan sangat responsive. Sampai saat ini ada lebih dari 200.000 developer yang menggunakan framework Bulma. Untuk mengunjungi website resmi Bulam, klik link ini.
4. Pure
Pure adalah CSS Framework yang dikembangkan oleh Yahoo. Framework ini juga ringan dan responsive terhadap berbagai device. Pure dikembangkan berdasarkan normalize.css. Normalize.css terbagi atas modul-modul kecil. Dengan konsep ini, jika kita hanya memerlukan grid maka website hanya akan mengimport grid.css. Hal ini akan membuat website jauh lebih ringan dan waktu loading website akan berkurang. Hanya saja, pure tidak memungkinkan developer untuk membuat fixed layouts. Hmm, sayang banget ya. Nah, jika kalian ingin berkenalan lebih jauh dengan pure silahkan klik link ini ya.
5. Semantic UI
Semantic UI adalah framework yang akan menjadi pesaing terberat Bootsrap. Benar saja, menurut Usablica, Semantic UI adalah framework CSS terbaik, sedangkan Bootsrap menempati posisi kedua. Semantic UI membuat kode CSS lebih manusiawi. Dengan semantic ui, kita bisa membuat tampilan website yang bagus dan unik tanpa banyak melakukan perubahan. Semanthic UI terkenal dengan thematic effect-nya yang simple dan elegan. Framework ini menawarkan lebih dari 3000+ Theming Variables and 50+ UI Components. Semanthic UI juag mendukung third party seperti React, Meteor, Ember, dan React. Tertarik ?
6. UI Kit
Untuk tipe developer yang menyukai desain minimalis, UI kit adalah framework yang layak dicoba. UI kit membawa konsep super-clean, elegant, dan beautiful web interfaces tanpa harus membuang-buang memori device. UI kit juga dibekali dengan SVG icon, progress bars, image-maker, dan banyak fitur lain. Jangan khawatir, ternyata fitur-fitur ini juga costumizable. Selain itu, framework ini memungkinkan developer untuk menggunakan advance component seperti Nestable. Dengan UI kit, kita dapat membuat complex flexbox-based layouts hanya dengan menggunakan HTML. Wow! Website resmi UI Kit dapat dikunjungi ada pada link ini.
7. Materialize CSS
Tidak mau kalah dengan situs besar lainnya, Pada tahun 2014 Google memperkenalkan framework CSSnya yang bernama Materialize CSS. Materialize CSS adalah framework CSS yang sangat recomended untuk pengembang Website atau Android web-apps. Materialize adalah framework CSS yang mendukung tampilan YouTube, Gmail, Google Drive, dan Google Docs. Framework ini menggunakan sistem 12-grid layout seperti Bootsrap, animation, transition, padding, dan advanced effect seperti lightning dan shadow. Materialize CSS memiliki fitur pre-built starter template yang akan menghemat pengembangan. Untuk mengunjungi website resmi Bulam, klik link ini.
8. Tailwind CSS
Framework Tailwind adalah low-level framework yang fleksibel dan costumizable. Melalui TailwindCSS , kita tidak akan menemukan pra-desain komponen seperti button, card, alert, carousel atau yang lainnya. Pengaturan property CSS pada Tailwind CSS langsung melalui class-class kecil. Konsep ini disebut konsep utility-first framework. Framework ini baru muncul pada tahun 2017. Dengan Tailwind, kita bisa membuat komponen yang benar-benar berbeda dengan developer lain meskipun menggunakan framework yang sama. Website Tailwind dapat dilihat di sini.
9. Skeleton
Seperti namanya, skeleton adalah framework CSS yang paling simple dan minimal. Skeleton hanya terdiri atas 400 baris kode loh! Meskipun begitu, pengembangnya membekali Skeleton dengan bermacam-macam fitur seperti grids, typography, buttons, forms, lists, media queries, hingga tabel. Skeleton mendukung 12 grid layout dengan ukuran maksimal 960px. Skeleton sangat cocok untuk UI/UX designer pemula. Meskipun hanya memiliki komponen-komponen basic HTML tapi sudah cukup kok untuk membuat suatu tampilan website yang bagus. Cek dokumentasi skeleton melalui link ini.
10. Miligram
Framework terakhir adalah miligram. Faktanya, ukuran framework ini hanya 2 Kb saja. Miligram ini kecil-kecil cabe rawit. Meskipun ukurannya yang mini, nyatanya framework ini mendukung semua fitur yang ada pada CSS3 loh. Miligram adalah flexbox based. Dokumentasi lengkap miligram terdapat pada link ini
Nah, itulah dia 10 Framework CSS Terbaik di Tahun 2020. Jadi kamu tim mana? Tuliskan jawabanmu pada kolom komentar ya!
