Materialize ini adalah kerangka kerja seperti bootstrap dimana framework khusus untuk frontend yang terdiri dari HTML. CSS, dan Javascript yang tinggal kita gunakan. Yang uniknya disini Materialize mengimplementasikan Material Design. Untuk yang belum tahu Material Design. Material design ini salah satu design yang dilakukan oleh google jadi google ini seperti membuat bahasa visual untuk pada designer yang dapat membuat satu elemen dapat berinteraksi dengan elemen yang lain.

Berikut prinsip-prinsip dari Materialize CSS:

  1. Material is the metaphor

mendefinisikan hubungan antara ruang dan gerak . Idenya adalah bahwa teknologi ini terinspirasi oleh kertas dan tinta dan digunakan untuk memfasilitasi kreativitas dan inovasi . Permukaan dan tepi memberikan petunjuk visual yang akrab yang memungkinkan pengguna untuk dengan cepat memahami teknologi di luar dunia fisik.

  1. Bold, graphic, intentional

mendefinisikan elemen dan komponen seperti grid , tipografi , warna , dan citra tidak hanya visual menyenangkan , tetapi juga menciptakan rasa hierarki , makna , dan fokus . Penekanan pada tindakan dan komponen yang berbeda membuat panduan visual bagi pengguna.

  1. Motion provides meaning

mendefinisikan gerak memungkinkan pengguna untuk menarik paralel antara apa yang mereka lihat di layar dan dalam kehidupan nyata. Dengan menyediakan umpan balik dan keakraban, ini memungkinkan pengguna untuk sepenuhnya membenamkan dirinya sendiri ke dalam teknologi asing. Gerak mengandung konsistensi dan kontinuitas selain memberikan pengguna informasi bawah sadar tambahan tentang objek dan transformasi .

Cara Instalasi Materialize.css dengan Mudah

  1. Buka browser dan tuliskan alamat ini materializecss.com, lalu klik GET STARTED lalu klik button MATERIALIZE lalu jika sudah extract file tersebut.
  2. Lalu buka text editor dan tuliskan script dibawah ini:

<!DOCTYPE html>

<html>

<head>

<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”/>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″/>

</head>

<body>

<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>

 

  1. jika sudah, save didalam folder yang tadi kita download
  2. jika sudah disave maka kita telah berhasil menginstal framework materialize.css

Leave a Reply

Your email address will not be published. Required fields are marked *