Картка блогу
Три статті внизу головної й сторінки товару. Єдине місце, де Stack говорить, нічого не продаючи, - і тому єдина картка системи без ціни, без кнопки й без наявності.
Розмітка звідси - та сама, що на index.html. Фото приходять із того самого правила, що в крамниці: по позиції в ряду.
.blogrow - 1 колонка до 720, 3 від 720. Не два і не «скільки влізе»: статей завжди три.bim - 158 заввишки, background: center/cover. Висота фіксована, а не пропорція: три кадри в ряду мусять зрізатись однаково, інакше ряд «стрибає».bt - 14/700 з --lh-snug. Щільний міжрядковий, бо заголовок статті це три рядки, а не один.bdt - 12, вторинний. Час читання, а не дата: дата статті про креатин нічого не додає, а «8 хв» - додаєПринцип 1 у найтихішій формі. Статті не продають - вони знімають сумнів до того, як людина взагалі дійшла до каталогу. Тому блок стоїть унизу головної й унизу сторінки товару: він для того, хто ще не готовий класти в кошик.
Вирішувач кроку 7.75 доповів перший рядок як «36 збігів, 0 перемог» за background-image - і це не дефект. Скорочення ставить none, три правила нижче ставлять фото, і всі три позиції зайняті. Те, що не виграє, - це запасний варіант для четвертої картки, якої поки немає: вона дістане теплий --bg-sunken замість порожнечі.
Правило
Оголошення, побите пофотографійним правилом, не мертве - воно запасне. Різниця перевіряється одним питанням: що станеться з елементом, якого ще немає. Записано в розділ «не відкривати», щоб наступний прохід не зняв цей рядок як зайвий.І та сама помилка, що в нотатці про поповнення, тут не повторюється
:nth-child, а не :nth-of-type. У restock-note.css чергування фото рахує ще й шапку картки й тримається випадково; тут прямий нащадок ряду - завжди .blogcard, і рахунок збігається з позицією. Один і той самий прийом, і в одному місці він працює, а в іншому ні.| Ширина | Ряд статей | Плитки цілей поруч |
|---|---|---|
| 360 · 559 · 619 | 1 колонка | 2 колонки |
| 620 | 1 колонка, 588 | 3 колонки |
| 719 | 1 колонка, 687 | 3 колонки |
| 720 | 3 колонки по 221 | 3 колонки |
| 960 | 3 колонки | 6 колонок |
Межа спрацьовує рівно на 720, суміші правил немає. Але видно й інше: на одній сторінці дві сітки перебудовуються на різних межах - плитки цілей на 620, статті на 720. Між 620 і 719 головна показує три плитки в ряд і одну статтю на всю ширину. Довід на користь цього є (стаття потребує ширини під три рядки заголовка), і в коді його ніде не сказано.
| Стан | Що робить | Чому так |
|---|---|---|
| спокій | біла картка, край-волосина, --elevation-1 | та сама поверхня, що в плитки цілі: обидві - «щось, що можна відкрити» |
| наведення | вгору 2px, тінь важчає. Край не змінюється | у картки блогу нема акцентного стану: вона нікуди не веде в магазин |
| фокус | браузерне синє, заміряно натисканням Tab | те саме, що в .gtile: компонент не носить фінішу кнопки й не в поіменному списку link-row.css |
| четверта картка | теплий --bg-sunken замість фото | запасний варіант, розібраний вище. У продукті поки не рендериться |
| до 720 | одна колонка на всю ширину | заголовок у три рядки при 158px кадрі - це вже картка, а не плитка |
Правило
Стаття обіцяє час, а не новизну. «8 хв читання» - те, що вирішує, читати зараз чи ні. Дата статті про дозування креатину не змінює нічого і тільки старить блок.Антиправило
Не став у блог рекламу власного товару. Це єдине місце, де магазин говорить, нічого не продаючи, і воно працює рівно доти, доки це правда. Картка без ціни й без кнопки - не недогляд, а умова.Досі цей файл малював одне: ряд із трьох карток у підвалі домашньої сторінки, з фіксованим зображенням 158px, назвою і датою. Вузол 8.0 - це та сама картка на сторінці, яка існує ЗАРАДИ неї: шість штук, у кожної категорія, речення статті і час читання. Два розміри однієї ідеї, сказані вголос: це щабель, а не другий компонент, і оболонка внизу - це оболонка вгорі.
Чому імена не сірі. Сірий екран зве свою картку .bcard - і .bcard це ТАКОЖ те, як wireframes/brands.html зве картку бренду. Одне ім'я на два різні компоненти; партія 2 розв'язала це, віддавши картку бренду в nav-tile.css. Файл не має права публікувати ім'я, яке означає дві речі, тож форма лістингу лишається в родині b* цього файлу, а зіткнення вмирає разом із сірим шаром.
Сітка плинна, а ряд угорі - ні, і це навмисне. Ряд - це рівно три картки, у трьох є дві врівноважені розкладки, і точка там доречна. Лістинг - це шість, де auto-fill дає дві, три або чотири колонки за наявною шириною і жодному запиту не треба вгадувати, яку. 1040 із сірого блоку немає в реєстрі точок.
Мітка категорії стоїть НА фотографії, тож читає ролі фотографії - --bg-media і --text-onmedia. Це правило 8 системи. І шість карток на три фотографії: цикл написаний циклом (:nth-child(3n+1)), а не шістьма правилами, щоб сьома картка успадкувала зображення, а не порожнечу.
Сторінка звіряє себе з файлом: 11 власних класів і 3 стани.
ПОВЕДІНКА НА ШИРИНІ - етап 10, крок 4
Від якого порогу:--bp-grid-2col. Що саме міняється: ряд статей іде з однієї колонки в три. Було 720, поза реєстром. Чому не auto-fit: карток три, і три має дві збалансовані розкладки - одну і три; заповнення дорогою поставило б дві в ряд і лишило третю саму внизу. Зміряно на 620: 188 x 288.9, нічого не обрізано (на 720 сьогодні 221.3 x 270.8 - картка вужчає і виростає на рядок заголовка).Робота: ВІДПОВІДЬ. Рухається: transform і тінь картки. Тривалість --dur-fast (150ms), крива --ease-standard. Значення читаються через var(): підміна токена в браузері веде за собою кожне з них, тобто числа у файлі немає. При prefers-reduced-motion рух зникає, а стан лишається.
Прочитані з blog-card.css: 10 семантичних ролей і 20 примітивів.
| Семантичні ролі (10) | Примітиви (20) |
|---|---|
--bg-media --bg-page --bg-sunken --elevation-1 --elevation-2 --line-hair --text-body --text-onmedia --text-primary --text-secondary | --container-text --dur-fast --ease-standard --fs-12 --fs-14 --fs-16 --fw-black --fw-bold --grid-col-min-panel --grid-gap-fluid --lh-airy --lh-snug --radius-12 --radius-pill --space-12 --space-16 --space-2 --space-24 --space-4 --space-8 |
Повз шкалу три числа: 1px краю, 158px висоти кадру й межа 720. 158 - не з драбини розмірів і мало б туди потрапити: сусідній кадр опису бере aspect-ratio, кадр картки товару - квадрат (7.68), а цей стоїть окремим числом. Кандидат на рішення етапу 09 разом із розміром плитки товару.
Цей файл не змінювався. Три проходи по 40 екранах: нульовий прохід 0, різниця 0.
Вирішувач по всіх 14 селекторах: одне оголошення не виграє ніде, і воно запасне за задумом. Один рядок звідси вже зникав на 7.69 - колірний блок повторював значення, яке структура вже поставила.
Чого бракує
- Четверта картка - три фото прибиті до трьох позицій. Четверта стаття дістане порожній теплий кадр, і правила «звідки береться фото» немає
- Стаття у кольорі не існує - усі три ведуть на
wireframes/content-article.html - 158px висоти кадру повз драбину розмірів
- Дві сітки, дві межі на одній сторінці: 620 у плиток, 720 у статей. Довід не записаний
- Своє кільце фокуса - разом із чотирма іншими посилальними компонентами
Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.