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"]<img class="wp-image-11404 size-large" src="https://www.codepolitan.com/wp-content/uploads/2016/07/screenshot-materializecss.com-2016-07-27-11-53-50-700x318.png" alt="screenshot-materializecss.com 2016-07-27 11-53-50" width="700" height="318" /> 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"]<img class="wp-image-11436 size-medium" src="https://www.codepolitan.com/wp-content/uploads/2016/07/screenshot-plus.google.com-2016-07-26-11-21-40-1-350x157.png" alt="screenshot-plus.google.com 2016-07-26 11-21-40" width="350" height="157" /> design produk google menggunakan material design[/caption]

<img class="alignnone size-medium wp-image-11352" src="https://www.codepolitan.com/wp-content/uploads/2016/07/screenshot-inbox.google.com-2016-07-26-13-16-12-350x157.png" alt="screenshot-inbox.google.com 2016-07-26 13-16-12" width="350" height="157" />

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"]<img class="wp-image-11435 size-large" src="https://www.codepolitan.com/wp-content/uploads/2016/07/screenshot-materializecss.com-2016-07-27-17-16-39-700x294.png" alt="screenshot-materializecss.com 2016-07-27 17-16-39" width="700" height="294" /> 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 <a href="http://materializecss.com" target="_blank">materializecss.com</a>.

Berikut sebuah video perkenalan dari Google tentang Material Design.
<h3>Memulai</h3>
Ada dua cara untuk memulai menggunakan materialize yaitu dengan menggunakan css biasa dan sass, yang dapat diunduh <a href="http://materializecss.com/getting-started.html" target="_blank">disini</a>.
<h2>1. SASS Mixins</h2>
Materialize sendiri sudah mengandung SASS Mixin ,yang mempermudah Kamu dalam menggunakan CSS.

ini contoh penggunaan SASS (saya mengambil contoh sintaks css animation) :
<pre>-webkit-animation: 0.5s;
-moz-animation: 0.5s;
-o-animation: 0.5s;
-ms-animation: 0.5s;
animaton: 0.5s;</pre>
dari semua sintaks di atas Kamu hanya perlu memanggil dalam satu baris sintaks sass mixin seperti ini :
<pre>@include animation(.5s);</pre>
Di dalam materialize sudah tersedia 19 main mixin ,lebih lengkap bisa diliat <a href="http://materializecss.com/sass.html#mixins" target="_blank">disini</a> pada bagian mixin tab.
<h2>2. Flow Text.</h2>
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 <code> flow-text </code> kedalam tulisannya, contoh :

<code>&lt;a class="flow-text"&gt;ini flow text.&lt;/a&gt;</code>

Ini demo flow text.
<img src="https://media.giphy.com/media/3o6ZtnHEFxOOg3sELK/giphy.gif" />
<h2>3. Ripple Effects</h2>
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  <code>waves-effect.</code>

Contoh penggunaan ripple effect:

<code>&lt;button type="submit" class="waves-effect"&gt;Submit&lt;/button&gt;</code>

Waves secara default berwarna abu-abu. Namun jika elemen tersebut berwarna gelap, Kamu mungkin ingin menggantinya. Cukup tambahkan <code> waves-(color)</code> kedalam elemen tersebut, ganti (color) dengan nama warnanya.
contoh :

<code>&lt;button type="submit" class="waves-effect waves-light"&gt;Submit&lt;/button&gt;</code>

Anda dapat mengganti dengan 7 pilihan warna yang disediakan : light, red, yellow, green, purpel, dan teal.

<img class="alignnone size-medium wp-image-11471" src="https://www.codepolitan.com/wp-content/uploads/2016/07/neww1.gif" alt="neww1" width="130" height="336" />

Anda juga dapat mengkustomisasi warna yang Kamu inginkan.
<h2>4. Shadows</h2>
Fitur selanjutnya ada shadows ,fitur ini memungkinkan Kamu untuk memberikan effect yang berkesan mengambang pada elemen. Di dalam Materialize cukup memanggil class <code>z-depth-(number)</code>. Materialize juga memberikan pilihan untuk ketebalan shadow cukup mengganti (number) dengan pilihan angka 1 sampai 5.

