Сесія замовлення
Вузол 5.5, і це первинна робота всього продукту: один тренер, кілька клієнтів, кілька цілей, одне сидіння. Вкладки клієнтів, кожна зі своїм підсумком; панель активного клієнта з його цілями; швидке додавання, що шукає всередині цілі, а не по каталогу; рядки замовлення за гуртовою ціною проти закресленої роздрібної; звід, який складає клієнтів.
Ліва колонка тримає рядки замовлення, права - звід, який має лишатись видимим, поки тренер додає товари. Це єдиний екран, де дві колонки не декорація: сума, заради якої тренер прийшов, мусить бути на очах у мить, коли він її змінює.
45 власних класів - найбільше в системі. Сім інших екранів - це стани цього одного, і кожен із них носив власну копію цього блоку, поки крок 7.95 не звів їх в один файл.
Розмітку знято з кольорових екранів через tools/demo.mjs. Рамки на 1280, бо дві колонки вмикаються від 940, а нижче - одна.
.cs-top · .cs-grid з колонкою .cs-clients ліворуч і .cs-summ праворуч. Вкладок .ctabs більше немає ніде - усі вісім станів на новій композиції.cs-top з .cs-meta і .tierchip - «Pro» тут не прикраса: від нього залежить кожна ціна на екрані.cs-clients з блоками .cbasket: шапка .cb-hd (.cb-nm, .cb-meta, .cb-sum, каретка .chev з icon.css) і тіло .cb-bd. Відкритий рівно один, і це гарантія екрана, а не зручність: «Швидке додавання» закінчується кнопкою «Додати клієнту», і при двох відкритих тілах у неї два можливі адресати. Чому не рейка вкладок, яка тут стояла до 12.13: заміряно клонуванням власного рядка цього екрана до двадцяти - рейка виходила 2004px заввишки і зсувала підсумок сесії на y=2279, тобто на 2.5 екрана нижче згину, куди position: sticky не дістає, бо липкий блок прилипає лише після того, як прокрутка до нього дійшла. Тепер підсумок стоїть у власній колонці: при 2 і при 20 клієнтах він починається на 255. .cb-add - пунктирний рядок «Додати клієнта в сесію», і слово «в сесію» тут не прикраса: ціль завжди була coach-session-addclient, добірка з уже наявних клієнтів.cb-bd - робоче місце одного клієнта: .cc-goals, .qadd, рядок .cs-client із заголовком і «Повторити замовлення», .cline і .cline-sub. Імені клієнта тут немає - воно в шапці, у рядку, який ви натиснули; .cc-name і .cc-goal малювали його доти й видалені разом із панеллю. .cs-panel теж видалено: вона була намальована як тіло смуги вкладок - border-top: 0 і квадратний верх - тож без смуги рендерилась коробка, відкрита по всьому верхньому краю.qadd з .qadd-h, .qa-add, .qa-row, .qa-ph, .qa-nm, .qa-bd, .qa-av, .qadd-res. Шукає в межах цілі, і саме це відрізняє його від каталогу.cline з .cl-ph, .cl-nm, .cl-var, .cl-ctrls, .cl-tag, .cl-right, і .cline-sub - підсумок по клієнту.cs-summ з .cs-summ-h, .cs-cli, .cs-tot, .cs-note, .cs-go, .cs-save. .cs-tot b - та єдина цифра, по яку тренер прийшов.cs-summ-empty замість зводу, і жодної вкладки, крім .add.oos - товар у рядку скінчився. Ім'я ділить із cart-row.css, і це правильно: та сама подія в тому самому рядку, лише на іншому екрані.cs-cli.zero ставить нуль у --text-muted, і видно, що це не сума, а порожнє місце. Знизу - липка смуга .cs-bar з .bt, яку малює buy-bar.css: у рамці вона стоїть, бо рамка і є в'юпорт.cs-warn і .cs-blocknote - панель, яка каже, чому сесію не можна оформити. Липку смугу малює buy-bar.css, а цей файл дає їй лише стан.coach - обіцянка про розмітку, якої ще не існувалоЖоден елемент у wireframes/ не носить class="coach". <main> восьми тренерських екранів читається wf-page cs-wrap, cc-wrap, cv-wrap, od-wrap або просто wf-page. Тобто скоуп, який узяли всі п'ять файлів партії 7.95, був обіцянкою про розмітку: кольорові екрани мусять понести coach, інакше кожне правило в п'яти файлах не збігається ні з чим.
Один клас у восьми файлах, і день, коли його забудуть, увесь потік рендериться голим - без жодної помилки
Клас приземлився на<body>, а не на <main>. Речення вище прочитали як «десь усередині» - і воно коштувало правила: body:has(.coach .cs-bar) було написане на цій підставі, а .coach і є body, а не його нащадок, тож оголошений там відступ ніколи не спрацював. Виправлено на 7.97.Зміряно на 390 до правки, три контроли в одній панелі:
| Клас | Слово | Як малювався | Коробка |
|---|---|---|---|
.cc-repeat | «Повторити замовлення» | 14 / 700, --text-primary, підкреслений | 165 x 22 |
.cl-rm | «Видалити» | 12 / 600, --text-secondary, підкреслений | 58 x 19 |
.cs-save | «Зберегти сесію» | 14 / 400, --text-body, без підкреслення | 324 x 22 |
Три фініші, один зміст - і найгучніший із трьох це робота повтору замовлення, тобто locked-рішення 4, «повтор у один дотик з історії». button.css визначає для цього рівно один фініш і на кроці 7.61 нарахував сімнадцять контролів, «чиє слово є дією й не несе жодного класу з цього файлу»; два з них на цьому екрані.
Тепер це носить розмітка, тож правила пішли, а не переписались: розмітка отримала btn--text ci-lnk. .btn--text дає 14 і чорнило, .ci-lnk - вагу 600, і це одне оголошення cart-row.css, тож у чужий файл нічого не додавали. Ім'я на тренерському екрані хибне («ci» це рядок кошика) - і це перейменування Кроку 6, те саме, яке stepper.css уже записав для .ci-qty / .co-qty.
Крок 7.95 зняв зібрану руками коробку поля й записав: «Крок 6 має поставити .field на нього, інакше контрол приїде в колір у власній коробці браузера». Він приїхав у власній коробці браузера. Зміряно на 390:
rgb(118,118,118) і #000 у палітрі відсутні, а Arial - те накреслення, яке field.css називає «рядком, якого бракувало 66 разів». Це поле, у яке тренер набирає товар тридцять разів за сесію, на єдиному екрані, де відбувається первинна робота - і воно було останнім контролом на 48 екранах, що й далі носив коробку операційної системи.
field-grp field-grp--s на обгортці й field field--s на самому полі - форма пошуку в хедері, одна коробка навколо поля і кнопки «Знайти»Зміряно на 390: .cline проти article.ci з cart-row.css.
| Що | Сесія | Кошик | Стан |
|---|---|---|---|
| фото | 52 x 56, --radius-8 | 74 x 74, --radius-12 | розмір відкритий, форму закрито |
| поля | 13px 0 | 16px 0 | закрито: узято 16, і це щабель |
| лінія | на верхньому краю | на нижньому краю | закрито: перенесено вниз |
Край - це та різниця, яку було видно. З лінією на верхньому краю перший .cline малював волосяну лінію за 6px під заголовком «Товари для клієнта Андрій», тож людина читала підкреслення заголовка, а не розділювач між двома товарами.
Форма - правило, і воно тепер тримає весь продукт
Крок 7.68 зробив «коробка, яка обрамляє фотографію товару, - квадрат» правилом системи, зміряним по трьох фотографіях 2048 x 2048. Цей файл ніс останню неквадратну рамку: 52 x 56 → 52 x 52, і квадратять по ширині, бо саме ширину пакує ряд і саме її вже називає колонка сітки.Перевірено зараз, по всіх 88 кольорових екранах: 21 різний розмір рамки товару, 0 неквадратних.
А розмір лишається відкритим, і це інша драбина
Малі рамки сьогодні: 34 (.oh-thumbs i) · 40 (.oc-ph) · 44 (.qa-ph) · 46 (.rk-ph, .aord-thumbs .t) · 52 (.cl-ph) · 74 (.ci-ph). Шість значень, і в джерелі немає нічого, що пояснило б, чому плитка поповнення 46, а рядок кошика 74. Це A6, і зводити їх зараз означало б смак замість заміру.Один раз, і це той екран, заради якого написано весь продукт. Первинна робота з `jobs`: «швидко зібрати замовлення для кількох людей із різними цілями й дозуванням». Усе інше в тренерському потоці або веде сюди, або показує, що звідси вийшло.
Позичати звідси нічого. Навпаки - цей файл найбільше віддав: поле, кнопку, чип, ціну, липку смугу, рядок кошика і навіть слово «гурт».
Правило
Дія, яка є словом, - це кнопка.btn--text існує рівно для цього, і три різні підкреслення в одній панелі означали не три різні дії, а три різні дні, коли їх писали.Антиправило
Не пиши скоуп, якого розмітка ще не носить, не сказавши цього вголос..coach у восьми файлах - обіцянка. Вона виконана, але день, коли її забудуть, дасть повністю голий потік без жодної помилки в консолі: CSS не повідомляє про селектор, який ні з чим не збігся.Нуль :hover, нуль :active, нуль :focus-visible. Кожен інтерактивний елемент екрана - кнопка, чип, поле, лічильник - приносить свої стани зі свого файлу.
Стани тут класи процесу, і їх п'ять:
| Клас | Що каже |
|---|---|
.cbasket.open | кошик цього клієнта розгорнутий, і відкритий рівно один. Край іде в --line-strong, не в акцент: відкритий блок каже це тим, що його тіло - єдине тіло на екрані, а Signal Orange у цьому продукті означає дію. До 12.13 це був .ctab.on з --line-action |
.cline.oos | товару в рядку немає - ім'я спільне з cart-row.css |
.cs-cli.zero | у клієнта поки нуль товарів. Цифра йде в --text-muted: та сама роль, якою .cs-tot і .cprice.pend позначають нефінальну суму |
.cs-warn, .cs-blocknote | сесію не можна оформити, і чому саме |
.qadd-res | результати швидкого додавання - є або немає |
.cs-cli.zero - приклад того, як стан має з'являтись: екран тримав нуль у власному блоці, система про нього не знала нічого, і цифра малювалась повним чорнилом, тобто виглядала як справжнє числоШість медіа-умов, найбільше у файлі системи, і це ціна двоколонкового екрана, який мусить працювати на телефоні. Перезібрано на етапі 10: усі шість тепер називають числа реєстру, а власних меж у файлі не лишилось жодної.
| Умова | Скільки | Що змінює | Було до етапу 10 |
|---|---|---|---|
(min-width: 860px) | 3 | дві колонки, звід липкий, стрічка клієнтів стає вертикальною рейкою | 940 |
(max-width: 859px) | 3 | вузька сторона 860 | дві з трьох були 859, третя 939 |
(max-width: 619px) | 1 | ряди контролів у рядку замовлення переносяться | 479 |
Смуга клієнтів більше не існує - 12.13. Вона заявляла tablist, кожен .ctab ніс role="tab" і aria-selected, а обробника у файлі не було взагалі; після критики таб став справжнім місцем призначення з ?client=. Тепер це колонка блоків: шапка - справжній <button> з aria-expanded, тіло - hidden, і клавіатура з деревом доступності працюють до того, як завантажиться хоч рядок JavaScript. Чому не рейка: заміряно клонуванням власного рядка цього екрана до двадцяти - рейка виходила 2004px і зсувала підсумок сесії на y=2279. Тепер при 2 і при 20 клієнтах підсумок починається на 255.
26 позначок [?], усі про геометрію. Пара 940 / 939 була останньою в системі, що стояла поза реєстром, і крок 5 етапу 10 її витратив: смуга клієнтів переїхала всередину .cs-grid і від 860 стає рейкою в лівій колонці 20rem зі зведенням сесії під нею, а кошик активного клієнта бере решту. Заміряно: 860 дає 320 | 488, 1440 - 320 | 828.
.qual - слово, що стоїть біля суми і каже, ЧОГО саме вона стосується: «без доставки», «за тарифом тренера». Воно легше за саме число і важче за підпис, бо без нього сума в рядку сесії читається як остаточна.
Сторінка звіряє себе з файлом: 52 класи і 0 станів оголошено в coach-session.css. .coach не рахується - це скоуп.
ПОВЕДІНКА НА ШИРИНІ - етап 10, крок 4
Від якого порогу:619, дзеркало --bp-grid-2col, для перекладання рядка питання. Було 479. А ДРУГА ПАРА ФАЙЛУ, 939/940, НЕ ЧІПАНА НАВМИСНО: це і є коуч-спліт-в'ю - сесія дістає колонку підсумку 320px і ховає липку смугу - а аудит ширини назвав його єдиною справді новою поведінкою цього етапу, тобто предметом кроку 5. Скласти число тут означало б вирішити в раунді компонентів те, заради чого існує окремий крок.Прочитані з coach-session.css, не переписані руками. Ці два екрани ніколи не проходили через kit.css, тож переклад сірих імен - і є вся колірна робота: кожне з них перекладено за роботою, яку воно виконувало в wireframes/_wf.css.
| Семантичні ролі (12) | Примітиви (28) |
|---|---|
--bg-page --bg-sunken --bg-surface --line-action --line-hair --line-inverse --line-strong --text-action --text-body --text-muted --text-primary --text-secondary | --container-page --container-text --dur-fast --ease-standard --font-display --fs-12 --fs-14 --fs-16 --fs-18 --fs-24 --fs-8 --fw-black --fw-bold --fw-semibold --lh-airy --lh-snug --ls-lead --radius-12 --radius-8 --radius-pill --size-24 --size-44 --size-52 --space-12 --space-16 --space-2 --space-4 --space-8 |
Одне сіре ім'я розійшлось надвоє за роботою, і це найцікавіший рядок перекладу. --dark сірий прототип сам називав «єдиним темним акцентом: вибране / первинне (у сірому)». У кольорі ці дві роботи розходяться в ту мить, коли з'являється тон: на темній поверхні це --line-inverse, а там, де воно каже «оце обране», - --line-action, тобто помаранчевий. Обрана вкладка клієнта - другий випадок.
btn--text ci-lnk у трьох місцях - це і є та правка, яка звела три фініші в один. Ім'я ci-lnk на тренерському екрані хибне і чекає на Крок 6.
Якорі: .cs-wrap .cs-clients .cbasket .cline .qadd. .ctabs / .ctab / .cs-panel видалені - жодного носія на жодному з восьми екранів
8 кольорових екранів: coach-session · -empty · -loading · -oos · -priceblock · -newclient · -addclient · -addempty. Усі сім, крім першого, - стани того самого екрана.
Чого бракує
- Розмір рамки товару - шість значень на малих рамках (34 / 40 / 44 / 46 / 52 / 74). Форму закрито й перевірено по всьому продукту, розмір - A6 і власника
.ci-lnkна тренерському екрані - один атом під двома іменами. Крок 6, той самий, що для.ci-qty/.co-qty.qa-rowділить ім'я зіskeleton.css, а.qa-av- зavailability.css. Сьогодні не заважає, завтра - як пощастить- 26 геометричних літералів під
[?] - Стани наведення й натиску: майже все, що натискають тут, - чужі атоми. Власна кнопка файлу тепер одна,
.cb-hd, і в неї є наведення (--bg-sunken); фокус їй даєbutton.css, бо це справжній<button>. Порожнеча, яку.ctabлишав відкритою два етапи, закрита разом із ним
Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.