Yunesya Blog

Berikut adalah penjelasan tentang Material Design Lite :

Material Design Lite

Material Design Lite (MDL), seperangkat komponen yang memungkinkan developer untuk mengembangkan situs dengan bahasa desain Material Design.
Komponen tersebut terdiri dari seperangkat kode CSS, HTML, dan JavaScript. Singkatnya Material Design Lite adalah framework front-end untuk mengembangkan situs dari Google. Serupa dengan framework lain, MDL memiliki sejumlah komponen yang siap digunakan. Aturan penggunaan MDL sangat sederhana, pertama kamu harus memulai dengan tag HTML, kemudian diikuti dengan dengan komponen-komponen MDL di dalam tag tersebut. (Contoh kode di bawah berasal dari situs Webdesign Tutplus)
Mengingat framework ini masih baru, belum banyak komponen dan juga fitur yang bisa kamu gunakan. Akan tetapi setidaknya komponen-komponen tersebut sudah bisa kamu gunakan untuk membuat desain situs sederhana. Misalnya komponen Layout MDL yang terdiri dari navigasi menu dan struktur situs.
MDL memiliki dua desain navigasi menu, yaitu Drawer dan Tab. Drawer merupakan desain navigasi yang diimplementasikan layaknya sebuah laci. Untuk melihat konten di dalamnya, pengguna perlu menarik “laci” tersebut. Dalam hal ini, menu-menu tersebut tersembunyi di sisi kanan atau kiri.
Lain lagi halnya dengan Tab, desain navigasi ini biasa digunakan apabila situs tersebut hanya memiliki dua atau tiga menu saja. Dengan menggunakan Tab, navigasi dapat dilakukan dengan mudah dan cepat.
Untuk struktur situs, MDL menggunakan struktur grid yang terdiri dari 12 kolom seperti framework lain pada umumnya. Dengan struktur tersebut, pengguna bisa memiliki keleluasaan mengatur beragam konten di dalam situs. Menariknya, MDL tidak menentukan ukuran grid secara spesifik, melainkan memungkinkan pengguna untuk mengatur sendiri ukuran yang mereka kehendaki.
Mengingat MDL didesain agar responsif, terdapat konfigurasi khusus untuk tampilan situs pada Tablet dan Mobile. Konfigurasi tersebut bisa dengan mudah digunakan dengan memanggil komponen-komponen yang telah disediakan. MDL juga memungkinkan developer untuk menyembunyikan beberapa kolom pada tampilan Tablet atau Mobile. Misalnya pada tampilan Desktop ada tiga kolom yang ditampilkan, sedangkan pada tampilan tablet hanya dua grid yang ditampilkan.

Style dan costumize

MDL menggunakan tipografi Roboto, jenis huruf yang dikembangkan langsung oleh Google. Tipografi ini rasanya cukup umum kamu temukan di berbagai produk buatan Google.
Selain itu, MDL juga dilengkapi dengan sejumlah ikon yang sudah siap digunakan. Akan tetapi sayangnya ikon-ikon tidak berupa font icon — ikon yang terbuat dari font — sehingga kamu tidak bisa mengubah ukuran ikon dengan mudah hanya dengan mengganti ukuran font. Solusinya, kamu bisa mengubah ukuran tersebut melalui CSS.
Bagian menarik dari MDL adalah bahasa desain ini memiliki pilihan warna yang menarik. Google bahkan telah menyediakan skema warna lengkap dengan contoh implementasi yang bisa digunakan sebagai acuan bagi developer, sebelum diimplementasikan di dalam situs yang sedang mereka gunakan

---

Bagaimanapun, mengingat framework ini masih baru dan masih dalam tahap pengembangan, rasanya akan sulit diimplementasikan dalam desain situs yang kompleks. Akan tetapi mengingat desain MDL yang modern dan minimalis, kamu bisa menggunakan framework ini untuk membuat situs marketing atau blog sederhana.

Komponen-komponen lain yang disediakan oleh MDL bisa digunakan dengan mudah dan telah didesain khusus sesuai dengan Material Design seperti komponen tombol, kartu, tabel, dan lainnya.