Design System + Tailwind
Design System
- Tailwind - нова
- Bootstrap 3 + Inspinia - існуюча
- Element.io - використовується для форм
- Дія -
- Softpro Figma
Процес розробки UI
- вибір дизайн система
- макет це набір елементів та секції
- QA, PM, Front - розуміють дизайн систему і формують UI з готових блоків
Перехід на VUE + Tailwind
👀 "План дій"
# Використання VUE tailwind
- вибір 1+ бібліотек
- рішення щодо підключення tailwind, вирішення конфліктів
- документація
# vue
- прибрати старий код і всі blackbox перейти на hook
- PlayGround
- Документація з прикладами
# tailwind component MVP
- menu
- form2
- filter
- bi stat
- modal
- нові сайти - DGM, Публічка Аренда, Громади, Водоворот, Миколаїв МБК, Help кабінет, 50К - кабінет + site
- E-commerce: Водоворот
- admin table
- header
👀 "Компоненти та секції"
UI:
Site Sections:
- Hero
- Feature
- Pricing
- Contact
- Stats
- Testimonials
- FAQs
- Banners
- CTA
- Team
- https://preline.co/examples.html
- https://tailblocks.cc/ - приклади
E-commerce:
- Product Grid
- Product Detail
- Checkout
- Shopping Cart
Tailwind Components Library
cheatsheet:
Agregator:
- https://github.com/unlight/tailwind-components#timeline - Link Set - багато посилань на компоненти
- https://www.tailwindawesome.com/ - можна знайти безкоштовні сети, сайти, адмін
- https://tailwindcomponents.com/ - щось подібне
Free/MIT Component Library:
- https://preline.co/examples.html - є майже все
- https://www.hyperui.dev/components/ecommerce/carts - зручна навігація те що є норм
- https://postsrc.com/components - є картки і UI
- https://www.landingfolio.com/library/stats/tailwind - є багато всього не зручно
- https://flowbite.com/ - MIT + PRO?
- https://merakiui.com/components/tables - Табличка - MIT 228 Components
- https://kutty.netlify.app/components/ - є компоненти
- https://www.tailwind-kit.com/components/list - є компоненти і секції
- https://floatui.com/components -
- https://sailboatui.com/docs/components/badge/#large - MIT
- https://daisyui.com/components/ - MIT
- https://tailwind-elements.com/ - MIT?
site:
- https://preline.co/examples.html - є майже все
- https://tailblocks.cc/ - Блоки
- https://flowrift.com/ - MIT Для сайту і для e-commerce
- https://floatui.com/components - Site
- https://www.tailwindawesome.com/ - Є безкоштовні дизайни
- https://doggystickers.vercel.app/ - 100% швидкість
- https://treact.owaiskhan.me/ - набір шаблонів
mode:
- calendar https://tailwinduikit.com/components/webapp/calendar/calendar
- kanban https://flowbite.com/application-ui/demo/kanban/
- kanban2 https://horizon-ui.com/chakra-pro/#/admin/main/applications/kanban?ref=docs-tailwind
- kanban3 https://free-kanban-8dfkn6xdx-seki2020.vercel.app/
map:
cards:
- https://freefrontend.com/tailwind-cards/
- https://codepen.io/markpraschan/pen/qBEGywV - weather
- https://postsrc.com/components/card
- https://www.hyperui.dev/components/marketing/cards
- https://tailwinduikit.com/components/webapp/table/list
взагалі карточок багато і їх можна знайти через пошук "card user, produc etc"
admin:
- https://flowbite-admin-dashboard.vercel.app/
- https://www.tailwindawesome.com/resources/mosaic-lite
- https://demo.tailadmin.com/index-analytics
pro:
- https://tailwindui.com/ - 299USD
- https://tailwindcss.com/showcase - Набір класів MIT
огляд:
- https://blog.bitsrc.io/best-tailwind-component-libraries-7ca0f99ec815 - 7 кращих
- https://dev.to/cruip/25-places-where-you-can-get-free-tailwind-css-components-47lm - TOP 25
- https://medium.com/frontendweb/top-19-best-free-tailwind-css-libraries-kits-for-2023-8dfb478d4d0f - TOP 20
💡 "Список VUE"
- Gis Dataset
- Widget
- BI
- SimpleMap
- Table
- Calendar
- Kanban
- Simple Table
- Form
Описати props, Приклади і вставка через Iframe
Дія - приклади готових елементів
ЄДЕССБ - інтро + загальні секції
ЄДЕССБ - аккордеон
ЄДЕССБ - плитки сервісів
ЄДЕССБ - новини
ЄДЕССБ - faq
ЄДЕССБ - реєстр
Map50 - профіль