🕺 👋🏿 🧜 Berpikirlah seperti pengembang front-end ✍️ 🧑🏾‍🤝‍🧑🏾 🚉

Halo Habr! Kami telah memulai aliran baru kursus pengembang Frontend , dan saya berbagi dengan Anda daftar periksa kecil untuk frontend tentang cara berpikir saat membuat tata letak, pertanyaan apa yang harus Anda tanyakan pada diri sendiri. Jangan ragu untuk membookmarknya jika Anda ingin memberi tahu ~~Padawan~~ Jun Anda sisi mana yang mendekati desain tata letak, tetapi jangan buang waktu Anda untuk menjelaskan hal-hal yang relatif sederhana.

Saya bertanya di Twitter apa lagi yang harus saya tulis di CSS? Salah satu saran yang menarik perhatian saya adalah tentang berpikir saat mengimplementasikan layout CSS. Ini melibatkan pemikiran tentang kemungkinan solusi dan banyak pertanyaan untuk mendapatkan desain yang benar. Di sini, saya akan menunjukkan kepada Anda pendekatan saya untuk memikirkan tata letak baru dan bagaimana Anda dapat menerapkan langkah-langkah yang sama pada pekerjaan Anda. Kamu siap? Mari selami.

Detail ke samping

Hal pertama yang biasanya saya lakukan adalah menunda detail desain untuk nanti. Ini berarti saya menyoroti bagian utama dari tata letak tertentu dan mulai memikirkannya terlebih dahulu. Saya tahu detailnya penting, tetapi ini sementara, jadi kita bisa fokus pada detail tingkat tinggi terlebih dahulu. Pertimbangkan antarmuka pengguna berikut:

Dalam konstruksi ini, kami memiliki yang berikut:

Judul / Navigasi.
Bagian utama.
Bagaimana itu bekerja.

Mungkin tergoda untuk mulai memikirkan detail kecil terlebih dahulu, bukan pada tingkat abstraksi yang tinggi. Jika saya diminta untuk menyederhanakan pendekatan secara visual, saya akan mengatakan bahwa pengembang front-end harus memakai kacamata yang hanya memungkinkan elemen tata letak tingkat tinggi terlihat, seperti ini:

Perhatikan bahwa dengan kacamata Anda hanya dapat melihat komponen UI tingkat tinggi yang penting. Pendekatan ini akan membantu Anda memikirkan cara menyusun komponen, alih-alih memikirkan bagian-bagian kecil dari setiap komponen. Beginilah cara saya berpikir:

Header lebar penuh: Sepertinya header mencakup lebar viewport penuh dan kontennya di dalam pembungkus tidak terbatas.
Konten elemen hero berada di tengah secara horizontal, dan perhatikan bahwa itu perlu disetel ke max-width (paragraf memiliki dua baris).
Cara kerjanya: Ini adalah tata letak 4 kolom, bagian secara keseluruhan dibungkus.

Sekarang, ketika saya ingin mengerjakan kodenya, saya membuat prototipe cepat hanya untuk melihat kemajuannya dengan cepat.

<header></header>

<section class="hero">
  <!-- A div to constraint the content -->
  <div class="hero__content"></div>
</section>

<div class="wrapper">
  <!-- 4-columns layout -->
  <section class="grid-4"></section>
</div>

Karena kami memiliki bagian 4 kolom, saya akan menggunakan kisi CSS untuk itu. Ini adalah aplikasi yang sempurna untuknya.

.wrapper {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: 1140px;
}

