CSS Grid & CSS Flexbox — Handoff Desain ke Code Prototype jadi sesantai ini sih.

Studi kasus memadukan CSS Grid & CSS Flexbox yang efektif untuk mengembangkan kerangka HTML.

Semua cara bisa dilakukan untuk membuat layout, yang saya tulis ini belum tentu Best Practice, hanya berdasarkan pengalaman saya.

https://unsplash.com/photos/vw3Ahg4x1tY

Waktu itu, saya merasa sudah cukup menggunakan CSS Flexbox dan skeptis dengan adanya CSS Grid — seperti biasa, dengan kesombongan diri bergumam dalam hati

“Ngapain sih pake CSS Grid, toh CSS Flexbox juga udah cukup”.

Namun ketika saya nyoba implementasi CSS grid dalam sebuah project membuat template admin dashboard, ternyata, saat itu saya langsung menelan ludah saya sendiri.

“Gila, enak banget nih grid”.

Awalnya sih saya bingung, kapan harus pake CSS flexbox dan kapan harus pake CSS grid. Karena keduanya bisa digunakan dalam situasi apapun. Namun, setelah scrolling-scrolling di twitter saya keinget twit-nya @bdc (LoL diskusinya 2017, tulisannya di 2020, di akhir tahun lagi) dan singkat cerita, hasil dari diskusi, ada tweet yang membuat kebingungan saya terjawab

https://twitter.com/svgeesus/status/651397159473008640?s=20

“Flexbox is for just one dimensional alignment, while grid is for two” — Chris Lilley

• CSS Grid
  Untuk desain yang memiliki 2 dimensi, biasanya kerangka utama sebuah halaman dan setiap section.
• CSS Flexbox
  Untuk desain yang memiliki 1 dimensi. biasanya untuk komponen-komponen yang sering digunakan.

Selama memadukan CSS grid & CSS Flexbox, yang saya rasakan, di antaranya:

• Less Code. Sedikit banget ngoding HTML & CSS-nya.
• Managable. Gampang banget ngatur layout dibandingkan dengan pake cara yang lainnya.

Halah, ternyata saya baru sadar dari awal paragraf menulis sampai paragraf ini, terlalu banyak basa-basi, mending langsung saja ke studi kasusnya aja deh ya 😆 ✌️

Studi Kasus, Convert UID* Admin Dashboard ke Code Prototype. Asli santai banget, dah.

• Disclaimer ya, tulisan ini bukan tutorial, lebih ke sharing pengalaman aja.
• *UID, User Interface Design

Dari (anggap saja wireframe tersebut adalah UID 😆) UID tersebut, kita diskusikan dengan designer, saat pengguna mengakses halaman ini, interaksinya mau bagaimana. Singkat cerita, si Devi sebagai designer diskusi dengan si Krisdiansyah sebagai UI developer. Hasil berdiskusi, code prototype-nya harus:

• Sidebar & Header-nya fixed position.
• Scrolling-nya jangan di body, tapi di container-nya.
• Container untuk nampung komponen-komponen lainnya dibuat dinamis.
• Container maksimal lebarnya 1400px dan dibuat centering.
• Footer-nya masuk ke Container-nya.

Untuk Responsive-nya:

• Sidebar-nya dibikin full-screen dengan hide-show pas diklik.
• Section Callout di swipe/scroll vertical.
• Section products, di bagian deskripsi dan tombol pengaturan dihilangin, gambar & judul dibikin 2 kolom dalam 1 baris.
• Header-nya tetap fixed scroll dan full-width.

Ya, begitulah hasil diskusi antara si Devi ̶d̶a̶n̶ Krisdiansyah. Akhirnya sudah jelas apa yang harus dibuat. Saya (Kali ini sebagai si Krisdiansyah) langsung define kebutuhan UI development, di antaranya:

• Kebutuhan utamanya Single-Page Application.
• Static layouts-nya di sidebar dan Header.
• VueJS sebagai JS framework-nya.
• Pug sebagai Template Engine.
• SASS sebagai CSS preprocessor-nya.

Kerangka Utama

Dari UID di atas, untuk membuat kerangka utamanya, saya definisikan seperti gambar dibawah ini:

AppShell.vue

shell.sass

localhost:8080

Kita coba membuat layout yang sama dengan cara CSS position sebagai pembanding dengan CSS Grid.

shell.sass

Dengan hasil yang terlihat sama, (yang mana beda) kita bisa lihat code mana yang lebih efektif dalam konteks less code.

• Dengan CSS grid kita hanya perlu menulis 14 baris code dibandingkan 18 baris code.
• Dengan CSS grid kita hanya perlu menulis 10 CSS Properties dibandingkan 12 properties CSS.
• Semua pengaturan posisi child selector dilakukan oleh parent selector, sedangkan CSS position berdiri sendiri.
• Meskipun subjektif, penggunaan CSS Grid lebih enak dibaca dibandingkan CSS position.

