Membuat Situs Web Desain Dengan Framework Materialize CSS (Bagian 2)

anaksmanda.com - Di pembahasan sebelumnya kita pernah membahas tentang membuat situs web dengan materialize, dimana telah kita pelajari cara membuat template dasar, color picker dan grid didalam materialize atau untuk lebih jelasnya bisa dilihat kembali pada artikel Membuat Situs Web Desain Dengan Framework Materialize CSS (Bagian 1) . Kali ini kita akan lanjut membahas lanjutan Membuat Situs Web Desain Dengan Framework Materialize CSS (Bagian 2) . Didalam topik kali ini kita akan membahas tentang SideNav, Vertical Align, Depth Using, Buttons, Form dan lain sebagainya. baiklah langsung kita mulai saja pembahasan kita.

Vertical Aligning Menggunakan Materialize

Anda dapat dengan mudah, memusatkan hal-hal secara vertikal dengan menambahkan valign-wrapper ke container, memegang item yang ingin Anda selaraskan secara vertikal.
<div class="box valign-wrapper">
<h5>Vertical</h5>
</div>

Depth Menggunakan Materialize

Dalam Materialize , semuanya harus memiliki kedalaman z atau titik tertentu yang menentukan seberapa jauh terangkat atau dekat dengan halaman elemen.

Anda dapat dengan mudah menerapkan efek bayangan ini dengan menambahkan class = "z-depth-n" ke tag HTML.
<p class="z-depth-1">z-depth-1</p>
<p class="z-depth-2">z-depth-2</p>
<p class="z-depth-3">z-depth-3</p>
<p class="z-depth-4">z-depth-4</p>
<p class="z-depth-5">z-depth-5</p>
 Untuk contoh hasilnya bisa kalian lihat disini↵

Materialize Buttons

Ada dua jenis tombol utama yang dijelaskan dalam desain material. Tombol terangkat adalah tombol standar yang menandakan tindakan dan berupaya memberikan kedalaman pada halaman yang sebagian besar datar. Tombol aksi mengambang, melingkar dimaksudkan untuk fungsi yang sangat penting.
<a class="waves-effect waves-light btn">Stuff</a>
<a class="waves-effect waves-light btn"><i class="mdi-file-cloud left"></i>button</a>
<a class="waves-effect waves-light btn"><i class="mdi-file-cloud right"></i>button</a>
<a class="btn-floating btn-large waves-effect waves-light red"><i class="mdi-content-add"></i></a>
Untuk contoh hasilnya bisa lihat disini↵

Materialize Forms

Form / Formulir adalah cara standar untuk menerima data yang dimasukkan pengguna. Transisi dan kelancaran elemen-elemen ini sangat penting karena interaksi pengguna yang melekat terkait dengan bentuk.
Bidang teks memungkinkan input pengguna. Perbatasan harus menyala sederhana dan dengan jelas menunjukkan bidang mana yang sedang diedit pengguna. Kalian harus memiliki div .input-field yang membungkus input dan label. Ini membantu jQuery menampilkan label. Ini hanya digunakan dalam Input dan Textarea kita untuk membentuk elemen.

Jika kalian tidak ingin terdapat status validasi Hijau dan Merah, hapus saja kelas validasi dari input yang dimasukkan.
<div class="row">
  <form class="col s12">
    <div class="row">
      <div class="input-field col s6">
        <input id="first_name" type="text" class="validate">
        <label for="first_name">First Name</label>
      </div>
      <div class="input-field col s6">
        <input id="last_name" type="text" class="validate">
        <label for="last_name">Last Name</label>
      </div>
    </div>
    <div class="row">
      <div class="input-field col s12">
        <input id="username" type="text" class="validate">
        <label for="username">Username</label>
      </div>
    </div>
    <div class="row">
      <div class="input-field col s12">
        <input id="password" type="password" class="validate">
        <label for="password">Password</label>
      </div>
    </div>
    <div class="row">
      <div class="input-field col s12">
        <input id="email" type="email" class="validate">
        <label for="email">Email</label>
      </div>
    </div>
  </form>
</div>
Untuk contoh hasilnya bisa lihat disini↵

Materialize Icons

Materialize telah memasukkan 740 Material Design Icons, milik Google. File font ikon tertanam ke file Materialize CSS dalam bentuk URI Data. Kelas ikon menggunakan elemen semu untuk memilih elemen HTML dan menggunakan konten yang dihasilkan untuk mengisinya dengan ikon menggunakan ikon UNICODE.

Untuk menggunakan ikon-ikon ini, cukup tempatkan nama ikon ke dalam kelas tag HTML

Untuk mengontrol ukuran ikon, ubah properti ukuran font-size kalian. Secara opsional, Anda dapat menggunakan small, large dan medium.
<i class="small mdi-content-add"></i>
      <i class="medium mdi-content-add"></i>
      <i class="large mdi-content-add"></i>

Materialize Tabs

Struktur tab terdiri dari daftar tab yang tidak berurutan yang memiliki hash yang sesuai dengan id tab. Kemudian, ketika kalian mengklik pada setiap tab, hanya wadah dengan id tab yang sesuai akan menjadi terlihat.
<div class="row"
    <div class="col s12">
      <ul class="tabs">
        <li class="tab col s3"><a href="#test1">Test 1</a></li>
        <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
        <li class="tab col s3"><a href="#test3">Test 3</a></li>
        <li class="tab col s3"><a href="#test4">Test 4</a></li>
      </ul>
    </div>
    <div id="test1" class="col s12">Test 1</div>
    <div id="test2" class="col s12">Test 2</div>
    <div id="test3" class="col s12">Test 3</div>
    <div id="test4" class="col s12">Test 4</div>
  </div>