contoh penulisan class shadow :<code>
</code>

&lt;div class="card"&gt;
&lt;p&gt;depth shadow&lt;/p&gt;
&lt;p class="z-depth-3"&gt;&lt;/p&gt;
&lt;/div&gt;

<code></code>Berikut tampilan shadow berdasarkan angkanya :

[caption id="attachment_11402" align="alignnone" width="350"]<img class="wp-image-11402 size-medium" src="https://www.codepolitan.com/wp-content/uploads/2016/07/screenshot-www.hongkiat.com-2016-07-27-11-10-44-350x143.png" width="350" height="143" /> www.hongkiat.com[/caption]
<h2>5. Icon</h2>
Materialize juga menyediakan beberapa icon ,untuk menggunakan icon cukup tambahkan <code>&lt;p class="material-icon"&gt;(nama ikon)&lt;/p&gt;</code> untuk menggunakan ikon yang Kamu inginkan cukup ganti (nama ikon) dengan nama ikon yang tersedia pada materialize.

contoh penggunaan ikon pada tombol :

<code>&lt;button type="submit"&gt;&lt;a class="material-icon"&gt;clouds&lt;/a&gt;simpan&lt;/button&gt;</code>

[caption id="attachment_11401" align="alignnone" width="350"]<img class="wp-image-11401 size-medium" src="https://www.codepolitan.com/wp-content/uploads/2016/07/screenshot-materializecss.com-2016-07-27-11-19-40-350x249.png" alt="screenshot-materializecss.com 2016-07-27 11-19-40" width="350" height="249" /> beberapa icon yang disediakan di materializecss.com/icons.html[/caption]

untuk ukuran ikon tersedia pilihan tiny ,small ,medium ,dan large. Contoh penggunaan ukuran icon :

<code>&lt;i class="large material-icon"&gt;clouds&lt;/i&gt;</code>
<h2>6. Button</h2>
Didalam materialize terdapat 3 jenis button : raised button ,floating button/fab ,dan flat button.
<h3>a. Raised Button</h3>
<h3><img class="alignnone size-medium wp-image-11466" src="https://www.codepolitan.com/wp-content/uploads/2016/07/button5-350x40.gif" alt="button5" width="350" height="40" /></h3>
ini adalah button yang paling umum digunakan , untuk memanggilnya Kamu cukup menulis btn maka otomatis me-load default cssnya.

contoh memasukan class btn :
<pre>&lt;a class="waves-effect waves-light btn"&gt;button&lt;/a&gt;
&lt;a class="waves-effect waves-light btn"&gt;&lt;i class="material-icons left"&gt;cloud&lt;/i&gt;button&lt;/a&gt;
&lt;a class="waves-effect waves-light btn"&gt;&lt;i class="material-icons right"&gt;cloud&lt;/i&gt;button&lt;/a&gt;</pre>
<h3>b. Floating Button</h3>
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 <code>btn-floating</code>.
contoh memanggil float button :
<pre>&lt;a class="btn-floating btn-large waves-effect waves-light red"&gt;&lt;i class="material-icons"&gt;add&lt;/i&gt;&lt;/a&gt;</pre>
<img class="alignnone size-full wp-image-11420" src="https://www.codepolitan.com/wp-content/uploads/2016/07/screenshot-materializecss.com-2016-07-27-14-06-13.png" alt="screenshot-materializecss.com 2016-07-27 14-06-13" width="75" height="54" /><img class="alignnone size-full wp-image-11469" src="https://www.codepolitan.com/wp-content/uploads/2016/07/new-new.gif" alt="new new" width="235" height="45" /> <img class="alignnone size-full wp-image-11468" src="https://www.codepolitan.com/wp-content/uploads/2016/07/new-new-new.gif" alt="new new new" width="235" height="45" />
<h3>c. Flat Button </h3>
Button yang satu ini juga merupakan button baru yang dikembangkan oleh materialize dengan sentuhan wavesnya ,jika Kamu ingin memanggilnya cukup tulis class <code>btn-flat</code>. Contoh memanggil flat button :
<pre>&lt;a class="waves-effect waves-teal btn-flat"&gt;Button&lt;/a&gt;</pre>
<img class="alignnone size-medium wp-image-11463" src="https://www.codepolitan.com/wp-content/uploads/2016/07/buttonwm.gif" alt="buttonwm" width="200" height="45" />

