CSS Framework mempermudah kita untuk membuat tampilan Front-End dalam waktu yang singkat dengan hasil yang menarik.
Berikut ini adalah beberapa aspek yang harus diperhatikan dalam memilih CSS Framework agar sesuai dengan keperluan kita dalam menyelesaikan proyek tertentu:
- Performa, agar web/app kita tidak lemot.
- Kemudahan penggunaan, agar developer lain tidak terkendala saat menggunakannya.
- Ikon, agar kita tidak perlu menggunakan library eksternal hanya untuk sebuah ikon.
- Komponen dan Fitur, kita pasti menginginkan framework yang menyediakan solusi layout dan elemen sebanyak mungkin.
- Sass atau Less, karna kita mungkin hanya akan menggunakan salah satunya saja.
- Responsif, agar kita tidak perlu membuat kode tambahan.
- Desain, karna kita menginginkan tampilan yang baik dan bagus.
Dalam artikel ini kami telah pilihkan beberapa CSS Framework, baik yang sudah diketahui banyak orang maupun yang kurang populer, disertai dengan kelebihan dan kekurangannya saat ini.
1.Bootstrap
Bootstrap adalah salah satu CSS Framework paling populer di kalangan pengembang, dibuat oleh Twitter. Bootstrap adalah yang pertama kali mempromosikan gagasan mobile-first.
Yang harus kita lakukan untuk membuat tampilan situs web kita dalam versi mobile, desktop dan ukuran layar tertentu hanya semudah menambahkan bootstrap class tertentu.
1
See the Pen Bootstrap Grid & Nested Container by Maksum Rifai (@maksumrifai)Kelebihan dari Bootstrap, dan mungkin salah satu faktor kesuksesan dan popularitas yang signifikan adalah mudah digunakan dan dipelajari. Bootstrap sangat ramah bagi pemula; setiap komponen dan fitur sangat jelas cara membuatnya dan mudah untuk dimengerti.
Ada banyak sumber untuk mempelajari Bootstrap, bahkan banyak lembaga kursus yang menggunakannya dalam materi kursus, Ada banyak contoh layout siap pakai jika kita membutuhkannya.
Poin lain yang layak disebutkan tentang Bootstrap adalah bahwa sejak diperkenalkan tahun 2011, masih terus dikembangkan dan diperbarui. Belum lama ini, versi 4.0 yang baru dirilis dengan peningkatan seperti flexbox, Sass dan Less support, atau class responsif terbaru.
Namun terkadang jika kita menggunakan terlalu banyak class, bisa membuatnya menjadi berantakan dan rumit. Selain itu, karna sudah banyak situs web yang menggunakan Bootstrap, tanpa perubahan visual, akan terlihat sama, dan sulit untuk membuatnya berbeda.
Dengan lebih banyak kelebihan daripada kekurangannya, Bootstrap bisa menjadi pilihan terbaik jika kita mencari CSS framework yang stabil.
2.Semantic UI
Semantic UI berkembang dengan pendekatan unik yang mereka miliki, berfokus pada kemudahan penggunaan HTML.
Semantic UI adalah framework yang mudah dipelajari dan mudah diakses bahkan untuk pemula. Saat menggunakan Semantic UI, gambar memiliki class sederhana “ui image”, dan jika ingin mengubah ukuran cukup menambahkan class “small“.
Desain dan jumlah komponen yang tersedia menjadikan Semantic UI pesaing serius bagi CSS framework lain. Desainnya memungkinkan kita untuk membangun UI atau situs web yang bagus tanpa banyak perubahan.
Semantic UI juga mendukung desain responsif, Dokumentasinya juga cukup detail dan mudah dimengerti. Meskipun tidak ada banyak kursus tentang menggunakan Semantic UI.
Mudah digunakan dan kaya akan komponen yang berbeda, Semantic UI adalah solusi lain yang baik untuk dipertimbangkan saat memilih CSS framework.
3.Foundation
Menyebutkan Bootstrap, kurang lengkap rasanya jika kita tidak membahas Foundation. Website Foundation mengatakan bahwa ia adalah “kerangka kerja front-end responsif paling canggih di dunia”. Untuk memenuhi moto ini, Foundation hadir dengan fitur responsif, aksesibilitas, pendekatan mobile-first, dan juga mudah dipelajari dan kustomisasi.
Menyebut diri mereka framework yang lebih profesional, Pembuatnya memutuskan untuk memberikan kursus dan tutorial tentang penggunaan Foundation, yang merupakan keuntungan besar bagi pengguna untuk mendapatkan sertifikasi.
Yang lebih hebat lagi, Foundation menyiapkan dokumentasi untuk membuat templat email dan situs web secara terpisah. Foundation adalah seperangkat alat besar yang memungkinkan kita untuk menyelesaikan banyak tugas UI, dan juga dioptimalkan untuk email dan aplikasi. Foundation juga hadir bersama CLI, sehingga mudah digunakan dengan bundler modul.
Desainnya juga cukup bagus dan memungkinkan kita untuk membuat UI yang terlihat menarik. Untuk pengembang junior, Foundation mungkin tampak sedikit berlebihan karna memberikan kemungkinan penyesuaian dan pengendalian framework
4.Bulma
Bulma adalah CSS framework open-source yang terbilang baru, dan yang membedakannya dari yang telah disebutkan di atas adalah bahwa Bulma adalah CSS murni. Bulma tidak perlu menggunakan Javascript sama sekali.
Bulma mendapatkan popularitas ketika Bootstrap versi ke-4 dikembangkan, dan para programmer mulai menyukainya. Mungkin karena kesederhanaan atau mungkin karena memberikan hasil yang menarik dan elegan. Membuatnya menjadi lebih populer daripada Foundation dalam waktu singkat.
1
See the Pen Bulma by Maksum Rifai ( @maksumrifai)Poin utama yang ditangani Bulma adalah responsifitas, dan Bulma tidak lebih buruk daripada framework lain, Bulma juga mengikuti aturan mobile-first.
Hal hebat lainnya dari Bulma adalah modularitasnya, yang memungkinkan kita hanya mengimpor bagian-bagian yang diperlukan, dan menghemat ruang.
Seperti Bootstrap, Bulma didasarkan pada flexbox dan membuat grid pun sangat mudah. Bulma mendapat dukungan dari komunitas kecil tapi sangat bersemangat.
5.Tailwind CSS
Tailwind CSS sedikit berbeda dari framework CSS lainnya, karena tidak terlalu fokus pada penyampaian komponen yang siap pakai, tetapi lebih kearah class utilitas, yang membantu pengembang untuk membangun apa yang mereka butuhkan.
Ini lebih seperti memberikan building block siap pakai untuk komponen. Terkadang mungkin akan terlihat jelek ketika kita menambahkan terlalu banyak class, tetapi tujuan kita tetap akan tercapai.
Meskipun tampilan bukan tujuan utama dari Tailwind CSS, elemen-elemennya memiliki desain yang cukup bagus, seperti framework CSS yang disebutkan sebelumnya, Tailwind CSS sepenuhnya responsif.
Menurut pendapat kami, Tailwind CSS adalah framework yang bagus untuk pengembang yang tidak ingin memiliki desain yang dipaksakan, dan yang suka memiliki kemungkinan penyesuaian yang luas. Meskipun kurang dikenal, ia memiliki potensi besar untuk berkembang.
6.UIkit
CSS terakhir dalam list kami adalah UIkit. Website UIkit menyatakan bahwa UIKit adalah framework yang ringan dan modular, jika diamati memang terlihat desain yang bersih dan modern.
Kelebihan dari UIKit, selain desainnya adalah variasi komponen yang dapat membantu kita untuk membangun UI yang lebih rumit.
Juga sama seperti setiap framework lainnya dalam list, UIKit sepenuhnya responsif, dan berisi sekumpulan ikon yang dapat digunakan di UI kita. Selain itu juga mendukung Less dan Sass.
Dokumentasi framework ini cukup singkat, tetapi memberikan semua informasi yang dibutuhkan dengan mudah dan terarah, sehingga pemula pun dapat mudah menggunakannya.
Kesimpulan
Ada banyak beragam CSS framework lainnya, tetapi dalam banyak kasus, mereka memberi kita fungsionalitas yang serupa tetapi dengan cara yang berbeda dan dengan desain yang berbeda.
Sebagai pengembang, kita harus mempertimbangkan beberapa faktor lebih dari sekedar aspek visual saat memilih CSS framework. Namun, kami percaya bahwa setiap orang dapat menemukan solusi yang cocok untuk proyek tertentu.
Kami harap list ini dapat berguna saat Anda memilih CSS framework untuk proyek selanjutnya. Jika ada CSS framework lainnya yang menarik dan layak dibahas tapi tidak kami sebutkan disini, beri tahu kami di komentar dan bagikan pendapat Anda tentang CSS framework yang Anda sukai.
