Belajar Materialize Part 1 : Pengertian Dan Cara Menggunakan Materialize - Kang Iyan

Belajar Materialize Part 1 : Pengertian Dan Cara Menggunakan Materialize

Pada kesempatan kali ini saya akan menshare untuk Belajar Materialize CSS dengan kode Materialize ini dapat membuat blog kita sangat ringan karena tidak terlalu banyak CSS pada blog bahkan cukup mudah untuk dihapalkan sendiri tentu saja. Materialize CSS sama seperti CSS biasanya tapi sedikit berbeda dari segi penerapan kode nya saja, selain itu juga dengan Materialize ini membuat berbagai Effek lain jika kamu sudah belajar dan mendalami Materialize.

Pengertian Dan Cara Menggunakan Materialize

Sebelum itu kamu tahu apa itu Materialize ? belum tahu coba baca dulu dibawah ini dan pahami dengan betul betul apa itu Materialize dengan begitu bila kamu paham pasti akan mempermudah kamu dalam belajar menggunakan Materialize ini.

Apa Itu Materialize?

Materialize merupakan framework modern yang responsif front-end (depan-belakang) berdasarkan Material Desain. Materialize ini dibuat dan dirancang oleh Google, Material Desain itu sendiri adalah bahasa desain yang menggabungkan prinsip-prinsip klasik desain yang sukses bersama dengan inovasi dan teknologi.

Tujuan Google membuat framework Materialize ini adalah untuk mengembangkan sistem desain yang memungkinkan untuk pengalaman pengguna terpadu di semua produk mereka pada platform apapun.

Diatas pasti udah tahu apa itu Materialize bukan? Sekarang untuk memulai nya dapat langsung ke Web nya yaitu materializecss.com atau jika mau menunggu di Blog ini bisa ikuti terus blog ini agar dapat Postingan baru nanti tentang Materialize.

Memulai Materialize CSS

Untuk memulai Pembelajaran nya pasti harus ada CSS dan JS pada komputer kita untuk itu kamu bisa mengunduhnya dulu disini

Setelah beres mengunduh silahkan ekstrak dimana saja dan buat sebuah folder bernama Materialize dan masukan CSS dan JS yang sudah kamu unduh tadi di dalam folder Materialize.

Langkah selanjutnya yaitu membuat Materialize CSS simple dulu seperti box dan pewarnaan saja dulu agar mudah di pahami oleh kamu jadi ngak terlalu susah nantinya untuk dipelajari saat menggunakan Materialize CSS. Berikut kode yang harus kamu pelajari di Materialize CSS

#Mengubah Warna

Disini kita akan belajar cara untuk menggubah warna dulu sampai benar benar hapal kode yang akan digunakan tersebut, kode untuk Materialize sedikit berbeda dengan CSS yang sudah kamu biasa gunakan tapi tenang saja karena masih bisa menggunakan CSS pada bagian tertentu nya.

Sebelum ke langkah untuk membuatnya silahkan untuk menyatukan dulu semua isi Folder Materialize yang sudah kamu dapatkan hingga menjadi seperti ini

Pengertian Dan Cara Menggunakan Materialize

Bila sudah maka langkah selanjutnya mari kita membuat Warna yang berbeda menggunakan Materialize ini

<div class="card-panel teal lighten-3">Lorem Ipsum Corosel Borema Normaine Berkiuta</div>
<div class="card-panel light-blue">Lorem Ipsum Corosel Borema Normaine Berkiuta</div>
<div class="card-panel red lighten-2">Lorem Ipsum Corosel Borema Normaine Berkiuta</div>

Maka hasilnya akan terlihat seperti ini

Pengertian Dan Cara Menggunakan Materialize
Diatas adalah cara untuk membuat Materialize Warna menggunakan sebuah table dan sekarang kita akan membuat Warna Teks dengan warna yang berbeda beda.

<div class="card-panel">
   <span class="red-text text-darken-2">Lorem Ipsum Corosel Borema Normaine Berkiuta</span>
</div>

Hasilnya akan terlihat seperti berikut ini dan yang akan berubah hanya Warna saja tanpa bukan warna table

Pengertian Dan Cara Menggunakan Materialize
 Sebagai tambahan kamu dapat melihat contoh yang lebih lagi agar mudah di coba bisa di lihat dibawah ini

See the Pen Materialize by Kang Iyan (@KangIyan) on CodePen.

Nah itulah cara untuk menggunakan Materialize CSS dan Tutorial ini akan terus berlanjut lagi hingga ke Tutorial Terakhir :D

Artikel Terkait

Belajar Materialize Part 1 : Pengertian Dan Cara Menggunakan Materialize
4/ 5
Oleh

Komentar Ada Dibawah