1. Home
  2. Materialize Dasar
  3. [Tutorial] Materializecss - Persiapan dan Awalan

[Tutorial] Materializecss - Persiapan dan Awalan

18.53
adsense 336x280 Assalamualaikum Wr Wb...

[Tutorial] Materializecss - Persiapan dan Awalan - Merupakan sebuah framework CSS yang menurut saya powerfull. Dengan menggunakan framework bernama Materializecss ini, memungkinkan kamu dapat membuat desain website bergaya material seperti yang ada pada Google saat ini.



Produk-produk Google yang menggunakan desain material diantaranya adalah:
  1. Blogger (Pada homepage blogger.com)
  2. Gmail (Pada homepage gmail.com)
  3. dll
Tentunya mungkin banyak teman-teman sekalian yang suka dengan gaya material bukan? Desain yang clean, elegan, dan menarik. Nah kita nanti dapat membuat desain seperti itu menggunakan Materializecss ini.

Download Materializecss

Pertama, tentunya kita perlu download Materializecss terlebih dulu.

Silahkan kamu bisa pergi ke alamat ini: http://materializecss.com/ 

Kemudian klik tombol Get Started, silahkan lihat gambar dibawah:


Setelah  klik tombol Get Started, maka kita akan dibawah ke suatu halaman. DIsitu terlihat ada tulisan Download bukan? Silahkan kamu download Materializecss disitu. Silahkan lihat gambar dibawah:


Kemudian proses download mungkin akan berlangsung. Setelah kamu download, silahkan ekstrak file download tersebut.

Cara Menggunakan Materializecss

Sebagai awalan, mari bahas bagaimana caranya untuk "setting" awal menggunakan si Materializecss ini. Dan berikut ini adalah struktur kode HTML yang sudah disetting dengan Materializecss.

  <!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
  </html>

Saya asumsikan sebelumnya kamu sudah paham tentang struktur HTML, jadi silahkan otak-atik kode diatas ya.

Dengan kode diatas, kamu sudah bisa menggunakan framework CSS ini. Sekian terima kasih, Wassalamualaikum Wr Wb.



Punya pertanyaan? Silahkan komentar. adsense 336x280

Subscribe via Email

Related Post

0 Response to "[Tutorial] Materializecss - Persiapan dan Awalan"

Posting Komentar

Langganan: Posting Komentar (Atom)