Pada article kali ini kita akan membahas mengenai CSS Framework dan beberapa rekomendasi CSS Framework terbaik yang dapat kita gunakan dalam mengembangkan program aplikasi kita. yuk kita simak bersama.
Definisi CSS Framework
Apa itu CSS Framework ? CSS Framework merupakan sekumpulan kode css yang dibuat sedemikian rupa dengan pakem tertentu, mulai dari layouting, tombol, tipografi, animasi, dan berbagai hal lainnya yang mengacu pada kebutuhan UX Design sehingga kita tidak perlu lagi membuat style dari sebuah komponen dari nol serta membuat tampilan website yang kita kembangkan menjadi lebih cantik, dinamis dan selalu konsisten.
Manfaat CSS Framework
- CSS Framework dapat meningkatkan efisiensi pengerjaan sebuah proyek karena tidak perlu lagi membuat style dari nol.
- CSS Framework pasti memiliki dokumentasi official yang berisi panduan lengkap untuk menggunakan CSS Framework tersebut yang juga didukung oleh komunitasnya, sehingga kita bisa dengan mudah mencari solusi dari permasalahan design yang kita kerjakan.
- CSS Framework kebanyakan sudah didesign sedemikian rupa sehingga dapat menghasilkan tampilan yang lebih dinamis, responsive, dan juga konsisten.
- CSS Framework dirancang agar dapat dijalankan di banyak browser, sehingga kita tidak perlu memikirkan perbedaan tampilan web yang kita buat jika diakses melalui berbagai browser
Setelah kita mengetahui definisi dan manfaat dari CSS Framework, sekarang kita akan membahas CSS Framework apa sih yang sedang populer sekarang yang bisa kita gunakan untuk membantu pengembangan project kita.
1. Ant Design
Jika kita menggunakan ReactJS atau NextJS maka Ant Design bisa menjadi salah satu pilihan yang tepat untuk membantu kita dalam mengembangkan project kita, karena Ant Design diciptakan di dalam ekosistem reactJS yang menyediakan design pattern serta design principles yang dikemas ke dalam komponen-komponen terpisah sehingga bisa kita gunakan sesuai dengan kebutuhan mulai dari tombol, card, form input, layout, dan lain sebagainya.
untuk menggunakan Ant design kita perlu menginstall package ant design ke dalam project kita dengan menggunakan command npm install antd --save
npm install antd --save
selain itu Ant design juga menyediakan icon-icon general yang bisa kita gunakan untuk mempercantik project yang kita kembangkan dengan npm install @ant-design/icons --save
npm install @ant-design/icons --save
kita bisa mengunjungi laman dokumentasi official dari ant design yang dapat kita akses di link berikut ini : Ant.design
2. Tailwind CSS
Tailwind CSS merupakan Sebuah CSS Framework yang sangat powrfull dan bisa digunakan di berbagai jenis bahsa pemrograman dan juga framework yang bekerja di level html dengan langsung menyematkan style yang kita inginkan di class element html kita secara spesifik yang bisa digabungkan untuk menciptakan sebuah user interface yang kompleks.
kita bisa menambahkan tailwind css ke dalam project kita dengan beberapa cara,
pertama kita bisa install melalui package manager dengan command npm install tailwindcss dan membuat file config tailwind css dengan command npx tailwindcss init
npm install tailwindcss
npx tailwindcss init
atau kita bisa menggunakan import CDN dengan menambahkan link CDN tailwind di dalam <head>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@^3.0/dist/tailwind.min.css" rel="stylesheet">
kita bisa mengunjungi laman dokumentasi offiicial dari Tailwind CSS dengan mengakses link berikut ini Tailwind css
3. Bootstrap
Siapa yang tidak mengenal bootstarp, ini merupakan salah satu CSS Framework legend yang juga tidak kalah powerfull. Bootstrap sedikit mirip dengan Tailwind css yang sama-sama menyediakan Design patern, design principles yang dapat kita gunakan untuk membantu pengerjaan user interface web di level html dengan langsung menyematkan style yang kita inginkan di dalam class element html nya.
Sama seperti Tailwind CSS, bootstrap juga dapat kita install menggunakan package manager dan juga CDN
kita bisa menggunakan command npm install bootstrao@5.3.3 untuk menambahkan bootstrap ke dalam project kita.
npm install bootstrap@5.3.3
kita juga bisa menambahkan bootstrap ke dalam project kita dengan menyematkan CDN di dalam <head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
jika kita bingung dalam menggunakan CSS Framework Bootstrap kita bisa mengunjungi laman dokumentasi dari Bootstrap dengan mengakses link berikut Bootstrap
Itulah beberapa CSS Framework terbaik yang direkomendasikan dan bisa kita pertimbangan dalam mengembangkan project web. Terimakasih telah mampir di article ini dan semoga menjadi ilmu yang bermanfaat.
Teruslah Bergerak Maju.