Ketika berbicara tentang menata situs web dan aplikasi web, ada berbagai teknologi CSS yang dapat kita gunakan. Kita dapat tetap menggunakan vanilla CSS, CSS preprosesor seperti SaaS dan Less, atau CSS-in-JS tools, seperti Emotion dan Styled Components.
Selain metode tersebut, kita juga dapat menata situs web dengan menggunakan CSS frameworks. Masalahnya adalah, sampai saat ini, sudah lebih dari 40 CSS frameworks yang tersedia! Dengan beragam opsi yang tersebut, memilih frameworks yang tidak hanya membuat desain lebih menarik tetapi juga responsif dapat menjadi tantangan tersendiri.
Jika kalian mengalami kebingungan memilih di antara CSS frameworks tersebut, artikel ini mungkin sesuai dengan yang kalian butuhkan! Dalam artikel ini, kita akan menjelajahi apa saja kerangka kerja CSS yang bisa bikin tampilan web kalian makin eye-catching dan responsif.
Let’s dive in🚀
1. Bootstrap
Bootstrap merupakan open-source web development framework yang menyediakan kumpulan komponen dan styles untuk HTML, CSS, dan Javascript. Bootstrap menyediakan serangkaian template dan komponen yang dapat digunakan kembali, seperti navigasi, tombol, formulir, dan grid, yang dapat disesuaikan sesuai dengan kebutuhan.
Alasan menggunakan Bootstrap:
- Kerangka Kerja Frontend Paling Populer: Bootstrap diakui sebagai salah satu kerangka kerja frontend sumber terbuka paling populer. Penggunaannya yang luas memastikan kalian dapat dengan mudah menemukan dan mengakses berbagai template yang sesuai untuk berbagai jenis proyek.
- Fitur Lengkap: Bootstrap tidak hanya sekadar menjadi kerangka pengembangan; ia juga berfungsi sebagai template dinamis yang telah siap pakai dengan berbagai komponen yang luas. Mulai dari alerts, modal hingga bar navigasi. Hal ini memudahkan pengembang, bahkan yang tidak memiliki pengalaman frontend sebelumnya, untuk membuat halaman yang terstruktur dengan baik.
- Mudah untuk Kostumisasi: Bootstrap dapat di-custom menggunakan SASS (Syntactically Awesome Stylesheets). Belajar cara melakukan kostumisasi situs web Bootstrap dengan SASS dapat secara signifikan mempercepat waktu pengembangan kalian.
- Dukungan Komunitas: Dukungan berkelanjutan membuat Bootstrap dapat diandalkan. Diperkenalkan oleh Twitter, Bootstrap kini dikelola oleh komunitas besar pengembang, memastikan rilis yang stabil dan dukungan jangka panjang.
Kekurangan:
- Sulit untuk override: Bootstrap memiliki desain dan tampilan yang sangat spesifik, yang sulit untuk dikecualikan jika kalian menginginkan style yang berbeda. Karena menggunakan aturan CSS !important secara luas, mengesampingkan nilai default dapat menjadi rumit.
- Terlalu Sering Digunakan: Alasan utama mengapa orang tidak menyukai Bootstrap adalah penggunaannya yang luas. Hal ini menyebabkan muncul tampilan yang begitu sering digunakan sehingga para pengembang menciptakan frasa "semua situs web Bootstrap terlihat sama".
- Bergantung pada jQuery: Berbeda dengan kerangka kerja lain yang hanya menggunakan CSS, Bootstrap 4 bergantung pada jQuery untuk banyak fitur interaktifnya. Ini membuatnya lebih sulit, tetapi tidak tidak mungkin, untuk menggunakannya bersama dengan kerangka kerja JavaScript seperti React atau Vue. Untungnya, Bootstrap 5, yang akan segera dirilis, akan menghapus ketergantungan jQuery.
- Membutuhkan Memori yang Besar: Semua fitur Bootstrap datang dengan harga — cukup memakan memori untuk dimasukkan ke dalam proyek kalian. Meskipun, dapat mengimpor bagian-bagian dari proyek tersebut, tetapi tidak se-ringan atau modular seperti framework lain.
2. Tailwind CSS
Tailwind CSS adalah salah satu framework CSS yang juga populer saat ini. Framework ini dikenal dengan pendekatan utility-first, yang menyediakan serangkaian kelas utilitas untuk mengatur tata letak, tipografi, warna, ruang, dan lainnya. Pendekatan ini menghilangkan kebutuhan untuk menulis CSS tambahan kecuali untuk skenario unik seperti ketika memerlukan animasi kustom.
Meskipun merupakan salah satu framework terbaru, Tailwind CSS berhasil membuktikan diri sebagai pesaing utama di antara kerangka kerja CSS terkenal lainnya. Data dari State of CSS 2023 menunjukkan bahwa Tailwind CSS memiliki tingkat retensi tertinggi (75,5%) di antara kerangka kerja CSS lainnya.
Alasan Menggunakan Tailwind:
- Atomic CSS: Memusatkan elemen, membuat tata letak fleksibel, atau menggunakan warna teks tertentu adalah hal-hal yang biasanya kalian kodekan dalam CSS. Tailwind membuat semua gaya umum ini mudah diimplementasikan dengan menawarkan kelas utilitas. Metodologi ini terkadang disebut CSS Atomik di mana kelas elemen HTML dengan jelas menjelaskan seperti apa tampilannya. Misalnya,
<div class="m-1 text-center bg-black">...</div>akan menampilkan elemen dengan margin 1 (yaitu margin kecil), teks yang terpusat, dan latar belakang hitam. - No-Desain: Tailwind tidak dilengkapi dengan komponen yang sudah dibuat atau bahasa desain tertentu. Artinya, kalian tidak perlu mengganti gaya yang sudah ada dan dapat lebih produktif saat mengimplementasikan desain kustom.
- Komponen yang Dapat Digunakan Kembali: Meskipun Tailwind tidak menyertakan komponen yang sudah dirancang sebelumnya, tetap memungkinkan kalian membuat komponen kustom sendiri yang dapat digunakan ulang di seluruh proyek. Kalian juga dapat menemukan beberapa contoh komponen di situs web resmi yang dapat digunakan sebagai titik awal.
- Integrasi PostCSS/SAS: Untuk memanfaatkan framework ini dengan lebih baik, kalian perlu menginstal dan mengimpornya ke proyek SASS atau PostCSS. Hal ini memungkinkan kalian memanfaatkan semua fitur Tailwind untuk menulis CSS yang lebih efektif.
Kekurangan:
- Kurva Pembelajaran yang Curam: Tailwind bukanlah pilihan terbaik untuk pengembang yang kurang berpengalaman. Karena tidak menyediakan komponen siap pakai, kalain perlu sepenuhnya memahami bagaimana teknologi front-end bekerja. Kurva pembelajaran Tailwind agak agak sulit karena harus memahami sintaks untuk dapat produktif dengan framework ini.
- Tidak Dapat Digunakan Langsung: Tailwind dapat ditambahkan ke proyek sebagai file CSS yang digabungkan, mirip dengan kerangka kerja lainnya. Namun, panduan instalasi resmi menjelaskan bahwa jika kalian menambahkan dengan cara seperti ini, banyak fiturnya akan tidak tersedia. Untuk memanfaatkan sepenuhnya Tailwind, kalian perlu tahu cara menggunakan Webpack, Gulp, atau alat pengembangan frontend lainnya.
3. Bulma
Bulma adalah alternatif untuk Bootstrap karena memiliki kode yang modern dan estetis. Mudah digunakan dan diimpor ke dalam proyek kalian, Bulma dilengkapi dengan berbagai komponen siap pakai.
Bulma sangat diacungi jempol karena sintaksisnya yang sederhana dan desain minimalis namun estetis. Bulma benar-benar merupakan framework yang dapat membuat halaman web yang monoton terlihat lebih menarik.
Alasan Menggunakan Bulma:
- Desain Estetis: Bulma dilengkapi dengan desain yang bersih dan modern — bahkan jika kalian tidak mengubah pengaturan default, kalian akan mendapatkan halaman web yang tampak menarik.
- Modern: Teknologi terus berkembang, dan apa yang dulunya rumit mungkin sekarang menjadi sederhana. Modul layout flexbox pada CSS memudahkan pembuatan tata letak responsif, dan Bulma adalah salah satu framework berbasis flexbox yang menerapkan prinsip-prinsip baru ini.
- Developer-friendly: Front-end developers memiliki tujuan untuk membuat tampilan yang memberikan pengalaman yang hebat kepada end-user, Sedangkan pencipta Bulma bertujuan untuk memberikan pengalaman yang hebat kepada developer. Dengan mempertimbangkan hal itu, Bulma dilengkapi dengan konvensi penamaan yang mudah digunakan dan diingat.
- Mudah Dikustomisasi: Warna, padding, dan banyak properti default Bulma dapat disesuaikan menggunakan SASS. Dengan cara ini, kalian dapat mengatur default proyek kalian dalam waktu beberapa menit.
- Tanpa Javascript: Bulma tidak menyertakan fitur Javascript. Karena hanya menggunakan CSS, Bulma dapat dengan mudah diintegrasikan dengan kerangka kerja JavaScript seperti Vue atau React.
Kekurangan:
- Gaya yang Khas: Gaya yang unik dari Bulma dapat menjadi pisau bermata dua. Dikarenakan style-nya cukup khas, jika digunakan secara berlebihan, kita bisa mendapatkan situs web yang terlihat sangat mirip, seperti yang terjadi dengan Bootstrap.
- Kurang Lengkap: Bulma bersaing dengan Bootstrap dalam banyak hal, tetapi tidak se-lengkap Bootstrap dalam hal aksesibilitas dan fitur berkelas enterprise lainnya.
4. Pure.CSS
Framework Pure CSS berasal dari pesaing tak terduga di dunia open source — Yahoo. Kerangka mikro ini sangat kecil, hanya memerlukan 3.7 KB (setelah dikompresi) ketika semua modul digunakan. Framework ini menyediakan modul CSS yang dapat digunakan ulang dan responsif yang dapat ditambahkan ke proyek web apa pun.
Alasan Menggunakan Pure:
- Memori yang Kecil: Setiap baris CSS dipertimbangkan dan ditulis dengan cermat untuk membuat kerangka kerja ini ringan dan performa tinggi.
- Dapat Disesuaikan: Kalian dapat mengimpor Pure secara modular dan mengimplementasikan hanya apa yang kalian butuhkan.
- Community Support : Berbeda dengan proyek komunitas, Pure didukung oleh Yahoo, sehingga menjadikan proyek ini pilihan yang aman untuk penggunaan jangka panjang.
- Komponen Siap Pakai: Pure dilengkapi dengan komponen-komponen siap pakai yang responsif dan dibangun untuk web modern.
Kekurangan:
- Untuk Pengembang Berpengalaman: Pure tidak cocok untuk pengembang yang kurang berpengalaman atau tim kecil, karena kalian perlu membuat desain sendiri untuk menggunakan framework ini.
5. Materialize CSS
Material design adalah bahasa desain yang dikembangkan oleh Google dan digunakan di seluruh proyek-proyek mereka untuk banyak situs web dan tema admin. Materialize CSS adalah open-source framework CSS yang memudahkan implementasi tampilan dan nuansa material design dalam proyek kalian.
Materialize CSS menampilkan banyak komponen interaktif yang mempercepat pengembangan dan membantu memberikan pengalaman hebat kepada pengguna. Animasi digunakan di seluruh framework untuk memberikan umpan balik visual kepada pengguna, dengan cara yang mudah digunakan oleh developers.
Alasan Menggunakan Materialize:
- Desain Material: Bahasa desain ini banyak digunakan dan dikenal oleh orang. Hal ini dapat membuat kreasimu mudah digunakan oleh audiens targetmu.
- Fitur Lengkap: Materialize CSS menyertakan komponen-komponen siap pakai untuk hampir semua hal, juga dilengkapi dengan fitur-fitur Javascript yang lebih canggih untuk mendukung interaksi.
- Mobile-friendly: Kalian dapat membuat aplikasi web progresif menggunakan komponen-komponen mobile seperti floating navigation dan swipe interactions.
Kekurangan:
- Bahasa Desain yang Ketat: Jika kalian ingin melakukan sesuatu yang tidak sesuai dengan material design, lebih baik hindari Materialize.
- Proyek Independen: Meskipun memiliki basis pengguna yang aktif, Materialize tidak didukung secara korporat, yang berarti proyek ini lebih bergantung pada kontribusi dan dukungan dari komunitas.
Kesimpulan
Kita telah menjelajahi berbagai opsi kerangka kerja CSS yang populer untuk pengembangan web, termasuk di dalamnya framework Bootstrap, Tailwind CSS, Pure CSS, Bulma, dan Materialize CSS. Masing-masing memiliki karakteristik unik yang dapat memenuhi kebutuhan proyek web kalian.
Setelah mendalami kelima framework tersebut kita dapat mempertimbangkan hal-hal penting ketika memilih framework CSS, seperti dukungan dari komunitas, pembaruan, integrasi dengan teknologi lain, performa, ukuran serta dokumentasi yang baik.
Pilihan mana framework yang terbaik tergantung pada kebutuhan spesifik dan preferensi desain proyek kalian. Dengan pemahaman yang baik tentang kelebihan dan kekurangan masing-masing kerangka kerja, kalian dapat membuat keputusan yang tepat untuk menciptakan tampilan web yang tidak hanya menarik tetapi juga responsif.
And don’t forget to learn this framework. You can learn it from scratch with BuildWithAngga! Terdapat kelas-kelas framework CSS yang dapat kalian ikuti, seperti Kelas Online CSS Bootstrap 4 Web Design dan Kelas Online Belajar Tailwind CSS Untuk Pemula Website Designer. Keep learning and see you at class!✨
