Бейдж

До цього кроку badge.css оголошував рівно один клас - .gnote, - і це не бейдж, а анотація сірого прототипу. У wireframes/listing.html:173 вона каже «↑ Порядок карток (за замовч.): спершу в наявності...» - записка тому, хто читає макет. Кольоровий клон її не взяв, і правильно: вона рендериться на 0 з 39 кольорових екранів. Стенд повідомляв про це кроками поспіль, і я читав це як проблему стенда.

.tag сам по собі не бейдж, і це заміряно, а не припущено: 27 елементів несуть .tag, 26 з них несуть ще й .tag-pop або .tag-new, а 27-й - це .aaddr .adef .tag, слово «За замовчуванням» усередині картки адреси в сірому шарі. Без фону, без рамки, у потоці. Це надзаголовок, а не бейдж - той самий дефект, що .ci на кроці 7.21: одне ім'я, два значення.

І це речення знайшло другий рід, не знаючи про нього. Абзац вище описує СІРИЙ шар. Кольоровий малює ті самі слова як .addr-tag - з рамкою і радіусом пілюлі, - і це вже не надзаголовок. Два шари, дві форми, одне речення про першу з них. Крок 8.10 заміряв кольорову в браузері й побачив, що вона третя з чотирьох редакцій пілюлі, якою не володів ніхто.

Бейдж стоїть тільки на фото - у сітці й у списку. Розмір і місце належать картці: 10px за 11px від кута великої картки, 8.5px за 5px від кута маленької.

Чотири імені, сім входжень, три екрани, чотири файли - і форми не мав ніхто. Прочитано з живого DOM на 390 по всіх 51 кольорових екранах, не з коду: форма - це те, що намальовано.

Усі чотири: рамка 1px, --radius-pill, великі літери, --fw-black, без фону. Вони зійшлися на всьому важкому і розійшлися на двох легких речах - підпис, який status-pill.css залишив для «четверо малювали одне окремо».

Двоє з них - буквально той самий елемент. coach-landing.html:98 пише <div class="plan">Free<span class="badge">миттєво</span></div>, а coach-tariff.html:71 - <div class="tf-col-h">Pro <span class="tf-mini">ваш тариф</span></div>. Назва тарифу з обведеною пілюлею поруч, у двох редакціях ОДНІЄЇ таблиці Free / Pro, на двох екранах одного потоку.

Обидва файли тяглися до status-pill.css і обидва відмовились правильно - 12px на полі 2/8 перетинає щабель, з відмови від якого той файл починається. Питання, якого не поставив жоден: якщо це не статус і жоден файл його не оголошує, то який файл мав би? Відповідь у власному визначенні цього файлу: пілюля повідомляє стан, бейдж називає рід. «миттєво», «опт», «ваш тариф» і «За замовчуванням» - усі чотири називають рід.

Щабель узято з status-pill.css, а не виведено заново: рядковий 12 / 4-12, вбудований 10 / 2-8, заміряні з продукту на 7.37. .addr-tag уже стояв рівно на вбудованому, а .kicker рівно на рядковому - саме так форму й упізнали.

Одне значення зрушило, і сказано вголос: .tf-mini розмір 12 -> --fs-10. ЧОМУ: у сірому прототипі близнюки були 10.5 і 10 - одна пілюля з різницею в піврозміру, намальована руками в різні дні. Щабель кроку 5.6 підняв 10.5 на два щаблі й лишив 10 на місці, тож збіг у сірому став різницею в кольорі. Причина є саме в 10: найменше читабельне, бо мітка, яка змагається з назвою поруч, уже продає.

Колір рамки лишився на місці, і це не недогляд атома: coach-landing тримає --line-inverse, бо це записано в його власному переліку («--dark #161616 -> --line-inverse як РАМКА: kicker, badge, finalcta»), рівно так само, як .addr-card.def .addr-tag тримає колір дії над тим самим атомом. Колір рамки - це варіант, а не форма.

Матриця осей, а не перелік входжень: кожен рядок це питання, на яке відповідає розмітка, і правило, за яким обирають.

Не більше однієї на картку. Дві мітки на одному фото - це вже не мітка, а рейтинг з двох пунктів, і жодна з них не читається. Бейдж не каже про ціну: розмір знижки несе Бейдж знижки, наявність - Мітка наявності.

Станів немає: бейдж нічого не робить у відповідь на палець і не має :hover. Рід - це не стан, це те, чим річ є.

Квіз позначає дві з чотирьох карток набору словом «Основа», і це не «Популярне» під іншим підписом. Дві форми вище кажуть, як поводяться ІНШІ (це багато хто бере) і наскільки річ НОВА; ця каже, яку РОЛЬ товар виконує в наборі, щойно зібраному для вас.

Тому в неї немає знака. Зірка і промінь - це хвастощі; ролі хвалитися нічим, а принцип 4 каже, що продукт не підвищує голос. Тло лишається, бо, як і дві інші, вона стоїть НА фотографії і мусить читатися поверх зображення - але тло тут папір самої сторінки з підйомом марки, а не вивернута плашка.

Чому інвентар етапу 07 цього не побачив: перепис бейджів знято з .pcard .ph .tag на 51 кольоровому екрані, а картка квіза це .qsc, намальована у власному блоці стилів одного екрана. Слово було в продукті з етапу 04 і в жодному інвентарі.

Сторінка звіряє себе з файлом: 6 власних класів і 0 станів оголошено в badge.css. Нижче - ті, яких на цій сторінці немає ні в демо, ні в розмітці.

Прочитані з badge.css, не переписані руками. Колір іде лише через роль, геометрія - напряму з примітива.

Зірка і ромб у розмітці не пишуться: їх малює ::before. Обведений рід знака не має зовсім.

Пробіл у розмітці не однаковий, і це має наслідок. Лендинг пише Free<span> без пробілу, тож пілюлі потрібен власний margin-left; тариф пише Pro <span> з пробілом і не потребує нічого. Перший зріз 8.10 відправив цей відступ разом з іншими літералами - і слово з пілюлею злиплися. Знайдено звіркою кожного заявленого числа назад із браузера.

Якорі: .tag-pop .tag-new .addr-tag .badge .tf-mini

Заміряно в браузері на 390 і 1280: 26 залитих на 12 кольорових екранах - .tag-pop 18 на 11, .tag-new 8 на 8. Плюс один .tag, який бейджем не є.

6 обведених на 3 екранах: .addr-tag 3 на account-addresses, .badge 2 на coach-landing, .tf-mini 1 на coach-tariff.