Банер
Шість непов'язаних блоків під одним ім'ям файлу, і всі шість живуть рівно на чотирьох екранах - головній у чотирьох станах. Це не компонент, це стилевий лист головної сторінки.
Заміряно в браузері на 390, 720 і 1280 по всіх 39 кольорових екранах. Кожен блок цього файлу рендериться на home-buyer, home-cart, home-coach і index - і більше ніде.
| Блок | На екран | Що це |
|---|---|---|
.hbanners .hslider .hpromo .hdots | 1 · 1 · 3 · 1 | слайдер промо з крапками |
.hdeal | 1 | картка пропозиції дня |
.pstrip | 1 | смуга «увійдіть» з кнопкою |
.tbanners .tbn | 1 · 5 | п'ять банерів довіри |
.promo | 1 | широкий блок під фотовуаллю |
Розбити файл на шість - не робота цього кроку. Від імені файлу залежать реєстр, вітрина і рахунок молекул, а звести імена угоди до імен картки - це підмітання розмітки. І те, і те - Крок 6, після етапу 09. Цей крок робить інше: перестає давати файлу брехати про свій вміст і бере два факти, які не просто тісні, а неправильні.
Розмітка звідси - та сама, що на index.html, скопійована рядок у рядок.
.tband, і на 12.18 його видалено. 7.44 залишив правило з причиною «кольоровий двійник ще не приїхав - це його половина, яка чекає», і на той день це було правильно. Двійник приїхав на етапі 12 і відмовився від класу: смуга довіри на coach-landing - це .tbanners, ті самі чотири картки-посилання, що на головній. Причина «чекає» не застаріла, вона відповіджена, а відповіджена причина - це виняток, який нічого не покриваєПерший слайд - інший компонент, і вирішує це його позиція
Порівняйте два демо вгорі. Сам по собі слайд білий, заголовок 24, надзаголовок і підпис приглушені - це те, що оголошує banner.css. У стрічці перший стає чорнильним, заголовок росте до 38px, напис іде в акцент, підпис - у --text-oninverse-muted. Дає це не банер:
Обличчя слайда вирішує його місце в стрічці, а не його розмітка. Переставте слайди місцями - і темним стане інший. Це та сама форма, що чекбокс на 7.38, тільки на рівень вище: організм перефарбовує частини молекули по імені. Не виправлено тут: розібратись, чи це варіант .hpromo--lead, чи два різні компоненти, - робота етапу 09.
Її частини лягають на .pcard одна в одну, і атоми це вже знають: 7.35 забрав наявність, 7.36 ціну, 7.36b чип знижки - усі три просто додавши hd--імена до списку селекторів атома.
| Роль | сіткою | списком | угода |
|---|---|---|---|
| мітка | .tag | .tag | .hd-tag |
| фото | .ph | .lph | .hd-ph |
| бренд | .pbrand | .lbrand | .hd-brand |
| назва | .nm | .lnm | .hd-nm |
| наявність | .pavail | .lavail | .hd-av |
| ціна | .pnew .pold | .lprice .lold | .hd-new .hd-old |
Молекула цього не знала. Її рядок бренда читав --text-muted ще через день після того, як 7.43 віддав сітковій картці --text-brandline за той самий рядок - і токен у tokens.css перелічує три читачі, з яких брав роль лише один. Тепер беруть усі три.
Що не зроблено і сказано вголос: ім'я товару тут набране дисплейною гарнітурою (Oswald 20/600), тоді як обидві картки називають його Inter 16/600. Один і той самий рядок у трьох гарнітурах. Це рішення про типографіку, у нього власник в етапі 09.
Зібрано з розібраного CSSOM по всій системі: скільки піднімається поверхня під курсором.
| Підйом | Хто |
|---|---|
| −1px | .btn--lift .pm-stars .pmst |
| −2px | .hpromo .hdeal .tbn .blogcard .certthumb .gthumb .gtile .hvert .tsx .uiv-ic - дев'ять у восьми файлах |
| −3px | .pcard - один, і на цьому кроці став −2 |
Глибину система звела в шкалу на 6.0. Підйом відповідає на те саме питання - «ось ця, під курсором» - і лишався одним значенням плюс одним винятком. Змінна: наскільки поверхня піднімається під курсором. Значення: −2px. Чому: дев'ять проти одного - це не рішення про картки, це те, що не потрапило під зачистку.
| Стан | Що робить | Чому так |
|---|---|---|
| спокій | --elevation-1 у слайда, угоди й банера довіри; .promo і .pstrip без тіні | правила, яке поверхня бере тінь, а яка ні, немає - етап 09 |
| наведення | підйом −2px і --elevation-2; у банера довіри ще й край в акцент | одна відповідь на всі поверхні, що піднімаються |
| наведення на угоду | її кнопка бере filter: brightness(.95) | кнопка всередині картки-посилання: вона не власний контроль, а частина однієї цілі |
| крапка слайдера | .on - --bg-action, решта --bg-track | той самий поділ, що в усіх контролів: увімкнене - акцент, порожнє - доріжка |
| натискання | немає | усі шість блоків - посилання цілком, і затемнювати банер на весь екран під пальцем немає чим |
| фокус | немає власного | кожен блок - <a>, і кільце йому дає link-row.css. Етап 09 звірить, чи цього досить на фото |
Тільки на головній. Жоден із шести блоків не з'являється на лістингу, товарі, у кошику чи в кабінеті - і це не обмеження системи, а факт продукту: банер це те, чим головна сторінка відрізняється від решти.
Правило
Банер продає ідею, картка продає товар. Якщо в блоці з'явились ціна, наявність і кнопка «у кошик» - це вже картка, і вона має брати анатомію картки, а не власну.Антиправило
Не заводь нове ім'я для тієї самої частини. Три набори імен для одного бренда, однієї назви й однієї ціни - це не три компоненти, це один, у якого тричі забули спитати, як він зветься.Правила вживання, які називають саме цей компонент: U8. Автор правил один, і це architecture.html, розділ I; тут - витяг.
Коли на сторінці є кошик-полиця, головна дія належить їй, а залита дія смуги стає контурною - правило записане ще на етапі 07 у wireframes/docs/critique.md.
.recbanner стоїть над добіркою і каже, ЧОМУ вона така. Маскот тут не прикраса: він єдиний у продукті носить власну плинну величину --rbear (68 на 360 -> 92 на 560), бо круг, обрізаний по обличчю, на вузькій ширині мусить меншати швидше за текст поруч.
Підібрали під вашу ціль
Сторінка звіряє себе з файлом: 30 власних класів і 3 стани оголошено в banner.css. Нижче - ті, яких на цій сторінці немає ні в демо, ні в розмітці.
ПОВЕДІНКА НА ШИРИНІ - етап 10, крок 4
Три різні відповіді в одному файлі, і це навмисно. 1).tbanners - запит зник: п'ять смуг довіри заповнюють ряд через auto-fit з підлогою 8rem. На 360 обидві редакції дають 2 x 158, на 720 - 5 x 128; між ними ряд тепер стає трьома на 440 і чотирма на 580 замість того, щоб тримати дві колонки 360 пікселів поспіль. 2) .hbanners і .hpromo - 720 -> 620: 2fr 1fr з явним розміщенням це композиція, і auto-fit її не вміє. Зміряно: на 620 колонка акції виходить 192px, а на 860, де .hero-wrap бере собі компаньйона і тисне цю сітку до 562, та сама картка вже 183px. 3) .recbanner - запит зник: гап, портрет і кегль стрибали на 559, тепер це три пандуси, кожен кінчається тим числом, яке там і стояло. .hpromo min-height пішла тим самим шляхом: 300 на 360, 340 від 620.Робота: ВІДПОВІДЬ. Рухається: transform, тінь, рамка і filter на зображенні. Тривалість --dur-fast (150ms), крива --ease-standard. Значення читаються через var(): підміна токена в браузері веде за собою кожне з них, тобто числа у файлі немає. При prefers-reduced-motion рух зникає, а стан лишається.
filter у переході це малювання: один банер витримає, і саме тому він тут лишився, а перегляд ціни кадру стоїть на кроці 5.
Прочитані з banner.css, не переписані руками. Колір іде лише через роль, геометрія - напряму з примітива.
| Семантичні ролі (18) | Примітиви (29) |
|---|---|
--bg-action --bg-page --bg-sunken --bg-surface --bg-track --elevation-1 --elevation-2 --fade-surface --line-action --line-hair --text-action --text-body --text-brandline --text-onaction --text-primary --text-secondary --veil-surface --veil-surface-mid | --font-display --font-mono --fs-12 --fs-14 --fs-16 --fs-18 --fs-20 --fs-24 --fs-30 --fw-black --fw-bold --fw-medium --fw-semibold --lh-airy --lh-flat --lh-snug --ls-caps --ls-eyebrow --ls-lead --radius-12 --radius-16 --radius-circle --space-2 --space-4 --space-8 --space-12 --space-16 --space-24 --space-32 |
| – | --dur-fast --ease-standard |
Кожен із шести блоків - одне посилання цілком, а не картка з кнопкою всередині. Тому .hd-cta це <span>, а не <button>: вкладена кнопка в посиланні дала б дві цілі там, де дія одна.
Якорі: .hbanners .hdeal .pstrip .tbanners .promo
Заміряно в браузері на 390, 720 і 1280: усі шість блоків на чотирьох кольорових екранах з 39, і на жодному іншому.
Чого бракує
- Три стопки «надзаголовок - заголовок - підпис» без нічого спільного, крім дисплейної гарнітури. Надзаголовки: Mono 12/500 в слайда проти Oswald 20/700 в угоди. Заголовки: 38 / 30 / 24 / 20. Підписи: два по 14/400 з різними інтерлиньяжами, причому один свій не оголошує взагалі й успадковує 1.6 від
body - 38px - НЕ цього файлу, і це знайшлось при складанні стенда.
banner.cssдає заголовку слайда--fs-24; літеральні38pxприходять зhero.css:26- організм, який перефарбовує частини молекули за позицією в стрічці. Це та сама форма, що 7.38, на рівень вище - П'ять поверхонь, два радіуси, три тіні і жодного правила:
.hpromo16/тінь,.hdeal16/тінь,.tbn12/тінь,.promo16/без,.pstrip12/без - Дві цифри в
.hd-metaне розмічені - «18 ₴ / порція · +13 ₴ бонус» іде суцільним текстом, тоді як у картці ті самі дві величини несуть<b>і моноширинну гарнітуру. Це питання до розмітки й до IA, а не рядок CSS - Розбити файл на шість і звести імена угоди до імен картки - Крок 6
Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.