Лічильник
Скільки. Цифра поруч із написом, яка каже, скільки за ним стоїть: «В наявності 71», «Замовлення 12», «84 товари». Найчастіший елемент продукту після ціни - 470 штук, - і файл не оголошував жодного.
Протеїн 84 товари
--text-muted на всіх 470. Це і є весь сенс лічильника: він ніколи не є суттю рядка, у якому стоїтьДо цього кроку counter.css оголошував .wl-count - лічильник вішлиста, на екрані, який існує лише в wireframes/. 0 входжень у кольорі. А 470, які людина справді читає, були оголошені в шести інших файлах:
| Селектор | Скільки | Файл | Як виглядав |
|---|---|---|---|
.fopt .ct | 350 | filter-group.css | Mono 12/400 |
.flink .ct | 84 | chip.css | Inter 12/600 |
.acc-link .ct | 21 | account-shell.css | Mono 12/800, у пілюлі |
.lh1 .cnt | 5 | section-head.css | Mono 16/600 |
.co-sec-h .cnt | 3 | checkout-form.css | Mono 14/500 |
Колір не розходився ніколи. Розійшлося все інше: дві гарнітури, п'ять ваг, три кеглі. .flink .ct - єдиний справжній дефект набору: це лічильник, він стоїть за два пікселі від 350 однакових лічильників, і він єдиний набраний текстовою гарнітурою. chip.css оголосив йому кегль і колір, а гарнітуру ні - і він узяв сторінчину.
Кегль і вага належать поверхні, і це не нічия, яку треба розбити: 12 біля опції фільтра, 14 у заголовку секції оформлення і 16 всередині H1 каталогу - три різні сходинки шрифту, кожну задає те, поруч із чим лічильник стоїть. Ранжувати їх означало б перемальовувати три заголовки, щоб причесати один атом.
.fopt .ct · 350 - Чекбокс несе лічильник.flink .ct · 84.acc-link .ct · 21.lh1 .cnt · 5Протеїн 84 товари
account-shell.cssМатриця осей, а не перелік входжень: кожен рядок це питання, на яке відповідає розмітка, і правило, за яким обирають.
| Вісь | Значення | Правило вибору |
|---|---|---|
| Кегль | 12 · 14 · 16 | Дорівнює сходинці того, поруч із чим стоїть. Лічильник ніколи не задає розмір сам. |
| Форма | вільна цифра · у рамці | Рамка з'являється лише там, де рядки стоять колонкою і цифру треба прив'язати до свого рядка. |
| Колір | --text-muted | Одне значення на всі 470, і його не міняють: лічильник, який видно раніше за напис, - це вже не лічильник. |
Коли число знімає сумнів до натискання: «В наявності 71» каже, що фільтр не приведе в порожнечу. Лічильник, який людина не може перевірити дією, - просто шум.
Правило
Лічильник - це цифра, отже моноширинний і табличний. Те саме речення, яке читають ціна і бейдж знижки:DESIGN-artifacts.md:77.Антиправило
Не роби з лічильника акцент. Помаранчева цифра поруч із написом читається як дія, а натиснути на неї не можна.Один: у рейці акаунта поточна сторінка перефарбовує свій лічильник у --text-body, разом з усім рядком. Це стан рядка, не лічильника, і живе він у account-shell.css.
Сторінка звіряє себе з файлом: 2 власних класів і 0 станів оголошено в counter.css. Нижче - ті, яких на цій сторінці немає ні в демо, ні в розмітці.
Прочитані з counter.css, не переписані руками. Колір іде лише через роль, геометрія - напряму з примітива.
| Семантичні ролі (1) | Примітиви (1) |
|---|---|
--text-muted | --font-mono |
Два токени на 470 елементів - і це не бідність файлу, а те, скільки атом справді вирішує. Решта належить поверхні.
Якорі: .ct .cnt
Заміряно в браузері на 390 і 1280: 462 .ct на 19 екранах, 8 .cnt на 8.
Чого бракує
.hbadgeбув привидом. Стенд малював його в демо; у системі 0 правил, у продукті 0 входжень. Це ніколи не було класом - лише словом, яке хтось написав у вітрині. Прибрано.coachbn .ct- це не лічильник, а заголовок банера коуча, 24px дисплейним білим. Одне ім'я, два значення, вже втретє за цей етап. Рендериться на 0 кольорових екранів, тож зіткнутися сьогодні не може. Крок 6- Немає правила нуля - система не знає, чи показувати «0» чи ховати рядок
Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.