CSS One Line Layout

Kali ini saya akan sedikit berbagi tentang implementasi dari pembuatan layout sederhana menggunakan CSS Properties yang sangat simpel. Simpel dalam artian hanya membutuhan jumlah code yang sangat minimal.

Latar belakang dari proyek ini berdasarkan pada tautan yang dibuat oleh salah seorang Web Developer dari Google, https://1linelayouts.glitch.me/. Dari situ saya mencoba mengimplementasikan kasus-kasus tersebut ke dalam sebuah desain nyata dari UI Design Daily, sehingga diharapkan dapat lebih mudah memahami bagaimana cara menggunakan study-case tersebut.

Referensi Design

Semua design saya dapatkan dari UI Design Daily, yang merupakan OpenSource UI design gratis dan selalu up to date setiap hari.

Berikut ini beberapa referensi desain yang saya pilih untuk membuat beberapa tata letak:

1. Design 1
   
   
2. Design 2
   
   

Stack

Berikut ini adalah beberapa tech-stack yang saya digunakan dalam proses development:

Implementasi

Berikut adalaah beberapa case yang saya pilih berdasarkan referensi dari https://1linelayouts.glitch.me/.

1. Super Centered layout

Case ini bertujuan untuk membuat konten berada di tengah secara vertikal maupun horizontal di dalam sebuah box / div / container.

Biasanya, kita membuat centered layout menggunakan CSS Property absolute dengan kombinasi transform dan margin: auto , atau juga menggunakan flexbox.

Kali ini kita cukup menggunakan 2 CSS Properti display: grid; dan place-items: center; . Hal tersebut bisa dilakukan karena CSS grid support untuk membuat layout secara 2 dimensi (vertikal & horizontal).

Berikut shortcodenya:

.l-center-content {
    display: grid;
    place-items: center;
}

2. The Deconstructed Pancake layout

Case ini untuk membuat konten memiliki lebar yang tetap sama, otomatis bertumpuk ketika berada di layar ponsel, juga membentang pada baris yang sama.

Berikut shortcodenya:

.l-deconstructed-pancake {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.l-deconstructed-pancake__item {
    flex: 0 1 220px;
    margin: 0 8px;
}

.l-deconstructed-pancake__item--stretch {
    flex: 1 1 220px;
}

3. Pancake Stack layout

Case ini untuk membuat konten memiliki dimensi yang sama.

Ini sangat cocok digunakan ketika kita membuat layout umum yang berisi header, konten, dan footer. Case ini akan membuat header dan footer tetap berada di posisinya meskipun konten tidak sepenuhnya menutupi viewport. Hal ini dapat mengatasi masalah jika halaman situs web tidak memiliki cukup konten untuk ditampilkan seperti halaman pencarian tidak ditemukan, dll.

Berikut shortcodenya:

.l-pancake-stack {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

4. RAM (Repeat, Auto, Minmax) layout

Case ini mirip dengan The Deconstructed Pancake layout. Namun yang berbeda yaitu, di case ini menggunakan strategy CSS Property yang berbeda, yakni menggunakan grid-template-columns.

Akan terlihat bedanya pada saat screen dikecilkan.

Berikut shortcodenya:

.l-ram {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

5. Respect for Aspect layout

Case ini digunakan untuk mempertahankan rasio sebuah konten menggunakan properti CSS aspect-ratio .

Biasanya, kita membuat rasio sebuah content (biasanya image) menggunakan kombinasi antara padding-top dan position: absolute. Tapi, sekarang kita dapat membuat case tersebut hanya dengan kode CSS sederhana.

Berikut shortcodenya:

.l-ratio-16x9 {
    aspect-ratio: 16 / 9;
}

Semua study-case di atas tersedia di link berikut https://one-line-layouts.vercel.app/


Sekian. Terima Kasih 😅 🙏🏻