Untuk contoh hasilnya bisa lihat disini↵

Materialize's Material Box

Material Box adalah implementasi desain material dari plugin Lightbox, ketika pengguna mengklik gambar yang bisa diperbesar. Kotak material memusatkan gambar dan memperbesarnya dengan halus, tanpa gangguan. Untuk mengabaikan gambar, pengguna dapat mengklik gambar itu lagi, gulir menjauh, atau tekan tombol ESC. Sangat mudah untuk menambahkan keterangan singkat ke foto. Tambahkan saja caption sebagai atribut data-caption.
<img class="materialboxed" width="300" src="http://qnimate.comhttps://cask.scotch.io/2015/01/784014790032582570.png" data-caption="Materialize Demo">
 Untuk contoh hasilnya bisa lihat disini↵

Materialize Dropdown

Tambahkan daftar dropdown ke tombol apa saja. Pastikan bahwa atribut yang diaktifkan data cocok dengan id pada tag <ul>. Kalian dapat menambahkan pembagi dengan tag <li class = "divider"> </li>
<!-- Dropdown Trigger -->
  <a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>

  <!-- Dropdown Structure -->
  <ul id='dropdown1' class='dropdown-content'>
    <li><a href="#!">one</a></li>
    <li><a href="#!">two</a></li>
    <li class="divider"></li>
    <li><a href="#!">three</a></li>
  </ul>
  Untuk contoh hasilnya bisa lihat disini↵

Membuat Situs Portofolio

Setelah kita membahas beberapa komponen terpenting dari Framework Materialize CSS . Saatnya menyatukan mereka dan membuat situs portofolio. Demo lengkap dari situs portofolio yang akan kita buat dalam tutorial ini. Link demo hasil

Introduction Banner

Di situs portofolio kita ini, pertama, kita akan memiliki spanduk horizontal besar yang menampilkan nama dan profesi. Kita dapat membuat ini menggunakan tag pemformatan teks Materialize dan sedikit CSS.
 <div class="intro deep-orange lighten-2 z-depth-1">
  <h1 class="grey-text text-lighten-5">narayan prusty</h1>
  <h5 class="grey lighten-4 grey-text text-darken-1">web and mobile developer</h5>
</div>
   Untuk contoh hasilnya bisa lihat disini↵

 Detail Information

Kita perlu menampilkan bio, profil, dan status pekerjaan saat ini di portofolio kita. Untuk ini, kita bisa membuat kisi 3 kolom. Grid ini adalah 3 kolom layar sedang dan besar, tetapi pada ponsel itu ditumpuk. 
<div class="container about">
  <h5>about me</h5>
  <h6>let me introduce my self</h6>
  <hr>
  <div class="row">
    <div class="col s12 m4 l4">
      <h6>Story</h6>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="col s12 m4 l4">
      <h6>Profile</h6>
      <div class="card blue-grey darken-1">
        <div class="card-content white-text">
          <img src="http://labs.qnimate.com/portfolio-materialize/images/profile.png" width="64" height="64">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
        </div>
        <div class="card-action">
          <a href="#">Link</a>
          <a href='#'>Link</a>
        </div>
      </div>
    </div>
    <div class="col s12 m4 l4">
      <h6>current jobs</h6>
      <ul class="collapsible">
        <li class="active">
          <div class="collapsible-header"><i class="mdi-av-web"></i>Designer</div>
          <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
        </li>
        <li>
          <div class="collapsible-header"><i class="mdi-editor-format-align-justify"></i>Developer</div>
          <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
        </li>
        <li>
          <div class="collapsible-header"><i class="mdi-av-play-shopping-bag"></i>Video Editor</div>
          <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
        </li>
        <li>
          <div class="collapsible-header"><i class="mdi-editor-insert-comment"></i>Support Asst.</div>
          <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
        </li>
      </ul>
    </div>
  </div>
</div>
   Untuk contoh hasilnya bisa lihat disini↵

Kita menggunakan kartu Materialize di kolom Tengah. Kartu adalah cara yang mudah untuk menampilkan konten yang terdiri dari berbagai jenis objek. Mereka juga sangat cocok untuk menyajikan objek serupa yang ukuran atau tindakan yang didukungnya dapat sangat bervariasi, seperti foto dengan keterangan panjang variabel.

Di sini kami menggunakan Material Dilipat di kolom terakhir. Collapsibles adalah elemen akordion yang meluas saat diklik. Mereka memungkinkan Anda untuk menyembunyikan konten yang tidak langsung relevan bagi pengguna.

Final Thoughts

Kita telah melihat beberapa fitur dan komponen Desain Materialize. Ada banyak lagi komponen yang ditawarkan oleh Materialize sehingga kalian dapat membangun segala jenis tampilan situs web. Jika kalian berencana membuat situs web baru atau mendesain ulang situs kalian, maka saya sarankan untuk memilih Materialize Framework, karena ada sangat sedikit situs yang dirancang materi dan situs kalian akan menonjol. Kalian juga dapat menggunakan Materialize dalam merancang aplikasi seluler hybrid. Silakan bagikan pengalaman kalian dengan Materialize dengan berkomentar di bawah ini.