Mengenal Framework CSS Materialize

Di tengah-tengah kepopuleran framework CSS seperti Bootstrap, Metro UI, Foundation, Flat UI, dan lain sebagainya yang memudahkan para developer untuk mendesain webnya. Lalu muncul salah satu framework bertema material design bernama Materialize.

[caption id="attachment_11404" align="alignnone" width="700"] tampilan web materializecss.com[/caption]

Di tahun 2014  Setelah Google mengumumkan Material Design, sebuah front-end design untuk produk mereka, yang pada awalnya hanya untuk platform Android saja, mulai digunakan oleh para developer web. Tak lupa Google juga mulai merubah desain produk-produk mereka dengan Material Design, yang membuatnya menjadi design yang "kekinian".

[caption id="attachment_11436" align="alignnone" width="350"] design produk google menggunakan material design[/caption]

Diprakarsai oleh Alvin Wang dan teamnya, Materialize merupakan salah satu framework material design, yang banyak digunakan oleh para web developer. Di dalam Materialize terdapat berbagai fitur pengenalan framework, mulai dari about yang berisi pengenalan produk, getting started tahapan sebelum memulai, css, components dan java script bagian yang berisikan code-code dan fitur-fitur yang berada di materialize, mobile bagian yang memperlihatkan beberapa fitur yang tersedia pada materialize untuk mobile, sampai showcase bagian yang memperlihatkan demo dari web yang menggunakan  materialize, semuanya tersedia disitu.

[caption id="attachment_11435" align="alignnone" width="700"] beberapa situs web yang menggunaakn framework materialize[/caption]

Dengan framework materialize sendiri, kamu sudah bisa membangun sekedar web responsive bahkan web dengan model parallax. Karena memang pada dasarnya dibuat untuk mempermudah para web developer dalam mendesign front-end web mereka.

Materialize bisa menjadi pilihan alternatif bagi para developer jika ingin mendesain webnya dengan hal yang berbeda, karena memiliki fitur-fitur yang berbeda dari framework lain. Website Materialize dapat diakses di alamat materializecss.com.

Berikut sebuah video perkenalan dari Google tentang Material Design.

Memulai

1. SASS Mixins

ini contoh penggunaan SASS (saya mengambil contoh sintaks css animation) :

-webkit-animation: 0.5s;
-moz-animation: 0.5s;
-o-animation: 0.5s;
-ms-animation: 0.5s;
animaton: 0.5s;

dari semua sintaks di atas Kamu hanya perlu memanggil dalam satu baris sintaks sass mixin seperti ini :

@include animation(.5s);

Di dalam materialize sudah tersedia 19 main mixin ,lebih lengkap bisa diliat disini pada bagian mixin tab.

2. Flow Text.

Untuk menggunakan flow text cukup tambahkan class flow-text kedalam tulisannya, contoh :

<a class="flow-text">ini flow text.</a>

Ini demo flow text.

3. Ripple Effects

Contoh penggunaan ripple effect:

<button type="submit" class="waves-effect">Submit</button>

Waves secara default berwarna abu-abu. Namun jika elemen tersebut berwarna gelap, Kamu mungkin ingin menggantinya. Cukup tambahkan waves-(color) kedalam elemen tersebut, ganti (color) dengan nama warnanya. contoh :

<button type="submit" class="waves-effect waves-light">Submit</button>

Anda dapat mengganti dengan 7 pilihan warna yang disediakan : light, red, yellow, green, purpel, dan teal.

Anda juga dapat mengkustomisasi warna yang Kamu inginkan.

4. Shadows

contoh penulisan class shadow :

<div class="card"> <p>depth shadow</p> <p class="z-depth-3"></p> </div>

Berikut tampilan shadow berdasarkan angkanya :

[caption id="attachment_11402" align="alignnone" width="350"] www.hongkiat.com[/caption]

5. Icon

contoh penggunaan ikon pada tombol :

<button type="submit"><a class="material-icon">clouds</a>simpan</button>

[caption id="attachment_11401" align="alignnone" width="350"] beberapa icon yang disediakan di materializecss.com/icons.html[/caption]

untuk ukuran ikon tersedia pilihan tiny ,small ,medium ,dan large. Contoh penggunaan ukuran icon :

<i class="large material-icon">clouds</i>

6. Button

a. Raised Button

contoh memasukan class btn :

<a class="waves-effect waves-light btn">button</a>
<a class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a>
<a class="waves-effect waves-light btn"><i class="material-icons right">cloud</i>button</a>

b. Floating Button

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

c. Flat Button 

<a class="waves-effect waves-teal btn-flat">Button</a>

Kamu juga bisa men-disable buttonnya tinggal menambah disable disebelahnya. Contoh penggunaan disable pada tombol :

<a class="btn disabled">Button</a> 
<a class="btn-flat disabled">Button</a> 
<a class="btn-floating disabled"><i class="material-icons">add</i></a>

Jika Kamu sedikit bosan dengan warna default-nya Kamu juga bisa meng-kustomisasinya.

7. Grid

Untuk membuat gridnya, cukup memanggil dengan  s, m, l lalu diikuti dengan angkanya. Untuk contoh misalkan, kamu akan membuat sebuah column setengah pada layar tablet kamu, kamu cukup memanggilnya dengan m6 yang artinya medium-6.

Kamu juga harus menambahkan colclass kedalam layout pada elemen yang termasuk kedalam row class ,sehingga layout tersebut dapat masuk kedalam column dengan benar. Contoh penggunaan grid :

<div class="row">
  <div class="col s12">I have 12-columns or full width here</div>
  <div class="col s4">4-columns (one-third) here</div>
  <div class="col s4">4-columns (one-third) here</div>
  <div class="col s4">4-columns (one-third) here</div>
</div>

<divclass="row">
  <divclass="col s12">My width always has 12 columns everywhere</div>
  <divclass="col s12 m6 l9">I have 12 columns on mobile, 6 on tablet and 9 on desktop</div>
</div>