Well, saya belum menemukan teknik lain yang lebih efisien, mungkin kalo nyari referensi di cssbattle, bisa aja ada yang lebih efisien, bahkan mind-blowing.

Kerangka Beres, waktunya ke Section.

Dari kedua section dalam desain, kita definisikan dan tentukan dulu mana yang akan dibuat.
Biasanya, saya kalau mengubah desain ke dalam code prototype itu per-section versi dekstop dulu baru versi mobile. Kenapa? Karena (anggap saja) konteksnya di sini pengguna akan lebih banyak mengaksesnya di dekstop.

Section Callout

Nah, di sini yang asyik sih menurut saya. Langsung aja definisikan kebutuhannya:

• Parent selector menggunakan CSS Grid untuk membungkus komponen-komponen callout (child selector).
• Komponen callout dibuat menggunakan CSS Flexbox.
• Saat responsive, Parent selector menggunakan CSS Flexbox untuk memenuhi kebutuhan swipe komponen callout, karena sampai saat tulisan ini dibuat, saya belum nyari referensi dan artikel terkait possibility swipe/scroll vertical menggunakan CSS Grid.

Callout.vue

Harusnya callout.vue ini dibuat komponen, karena ini untuk kebutuhan demo yang penting esensinya sudah sesuai konteks.

_dashboard.sass

_callout.sass

localhost:8080

Efektifnya di mana? Perasaan biasa aja.

Berikut beberapa point efektifnya yang saya temukan, kita coba bandingkan dengan menggunakan struktur CSS bootstap (karena lebih banyak digunakan oleh kalangan developer)ketika akan membuat layout 4 baris.

https://getbootstrap.com/docs/4.5/layout/grid/

1 — Di CSS Bootstrap, kita harus mendefinisikan dulu parent selector-nya dengan class .row untuk mengatur padding antar child biar tidak overlap, trick-nya adalah memberi nilai negative di parent selector agar child selectors
bisa balance dengan parent selector-nya.
Pahamkan maksudnya? hehehe

.row {
    ...
    margin-right: -15px;
    margin-left: -15px;
}
.col {
    ...
    padding-left: 15px
    padding-right: 15px
}

Dengan CSS grid, hal itu solved dengan menambah properti CSS gap di parent selector-nya

gap: 1rem

2 — Di bootstrap, Child selectors atau kolom harus di definisikan terlebih dahulu ukurannya, pada umumnya.col-1 ... .col-12. Jadi, child selector yang mengatur banyaknya kolom dalam sebuah Parent Selector, sedangkan di Parent Selector tidak bisa menentukan banyak kolom di dalamnya.

HTML

.row
   .col-3
   .col-3
   .col-3
   .col-3

CSS

.col-3
    flex: 0 0 25%;
    max-width: 25%

Dengan CSS Grid, kita bisa atur semuanya cukup di class parent selector-nya saja. Child selectors bisa mengikuti aturan dari parent selector-nya.

grid-template-columns: repeat(4, minmax(0, 1fr))

Selain diatur parent selector, Child Selector bisa juga mengatur diri sendiri. Less code, manageable.

Eeeeits! bisa kok pake class .col di child selector-nya, ntar ngikutin sendiri loh ukurannya~

Yaps, untuk konteks static yang pasti ada 4 kolom, dengan class .col di atas sudah terjawab. Tapi bagaimana jika:

1. Parent selector baru menampilkan 2 kolom?
2. Parent selector ternyata menampilkan lebih dari 1 baris?

Apakah masih efektif hanya menggunakan class .col saja? Seperti di kasus section products?

Mari kita lanjutkan di tulisan berikutnya untuk mengupas kasusnya ….

CSS Flexbox efektif untuk membuat komponen-komponen [coming soon]

Akhir kata …

• Tulisan ini bukan tutorial, hanya berbagi pengalaman.
• Jika saya membuat tutorial terkait CSS Grid & CSS flexbox, mendingan langsung belajar dari Bapak Dosen Indonesia kita semua Sandhika Galih di channel youtube Web Programming UNPAS
  - CSS Grid
  - CSS Flexbox
• Studi kasus lebih advance yang dibuat oleh Bapak Web Indonesia Yohan Totting di channel wwwid
  - Bikin layout aplikasi mobile web dengan HTML & CSS
• Belajar CSS Grid & CSS Flexbox yang asyik kayak main game, bisa kunjungi website berikut:
  - https://flexboxfroggy.com
  - http://www.flexboxdefense.com
  - https://cssgridgarden.com
• Karena saya bukan React Dev, jadi saya ga tau gimana pengembangan dengan CSS in JS.
• Kalo pake CSS Tailwind, it’s on another level, sih.