Setiap kali saya menyebut bahwa saya membangun layout responsive tanpa Bootstrap atau Tailwind, ada dua reaksi yang muncul. Pertama, ada yang angkat alis dan bilang "Wah, ribet amat. Kenapa tidak pakai Bootstrap saja?" Kedua, ada yang penasaran dan tanya "Emang bisa? Gimana caranya?"

Jawaban untuk keduanya sama: bisa, dan memang perlu lebih banyak kesabaran. Tapi ada alasan mengapa saya tetap pilih jalan ini untuk project-project tertentu.

Kenapa Tidak Selalu Pakai Framework CSS?

Bootstrap dan Tailwind bukan produk jelek. Jauh dari itu — keduanya tools yang sangat bagus dan dipakai jutaan developer di seluruh dunia. Saya sendiri pernah pakai Bootstrap di beberapa project.

Masalahnya bukan di kualitas framework-nya. Masalahnya adalah ketergantungan dan ukuran file. Bootstrap versi lengkap itu besar. Kamu mungkin hanya butuh sistem grid dan beberapa komponen, tapi tetap harus load CSS ratusan KB yang isinya banyak yang tidak akan pernah kamu pakai.

Untuk website yang mengutamakan performa — terutama di koneksi yang tidak selalu kencang — setiap kilobyte itu penting.

Dasar yang Perlu Kamu Kuasai

Untuk membuat layout responsive tanpa framework, ada tiga konsep CSS yang harus benar-benar dipahami, bukan sekadar tahu sintaksnya:

Media Queries — ini fondasinya. Dengan media query, kamu memberikan instruksi berbeda kepada browser tergantung ukuran layar:

/* Default: mobile */
.container {

padding: 1rem;

}


/* Tablet ke atas */

@media (min-width: 768px) {

.container {

max-width: 960px;

margin: 0 auto;

padding: 0 2rem;

}

}

Flexbox untuk layout satu dimensi. Tiga baris ini sudah bisa membuat item berjejer di layar lebar dan menumpuk di layar kecil:

.card-container {
display: flex;

flex-wrap: wrap;

gap: 1.5rem;

}


.card {

flex: 1 1 280px; /* tumbuh, keriput, minimal 280px */

}

CSS Grid untuk layout dua dimensi. Ini yang paling powerful untuk layout halaman keseluruhan:

.layout {
display: grid;

grid-template-columns: 1fr;

}


@media (min-width: 768px) {

.layout {

grid-template-columns: 2fr 1fr; /* konten + sidebar */

gap: 2rem;

}

}

Bagian yang Perlu Kesabaran

Saya tidak akan berbohong — ada bagian yang memang melelahkan. Testing di berbagai ukuran layar perlu dilakukan manual. Kadang ada edge case yang tidak kamu antisipasi — seperti teks yang terlalu panjang tapi tidak bisa dipecah, atau gambar yang tidak mau scale dengan benar di ukuran layar tertentu.

Tapi setiap masalah yang kamu selesaikan sendiri menambah pemahaman yang tidak bisa didapat dari pakai framework. Kamu benar-benar tahu kenapa sesuatu bekerja, bukan hanya tahu class apa yang harus ditambahkan.

Dan itu investasi jangka panjang yang menurut saya sepadan.

Kalau kamu sedang belajar responsive design dan ada bagian yang bikin bingung, jangan ragu tanya di komentar. Lebih baik bingung dan tanya daripada bingung dan diam.