Desain yang Responsif - Part 3
Bermain dengan dimensi ukuran layar
Tech writer and lecturer from Indonesia who is passionate about backend technology.
I ensure that 99% of my content is written in Indonesian because I aim to encourage Indonesian tech enthusiasts to write and share their knowledge.
I often provide guidance to IT students in Indonesia, emphasizing the importance of continuous learning. Don't waste your post-campus life by doing nothing. Read, learn, and study more to become better professionals in the tech industry!
Overview
Setelah belajar flex kita akan mencoba memahami desain yang responsif di Tailwind. Kembali mengingat bahwa kalau kalian pernah membaca media queries pada CSS atau kalo pake Bootstrap kita kenal dengan istilah breakpoints.
Menggunakan tailwind kita bisa menggunakan utility yang disediakan oleh tailwind, namun secara konsep hampir sama dengan bootstrap, kok.
Kick Off
Masih menggunakan kode yang kemarin, yaitu:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Tailwind</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
<div class="container mx-auto p-4">
<div class="flex flex-wrap w-full p-3">
<div class="p-3 w-4/12">
<div class="flex shadow bg-white rounded-md">
<div class="flex flex-col p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
</div>
</div>
<div class="p-3 w-4/12">
<div class="flex shadow bg-white rounded-md">
<div class="flex flex-col p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
</div>
</div>
<div class="p-3 w-4/12">
<div class="flex shadow bg-white rounded-md">
<div class="flex flex-col p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
</div>
</div>
<div class="p-3 w-4/12">
<div class="flex shadow bg-white rounded-md">
<div class="flex flex-col p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
</div>
</div>
<div class="p-3 w-4/12">
<div class="flex shadow bg-white rounded-md">
<div class="flex flex-col p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
</div>
</div>
<div class="p-3 w-4/12">
<div class="flex shadow bg-white rounded-md">
<div class="flex flex-col p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sekarang perhatikan tampilan ketika layar dikecilkan dari layar laptop, tablet, hingga mobile screen.
Dapat kita lihat kan bahwa tampilan ketika tablet membuat komponen kita menjadi dempet, bahkan lebih dempet lagi ketika kita ubah ke mobile.
Apa solusinya yang bisa kita lakukan? Menyesuaikan tampilan dengan memberikannya class untuk beberapa keadaan layar.
Sekarang kita ubah kode untuk membuat card menjadi seperti ini:
<div class="p-3 w-full sm:w-1/2 lg:w-4/12">
<div class="flex shadow bg-white rounded-md">
<div class="flex flex-col p-4">
<h1 class="text-xl font-bold"> Hello World </h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
</div>
</div>
Sekarang kalau kita perhatikan, maka tampilan cardnya akan menjadi seperti ini:
Tampilan card kita berubah ketika tampilan menjadi kecil, GG bukan? Sekarang kita bedah code-nya.
Bedah Code
Perhatikan kode ini.
<div class="p-3 w-full sm:w-1/2 lg:w-4/12">
Mengapa isi classnya adalah w-full diikuti sm:w-1/2 dan lg:w-4/12? Jawabannya adalah karena kita perlu memasang default class, diikuti dengan kondisi layar.
Berdasarkan dokumentasi tailwind, media query didefinisikan dengan class sebagai berikut:
| Breakpoint prefix | Minimum width | CSS |
sm | 640px | @media (min-width: 640px) { ... } |
md | 768px | @media (min-width: 768px) { ... } |
lg | 1024px | @media (min-width: 1024px) { ... } |
xl | 1280px | @media (min-width: 1280px) { ... } |
2xl | 1536px | @media (min-width: 1536px) { ... } |
Kalau kalian perhatikan dengan cara klik kanan > inspect element pada browser kalian, kita bisa melihat ukuran layar default yang tersedia secara umum.
Mobile S: 320px
Mobile M: 375px
Mobile L: 425px
Tablet: 768px
Laptop: 1024px
Laptop L: 1440px
Artinya, class sm mempengaruhi layar mulai dari 640px, class md mempengaruhi layar mulai 768px, dan lg mempengaruhi layar mulai dari 1024px.
Ingat, bahwa media query akan meniban style apabila ada screen yang lebih besar efeknya, maksudnya adalah md akan meniban efek sm, dan lg akan meniban efek md dan sm.
Sekarang kembali ke classnya yang gue buat, lihat dan perhatikan bahwa class default yang gue buat ini adalah class w-full, artinya secara default kita akan menggunakan class w-full, kalau kalian coba maka secara default ketika layar kecil komponen card kita menjadi penuh layaknya baris, jadi full gitu.
Kenapa gitu? Karena mobile minimal screennya adalah 320-425px, sehingga kalau kita kasih class w-4/12 sebagai default, akan mempengaruhi screen ukuran 320-425px. That's why saya kasih default classnya adalah w-full. Karena ini efek default, sehingga membuat cardnya menjadi satu saja setiap barisnya.
Ketika screen minimal 640px kita beri class sm:w-1/2 tujuannya adalah mengubah tampilan ketika layar menjadi tablet, ingat bahwa tablet itu layar minimalnya adalah 768px sehingga efeknya akan muncul yaitu membuat card menjadi 2 card pada setiap baris.
Kemudian kita beri class lg:w-4/12 tujuannya adalah mengubah tampilan ketika layar menjadi minimal laptop 1024px karena lg adalah dimensi minimal 1024px sama persis seperti laptop. Otomatis laptop kalian yang layarnya minimal 1024px itu akan terkena efek classnya dan mengubah ukuran card menjadi 4/12 atau 1/3, jadi ada 3 card pada setiap baris.
Perbaiki Padding
Sekarang kalian sudah paham bahwa class default akan mempengaruhi semuanya, silahkan berkreasi dengan sesuka kalian agar padding pada layar dimensi minimal mobile menjadi lebih lebar. Hal ini dikarenakan kalau kita perhatikan, ketika layar menjadi mobile, padding cukup menekan cukup banyak ruang sehingga card menjadi terlihat lebih kecil.
Sekarang giliran kalian untuk mencoba dan memperbaiki masalah ini dengan class yang kalian suka. Perlu diperhatikan bahwa padding memiliki pengaruh dari ketiga div berikut:
<div class="container mx-auto p-4">
<div class="flex flex-wrap w-full p-3">
<div class="p-3 w-full sm:w-1/2 lg:w-4/12">
Silahkan atur sesuka kalian, tidak ada yang benar atau salah, yang penting mau belajar! 😁
