Membandingkan Bootstrap VS Material Design Lite

Taukah Anda Material Design Lite? Google telah merilis sebuah framework front-end baru yang mudah digunakan untuk aplikasi web yang disebut dengan Material Design Lite (MDL). Mengingat framework ini masih baru, dan mungkin kita sudah familiar dengan framework bootstrap yang juga sama-sama bersifat responsif. Mari kita bandingkan bootstrap dengan MDL.

Sebelum kita membahas lebih jauh ke komponen mari kita memecahkan perbedaan utama antar bootstrap dengan MDL

FILOSOFI

Bootstrap awalnya dibangun oleh twitter dengan tujuan agar lebih mudah membangun website responsif. Bootstrap memberi banyak komponen dan pilihan kostumisasi untuk membuat aplikasi web.

MDL adalah cara bagi Google untuk menyebarkan konsep materi untuk web. MDL hanya memberi kerangka dasar untuk membangun sebuah aplikasi web. Sisanya terserah pengembang.

PENGALAMAN DEVELOPMENT

Bootstrap memiliki dokumentasi yang sangat rinci. Pengembang bisa copy paste dari contoh-contoh dan mendapatkan hasil yang bisa digunakan dengan cepat

MDL dibangun dengan menggabungkan beberapa class. Dengan cara ini banyak kontrol, tapi kadang-kadang menyebabkan kinerja HTML semakin berat

KOMPONEN

Dalam Bootstrap hampir semua elemen built-in HTML dan bagus dalam sebuah layout. Boostrap ini bisa memberi komponen tambahan untuk semua jenis desain.

MDL memberikan komponen lebih sedikit dari Bootstrap, karena terfokus pada pembangunan aplikasi MDL. MDL datang dengan animasi dan gaya default yang bagus.

LAYOUT

Bootstrap memiliki sistem grid yang canggih

MDL memiliki grid yang lebih primitif

DESIGN

Bootstrap memberikan desain standar namun banyak tema yang bagus yang bisa kita pilih

MDL terlihat fresh, fitur warna dan animasi.

KOMUNITAS

Berhubung Bootstrap sudah muncul lebih dahulu sehingga memiliki komunitas yang sangat besar yang menghasilkan tema, plugin dan posting blog.

MDL yang baru keluar tetapi sudah cukup populer di Github.

Berikut ini adalah perbandingan bootstrap dengan MDL dilihat dari komponennya :

1. Grid

Screenshot_1

Bootstrap Grid membagi halaman menjadi 12 kolom berukuran sama. Tergantung pada lebar viewport, empat class dengan ukuran berbeda yang diterapkan – extra small (dari 0 768px lebar), small (768px ke 992px), medium  (992px untuk 1200px), dan large (1200px +).

MDL memiliki sistem grid yang sama dengan bootstrap, tetapi hanya memiliki tiga ukuran – phone (0 480px), tablet (480px ke 840px) dan desktop yang (840px +). MDL desktop yang memiliki 12 kolom, tablet memiliki 8 kolom dan telepon hanya memiliki 4 kolom.

2. Header Navigation

Screenshot_10

Header di bootstrap atau yang disebut Navbars. Navbar yang mulai hilang dalam pandangan mobile dan menjadi horizontal ketika ada ruang yang cukup. Bagian dalamnya kita dapat terdapat sarang elemen array yang berbeda dan dapat diposisikan dengan bantuan class. Demikian pula MDL memiliki stylings berbeda untuk memposisikannya

3. Footer

Screenshot_2

Bootstrap sebenarnya tidak memiliki komponen footer tersendiri, sementara MDL memiliki dua pilihan mega dan mini footer

4. Tab

Screenshot_3

Kedua framework ini menggunakan sintaks yang cukup mirip dalam membuat tab. Sebuah link bertukar antara tab dengan div dipilih oleh id untuk menyimpan konten. Keduanya juga membutuhkan javascript agar bisa bekerja. (bootstrap juga membutuhkan jQuery).

5. Button

Screenshot_4

Button bootstrap secara default berbentuk persegi panjang dan memiliki banyak pilihan ukuran. Button di bootstrap juga bisa berubah warna dengan memberi class danger(merah), primary(biru), info(biru muda), dan warning(orange). Sedangkan MDL berbentuk persegi panjang dan melingkar. Google memiliki panduan tentang bagaimana dan di mana situasi untuk menggunakan berbagai jenis tombol.

6. Table

Screenshot_5

Tabel umumnya sulit untuk dibuat responsif. Bootstrap telah mengatasi masalah ini dengan membuat scrollbar muncul ketika tabel tidak muat. Dalam bootstrap Anda juga dapat membuat tabel bergaris dan berbatasan. MDL menawarkan gaya default (yang terlihat sangat rapi) dan dengan desain baris yang dapat dipilih.

7. Form

Screenshot_6

Form pada bootstrap mendukung lebih banyak jenis elemen input dan memiliki class untuk membuat alignment yang berbeda untuk label dan input. Sedangkan MDL telah didukung beberapa elemen input. MDL juga telah terintegrasi verifikasi dan validasi form, sesuatu hal yang memungkinkan untuk menunjukan pesan kesalahan dan berubah berwarna merah saat data tidak valid

8. Dropdown Menu

Screenshot_7

Dari kedua framework ini sama dalam sebuah elemen tombol atau anchor beralih menjadi isi dan daftar unordered list untuk daftarnya. Kelebihan bootstrap adalah kita dapat menambahkan garis pemisah atau heading dan melakukan tombol split. Sedangkan MDL dengan kelebihannya sebuah animasi yang halus dibandingkan dengan bootstrap dengan teknik “display: none/block”.

9. Tooltip

Screenshot_8

Tooltip pada bootstrap menambahkan data-atribut untuk elemen tombol, yang kemudian menampilkan tooltip di hover dan klik. Framework ini juga menyajikan dua komponen yang terpisah yaitu tooltip yang disederhanakan dan popover dimana posisinya lebih maju dari title. Sedangkan MDL menyajikannya dengan model yang berbeda. Sebuah tombol untuk Toogling dan elemen span untuk konten tooltip. Dengan 2 model yaitu besar dan kecil tapi kekurangannya tooltip itu selalu muncul dibawah.

10. Icon

Screenshot_9

Bootstrap dilengkapi dengan font Glyphicons icon yang memberikan lebih dari 250 icon yang cukup untuk dipilih. Font tersebut sudah satu paket dengan CSS bootstrap dan tidak memerlukan setup khusus. Sedangkan MDL menggunakan satu set icon yang baru dirilis Google beberapa waktu lalu yang disebut Material Icons. Didalamnya terdapat hampir 800 icon, tapi tidak sepaket dengan MDL sehingga kita perlu memanggilnya di bagian Head pada page <link rel=”stylesheet” href=”https://fonts.googleapis.com/icon?family=Material+Icons”>

Comments

comments