Skip to content

SPECIFICATION.md

Latest commit

 

History

History
194 lines (131 loc) · 10.7 KB

SPECIFICATION.md

File metadata and controls

194 lines (131 loc) · 10.7 KB

Специфікація CSS-бібліотеки diui

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

Чому?

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

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

Цей проєкт жодним чином не пов’язаний із державою чи розробниками Дії і є лише моєю ініціативою.

Список вимог до бібліотеки

У цьому файлі стисло описано функціонал бібліотеки.

1. MVP-1

Перша фаза розробки: MVP-1.

MVP розшифровується як Minimum Viable Product. Нижче наведено плани на перший реліз бібліотеки:

✅: так позначено вимоги, які вже виконано.

1.1 🚧 Доступність коду бібліотеки

  1. 🚧 Бібліотека доступна для встановлення через NPM як окремий пакет.
  2. 🚧 Цей пакет експортує:
    • CSS-файли, мінімізовані та з мапами вихідного коду.
    • Публічні безкоштовні шрифти.

1.1 🚧 Нефункціональні властивості

  1. ✅ Класи та стилі оптимізовані для використання на мобільних пристроях із вузькими екранами.
  2. ✅ Усі розміри тексту прив’язані до розміру тексту в кореневому елементі <html>, усюди використовуються одиниці розміру rem.
  3. ✅ Бібліотека підтримує сучасні браузери, підтримки браузера IE немає.
  4. 🚧 Документація бібліотеки представлена на окремому сайті та описує весь функціонал бібліотеки.

1.2 ✅ CSS-змінні

  1. ✅ Бібліотека надає набір CSS-змінних, доступних у корені сайту. Усі ці змінні мають префікс di і виглядають приблизно так:
:root {
  --di-text-color: #000;
  --di-bg-color: #fff;
}
  1. ✅ Детальний опис доступних змінних наведено в розділах нижче.

1.3 ✅ Кольори

  1. ✅ Бібліотека надає набір стандартних кольорів через CSS-змінні.
  2. ✅ Кольори поділяються на:
    • ✅ палітру чорних, сірих і білих для тексту та підкладки;
    • ✅ палітру з нейтральним забарвленням;
    • ✅ палітру з позитивним забарвленням;
    • ✅ кольори із застережливим забарвленням;
    • ✅ палітру для підсвічення помилок;
    • ✅ усі інші кольори з дизайн-системи Дії.
  3. ✅ Спрощені градієнти в змінних.
  4. ✅ CSS-класи для підкладки:
    • ✅ усіх кольорів у забарвленні 100%;
    • ✅ усіх кольорів у забарвленні 80%;
    • ✅ усіх кольорів у забарвленні 60%;
    • ✅ усіх кольорів у забарвленні 40%;
    • ✅ усіх кольорів у забарвленні 20%;
    • ✅ усіх доступних градієнтів. У рамках MVP-1 доступні не всі можливі градієнти.
  5. ✅ CSS-класи для тексту:
    • ✅ усіх кольорів у забарвленні 100% та всіх кольорів без градації забарвлення.

1.4 🚧 Типографіка, текст

  1. Стилі та розмір шрифту для тексту різного розміру: маленький текст, звичайний текст, дуже маленький текст.
  2. Стилі та розмір шрифту для HTML-заголовків h1-h6.
  3. Стилі та розмір шрифту для HTML-заголовків h1-h6 в режимі display.
  4. Стилі та розмір шрифту для заголовку H1, але супер величезного розміру.
  5. Стилі та розмір шрифту для підкресленого тексту різних розмірів.
  6. Стилі та розмір шрифту для цитат.
  7. Списки нумеровані та ненумеровані з відступами.
  8. Блок тексту аля <p> із зовнішніми відступами.
  9. Посилання різних видів як тут: https://thedigital.gov.ua/news/rozvivaemo-napivprovidnikovi-tekhnologii-pidpisano-memorandum-pro-spivpratsyu
  10. ✅ Шрифти
    • ✅ Експортується і підключається шрифт e-ukraine для основного тексту і e-ukrainer-head спеціальних заголовків.
    • ✅ Більше про шрифти з дизайн-системи: https://thedigital.gov.ua/fonts
    • ✅ Шрифти надаються в форматах: woff, woff2 і otf.

