0

0

0

share


0 Reaksi

0 Komentar

Mengenal Framework CSS Materialize

Profile
M. Dalif Rizky H.

27 Juli 2016

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"]
screenshot-materializecss.com 2016-07-27 11-53-50
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"]
screenshot-plus.google.com 2016-07-26 11-21-40
design produk google menggunakan material design[/caption]
screenshot-inbox.google.com 2016-07-26 13-16-12

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"]
screenshot-materializecss.com 2016-07-27 17-16-39
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

Ada dua cara untuk memulai menggunakan materialize yaitu dengan menggunakan css biasa dan sass, yang dapat diunduh disini.

1. SASS Mixins

Materialize sendiri sudah mengandung SASS Mixin ,yang mempermudah Kamu dalam menggunakan CSS.

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.

Jika framework lain menggunakan fixed text, Materialize mengimplementasikan tulisan yang sebenarnya lewat flow-text. Misalkan pada layar yang berukuran kecil ,ukuran tulisan dan lebar garis disesuaikan ke layar agar terlihat rapih ,tetapi dapat kita perbesar agar kita nyaman membaca tulisan tersebut.

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

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

Ini demo flow text.
Image

3. Ripple Effects

Materialize juga tampil dengan feedback yang menarik. Salah satu yang perlu diperhatikan adalah adalah ripple effect. Di dalam materialize ripple effect biasa disebut Waves. Sederhananya jika kamu mengklik atau menyentuh button ,card,atau elemen lainnya ,effect tersebut akan muncul. Jika Kamu ingin menambahkan effect tersebut kedalam elemen Kamu ,cukup masukan class  waves-effect.

Contoh penggunaan ripple effect:

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

Waves secara default berwarna abu-abuNamun 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.

neww1

Anda juga dapat mengkustomisasi warna yang Kamu inginkan.

4. Shadows

Fitur selanjutnya ada shadows ,fitur ini memungkinkan Kamu untuk memberikan effect yang berkesan mengambang pada elemen. Di dalam Materialize cukup memanggil class z-depth-(number). Materialize juga memberikan pilihan untuk ketebalan shadow cukup mengganti (number) dengan pilihan angka 1 sampai 5.

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"]
Image
]

5. Icon

Materialize juga menyediakan beberapa icon ,untuk menggunakan icon cukup tambahkan <p class="material-icon">(nama ikon)</p> untuk menggunakan ikon yang Kamu inginkan cukup ganti (nama ikon) dengan nama ikon yang tersedia pada materialize.

contoh penggunaan ikon pada tombol :

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

[caption id="attachment_11401" align="alignnone" width="350"]
screenshot-materializecss.com 2016-07-27 11-19-40
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

Didalam materialize terdapat 3 jenis button : raised button ,floating button/fab ,dan flat button.

a. Raised Button

button5

ini adalah button yang paling umum digunakan , untuk memanggilnya Kamu cukup menulis btn maka otomatis me-load default cssnya.

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

Mungkin kamu sering liat di aplikasi Google seperti gmail ,google+ ,ada yang berubah ketika kita mau menulis e-mail baru ,atau mau update di google+ yaitu buttonnya , yup button dengan bentuk lingkaran ini memang baru dikeluarkan oleh materialize, namanya floating button untuk memanggilnya cukup tulis class btn-floating. contoh memanggil float button :
<a class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a>
screenshot-materializecss.com 2016-07-27 14-06-13new new new new new

c. Flat Button 

Button yang satu ini juga merupakan button baru yang dikembangkan oleh materialize dengan sentuhan wavesnya ,jika Kamu ingin memanggilnya cukup tulis class btn-flat. Contoh memanggil flat button :
<a class="waves-effect waves-teal btn-flat">Button</a>
buttonwm

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

Materialize menggunakan standar 12-column responsive grid sistem. Yang dibedakan kedalam small (s) untuk mobile, medium (m)untuk tablet, dan large (l) untuk deskop.

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>
Maka hasilnya akan seperti ini :
[caption id="attachment_11422" align="alignnone" width="654"]
screenshot-www.hongkiat.com 2016-07-27 14-43-44
]

Biasanya col s12 adalah ukuran yang sudah dioptimalkan pada semua default ukuran screen , pada dasarnya sama dengan col s12 m12 l12. Namun jika kamu ingin lebih men-spesifikasikan berdasarkan tipe perangkatnya ,maka kamu harus menulis satu per-satu seperti ini :

<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>
Maka hasilnya akan seperti ini :
screenshot-www.hongkiat.com 2016-07-27 14-50-39

0

0

0

share