10 Framework Material Design Terbaik Untuk Web

Material Design merupakan bahasa desain yang dikembangkan oleh Google dan diumumkan pertama kali tanggal 25 Juni 2014. Sejak saat itu, ia telah diadopsi di hampir semua produk Google juga perusahaan dan website lain.

Menurut Google,tujuan utama Material Design ialah untuk mengembangkan sebuah sistem yang memungkinkan pengalaman sama diberbagai platform dan ukuran layar.

Berikut ini 10 framework Material Design yang dapat membantu mempercepat dan mempermudah penerapan panduan Material Design untuk website yang pembaca buat.

Materialize

Materialize adalah framework yang dibuat khusus untuk penerapan Material Design di web. Framework ini cukup mudah dipakai dan memiliki contoh-contoh kode yang bisa membantu mempercepat pengguna baru untuk memakainya.

Materialize memiliki dua versi yang berbeda yaktu versi standar yang memiliki file CSS dan javaScript biasa dan versi Saas yang menggunakan sumber file SCSS.

Material Design for Bootstrap

Bootstrap adalah framework frontend paling populer sejagat raya dan Material Design for Bootstrap adalah framework yang dibangun di atas Bootstrap dengan menerapkan aturan-aturan Material Design. Framework ini memberikan komponen-komponen Material Design siap pakai yang bersumber dari komponen Bootstrap itu sendiri.

Jika sudah terbiasa dengan framework Bootstrap, seharusnya pembaca tidak akan menemui kesulitan yang berarti saat menggunakan framework ini.

Material Components for the web

Material Components for the Web adalah framework Material Design yang dikembangkan langsung oleh developer dan desianer Google. Framework ini adalah penerus Material Lite. Material Lite adalah framework yang sudah tidak didukung dan dikembangkan lagi oleh Google.

Karena dikembangkan langsung oleh Google, makaa bisa dipastikan bahawa framework ini benar-benar menerapkan teori Material Design 100%. Ia juga mendapatkan update secara berkala. Dokumentasinya yang lengkap akan membantu siapa saja yang inign mengikuti aturan Material Design dalam pembuatan halaman web.

Angular Material

Angular Material adalah framework Material Design yang dikembangkan oleh tim Angular sehingga bisa bekerja dengan sempurna di framework Angular. Framework ini memberikan komponen Angular yang bisa dipakai ulang dan sudah menerapkan teori Material Design. Dokumentasi Angular Material juga memiliki contoh yang banyak dalam menerapkan komponen-komponen yang berbeda sehingga kita bisa saja copy paste ke project yang sedang dibuat.

Material

Material juga salah satu framework yang dibangun dari framework Bootstrap. Framework ini memanfaatkan versi Bootstrpa terbaru, Bootstrap 4.

Material mengikuti aturan Material Design untuk menerapkan bagaimana komponen Bootstrap harus terlihat. Dokumentasinya sangat lengkap dan membahas semua aspek framework ini diserta contoh.

Material Foundation

Sesuai namanya, Material Foundation adalah framework Material Design yang membantu membuat aplikasi web untuk framework CSS Foundation. Framework ini dikembangkan langsung oleh tim pengembang Foundation sehingga jika pembaca sudah terbiasa dengan Foundation, menggunakan Mateiral Foundation seharusnya tidak jauh berbeda.

Tidak seperti Bootstrap, Foundation tidak memberikan komponen yang siap pakai. Foundation hanya memberikan dasar komponen yang bisa di kostumisasi sesuai kebutuhan. Ia memberikan kemudahan untuk tidak memulai semuanya dari awal sambil memberikan kebebasan untuk menyesuaikan dengan kebutuhan pengembangan.

Material-UI

Jika menggunakan framework React dari Facebook dan ingin menerapkan aturan-aturan Material Desing, maka framework Material-UI adalah framework yang paling cocok. Material UI adalah framework open source yang bisa diintegrasikan dengan mudah ke project yang sedang dibuat.

MUI

MUI adalah framework CSS ringan yang membantu membuat aplikasi web dan mengikuti teori-teori Mateiral Design. Karena ringan, ia membuat aplikasi yang dibuat memiliki waktu muat yang sangat cepat. 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.

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.

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.

Sumber: BootstrapDash Team

Gambar sampul: XDA Developer