Architecture Decision RecordЗапис архітектурного рішення: Tailwind CSS
Рішення: використати Tailwind CSS як CSS-фреймворк для стилізації інтерфейсу користувача.
Що таке Tailwind CSS?
Tailwind — це CSS-фреймворк utility-first, що дозволяє швидко розробляти й настроювати інтерфейси користувача. Він розроблений як дуже настроюваний і дозволяє розробникам писати легший та ефективніший CSS. Цей фреймворк надає набір наперед визначених класів для дуже швидкої стилізації UI.
Контекст
Ми будуємо вебзастосунок для клієнта, якому потрібен адаптивний та настроюваний інтерфейс користувача. Клієнт попросив про узгоджену й сучасну стилізацію. Команда розробників має досвід використання власного CSS, але хоче дослідити CSS-фреймворки, які можуть заощадити час і зусилля. Ми шукаємо фреймворк, який простий у використанні, настроюваний і має велику спільноту для підтримки.
Чинники рішення
Простота використання: ми хочемо фреймворк, який легко вивчити і який можна інтегрувати в наш робочий процес розробки.
Настроюваність: ми хочемо фреймворк, який можна налаштувати відповідно до настанов бренду клієнта та його теми.
Підтримка великої спільноти: ми хочемо фреймворк, що має активну спільноту розробників і дизайнерів, які можуть надати допомогу та ресурси за потреби.
Економія часу: ми хочемо фреймворк, який може заощадити час і зусилля на стилізації UI.
Розглянуті варіанти
Bootstrap: популярний CSS-фреймворк з великою кількістю готових компонентів і великою спільнотою розробників.
Foundation: ще один популярний CSS-фреймворк, розроблений для розробки за принципом mobile-first.
Materialize: CSS-фреймворк на основі мови дизайну Material Design від Google з готовими компонентами для розробки UI.
Tailwind CSS: CSS-фреймворк utility-first з акцентом на настроюваність та ефективність.
Результат рішення
Розглянувши варіанти, ми вирішили використовувати Tailwind CSS з таких причин:
Простота використання: підхід Tailwind простий і зрозумілий. Його службові класи (utility classes) пришвидшують побудову UI.
Настроюваність: Tailwind дозволяє налаштування, надаючи набір конфігураційних файлів, які дають розробникам змогу легко змінювати стилі фреймворку за замовчуванням.
Підтримка великої спільноти: Tailwind має дуже активну спільноту розробників і дизайнерів, які постійно створюють нові ресурси, плагіни та інструменти.
Економія часу: Tailwind може заощадити час, дозволяючи розробникам зосередитися на інших аспектах проєкту.
Ми використовуватимемо службові класи Tailwind CSS для побудови UI нашого проєкту. Команда розробників використовуватиме його атомарну й модульну дизайн-систему для написання ефективного та масштабованого CSS-коду. Ми скористаємося готовими шаблонами та візуальними компонентами Tailwind, щоб пришвидшити процес розробки, водночас використовуючи власні стилі, щоб відповідати брендингу та темі клієнта.