Kamu juga bisa men-disable buttonnya tinggal menambah <code>disable</code> disebelahnya. Contoh penggunaan disable pada tombol :
<pre>&lt;a class="btn disabled"&gt;Button&lt;/a&gt; 
&lt;a class="btn-flat disabled"&gt;Button&lt;/a&gt; 
&lt;a class="btn-floating disabled"&gt;&lt;i class="material-icons"&gt;add&lt;/i&gt;&lt;/a&gt;</pre>
Jika Kamu sedikit bosan dengan warna default-nya Kamu juga bisa meng-kustomisasinya.
<h2>7. Grid</h2>
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 <code>m6</code> yang artinya <code>medium-6.</code>

Kamu juga harus menambahkan <code>col</code>class kedalam layout pada elemen yang termasuk kedalam row class ,sehingga layout tersebut dapat masuk kedalam column dengan benar. Contoh penggunaan grid :
<pre class="line number1 index0 alt2">&lt;div class="row"&gt;
  &lt;div class="col s12"&gt;I have 12-columns or full width here&lt;/div&gt;
  &lt;div class="col s4"&gt;4-columns (one-third) here&lt;/div&gt;
  &lt;div class="col s4"&gt;4-columns (one-third) here&lt;/div&gt;
  &lt;div class="col s4"&gt;4-columns (one-third) here&lt;/div&gt;
&lt;/div&gt;</pre>
<div class="line number1 index0 alt2">Maka hasilnya akan seperti ini :</div>
<div class="line number6 index5 alt1">

[caption id="attachment_11422" align="alignnone" width="654"]<img class="wp-image-11422 size-full" src="https://www.codepolitan.com/wp-content/uploads/2016/07/screenshot-www.hongkiat.com-2016-07-27-14-43-44.png" alt="screenshot-www.hongkiat.com 2016-07-27 14-43-44" width="654" height="140" /> www.hongkiat.com[/caption]

</div>
<div class="line number6 index5 alt1">

Biasanya <code>col s12</code> adalah ukuran yang sudah dioptimalkan pada semua default ukuran screen , pada dasarnya sama dengan <code>col s12 m12 l12</code>. Namun jika kamu ingin lebih men-spesifikasikan berdasarkan tipe perangkatnya ,maka kamu harus menulis satu per-satu seperti ini :
<pre class="line number1 index0 alt2"><code class="html plain">&lt;divclass="row"&gt;
  &lt;divclass="col s12"&gt;My width always has 12 columns everywhere&lt;/div&gt;
  &lt;divclass="col s12 m6 l9"&gt;I have 12 columns on mobile, 6 on tablet and 9 on desktop&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
<div class="line number4 index3 alt1">Maka hasilnya akan seperti ini :</div>
<div class="line number6 index5 alt1"><img class="alignnone wp-image-11423 size-full" src="https://www.codepolitan.com/wp-content/uploads/2016/07/screenshot-www.hongkiat.com-2016-07-27-14-50-39.png" alt="screenshot-www.hongkiat.com 2016-07-27 14-50-39" width="653" height="181" /></div>

Mengenal Framework CSS Materialize

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

Mengenal Framework CSS Materialize

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

Mengenal Framework CSS Materialize

5 Template Material Design Gratis untuk Memulai Project

SASS & SCSS Part I : Mengenal dan Cara Installnya