Belajar Frontend - CSS Modern (Layout & Responsif)

#Pendahuluan

Setelah di episode 3 kita menyusun struktur semantik TokoKita, kini saatnya memberi tampilan: CSS modern. Istilah "modern" penting — CSS yang kita pakai sekarang jauh berbeda dari CSS 2010-an. Flexbox, Grid, dan custom properties membuat layout yang dulu butuh library (Bootstrap) kini bisa ditulis langsung dengan CSS murni yang lebih kecil, lebih cepat, dan lebih mudah dipahami.

Mengapa episode ini krusial? Karena responsif bukan lagi "fitur bonus" — sebagian besar pengguna Indonesia mengakses web lewat HP. Layout yang tidak responsif berarti kehilangan mayoritas pengguna. Di sini kalian juga mulai melatih "mata desain" untuk episode 10 (styling & utility CSS).

#Custom Properties dan Reset Dasar

Custom properties (--var) adalah cara menyimpan nilai desain agar konsisten dan mudah diubah:

styles.css

:root {
  --color-bg: #fafaf9;
  --color-text: #1c1917;
  --color-primary: #b45309;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --radius: 0.5rem;
}
 
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Konsep ini adalah cikal bakal design tokens yang akan kita bahas di episode 10 dan 25: satu tempat untuk semua keputusan desain, dan seluruh komponen membaca dari sana.

#Flexbox: Layout Satu Dimensi

Flexbox bekerja pada satu sumbu (baris atau kolom). Contoh paling umum: baris navigasi dan tombol.

Navbar dengan Flexbox

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
}

Empat properti yang paling sering dipakai: justify-content (posisi sumbu utama), align-items (sumbu silang), gap (jarak antar item — tanpa hack margin), dan flex-wrap.

#Grid: Layout Dua Dimensi

Grid bekerja pada dua sumbu sekaligus (baris dan kolom) — tepat untuk katalog produk TokoKita:

Katalog produk dengan Grid

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-lg);
}

repeat(auto-fill, minmax(220px, 1fr)) adalah pola emas: browser memutuskan berapa kolom yang muat, lalu membagi sisa ruang secara merata — tanpa satu media query pun. Ini yang membuat layout langsung responsif.

#Responsif dan Mobile-First

#Mobile-First

Tulis gaya dasar untuk layar kecil terlebih dahulu, lalu perkuat untuk layar lebih besar lewat min-width:

Media queries mobile-first

.product-card { padding: var(--space-md); }
 
@media (min-width: 640px) {
  .product-card { padding: var(--space-lg); }
}

Keuntungannya: baseline yang sederhana (cocok untuk HP lambat), dan logika tambahan hanya ditambahkan saat benar-benar dibutuhkan.

#Unit Fleksibel Modern

clamp() membuat ukuran responsif tanpa media query:

Tipografi yang menyesuaikan lebar

h1 {
  font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

Artinya: minimal 1.5rem, tumbuh seiring vw, maksimal 2.5rem. Ukuran elemen tidak pernah "meledak" di layar besar dan tidak pernah terlalu kecil di HP.

#Praktik: Kartu Produk TokoKita

Gabungkan semuanya pada halaman katalog:

katalog.html

<section class="product-grid" aria-label="Daftar produk">
  <article class="product-card">
    <img src="kopi.jpg" alt="Kemasan kopi arabika 250 gram" />
    <h2 class="product-title">Kopi Arabika 250g</h2>
    <p class="product-price">Rp85.000</p>
    <button class="btn-add">Tambah ke keranjang</button>
  </article>
</section>

styles.css

.product-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: var(--color-bg);
  border-radius: var(--radius);
  padding: var(--space-md);
}
 
.product-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}
 
.btn-add {
  margin-top: auto;
  background: var(--color-primary);
  color: #fff;
  border: 0;
  padding: var(--space-sm);
  border-radius: var(--radius);
  cursor: pointer;
}

margin-top: auto mendorong tombol ke bawah sehingga semua kartu di satu baris punya tinggi tombol yang sejajar — trik kecil Flexbox yang sering dipakai.

#Common Pitfalls

#Penutup

Inti yang harus dibawa pulang:

• Custom properties menyimpan keputusan desain di satu tempat (cikal bakal design tokens).
• Flexbox untuk satu sumbu, Grid untuk dua sumbu; gap menggantikan margin hack.
• repeat(auto-fill, minmax(220px, 1fr)) membuat grid responsif tanpa media query.
• Mobile-first: tulis gaya dasar untuk layar kecil, perkuat dengan min-width dan clamp().

Di episode 5 selanjutnya kita akan menghidupkan halaman: JavaScript core — ES6+, manipulasi DOM, events, async (promises/async-await), dan modules, sampai membangun aplikasi vanilla JS untuk keranjang belanja TokoKita. Ini bahasa kedua kalian setelah HTML/CSS, dan fondasi mutlak sebelum TypeScript. Sampai jumpa di episode 5!