Framework CSS yang Siap Membantu Membuat Website
Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah website sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.
Framework CSS adalah kerangka kerja perangkat lunak siap pakai yang dimaksudkan untuk memungkinkan desain website menjadi lebih menarik dengan menggunakan bahasa Cascading Style Sheets. Keberadaan Framework CSS ini sangat membantu dan memudahkan bagi seorang pengembang website dalam membuat atau mengembangkan suatu desain website sesuai keinginan. Pilihan Framework CSS sudah banyak beredar, sehingga para pengembang website dapat bebas memilih sesuai selera masing-masing.
Sebenarnya ada banyak Framework CSS yang telah tersebar di dunia maya dan setiap waktu bermunculan Framework baru, disini hanya beberapa saja yang disajikan antara lain;
1. Materialize
Merupakan hasil pengembangan Google, materialize merupakan salah satu pilihan Framework CSS terbaik saat ini. Framework juga fokus kepada UX (user experience) atau pengalaman pengguna saat mengunjungi website kita.
Sama seperti framework lainnya materialize juga mendukung sistem grid yang memungkinkan kita membangun sebuah layout yang konsisten dan responsive tentunya.
2. Fox CSS
Fox CSS dikembangkan oleh Ronan Levesque saat menyadari sebagian besar framework CSS yang telah ada tidak cocok dengan kebutuhannya. Oleh karena itu Ronan mengembangkan framework CSS sendiri yang memiliki fitur-fitur seperti mobile first approach, mendukung IE9 ke atas, HTML5 ready, modular, sistem grid yang efisien. Fox CSS dikembangkan menggunakan Sass.
3. Smantic ui
Salah satu framework css ini adalah dimungkinkan melakukan integrasi ke framework lain, jadi developer dapat memasang template dari framework lain seperti bootstrap, foundation maupun google material ke dalam framework ini. Semantic UI bisa menjadi pilihan yang tepat bagi kalian yang ingin mempelajari tentang frontend development.
4. Foundation
Framework CSS yang satu ini cukup populer. Dengan framework ini seorang developer dimungkinkan untuk membuat tampilan website yang responsive sehingga memiliki tampilan maksimal disetiap perangkat.
Selain itu foundation juga biasa dipergunakan sebagai template email.
5. Bootstrap
Bootstrap adalah sebuah HTML, CSS dan Javascript Framework yang dibangun oleh developer Twitter yaitu Mark Otto dan Jacob. Fiturnya yang sangat kaya membuat Framework ini sangat populer banyak dipakai untuk proyek pengembangan website responsive.
Baca: 10 Plugins Ini Gratis, Silahkan Pakai di Website WordPress Anda
Framework ini sendiri memiliki dokumentasi yang sangat lengkap, sehingga sangat mudah bagi kita yang baru mulai belajar mengenai website development untuk mempelajarinya
6. Metro UI CSS
Yang terakhir yaitu metro ui css. Jika anda pengguna windows maka anda akan terkagum kagum dengan framework css ini. Pasalnya tampilannya bisa mirip dengan windows 10. Bahkan anda bisa membuat tampilan website anda seperti layaknya menggunakan user interface windows di browser.
7. Skeleton
Sekilas, mungkin Framework ini mirip dengan bootstrap. Memang ada kemiripan, ini karena skeleton dibuat oleh mantan pekerja twitter yang sekarang pindah ke medium.com. Skeleton juga memiliki keunggulan layaknya framework lain; simple, ringan, dan yang pasti responsive.
8. Milligram
Framework yang pertama adalah Milligram. Framework ini didesain khusus untuk meningkatkan performa dan produktivitas dengan property yang lebih sedikit untuk menghasilkan kode yang lebih apik. Beberapa peramban terbaru seperti Chrome, Firefox, IE, Opera, dan Safari secara resmi didukung oleh Milligram. Meski tidak didesain secara khusus untuk mendukung peramban-peramban lama, beberapa versi masih dapat didukung oleh Milligram. Besar file yang hanya berukuran 2KB tidak membuat fitur Milligram dapat disepelekan. Tipografi, button, list, form, table, dan grid telah dimiliki oleh Milligram. Panduan menggunakan Milligram tersedia lewat dokumentasinya yang cukup lengkap.
9. Pure
Pure merupakan framework CSS yang responsif yang dapat digunakan untuk berbagai jenis layout. Layout blog, email, galeri foto, landing page, side menu, dan layout-layout lainnya dapat dicapai dengan mudah menggunakan Pure.
Seperti kebanyakan framework CSS yang dikembangkan dengan target utama mobile, Pure dikembangkan dengan mempertahankan ukuran yang kecil. Semua modul Pure (base, grid, form, button, tables, menu) berukuran kurang lebih 4kb. Jika hanya membutuhkan modul tertentu, kita bahkan dapat menghemat lebih banyak lagi.
10. MUI
MUI adalah framework CSS ringan yang membantu membuat aplikasi web dan mengikuti teori-teori material desain. Dengan framework ini dapat membuat aplikasi dalam waktu yang cukup singkat. Kombinasi ukuran file yang kecil dari file CSS dan JS-nya hanya berkisar 12KB. Framework ini tidak memiliki dependensi tambahan dan mendukung framework React. File Sass juga tersedia sehingga membuat framework ini bisa dikostumisasi sesuai kebutuhan.
11. Blaze CSS
Blaze CSS memiliki fitur modular yang mirip dengan Pure. Meskipun telah memiliki ukuran yang kecil namun masih dapat diperkecil lagi jika kita hanya menggunakan modul-modul tertentu saja. Framework ini memiliki fitur yang cukup lengkap meskipun hanya berukuran kurang dari 7kb.
12. Picnic CSS
Ini merupakan framework CSS yang memiliki ukuran cukup mungil, kurang dari 10KB. Dengan ukuran yang mungil ini Picnic CSS masih memberikan tampilan yang sangat indah. Seperti framework-framework sebelumnya framework ini juga memiliki fitur modular yang memungkinkan kita memperoleh ukuran yang lebih kecil dari ukuran normalnya.
13. Amazium
Framework CSS Free ini membantu mendesain struktur website dengan style modern yang responsive. Dengan framework ini tidak perlukan lagi mendesain website dengan cara terpisah untuk berbagai ukuran pixel layar. Selain itu, tidak perlu lagi membuat 960 grid system dengan dua belas kolom.
Amazium menawarkan cara praktis dan simple serta core yang tidak besar sehingga cocok untuk pengembangan desain web yang sesuai selera tanpa dibatasi oleh aturan-aturan framework css tersebut.
14. Spectre
Spectre memberikan gaya dasar untuk tipografi dan elemen, tata letak sistem responsif berbasis flexbox, komponen dan utilitas CSS murni dengan praktik terbaik pengodean dan bahasa desain yang konsisten.
15. Gumby Framework
Gumby dikembangkan oleh Digital Surgeons dan saat ini sudah mengeluarkan versi terbaru walaupun tidak setenar bootstrap, namun gumby semakin banyak diminati.
16. Basscss
Basscss adalah CSS Library yang bisa digunakan untuk mendesain tanpa perlu repot – repot mengubah css. Penyesuaian tampilan css menggunakan class yang berasal dari Basscss, misalnya saja ingin mengubah atribut sebuah elemen menjadi position: absolute maka kita tinggal menambahkan class .absolute selesai. Bisa dikatakan Basecss bisa dikatakan sebagai css helper.
17. Lumx
Lumx dibangun dengan Sass dan Bourbon yang membuat kostumisasi lebih mudah. Dengan menggunakan Gulp, kita bisa mengotomatiskan optimalisasi file Sass dan Javascript. Dokumentasinya juga memberikan contoh kode yang bisa langsung dipakai.
Fluid Baseline Grid adalah HTML5 dan CSS3 development kit yang menyediakan dasar yang solid untuk mendesain website secara cepat dan mudah. Fluid Baseline Grid dibangun dengan standar tipografi dan merupakan kombinasi dasar dari layout fluid-width, baseline grid dan mobile dengan sistem responsif pertama yang bebas dan perangkat agnostic framework.
19. Surface
Surface adalah framework CSS yang ringan dan merupakan framework CSS murni. Ia tidak memiliki file JavaScript sama sekali. Komponen-komponennya dibuat tanpa JavaScript sehingga ukuran versi minified-nya hanya 5.7KB yang membuatnya memiliki waktu muat yang sangat cepat.
20. Less Framework
Less Framework memanfaatkan salah satu tool yaitu Less CSS. Manfaat yang diperoleh dengan Tool ini yaitu penulisan CSS lebih simpel dan efisien, layaknya seperti menulis kode PHP atau Javascript. Less Framework hadir dikemas dengan Grid System dan Responsiveness, ini bertujuan agar penyusunan kode jauh lebih simpel dan lebih efisien.