Materialize VS Bootstrap

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">collapsible</a>
     <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_drama</i>First</div>
         <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
       </li>
       <li>
         <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
         <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
       </li>
       <li>
         <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
         <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 :
   

   <form role="form">
       <div class="form-group">
         <label for="email">Email:</label>
         <input type="email" class="form-control" id="email" placeholder="Enter email">
       </div>
       <div class="form-group">
         <label for="pwd">Password:</label>
         <input type="password" class="form-control" id="pwd" placeholder="Enter password">
       </div>
       <div class="checkbox">
         <label><input type="checkbox"> Remember me</label>
       </div>
       <button type="submit" class="btn btn-default">Submit</button>
     </form>

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

   <div class="row">
       <form class="col s12">
         <div class="row">
           <div class="input-field col s6">
             <input id="first_name" type="text" class="validate">
             <label for="first_name">First Name</label>
           </div>
           <div class="input-field col s6">
             <input id="last_name" type="text" class="validate">
             <label for="last_name">Last Name</label>
           </div>
         </div>
         <div class="row">
           <div class="input-field col s12">
             <input id="password" type="password" class="validate">
             <label for="password">Password</label>
           </div>
         </div>
         <div class="row">
           <div class="input-field col s12">
             <input id="email" type="email" class="validate">
             <label for="email">Email</label>
           </div>
         </div>
         <div class="row">
           <div class="input-field col s12">
             <input type="checkbox" id="test6" checked="checked" />
             <label for="test6">Yellow</label>
           </div>
         </div>
         <div class="row">
           <div class="input-field col s12">
             <input type="checkbox" class="filled-in" id="filled-in-box" checked="checked" />
             <label for="filled-in-box">Red</label>
           </div>
         </div>
         <div class="row">
           <div class="input-field col s12">
             <p class="range-field">
               <input type="range" id="test5" min="0" max="100" />
             </p>
           </div>
         </div>
       </form>
     </div>

   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~ :D

Materialize Part I

Pada kesempatan kali ini saya akan membahas mengenai Materialize. Materialize merupakan salah satu dari product google. Materialize merupakan responsive front-end framework yang menggunakan Material Design sebagai dasarnya.

Material Design sendiri merupakan dasar design yang di berikan google sebagai acuan dalam membuat sebuah visualisasi yang memiliki dasar- dasar design. 

Source : https://www.google.com/design/spec/material-design/introduction.html

Apabila kita pernah mencoba membuat android project, maka google juga memberikan atribut- atribut untuk mendukung material design yang diusung oleh google.

Materialize sendiri memiliki fungsi yang mirip seperti boostrap. Ke dua framework tersebut memiliki atribut- atribut yang memiliki UX yang kaya dan mudah di aplikasikan. Mengapa saya membahas materialize? Karena menurut saya pribadi materialize memiliki memiliki atribut- atribut yang lebih cantik di banding beberapa framework lain.

Setelah pembicaraan di atas, mari kita mulai mencoba menggunakan Materialize.
apabila memiliki bower dapat langsung run command : bower install materialize





Atau dapat mendownloadnya dari : http://materializecss.com/getting-started.html

Berikutnya saya akan memperlihatkan atribut- atribut yang mudah dibuat menggunakan materialize :

1. Wave
   Merasa repot menambahkan efek kepada button yang akan di klik? Materialize menyiapkan wave effect untuk membuat button terlihat interaktif ketika di klik. hanya perlu menambahkan class  : waves-effect dan effect type seperti waves-light atau  waves-teal.
   

   <a class="waves-effect waves-light btn-large" href="#">Wave</a>
   
   

2. Floating Button
   Seperti halnya floating button yang bisa di temukan pada android material view. Materialize menyediakan floating button untuk digunakan dalam web view.
   

   <a class="btn-floating btn-large waves-effect waves-light red">
     <i class="material-icons">add</i>
   </a>
   
   

3. Horizontal Fixed Floating Button
   Chips merupakan sebuah tempat kecil yang bisa memberikan informasi kita. Lebih cocok untuk digunakan sebagai list contact atau label.
   

     <div class="fixed-action-btn horizontal" style="bottom: 45px; right: 24px;">
       <a class="btn-floating btn-large red">
         <i class="large material-icons">mode_edit</i>
       </a>
       <ul>
         <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
         <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
         <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
         <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
       </ul>
     </div>

   
   
4.  Chips
   Chips merupakan sebuah tempat kecil yang bisa memberikan informasi kita. Lebih cocok untuk digunakan sebagai list contact atau label.
   

   <div class="class="chip waves-effect waves-light"">
       <img src="images/cutecat.jpg">
       Cute Cat
   </div>
   <div class="chip pink yellow accent-2">
       Tag
       <i class="material-icons mdi-navigation-close"></i>
   </div>

Dan masih banyak sekali atribut- atribut menarik yang disediakan oleh materialize.
Atribut lain dapat dilihat pada http://materializecss.com/
Sekian dulu untuk blog kali ini. Happy eksploring~