Модуль 27

Buttons, cards та UI-компоненти

Ось готовий урок у стилі CS50, адаптований під тему UI-компоненти.

🎓 CS50-Style: Buttons, Cards та Магія UI-компонентів

Привіт, друзі! Радий бачити вас.

Сьогодні ми не просто пишемо код. Ми збираємося навести лад у хаосі.

1. 🔥 Вступ: Чому Copy-Paste — це зло?

Уявіть собі ситуацію. Ви будуєте наступний великий стартап — скажімо, аналог Airbnb. У вас на сайті є 5,000 оголошень про оренду квартир. Кожне оголошення має фото, ціну, заголовок і кнопку «Забронювати».

Ви, як старанний новачок, берете HTML-код для однієї квартири... і копіюєте його 5,000 разів. Працює? Працює.

Але тут приходить дизайнер і каже: "Слухай, а давай зробимо ціну червоною, а кнопку — круглою?"

Риторичне запитання: Що ви будете робити? 1. Підете у всі 5,000 місць і будете вручну змінювати код (і витратите на це тиждень)? 2. Чи, можливо, є спосіб змінити це в одному місці, і воно магічним чином оновиться скрізь?

Якщо ви обрали варіант №2 — вітаю, ви почали мислити як інженер.

Аналогія: Уявіть, що ви будуєте дім із LEGO. У вас є стандартні цеглинки (2x4, 1x2). Вам не потрібно щоразу відливати пластик, щоб створити нову деталь. Ви берете готову деталь (компонент) і використовуєте її. * Кнопка (Button) — це проста цеглинка. * Картка (Card) — це вже зібраний блок із кількох цеглинок (стіна з вікном).

Сьогодні ми навчимося створювати власні "LEGO-деталі" для вебу.

2. 🧠 Теоретична база: Атоми та Молекули

У розробці інтерфейсів є концепція, яку ми називаємо "Атомарний дизайн" (Atomic Design). Не лякайтеся назви, все просто:

  1. Атоми: Це найдрібніші неподільні елементи. Наприклад: Кнопка, Іконка, Поле вводу. Самі по собі вони прості.
  2. Молекули: Це група атомів, які працюють разом. Наприклад: Картка товару (картинка + заголовок + ціна + кнопка).

Як це працює "під капотом"?

Коли браузер бачить ваш код, він шукає Класи (Classes). Клас — це ваш контракт із браузером. Ви кажете: "Дивись, усе, що має ім'я .btn, має бути зеленим і з заокругленими кутами".

Ось що треба запам’ятати залізно: * Reusability (Повторне використання): Ми пишемо CSS один раз, а використовуємо HTML-клас скільки завгодно. * Consistency (Узгодженість): Всі кнопки на сайті виглядають однаково. Користувач не плутається.

Інтуїтивно: Думайте про класи як про уніформу. Одягнув форму поліцейського — ти поліцейський. Одягнув клас .card — ти картка.

3. 🧪 Приклади: Від простого до складного

Давайте перейдемо до коду.

Рівень 1: Його Величність Кнопка (Atom)

Ми хочемо кнопку, яка виглядає клікабельною.

Що ви очікуєте побачити? Напевно, якийсь фон, білий текст і відступи, щоб текст не прилипав до країв.

<!-- HTML -->
<button class="btn btn-primary">Купити</button>
<button class="btn btn-danger">Видалити</button>

/* CSS */
/* Базовий стиль для всіх кнопок */
.btn {
  padding: 10px 20px;       /* Дихання для тексту */
  border: none;             /* Прибираємо стандартну рамку */
  border-radius: 5px;       /* Заокруглення - це модно */
  font-weight: bold;
  cursor: pointer;          /* Курсор стає ручкою */
  transition: opacity 0.2s; /* Плавність при наведенні */
}

/* Модифікатори кольору */
.btn-primary {
  background-color: #007bff; /* Синій */
  color: white;
}

.btn-danger {
  background-color: #dc3545; /* Червоний */
  color: white;
}

/* Ефект наведення (всім кнопкам) */
.btn:hover {
  opacity: 0.8;
}

Чому так? Ми розділили логіку. .btn відповідає за форму та розмір (скелет), а .btn-primary — за "шкіру" (колір). Це дозволяє нам мати 10 видів кнопок, не переписуючи код для відступів.

Рівень 2: Картка товару (Molecule)

Тепер складніше. Зберемо картку.