.hero__content {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

Itu adalah contoh berpikir cepat dengan kacamata. Sampai sekarang, saya bahkan belum memikirkan desain responsif. Saya memiliki beberapa pertanyaan tentang detail beberapa komponen, tetapi saya tidak akan membahasnya lebih dalam sekarang. Baca tentang itu di bagian "selami detail" di akhir artikel. Sekarang setelah Anda mendapatkan idenya, saya akan memberi Anda beberapa contoh pemikiran tingkat tinggi sehingga Anda dapat lebih memahaminya.

Halaman artikel

Dalam contoh ini, kami memiliki tata letak halaman artikel. Berikut adalah antarmuka pengguna yang berisi:

Judul.
Judul halaman.
Pratinjau gambar untuk artikel.
Isi artikel.
Panel samping (kanan).

Sekarang setelah Anda memiliki gambaran seperti apa desainnya, mari kenakan kacamata sehingga kita hanya dapat melihat elemen tingkat tinggi.

Di sini mereka:

Header situs yang menjangkau seluruh lebar halaman.
Judul halaman berisi judul artikel beserta deskripsinya, isi rata kiri menggunakan max-width.
Tata letak dua kolom yang berisi elemen utama dan bilah sisi .
Konten bagian dalam artikel yang dipusatkan secara horizontal dan memiliki lebar maksimal .

Judul halaman artikel

Tidak perlu menerapkan metode tata letak apa pun di sini. Lebar maks sederhana akan melakukan pekerjaan itu. Pastikan untuk menambahkan bantalan horizontal sehingga tepi elemen tidak menempel ke tepi dalam area pandang kecil.

.page-header {
  max-width: 50rem;
  padding: 2rem 1rem;
}

Artikel - alas dan sidebar

Elemen utama (utama) artikel menempati seluruh lebar viewport dikurangi lebar sidebar. Biasanya, sidebar harus memiliki lebar tetap. Kisi CSS sangat ideal untuk ini.

.page-wrapper {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 800px) {
  grid-template-columns: 1fr 250px;
}

Isi bagian dalam artikel harus dibatasi di dalam bungkusnya.

.inner-content {
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

Sekarang setelah Anda memiliki ide tentang keputusan tingkat tinggi yang harus dibuat saat membuat tata letak, langkah selanjutnya adalah memikirkan tentang bekerja dengan setiap bagian dalam hal desain.

Menyelami detailnya

Bagaimana itu bekerja

Dalam contoh artikel pertama, saya mengatakan bahwa kita akan mendalami detailnya nanti. Saat ini telah tiba.

Pengeras suara

Apakah kita memiliki kasus dimana jumlah langkah bisa lebih sedikit atau lebih banyak? Jika ya, bagaimana cara bekerja dalam situasi seperti ini?
Apakah tinggi kolom harus sama, terutama jika kartu memiliki teks yang sangat panjang?

Judul

Apakah kita perlu mengesampingkan bagian header? Atau adakah saat-saat ketika itu harus mengambil seluruh lebar?

Desain adaptif

Dalam situasi apa Anda perlu melipat untuk mengubah ukuran anak-anak suatu bagian? Apakah kita memiliki semacam pelatuk lipat? Jika ya, apa pemicu ini?

Berikut beberapa kemungkinan situasi dengan bagian ini. Bagaimana menurut anda? Sebagai pengembang front-end, Anda harus mempertimbangkan kasus edge ini. Ini bukan hanya tentang membuat antarmuka pengguna tanpa memperhitungkan detail tersembunyi tersebut.

Saya tidak akan menjelaskan secara detail tentang apa kode untuk setiap variasi, karena artikel ini berfokus pada proses pemikiran , tetapi saya ingin menunjukkan kepada Anda sesuatu seperti itu. Perhatikan bahwa di versi pertama dan ketiga dari tata letak sebelumnya, kami memiliki tiga langkah, bukan dua. Bisakah kita membuat CSS dinamis sehingga menangani situasi untuk kita? Maksud saya menambah jumlah langkah dari dua menjadi tiga.

<div class="wrapper">
  <section class="steps">
    <div>
      <h2>How it works</h2>
      <p>Easy and simple steps</p>
    </div>
    <div class="layout">
      <div class="layout__item">
        <article class="card"></article>
      </div>
      <div class="layout__item">
        <article class="card"></article>
      </div>
      <div class="layout__item">
        <article class="card"></article>
      </div>
    </div>
  </section>v
</div>


.steps {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
}

@media (min-width: 700px) {
  .steps {
    grid-template-columns: 250px 1fr;
  }
}

.layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
}

@media (min-width: 200px) {
  .layout {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

Saya menggunakan grid CSS dengan minmax()

dan kata kunci auto-fit

. Ini berguna ketika jumlah kartu dapat ditambah atau dikurangi. Tonton videonya di bawah ini:

Bagian pahlawan

Hal pertama yang saya lakukan ketika saya ingin membuat bagian atau komponen baru adalah menanyakan banyak pertanyaan kepada diri saya sendiri. Inilah yang akan saya pikirkan saat membuat bagian pahlawan.

Gambar bagian

Bagaimana seharusnya gambar itu ditampilkan? Apakah gambar ini berubah setiap hari, atau haruskah diperbarui dengan CMS?
Haruskah kita menggunakan HTML atau background di CSS?
Berapa rasio aspek yang diharapkan dari gambar?
Apakah saya perlu menggunakan beberapa ukuran gambar tergantung pada ukuran viewport?
Mungkin kita tidak punya gambar, tapi video? Saya pernah mengalami situasi ketika, setelah mengerjakan gambar, klien mengatakan bahwa alih-alih gambar, video dibutuhkan.

Tinggi bagian

? , , ?

? , , .

? , : — px, CSS clamp()?

Bergantung pada sifat proyek yang Anda kerjakan, Anda harus menemukan jawaban atas pertanyaan-pertanyaan ini. Ini akan membantu menentukan bagaimana komponen pahlawan harus dibuat. Terkadang sulit untuk mendapatkan jawaban atas setiap pertanyaan ini, tetapi semakin banyak pertanyaan yang Anda ajukan, semakin besar kemungkinan Anda untuk mendapatkan hasil yang baik tanpa kesalahan.

Dalam komponen kita, saya akan membahas tentang jarak antara anak-anak. Untuk tugas ini, saya suka menggunakan properti flow-space. Saya mempelajarinya dari blog Piccalil Andy Bell. Tujuan kami adalah memberikan jarak antara elemen yang terkait langsung:

<section class="hero">
  <!-- A div to constraint the content -->
  <div class="hero__content flow">
    <h2>Food is amazing</h2>
    <p>Learn how to cook amazing meals with easy and simple to follow steps</p>
    <a href="/learn">Learn now</a>
  </div>
</section>

.flow > * + * {
  margin-top: var(--flow-space, 1em);
}

Dan yang terakhir

Seperti yang telah Anda lihat, proses penerapan sebuah komponen tidak hanya tentang membuatnya benar-benar sesuai untuk desain, tetapi juga tentang bertanya pada diri sendiri dan memikirkan kasus edge. Saya harap Anda belajar sesuatu dari artikel ini. Dan jangan lupakan kode promo HABR yang menambahkan 10% pada diskon banner.

Lebih banyak kursus

Berpikirlah seperti pengembang front-end