ExploreCSS — Penerapan CSS Grid Untuk Desain 2 Dimensi.
Pada tulisan ini akan fokus ke penggunaan CSS Grid dengan properti template-grid-areas, menyesuaikan dengan desain yang ingin dieksplorasi.
Sebelum melanjutkan membaca, saya ingin sampaikan:
- Mohon dimaklumi jika tulisan saya pasti tidak standard KBBI.
- Saya menggunakan PUG dan SASS dalam pengkodean.
Jadi gini…
Banyak sekali tutorial terkait CSS grid, disini saya ingin berbagi pengalaman bagaimana menerapkan penggunaan CSS grid dalam membuat kerangka website.
“Flexbox is for just one dimensional alignment, while grid is for two” — Chris Lilley
Yang dimaksud dengan 2 dimensi adalah ketika dalam 1 kerangka memiliki jumlah kolom dan baris yang variatif, se-simple itu sih penggunaan CSS Grid.
Nah, untuk mempelajari CSS Grid berbahasa Indonesia yang lengkap dan mudah dipelajari, silakan tonton penuh tutorialnya di Chanel Youtube Web Programming UNPAS yang dibawakan oleh Bapak Dosen Indonesia Sandhika Galih 😁
Without further ado, langsung aja gaaaaaas!, berikut studi kasus penerapan CSS Grid untuk desain 2 dimensi dari desain yang dibuat oleh mas Dwinawan
Analisa Desain
Dari desain Header Hero, untuk bagian navigasinya tidak akan dikerjakan, jadi fokus ke bagian-bagian Header Hero-nya saja. Terlebih dahulu, tentukan jumlah kolom dan baris pada kerangka Header Hero.
Hasil analisa, terdapat 6 kolom dan 5 baris, untuk menentukan kolom dan baris, saya pilih bagian terkecil dari cell-nya, yaitu bagian tombol Call To Action “Join The Class”.
Kemudian bagi kolom dan baris berdasarkan bagian-bagiannya.
Kesimpulannya, dari desain Header Hero, dapat mendefinisikan:
- Kerangka Header Hero, memiliki 6 kolom dan 5 baris
- Bagian Heading, memiliki 5 kolom dan 1 baris
- Bagian CTA, memiliki 1 kolom dan 1 baris
- Bagian Mentor, memiliki 2 kolom dan 3 baris
- Bagian Trailer, memiliki 1 kolom dan 2 baris
- Bagian About, memiliki 2 kolom dan 1 baris
- Bagian Square/Shape, memiliki 1 kolom dan 1 baris
- Bagian Testimonial, memiliki 3 kolom dan 2baris
Mulai Konversi Desain Ke Kode
Dari hasil analisa desain Header Hero dan kesimpulannya, dari sini saya akan mulai bahas terkait trik dan teknik konversi desain.
Tulis kode kerangka utama
Dari kerangka utama, membutuhkan 8 elemen HTML, di antaranya:
Setelah kerangka HTML sudah dibuat, kemudian masuk ke proses styling.
value dari grid-template-areas tidak begitu jelas untuk dibaca, berikut penjabarannya agar lebih mudah dibaca:
// Baris 1
"heading heading heading heading heading cta"// Baris 2
"mentor mentor . about about shape"// Baris 3
"mentor mentor . testimonial testimonial testimonial"// Baris 4
"mentor mentor trailer testimonial testimonial testimonial"// Baris 5
". . trailer . . ."
Saat proses styling, saya menggunakan CSS Grid dengan properti grid-template-areas, kenapa? Dikutip dari mozila developer Network, penggunaan grid-template-areas memiliki aturan-aturan berikut:
- Setiap kolom dan baris sudah didefinisikan fungsi areanya.
- Diperuntukan untuk nama dari bagian-bagian yang sudah dispesifikasikan fungsinya, yang didefinisikan melalui properti
grid-area
Nah, karena dari desain sudah ditentukan kebutuhannya tiap cells, maka pilihan yang tepat ya menggunakan properti grid-template-areas.
Kemudian, setiap bagian yang ada di kerangka Header Hero, didefinisikan sesuai fungsinya.
Hasilnya dari mengkonversi kerangka utama desain ke kode.
Pada dasarnya, kebutuhan implementasi penggunaan CSS Grid sudah mencukupi, tinggal melakukan styling tiap bagian-bagiannya.
Meyempurnakan Kerangka Utama
- Styling background-nya.
- Styling kerangka utamanya.
- Menambahkan garis putih.
Menyempurnakan Desain
Agar tulisan tidak terlalu panjang dan melebar, untuk hasil akhirnya saya sertakan demo dan source-code agar bisa dicek.
Kesimpulan
- Saat ingin mengkonversi desain ke dalam template, pastikan dulu kamu tahu cara mengerjakannya, bisa nyari referensi terlebih dahulu.
- Sebenernya tidak harus selalu menggunakan CSS Grid, bisa jadi ada cara praktis lainnya, cuman yang saya pelajari, sesedikit mungkin HTML yang kamu tulis, semakin mudah untuk di-maintenance. Begitupun dengan CSS. Wait … kayaknya semua jenis penulisan kode ya seminimal mungkin ya harusnya wkwkwkw.
- Kalo pake Framework gimana? Ya bisa aja, pelajari dulu framework-nya. Misal nih, pake tailwind, gampang banget, tapi nggak pake template-grid-areas sih….
- Nah, Pikirkan dulu layout-nya, baru detailnya.
