Assalamulaikum Wr . Wb
Saya akan menjelaskan sedikit materi kuliah yg pernah saya ikuti. Yaitu saat mahasiswa mempresentasikan tentang materi Material Design Lite (MDL). Berikut adalah penjelasannya.
MaterialLite (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)
See the Pen Material Design Lite: Grid – Demo 1 by Tuts+ (@tutsplus) on CodePen.
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.
Navigasi Menu Drawer (atas) dan Tab (bawah)
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.
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. Kamu bisa melihat daftar lengkap komponen MDL di sini.
Baca juga: Twitter Perkenalkan 7 Tool Baru bagi Developer di Konferensi Twitter Flight 2015
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.
Saya sudah sempat mencoba menggunakan framework ini dengan menggunakan Meteor JS. Hasilnya, saya bisa dengan cepat dan mudah membuat sebuah situs sederhana dengan menggunakan komponen-komponen dari MDL.
Akan tetapi konsep “tumpukan kertas” atau 3D yang diusung oleh Material Design juga sedikit membuat pusing, karena kamu harus menentukan posisi yang tepat dari setiap objek.
Bagaimanapun, mengingat framework ini masih baru dan masih dalam tahap pengembangan, rasanya akan sulit diimplementasikan dalam desain situs yang kompleks.
Sekian semoga bermanfaat.
Wassalamualaikum Wr . Wb
