Setiap aplikasi dasbor berdiri di atas kerangka yang sama: kolom navigasi di satu sisi, bilah kepala di atas, dan area konten yang mengisi sisa ruang. Kerangka inilah target Bagian 1. Kita akan menyiapkan design token warna dan spasi untuk seluruh proyek, lalu merakit cangkang aplikasi dengan display: grid dan grid-template-areas — pendekatan yang membuat peta tata letak terbaca seperti denah, bukan deretan angka kolom yang harus dihafal. Sesudah bagian ini, stylesheet kita sudah memuat fondasi yang dipakai semua bagian berikutnya.
Cangkang Aplikasi dengan Grid Areas #
Aturan intinya ada pada satu deklarasi grid dengan dua area bernama:
.cangkang-app {
display: grid;
grid-template-areas: "samping kepala" "samping utama";
grid-template-columns: var(--lebar-samping) 1fr;
grid-template-rows: auto 1fr;
height: 100dvh;
}Nilai grid-template-areas adalah peta tata letak yang ditulis seperti gambar ASCII: dua baris, dua kolom, dan nama area di tiap sel. Kata samping muncul di kedua baris kolom pertama, sehingga area itu membentang vertikal penuh — di sanalah sidebar hidup. Baris pertama menampung kepala dengan tinggi auto (mengikuti isinya), baris kedua menampung utama dengan 1fr sehingga menyerap seluruh sisa tinggi. Setiap elemen kemudian cukup menyebut nama areanya:
.sidebar { grid-area: samping; }
.kepala-app { grid-area: kepala; }
.isi-utama { grid-area: utama; }Keunggulan pola ini adalah perubahan tata letak cukup dilakukan dengan menyusun ulang peta pada satu aturan CSS. Pada Bagian 5 nanti, peta yang sama kita tukar menjadi satu kolom untuk layar ponsel tanpa menyentuh HTML sama sekali.
Rencana Gulir: Siapa yang Bergerak #
Kesalahan paling umum saat membangun dasbor adalah membiarkan seluruh halaman menggulir, sehingga sidebar dan bilah kepala ikut bergulir keluar dari pandangan. Kita mencegahnya dengan kontrak sederhana: .cangkang-app mengunci tinggi dirinya pada 100dvh — tinggi viewport dinamis yang ikut menyesuaikan bilah alamat peramban ponsel — dan hanya area utama yang diberi kemampuan menggulir:
.isi-utama {
grid-area: utama;
overflow-y: auto;
display: grid;
gap: var(--jarak-5);
align-content: start;
}Deklarasi overflow-y: auto menumbuhkan bilah gulir hanya saat konten benar-benar melebihi tinggi area. Karena .isi-utama sekaligus menjadi grid dengan align-content: start, tiga seksi di dalamnya — kartu ringkasan, tabel transaksi, dan catatan kaki — berderik rapi dengan jarak dari token --jarak-5 tanpa margin manual. Sidebar juga kita beri overflow-y: auto sebagai jaring pengaman bila menu bertambah panjang pada layar pendek.
Sisa seksi pada snapshot bawah adalah urusan rumah tangga: token warna teal untuk identitas DompetKu, pasangan warna hijau dan merah untuk pemasukan dan pengeluaran, skala spasi berbasis 4 px, serta utilitas .sr-only untuk teks yang hanya dibaca pembaca layar.
Menandai Tokoh: Angka Rupiah #
Satu keputusan kecil disiapkan sejak token: semua angka akan memakai font-variant-numeric: tabular-nums. Digit pada huruf sistem biasa punya lebar berbeda-beda; begitu angka diperbarui, posisi digit di sebelahnya ikut bergeser. Dengan digit tabular, setiap angka menempati lebar sama, sehingga deretan Rupiah di kartu dan di tabel terlihat seperti kolom laporan yang dihitung dengan teliti. Penerapannya menyusul di Bagian 3 dan Bagian 4.
/* ============================================================
Dashboard Keuangan — stylesheet utama
Urutan: token → base → cangkang aplikasi → sidebar →
kepala aplikasi → kartu ringkasan → tabel transaksi →
lencana status → responsif → fokus dan gerak
============================================================ */
/* ---------- 1. Design token ---------- */
:root {
/* Warna semantik dasbor */
--warna-latar: #f1f5f9; --warna-permukaan: #ffffff;
--warna-teks: #0f172a; --warna-teks-lembut: #64748b;
--warna-garis: #e2e8f0; --warna-utama: #0f766e;
--warna-utama-pekat: #115e59; --warna-utama-lembut: #ccfbf1;
--warna-utama-tinta: #134e4a; --warna-fokus: #0d9488;
--warna-samping: #0f172a; --warna-samping-teks: #cbd5e1;
--warna-samping-hover: rgba(255, 255, 255, 0.08);
--warna-masuk: #15803d; --warna-masuk-latar: #dcfce7;
--warna-keluar: #b91c1c; --warna-keluar-latar: #fee2e2;
/* Skala spasi, basis empat dan delapan piksel */
--jarak-1: 4px; --jarak-2: 8px;
--jarak-3: 12px; --jarak-4: 16px;
--jarak-5: 24px; --jarak-6: 32px;
/* Radius sudut dan bayangan */
--radius-kecil: 8px; --radius: 12px; --radius-penuh: 999px;
--bayangan-1: 0 1px 2px rgba(15, 23, 42, 0.06);
--bayangan-2: 0 12px 28px rgba(15, 23, 42, 0.22);
/* Tipografi, gerak, dan kerangka */
--font-dasar: system-ui, "Segoe UI", sans-serif;
--durasi: 180ms; --pelunakan: ease-out;
--lebar-samping: 248px;
}
/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-dasar); line-height: 1.6; background-color: var(--warna-latar); color: var(--warna-teks); }
h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* ---------- 3. Cangkang aplikasi ---------- */
.cangkang-app {
display: grid;
grid-template-areas: "samping kepala" "samping utama";
grid-template-columns: var(--lebar-samping) 1fr;
grid-template-rows: auto 1fr;
height: 100dvh;
}
.sidebar { grid-area: samping; }
.kepala-app { grid-area: kepala; }
.isi-utama { grid-area: utama; overflow-y: auto; display: grid; gap: var(--jarak-5); align-content: start; padding: var(--jarak-5); }
.isi-kaki { font-size: 12.5px; color: var(--warna-teks-lembut); text-align: center; }Ringkasan #
Bagian ini menata fondasi proyek: token warna teal dengan pasangan hijau-merah untuk arus kas, skala spasi, dan cangkang aplikasi 100dvh yang peta areanya terbaca seperti denah. Kontrak gulir sudah jelas — hanya area utama yang bergerak. Pada Bagian 2 kita mengisi kolom samping itu dengan sidebar gelap, menu bertanda aktif, dan persiapan tombol sakelar untuk layar kecil.