CSS Framework adalah alat bantu yang berisi kode-kode CSS untuk mempermudah dalah membuat tampilan halaman website. Salah satu fungsi paling penting CSS Framework adalah kemudahan dalam membuat pembagian halaman ke dalam kolom-kolom atau grid.
Tanpa CSS Framework kita harus membuat kode CSS sendiri untuk menentukan lebar elemen, margin, warna, border, spasi, typografi, dll. Dengan CSS Framework, semua itu sudah siap pakai, misalnya mau membuat halaman dengan 3 kolom, 4 kolom, atau 12 kolom. Mau mewarnai huruf, kotak, latar belakang, tinggal memakai kelasnya.
Mengenai kolom, ada CSS Framework yang menggunakan 12 kolom, 16 kolom, atau 24 kolom. Ini sangat memudahkan untuk membuat tampilan halaman website sesuai peruntukannya. Apalagi kalau sudah sering membuat, sudah hafal nama-nama kelas CSS-nya, membuat halaman website lebih cepat lagi.
Tapi kelemahan dari CSS framework adalah file lebih berat, karena memuat banyak fungsi. Kalau website kita hanya membutuhkan sedikit fungsi, maka banyak fungsi-fungsi CSS framework yang tidak terpakai, ini bisa memperberat waktu muat/load halaman.
Cara untuk mengurangi beban saat dibuka bisa hanya menggunakan CSS atau Javascript yang dipakai, yang tidak dipakai dibuang. CSS Framework seperti Bootrstrap menyediakan fle Sass yang bisa dipilih file mana yang akan digunakan. Dengan cara ini kita bisa menggunakan file dengan lebih efisien.
Atau anda bisa menggunakan layanan online seperti purifycss.online, tinggal memasukkan URL halaman website, maka nanti akan ditampilkan CSS yang benar-benar di pakai dihalaman website anda. File tersebut bisa dipakai sebagai CSS website.
Untuk menguji kinerja website, bisa mengunjungi layanan Google Pagespeed Insight, lalu masukkan alamat website anda. Nanti akan keluar skor kinerja, SEO, kemudahan akses, dan script-script apa saja yang membebani halaman website.
Berikut beberapa CSS Framework yang terkenal
1. Bootstrap
Bootstrap adalah CSS Framework paling terkenal, karena kelengkapan fungsi-fungsinya. Bagi yang hanya membutuhkan sedikit fungsi tersedia pilihan untuk hanya mengambil fungsi-fungsi yang diperlukan.
Alamat website Boostrap: getbootstrap.com
2. MaterializeCSS
Mangadopsi material design untuk CSS. Ukuran file MaterializeCSS lebih ringan, tapi memang fungsinya tidak sebanyak Bootstrap. Website azimat.id awalnya dibuat menggunakan Framework MatrializeCSS, tapi kemudian diganti menggunakan Bootstrap. MaterializeCSS sudah mendukung untuk tampilan mobile, navigasi sidebar, tooltip, warna, slider, modal, dll. MaterializeCSS berisi file CSS dan Javascript untuk tampilan dinamis.
Alamat website: materializecss.com
3. Bulma
Slogan Bulma: the modern CSS framework that just works. Bulma adalah framework open source yang gratis, yang memberikan komponen untuk membangun halaman antar muka website yang responsive. Bulma hanya memuat file CSS, tidak ada pustaka Javascript.
Alamat websitenya: https://bulma.io/
4. Mini CSS
Sesuai dengan namanya, Mini CSS memberikan framework dengan ukuran file yang kecil, hanya 10kb. Sangat ringan.Slogan dari Mini CSS adalah menjembatani kesenjangan antara framework berfitur lengkap (mis. Bootstrap dan Semantic UI) dengan framework mikro (mis. Milligram dan Pure.CSS).
Mini.css mengemas banyak fitur dalam paket kecil, sementara itu hanya mengandalkan CSS, jadi tidak perlu khawatir kemungkinan ada konflik dengan pustaka Javascript lain yang mungkin Anda gunakan.
Aalamat website: minicss.org
5. Pure CSS
Slogannya: A set of small, responsive CSS modules that you can use in every web project. Seperangkat modul CSS yang responsive berukuran kecil yang bisa anda gunakan untuk setiap proyek website.
Ukuran file Pure CSS sangat kecil, hanya sekitar 3.7KB* yang diperkecil dan di-gzip. Pure CSS termasuk mikro CSS Framework, dibuat dengan mempertimbangkan perangkat seluler, sehingga ukuran file dibuat tetap kecil. Keuntungannya, akan ringan, tidak begtu membebani kecepatan load halaman.
Aalamat website: purecss.io
6. Skeleton
Slogannya: A dead simple, responsive boilerplate. Dibuat sangat sederhana dan ringan, untuk membangun website responsive. Cocok untuk membangun website dengan fungsi minimal, tapi cepat dibuka.
Alamatnya: getskeleton.com
7. Tailwind CSS
CSS Framework yang mengutamakan fungsi utility.
A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
Alamat websitenya: tailwindcss.com/
Mana yang paling bagus? Sesuai kebutuhan halaman website. Kalau halaman website hanya membutuhkan sedikit fungsi, gunakan yang miminal, kalau membutuhkan banyak fungsi gunakan yang lengkap. Yang jelas, semakin banyak fungsi ditambahkan, halaman semakin berat untuk dibuka.
Semua CSS framework di atas bisa digunakan untuk membuat sebuah halaman website.
Belum memiliki website?
Silakan baca tulisan: Pentingnya memiliki website
Ilistrasi: fullscale.io