Що очікуємо? Контейнер з рамкою, всередині картинка, під нею текст і наша кнопка з попереднього прикладу.

<div class="card">
  <img src="sneakers.jpg" alt="Кросівки" class="card-img">
  <div class="card-body">
    <h3 class="card-title">Nike Air Max</h3>
    <p class="card-price">$120</p>
    <!-- Використовуємо наш АТОМ тут! -->
    <button class="btn btn-primary">У кошик</button>
  </div>
</div>

.card {
  width: 300px;
  border: 1px solid #ddd;   /* Тонка рамка */
  border-radius: 8px;
  overflow: hidden;         /* Щоб картинка не вилазила за кути */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Тінь для глибини */
  font-family: sans-serif;
}

.card-img {
  width: 100%;              /* Картинка займає всю ширину картки */
  height: 200px;
  object-fit: cover;        /* Обрізати, але не розтягувати */
}

.card-body {
  padding: 15px;            /* Відступи всередині картки */
}

.card-title {
  margin: 0 0 10px 0;
}

Пояснення: Бачите магію? Ми вставили кнопку .btn всередину картки. Якщо ми змінимо дизайн кнопки в CSS, вона оновиться і в картці, і в шапці сайту, і в підвалі. Це і є сила компонентів.

4. 🛠 Практична частина

Прийшов час забруднити руки кодом! Відкрийте свій редактор (CodePen, VS Code або просто блокнот).

Завдання 1: Реплікація Скопіюйте код кнопки та картки. Створіть три картки поряд (просто скопіюйте блок div.card тричі). Переконайтеся, що вони відображаються.

Завдання 2: Варіативність (Ghost Button) Створіть новий клас для кнопки .btn-outline. Вона повинна мати прозорий фон, синю рамку і синій текст. При наведенні (:hover) вона має ставати синьою з білим текстом. Підказка: використовуйте border, background-color: transparent.

Завдання 3: "Розпродаж" Додайте в HTML картки новий елемент — бейдж "SALE". Він має бути маленьким, червоним, у правому верхньому куті картки або біля ціни. Напишіть для нього клас .badge.

Завдання 4: Міні-кейс Уявіть, що ви робите список треків для Spotify. Створіть компонент "Рядок треку" (track-row). Він має містити: 1. Номер (1, 2, 3...) 2. Назву пісні 3. Тривалість (3:45) Зробіть так, щоб при наведенні мишкою на весь рядок, його фон ставав світло-сірим.

5. 💡 Мислення як у розробника

Як відрізнити новачка від профі, глянувши на цей код?

  1. Жорсткі значення (Hardcoding).

    • Новачок: Пише width: 300px для кнопки. Якщо текст "Купити зараз зі знижкою" не влазить — кнопка ламається.
    • Профі: Використовує padding, дозволяючи контенту диктувати розмір. Кнопка "дихає".

  2. Назви класів.

    • Новачок: Називає класи .red-box, .big-text.
    • Профі: Називає класи за призначенням, а не виглядом: .alert-error, .hero-title. Чому? Бо завтра дизайнер скаже зробити помилку помаранчевою. Клас .red-box, який став помаранчевим — це шизофренія в коді.

  3. Вкладеність. Не робіть залежності занадто сильними. Кнопка має працювати сама по собі, а не тільки коли вона всередині картки.

Порада: Завжди запитуйте себе: "Якщо я скопіюю цей шматок HTML на іншу сторінку, він виглядатиме нормально?" Якщо так — ви створили хороший компонент.

6. 🧩 Підсумок

Ну що, підсумуємо?

Сьогодні ми не просто навчилися малювати квадратики. Ми навчилися архітектурі. 1. Ми розбили складний інтерфейс на прості компоненти (кнопки, картки). 2. Ми зрозуміли, що зміна в одному місці CSS впливає на весь проєкт (і це чудово). 3. Ви створили свій перший набір UI-елементів (UI Kit).

Тепер ви вмієте: створювати масштабовані елементи інтерфейсу, які не соромно показати в реальному проєкті.

🔍 Що далі? Зараз наші картки стоять одна під одною, як солдати. А як вибудувати їх у гарну сітку, як в Instagram? Як зробити так, щоб на телефоні було по одній картці, а на комп'ютері — по три? На наступному уроці ми познайомимося з Flexbox та Grid — магією, що керує простором.

А поки що — це був CS50. (Умовно 😉) Практикуйтеся!

← До списку уроків Наступний урок →