1.5 ✅ Кнопки

  1. Кнопки різних розмірів: маленькі і великі.
    • стани: hover, disabled
  2. Три види кнопок: звичайна, лише з обідком, текстова кнопка.

1.6 Елементи Форми

  1. Базовий елемент вводу який включає в себе:
    • input в різних станах.
    • label підʼєднаний до нього
    • елемент з підказкою/помилкою
  2. Елемент для створення поля пошуку БЕЗ ІКОНКИ (Іконки то MVP-2).
    • різні стани
    • label підʼєднаний до нього
    • елемент з підказкою/помилкою
  3. Окремо елемент з підказкою/помилкою.

1.7 ✅ Бейджі

  1. ✅ Бейджі 5-ти кольорів: ✅ чорний, ✅ сірий, ✅ жовтий, ✅ зелений, ✅ червоний.
  2. ✅ Бейджи з додаткових кольорів з палітри Дії.

1.8 ✅ Таби

  1. ✅ Таби двох типів: прямокутні і з круглими кутами.
  2. ✅ Три стани: неактивний, активний, нейтральний.

1.9 ✅ Перемикачи

  1. ✅ Всі перемикачі ідуть в двох розмірах: нормальний і маленький.
  2. ✅ Перемикач з анімацією в стилі "Apple" пристроїв.
  3. ✅ Радіо кнопка.
  4. ✅ Чекбокс.

1.10 ✅ Аватари

  1. ✅ Аватари п’яти різних розмірів.
  2. ✅ Аватари з фото.
  3. ✅ Аватари з літерами.

1.x Картки

  1. ✅ Заголовок картки з другорядним текстом.
  2. 🚧 Картинка із заголовком і другорядним текстом унизу.
  3. 🚧 Картинка із заголовком і текстом праворуч.

1.10 ✅ Таблиці

  1. ✅ Таблиця на основі елементів таблиці і display властивості CSS.

1.11 🚧 Сервісні класи і змінні

цей розділ доповнюється

Це не є частиною офіційної дизайн-системи. Додано для зручності і щоб бібліотека була самодостатньою.

1.11.1 🚧 CSS класи:

  1. 🚧 Для властивостей флексбоксів і похідних.
  2. 🚧 Для внутрішніх відступів різних розмірів.
  3. 🚧 Для зовнішніх відступів різних розмірів.

1.11.2 🚧 CSS змінні

  1. 🚧 Для віступів на основі rem.
  2. 🚧 Для розміру шрифту.
  3. 🚧 Для відступів.

1.11.3 🚧 Загальні стилі

  1. 🚧 Загальні стилі по типу CSSBaseline в Material UI

2. MVP-2

Друга фаза розробки: MVP-2.

Тут описаний додатковий функціонал, який доповнює MVP-1. Цей функціонал буде реалізований вже після першої фази.

2.1 Доступність коду бібліотеки

  1. Додатково експортовані SASS(SCSS) файли, які дозволять сконфігурувати стилі під себе, задавши свої змінні замість типових.

2.x Нефункціональні властивості

  1. Документація доступна англійською мовою.

2.2 Кольори

  1. Градієнт для Hover.
  2. Градієнт для рамки.
  3. Статичні градієнти в змінних.

2.x Випадаючий список

  1. Для створення випадвючого списку додається JavaScript.
  2. Випадаючий список на основі input.

2.x Таблиці

  1. Таблиця на основі флексбоксів з aria атрибутами.

2. MVP-3

  1. Тема MUI для Реакту по мотивах Дії з усіма основними компонентами.
  2. Решта компонентів має буди в стилі Дії.