lifelong learner — urip iku urup, currently working on accenture.

mengenal sistem grid materialize-css

0
Degananda.com -

Materialize-css adalah sebuah framework resposinve css yang dibuat berdasarkan pakem desain dari material design besutan google. Framework ini adalah proyek komunitas(mahasiswa Carnegie Mellon University) bukan berasal dari sebuah perusahaan yang sekarang menjadi salah satu framework css populer. Selain menggunakan css materialize-css juga menggunakan javascript atau lebih tepatnya menggunakan jquery untuk menunjang interaksi user dengan element html sehingga ui dan ux yang dihasilkan lebih baik. Untuk icon, materialize-css menggunakan icon dari google font yang juga merupakan icon standart yang digunakan oleh material desain. Untuk info lebih lanjut dapat mengunjungi website officialnya :

http://materializecss.com

Pada ulasan ini akan berfokus membahas mengenai sistem grid yang ada di framework materialize-css. Programmer frontend sangat membutukan sistem grid untuk mempermudah dan mempercepat pengejaan layout responsive. Meski pada materialize-css tidak hanya terdapat sitem grid juga terdapat fitur-fitur lainnya yang tidak dibahas di ulasan ini. Secara umu, terdapat tiga “modul” yang ditawarkan oleh materialize-css yakni :

  1. CSS
    yakni element html yang telah distyling untuk memenuhi kebutuhan-kebutuhan tertentu. Namun elemen ini adalah elemen dasar seperti grid, tabel, warna, dan lain-lain
  2. Component
    berbeda dengan css component adalah elemen non-dasar atau elemen yang memiliki tujuan penggunaan spesifik dan bukan merupakan sebuah wadah/container yang telah distyling untuk memenuhi kebutuhan tertentu. Contohnya seperti badge, button, icon dan lain – lain.
  3. Javascript
    merupakan elemen yang dibuat dengan menggabungkan css & component dengan javascript/jquery. Contohnya adalah caraousel.

Materialize-css ini tersedia digunakan melalui berbagai jenis package manager mulai dari npm, bower dan lain-lain yang terpenting kita dapat menggunakan full materialize-css(css+komponen+javascript) ini di angular js. Sebenarnya google telah merilis official material desain untuk angular namun materialize-css ini menurut kami jauh lebih simpel dibandingkan dengan framework css official dari google.

1. Sistem grid materialize-css

12 column fluid grid system

itulah sebutan grid system yang digunakan pada materialize-css. Komponen utama dari sistem grid ini adalah container yang akan memberikan margin dengan jumlah tertentu pada suatu elemen. Materialize-css membagi grid menjadi 12 buah kolom. Sehingga kita dapat membuat 12 “<div>” secara responsive sebanyak 12 atau berukuran maksimal tiap kolomnya adalah (1/12*100%).

cara penggunaanya pun cukup mudah, kita haya perlu menambahkan class yang bernama “col” kemudian di ikuti dengan tiga buah class “s[jumlah_kolom]”, “m[jumlah_kolom]”, “l[jumlah_kolom]”. Aturan mainnya adalah ketika kolom tersebut dijumlahkan hasilnya adalah 12 (dua belas) tidak boleh kurang ataupun lebih. jika lebih/kurang dari itu styling akan menjadi error atau berjalan dengan tidak baik. Contohnnya kita ingin membuat grid system dengan 3 grid kolom maka kode htmlnya adalah

<div class="container">
  <div class="col l4">
    Kolom A
  </div>
  <div class="col l4">
    Kolom B
  </div>
  <div class="col l4">
    Kolom C
  </div>
</div>

jika ingin membaginnya menjadi empat grid kolom maka kodennya adalah

<div class="container">
  <div class="col l4">
    Kolom A
  </div>
  <div class="col l4">
    Kolom B
  </div>
  <div class="col l4">
    Kolom C
  </div>
  <div class="col l4">
    Kolom C
  </div>
</div>

kita juga bisa membuat grid custom misalnya kolom dengan lebar 8 disebelah kiri dan kolom dengan lebar 4.

<div class="container">
  <div class="col l8">
    Kolom A
  </div>
  <div class="col l4">
    Kolom B
  </div>
</div>

Ingat Kode diatas belum responsive!. Sangat sederhana untuk membua grid dan telah responsive. Sehingga ketika kita buka dengan layar dengan ukuran lainnya akan menyesuaikan dengan sendirinnya.  S, M, L adalah jenis layar yang dibedakan berdasarkan resolusinnya. Kita dapat membuat jumlah grid yang berbeda-beda tergantung dengan ukuran layarnya. Contohnya kita akan membuat halaman dengan 4 grid, namun kita ingin responsive pada handphone yang pada layar handphone halaman tersebut akan memiliki 12 grid(full per kolom berukuran 12) saya maka kode untuk melakukan hal itu adalah seperti dibawah ini

<div class="container">
  <div class="col l3 s12">
    Kolom A
  </div>
  <div class="col l3 s12">
    Kolom B
  </div>
  <div class="col l3 s12">
    Kolom C
  </div>
  <div class="col l3 s12">
    Kolom D
  </div>
</div>

L melambangkan desktop, dan S melambangkan mobile/handphone. ini adalah screensize yang digunakan oleh materialize-css. Gunakan class dibawah ini agar layout dapat responsive disegala ukuran resolusi

Mobile Devices
<= 600px
Tablet Devices
> 600px
Desktop Devices
> 992px
Large Desktop Devices
> 1200px
Class Prefix .s .m .l .xl
Container Width 90% 85% 70% 70%
Number of Columns 12 12 12 12

jika anda tertarik silahkan mencoba materialize-css kami sangat merekomendasikan karena sangat simpel untuk digunakan 😀