Розробка HTML/CSS елементів для веб-застосунку

Всі шаблони мають бути зроблені на основі Pico.css і в плані UI дизайну очікується максимальне дотримання стандартів Pico.css. 

Загальні вимоги: 

- Якісне виконання та відсутність багів

- Використовуємо Pico.css як базовий і єдиний фреймворк

- дотримуємось правил, філософії і стилістики picocss (невикористання функціонала пікоцсс і створення альтернативного рішення, якщо такий є буде розцінюватись як баг) - максимально короткий код цсс - див. picocss-philosophy.png

- всі кольори (розрізняємо колір шрифта, колір ліній, колір фону, колір обводки) мають бути параметрами, щоб було чітке розуміння скільки кольорів використовується

- використання змінних "...spacing" для мардженів і падінгів, наприклад "--small-spacing"

- використання змінних "...fontsize" для задавання розмірів шрифта, наприклад "--small-fontsize"

- невикористання цсс класів в самих елементах (стандартна стилістика має задаватись через теги і їхні властивості, наприклад  <button icon="refresh" label="refresh value" labelplacing="right"- тут розташування лейби справа чи зліва від іконки задається властивістю labelplacing )

- ніяких тіней і градієнтів

- можливість перемикнутися між світлим і темним модом (базові речі вже передбачені в пікоцсс)

- максимальне використання можливостей СSS3: змінні, apply для mixins, Selectors, Transformations, Grids, Flexbox, ітд

- чіткість UI (відсутність ледве видних елементів, користувач не повинен приглядатись, мружитись і тд)

- мінімальне використання Javascript (Javascript потрібен обовязково для реалізації певниг вимог, зображених на візуалізаціях)

- в елементах де використовується текст з іконкою, іконка має бути вертикально посередині тексту

- елементи UI повинні завжди бути візуально по чомусь вирівняні вертикально і/або горизонтально, по лівову, або по правому краю

- виконавець повинен повідомити про джерела де він взяв використаний код (наприклад Javascript), якщо релевантно

- повне дотримання всіх вимог, описаних тут і на самих макетах також

Іконки 

- для іконок використовуєм тільки Google Fonts Material Symbols - https://fonts.google.com/icons?icon.style=Outlined&icon.set=Material+Symbols

- використовуєм інонки як SVG, страйт робити не потрібно

- використовуєм (додаєм в цсс) лиші ті інонки які я обрав/прислав, кожна іконка повинна прописуватись в коді максимально коротко (можем обсудити)

    - наприклад за допомогою змінної --icon-calendar

    - за допомогою параметра в тезі, наприклад icon="calendar"

    - НЕ за допомогою класу

- архів з обраними іконками додано

Елементи

- Невикористання класів цсс

- Всі елементи називаєм так як написано в дужках під лейбою), в коді має бути так <myelementname>...............</myelementname>

- Всі елементи можуть мати режим перегляду і редагування, елементи повинні бути однакового розміру в обох режимах для того, щоб нічого - ніде не скакало

- Всі елементи можуть складатись з таких частин:

    - Лейба (тег <fieldlabel>, опціонально) - просто текстовий напис

    - Поле значення (тег <fieldvalue>) - є завжди, може мати декілька простих елементів

    - Філд екшени іконки (тег <fieldactionbar>) - опціональна секція, може складатись з іконки і/або текстового лінку (це наш кнопка link button з розміром смол), тут також можливий чекбокс 

    - Іконки стану (тег <stateiconbar>, опціональні) - можуть можуть складатись з іконки розміру small i checkboxes

    - Повідомлення (тег <message>) - або помилка або підказка

    - Action parameter bar (тег <actionparameterbar>) - додаткові параметри для виконання екшенів

- Висота іконок для філд екшенів, іконок стану і еншен параметрів може змінюватись, тому це треба зробити параметрами.

- Тултіпи (=title) можуть бути у: еншентів, інонок стану,  іконок параметрів, та чекбоксів в усіх 3 секціях

- В елементах вирівнювання по лівому і по правому краю має відбуватись так, щоб в режимі перегляду все виглядіно вирівняно

- Всі відступи, марждини падінги мають задаватись параметрами, щоб їх потім можна було легко змінити, деякі параментри уже задані

- Всі елементи в режимі редагування можуть бути заблоковані для редагування - для цього використовуєм вкластивість disabled, приклад <valueinput id="some_id" disabled>

- В елементах де є інонка справа від значення, наприклад стрілочка вниз чи календар ці інонки мають бути однакового розміру

- В усіх елементах може бути placeholder, наприклад placeholder="some hint", він може використовуватись як підказка для користувача

- При відкритті ементів зявляється обводка відкритої частити (бордери), цього не треба для пікерів

- Однакова висота у: input, select (всі підвиди), multiselect (всі підвиди)

- Всі випадаючі елементи мають білий фон

- Для всіх елементів повідомлення може показуватись і в режимі редагування і в режимі перегляду, в випадку додавання помилки, все інше зміщається вниз (це єдиний випадок, коли лейаут може змінювати ствою висоту)

- Повідомлення має type=error (червоний шрифт), warning (оранжовий), hint (темноголубий)

- Повідомлення можна закрити, тоді ховаєм і проміжом між ним і полем значення

- Для всіх значень використовуєм однаковий розмір шрифта, і я мультиселекта такий же самий, треба зробити так, щоб мультиселект був зроблений компактно, як на макеті.

- Для всієї сторінки потрібно задати світложовтий фон, щоб переконатись чи немає проблем з елементами, коли у сторінки є фон.

Кнопки

- кнопки мають легку закругленість (3пкс)- це теж параметр

- Кнопки можуть бути звичайні, без фону, проста обводка, закруглення 3пкс (має бути пакаметр)

- Розмір тексту на кнопках задається виключно цсс змінними

- Кнопка без тесту але з іконкою завджи квадратна

- Дропдаун кпопка може бути без тесту

- Марджин справа чи зліва (=--spacing_standard?) від іконки дропдауна чи іншої інонки має бути такий, щоб якщо тексту немає, то вона була розташована посередині кнопки

- У кнопок можуть бути розміри: standard (дефолтний, задавати не треба), small і big (треба обов'язково задавати)

Результат роботи

Зробити ХТМЛ (одну єдину, див. main.v3-UI Elements Page.drawio.png) сторінку з розділами Icons, Elements, Buttons, Navigations на якій видно все що треба зробити. Ця сторінка буде використовуватись як "підказка" для розробників, щоб вони розуміли які елементи можна використувати на фронтенді.

Буду реагувати лише на пропозиції з конкретною ціною.

З радістю відповім на всі запитання.