CSS: #3 Pixel Perfect Design.

Relatif atau absolut? Mana aja yang penting kamu bisa tidur.

Spacing in header not same as mockup... Salah satu isu dari feedback yang kuterima di akhir minggu, sebuah dilema sebenarnya. Kenapa? Ya, mungkin karena fitur yang kukerjakan saat menerima tiket dengan isu tadi adalah responsiveness. Pernah ketemu fluid design yang menyesuaikan luas viewport dari device berbeda belum? Kalau saja kita bisa mengesampingkan besar berkas styling dan waktu pengembangan pada suatu proyek, mungkin akan aku bikin layout sesuai mockup dengan berbagai media-query yang diminta. Masalahnya bukan demikian, technical-debt dari layout yang melenceng jauh dari design-spec akan membuat kita kewalahan. Semisal ada feedback lagi sedangkan waktu yang tersisa untuk menyelesaikan pembaharuan cukup singkat.


.card {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
    @include media-breakpoint-up(md) {
      min-width: 300px;
      padding: 20px 15px;
      margin: 40px 20px;
    }
    @include media-breakpoint-up(sm) {
      min-width: 100%;
      padding: 2rem 1rem;
      margin: 3rem 1rem;
    }
    @include media-breakpoint-up(lg) {
      min-width: 450px;
      padding: 30px 20px;
      margin: 40px 30px;
    }
}

Fluid layout kadang disalahartikan sebagai penyimpangan, konsistensi terhadap design-spec memang perlu ditilik ulang jika mockup hanya mencakup desktop viewport saja, katakan resolusi 1920px adalah batas minimal large-size alias lg. Maka dengan bantuan mockup kita menggunakan satuan px untuk padding, margin, dan fixed width. Lalu menyusun kembali layout tadi dengan penampakan diperkecil untuk ukuran medium-size, katakanlah resolusi 1360px. Proses ini kembali dikerjakan untuk small-size screen dan komponen lain seperti header di isu tadi. Pekerjaan berulang mungkin melelahkan apalagi jika satuan yang digunakan adalah fixed seperti px. Bagaimana jika pada resolusi 1440px layout yang kita susun tadi sudah tidak relevan dengan mockup?


.card {
    @include media-breakpoint-down(1440px) {
      min-width: 350px;
      padding: 22px 17px;
      margin: 30px 19px;
    }
}

Baiklah kita tambahkan satu file bernama last-minute-fixing.scss ke dalam index.scss dengan kode seperti di atas. Besok akan muncul lagi dengan resolusi 1200px atau resolusi 1024px. Melelahkan bukan? Tepat di sini kita terpikirkan untuk menggunakan satuan relatif, seperti rem atau vh/vw. Solusi yang terpikirkan ini tak semudah yang dibicarakan, isu di atas adalah awal mula kejadian satuan relatif digunakan, bukan karena kurang telitinya media-breakpoint yang tersedia. Satuan relatif akan sangat rentan jika dibandingkan dengan mockup. Pada akhirnya QA, Client, bahkan end-user akan menggunakan device dengan resolusi viewport yang berbeda. Technical-debt untuk menggunakan satuan relatif akan lebih makan banyak waktu daripada ngoding ikut mockup dan merekonstruksi layout per media-breakpoint. Namun, aku belum menyerah. Pada dasarnya satuan relatif dapat diubah dengan satu konstan adalah sebuah solusi yang tak banyak makan waktu. Jika saja kita mau mengkalkulasi bagian desain yang banyak berubah dan luasnya viewport lalu menjadikannya batasan untuk layout di komponen lain. Asumsinya setiap komponen kita ubah dengan satuan relatif tanpa terkecuali. Bukan pekerjaan mudah, tapi bukan pekerjaan mustahil.