Кіт компонентів
Екран - це композиція, а не малюнок. Між мовою і сторінками стоїть кіт: спільний
kit.css плюс ця вітрина. Нове з'являється спершу тут, потім на екрані;
правка живе в змінній або в класі, а не в окремій сторінці.
wireframes/_wf.css -> kit/kit.css. Вітрина з власною розміткою нічого
б не доводила: компонент тут має бути тим самим компонентом, що там. Тому організми, які
існують лише як рендер-функції (JS), показані рядком із посиланням на
сцену, що їх тримає, а не підробленим полотном.
Атоми
Не містять нічого з кіта. Форм-контроли входять сюди навіть з одним входженням: це примітиви взаємодії, і система без них неповна.
:has() на закресленій ціні, тож колір не може розійтися
з фактом. Акцент дозволений від 19px bold: #FF5A00 на білому це 3.13:1.
Від 8.19 поверхня важить не менше за кегль: на чорнилі той самий акцент
дає 5.45 і дозволений за будь-якого кегля, на теплій поверхні втрачає 0.16.Молекули
Містять атоми. Тут живе канонічна картка товару - найважчий компонент продукту за охопленням.
.pcard-l (списком)
- ті самі зони в іншій розкладці, тож це варіант, а не окремий компонент. Висоти рядків
фіксовані, щоб ціна й кнопка ніколи не стрибали між картками.Організми
Містять молекули або є оболонкою екрана. Три - це стеля: діалог входу містить форму, а форма теж організм, але четвертий щабель це патерни, і критерій там інший - повторюваність, а не вкладеність. Спершу ті, що інших організмів не містять.
| Компонент | Клас | Екранів | Де стоїть |
|---|---|---|---|
| Сітка товарів | .prow2 | 30 | Лістинг 2.1 |
| Рейка фільтрів | .frail | 12 | Лістинг з фільтрами |
| Шухляда кошика | .cdrawer | 6 | Кошик 6.0 |
| Липка смуга покупки | .mbuybar | 3 | Картка товару 3.0, мобілка |
| Модалка відгуку | .pm | 1 | Відгуки 3.1 |
| Мобільний шит фільтрів | .mfs | JS | Шит фільтрів |
| Оверлей діалогу | .wf-ov | JS | спільний: місто, шухляда, модалки |
| Діалог міста | .wf-city | JS | чип 📍 у хедері |
| Діалог авторизації | .auth-modal | JS | Авторизація 1.x |
| Банер cookie | .wf-cookie | JS | заміряно 7.86: жодного кольорового екрана. Плейсхолдер id="wf-cookie" є рівно в одному файлі репозиторію - wireframes/system.html |
| Мобільний таб-бар | .wf-tabbar | JS | основна мобільна навігація |
| Футер | .wff | JS | вузол 0.2, 129 екранів із обвязкою |
| Оболонка кабінету | .acc | 44 | Кабінет 7.0 |
| Хедер | .wfh | 5 + JS | вузол 0.1, усі екрани |
| Мега-меню | .mega | 5 + JS | усередині хедера |
wireframes/_nav.js, і ще два (хедер, мега-меню) рендеряться там додатково до розмітки - разом 11.
Саме тому кількість екранів - погана міра важливості: футер має нуль у розмітці й рендериться на 129 екранах (діалоги, системні сторінки і хаб продуктової обвязки не несуть) - цього не покаже жоден скан розмітки.
Токени
Блок :root живцем із kit.css - зчитується з
документа, тож розійтися з файлом не може. Походження кожного значення - у
DESIGN-artifacts.md. На етапі 08 цей блок розколеться на primitive + semantic.
Інвентар
51 компонент: 18 атомів, 18 молекул, 15 організмів. Прочитано з усіх 142 файлів
вайрфреймів, а не з пофарбованої вибірки: система, побудована під 40 екранів, на розкотці
недорахувалась би половини. Повна таблиця - у design/kit/docs/inventory.md.
Оновлено після публікації (8.37). Ця сторінка - заморожений смоук
етапу 07, тож числа вище лишаються тим, чим були тоді. Сьогодні в шарі 95 компонентів:
23 атоми, 29 молекул, 43 організми - і це вперше число, яке хтось перевіряє:
node tools/inventory.mjs звіряє кожен рядок реєстру з файлами на диску, а
--screens ще й рахує в браузері, на скількох із 88 кольорових екранів компонент
справді стоїть. До 8.37 не перевіряв ніхто: у самому реєстрі було 73 рядки на 84 файли,
66 із 73 лічильників рядків і 58 із 73 лічильників екранів розійшлись.
| Рівень | Компонентів | Що це | Що з цього бере етап 08 |
|---|---|---|---|
| 1 · Атоми | 18 | не містять нічого з кіта | перші файли розколу, перші @import |
| 2 · Молекули | 18 | містять атоми | другий раунд; картка товару - найважча |
| 3 · Організми | 15 | містять молекули або є оболонкою | останній раунд; усередині - спершу ті, що організмів не містять |