Materialize CSS, Framework Material Design untuk Website


Materialize CSS - Material Design Framework

Selamat datang kembali bersama saya admin code codepelajar. Pada kesempatan kali ini saya akan memperkenalkan sobat semua kepada Framework CSS yang trend dalam dunia desain gaya Material Design. Yup kita sebut saja Materialize CSS

.

Materialize CSS adalah framework css gratis yang akan membantu sobat membangun website dengan Material Design Concept (pelajari lebih lanjut tentang konsep dan prinsip material design disini). Framework ini dibuat oleh 4 orang mahasiswa dari Carnegie Mellon University yaitu Alvin Wang, Alan Chang, Alex Mark, Kevin Louie dengan mengikuti prinsip desain Material yang diciptakan oleh Google (info tentang materialize team disini).

Pada pembahasan kali ini saya membuat 3 point yaitu

  1. Memulai Menggunakan Materialize CSS sebagai Framework CSS
  2. HTML Setup
  3. Cara Mudah Mengaktifkan Fungsi Javascript pada Materialize

Sebelumnya juga saya sudah membuat tutorial dengan menggunakan framework ini yaitu membuat Material WhatsApp Contact Form


Memulai Menggunakan Materialize CSS sebagai Framework CSS

Jika sobat ingin menggunakan Materialize CSS untuk framework desain web sobat, bisa dengan mengunjungi official sitenya disini atau menggunakan kode yang dibawah ini.


<!-- Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>


Ketiga CDN diatas adalah komponen utama untuk menggunakan framework material desain ini. Seperti halnya framework lainnya, kamu bisa melihat secara lengkap komponen-komponen yang ada pada dokumentasinya disini.


HTML Setup

Untuk membuat halaman yang terintegrasi materialize css cukup menggunakan kerangka HTML sebagai berikut ini dan buat kode sumber materialize menggunakan CDN.


<!DOCTYPE html>
<html>
  <head>
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">


  </head>

  <body>
      <div class="container">

          <!--- main content -->

      </div>

    <!--JavaScript at end of body for optimized loading-->
    <!-- jika kamu ingin menggunakan jQuery taruh script library-nya  diatas materialize --> 
       <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  </body>
</html>


Cara Mudah Mengaktifkan Fungsi Javascript pada Materialize

Setelah saya baca dokumentasinya, kita tidak bisa menggunakan komponen yang membutuhkan javascript seperti Modal, Tabs, dan lainnya secara langsung. Tapi kita harus mengaktifkan terlebih dahulu script materialnya agar bisa berfungsi dengan baik. Caranya cukup dengan menambahkan script Auto Init khusus yang mengaktifkan seluruh fungsi materialize jsnya (baca disini tentang auto init) seperti berikut ini:



M.AutoInit();


Itulah pengenalan framework CSS Materialize CSS yang bisa saya sampai kan disini. Tidak banyak sih jika tertarik mempelajarinya bisa langsung kunjungi situs officialnya saja. Jika ada pertanyaaan atau masukan dll jangan sungkan untuk berkomentar di bawah ini. Terima kasih telah berkunjung dan jangan lupa klik iklan kami hehehe...

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel