Неофіційна CSS-бібліотека, натхненна відкритою дизайн-системою Дії.

Цей проєкт натхненний публічно доступною дизайн-системою Дія, але не є офіційним продуктом Міністерства цифрової трансформації України. Проєкт не пов’язаний з брендом Дія, не використовує офіційні логотипи, і не має жодного формального відношення до державних структур.

Документація і приклади використання: diui.org

• 🧩 Код: MIT License
• 🔤 Шрифт e-Ukraine: CC BY 4.0 (автор — Dmytro Rastvortsev / Fedoriv Agency)

1. Локальний запуск і розробка
2. Специфікація
3. Матеріали
4. Особливості та відмінності неофіційної реалізації
5. NPM скрипти

Ми використовуємо менеджер пакетів pnpm.

Перед початком розробки, будь ласка, встановіть його на свій комп’ютер: інсталяція pnpm.

Після встановлення pnpm, виконайте команду в корені проєкту, щоб встановити всі локальні залежності:

pnpm i

Для кращого розуміння цієї бібліотеки ми розробили специфікацію — набір вимог до неї.

Ви можете ознайомитися з цими вимогами тут: специфікація. У ній також відображено порядок функціоналу для майбутніх релізів.

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

Список матеріалів, якими ми надихались:

1. Офіційний анонс: https://thedigital.gov.ua/news/diia_design
2. Офіційний анонс від агенції Федорів: https://diia.fedoriv.com/. Тут найбільше інформації про елементи дизайн-системи.
3. Анонс від київського дизайн-бюро Spiilka: https://spiilka.com/projects/diia-web
4. Міністерство цифрової трансформації: https://thedigital.gov.ua/. Тут багато прикладів використання дизайн-системи Дії в реальному коді.
5. Неофіційна реалізація в Figma: https://www.figma.com/community/file/1270778058754270235
6. Шрифти та заголовки:
   • Опис: https://thedigital.gov.ua/fonts
   • Завантажити шрифти
   • ОФІЦІЙНА Типографіка в Figma
   • ОФІЦІЙНИЙ Приклад типографіки в Figma
7. Логобук щодо використання логотипа Дії: https://diia.gov.ua/img/diia-october-prod/sites/1/Diia_LOGO_GUIDE.pdf

Ми зв’язалися з автором неофіційної реалізації в Figma, який повідомив, що в цій реалізації відсутні деякі компоненти з офіційної дизайн-системи.

Щоб дізнатися, які саме компоненти були реалізовані в нашій бібліотеці, ознайомтеся зі специфікацією.

• pnpm dev: запускає пакети docs і lib у режимі розробки, тобто сторінка оновлюватиметься при кожній зміні.
• pnpm serve:watch:docs: запускає застосунок docs у режимі розробника.
• pnpm build:lib: виконує збірку лише самої бібліотеки.
• pnpm build:all: виконує збірку всіх пакетів.
• pnpm lint: запуск лінту для всіх пакетів.
• pnpm lint:fix: запуск лінту в режимі авто-виправленн для всіх пакетів.