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~