Materialize VS Bootstrap | Goodpixelpro Tutorial

Goodpixelpro Tutorial – Pada kesempatan sebelumnya kita telah berkenalan dengan materialize. Pada kesempatan kali ini saya akan melihat sedikit beberapa atribut yang dimiliki baik oleh materialize maupun Bootstrap.

Sebelumnya kita bahas sedikit mengenai Bootstrap. Seperti halnya Materialize, Bootstrap juga merupakan sebuah framework atau lebih tepatnya html,css,js framework. Bootstrap mempermudah developer dalam membuat tampilan yang layak dilihat. Bootstrap sendiri di buat oleh Twitter dengan tujuan untuk mempermudah pembuatan responsive website. Sedangkan Materialize seperti sudah dijelaskan sebelumnya bahwa google mengusung kembali material design dalam bentuk web.

Apabila dilihat dari spesifikasinya, maka Bootstrap dan Materialize akan memiliki data seperti ini :

Atribut Bootstrap Materialize
IE 8+ 10+
Firefox support support
Chrome support support
Opera support support
LESS support ( drop on version 4 ) not support
SASS support support

Berikutnya mari kita mencoba beberapa component dari kedua framework tersebut.

  1. Collapsible
    Yap, collapsible adalah hal yang cukup merepotkan untuk dibuat ketika kita masih tidak memiliki banyak pilihan framework. Saat ini banyak framework yang telah mempermudah kita dalam pembuatanannya termasuk Boostrap dan Materialize

    Boostrap Code :

    <div class="container"> <a href="#demo" class="btn btn-info" data-toggle="collapse">collapsiblea>  <div id="demo" class="collapse"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. div> div>

    Result :

    Materialize
    Html :

     <ul class="collapsible popout" data-collapsible="accordion"> <li> <div class="collapsible-header"><i class="material-icons">filter_dramai>Firstdiv> <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.p>div> li> <li> <div class="collapsible-header"><i class="material-icons">placei>Seconddiv> <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.p>div> li> <li> <div class="collapsible-header"><i class="material-icons">whatshoti>Thirddiv> <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.p>div> li> ul>

    Javascript :

     $(document).ready(function(){ $('.collapsible').collapsible({ accordion : false // A setting that changes the collapsible behavior to expandable instead of the default accordion style  }); });

    Result :

  2. Form
    Membuat web tentunya tidak terlepas dari form. Berikut merupakan sample pembuatan form dari kedua framework tersebut.
    BootstrapCode :

    Result :
    Default form dari boostrap tidak terlalu banyak berbeda dari form yang telah disediakan html.

    Materialize
    Code :

    Result :
    Default Form yang di sediakan materialize lebih berkesan casual. Dan ada tambahan input menarik berupa range yang mirip seperti slider. Dan masih ada beberapa input type lain seperti switches yang dapat dilihat pada : http://materializecss.com/forms.html

    Masih banyak lagi atribut lain yang dimiliki keduanya. Dari sana kita bisa melihat perbedaan design yang diusung oleh kedua framework tersebut. Dari segi tampilan, apabila kita membandingkan antara materialize dan bootstrap maka tidak ada yang lebih baik antara satu dengan yang lainnya. Yang perlu dipikirkan adalah website seperti apa yang ingin di bangun. Dari situlah baru kita dapat menentukan framework apa yang sebaiknya kita gunakan.

    Sekian sekilas cerita dari saya. Happy eksploring~ ?

Terimakasih telah berkunjung ke website Goodpixelpro. Semoga bermanfaat.!

There are no comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Start typing and press Enter to search

Shopping Cart