Quorix UI là dịch vụ đầu tiên trong khu vực Dịch vụ của Quorix Việt Nam.

Đây là một package UI foundation được xây để làm nền giao diện dùng chung cho chính quorix-vietnam, đồng thời sẵn sàng mở rộng sang các dự án Quorix khác trong tương lai. Mục tiêu của nó không chỉ là “có một package CSS”, mà là tạo ra một lớp ngôn ngữ giao diện thống nhất để không phải bắt đầu lại từ đầu ở mỗi dự án.

Hiện tại có gì trong Quorix UI

Phiên bản hiện tại tập trung vào phần nền móng:

  • CSS reset
  • color tokens
  • typography tokens
  • font system
  • utility classes cơ bản
  • phát hành qua npm và CDN

Cấu trúc package hiện tại:

1
2
3
4
5
6
7
8
9

css/
  colors.css
  index.css
  reset.css
  typography.css
fonts/
  AWSDiatypeRoundedSemi-Mono-Bold.woff2
  AWSDiatypeRoundedSemi-Mono-Regular.woff2
  FragmentMono-Regular.woff2

Vì sao nó là một dịch vụ

Quorix UI được xem là một dịch vụ vì nó tạo ra giá trị dùng lại được cho toàn bộ hệ sinh thái Quorix:

  • giúp quorix-vietnam có nền giao diện đồng nhất
  • giảm thời gian setup UI cho các dự án mới
  • tạo chỗ bám để sau này phát triển component, layout utilities và docs
  • biến phần frontend foundation thành tài sản kỹ thuật có thể tái sử dụng

Nói ngắn gọn, đây là lớp UI dùng chung để Quorix có thể phát triển nhanh hơn nhưng vẫn giữ được bản sắc.

Cách dùng

npm

1

npm install @quorix/ui

1

import '@quorix/ui/css/index.css';

CDN

1
2
3
4

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@quorix/ui@1.0.1/css/index.css"
/>

Package info

Vai trò đối với quorix-vietnam

Đây là điểm rất quan trọng: Quorix UI được tạo ra trước hết để phục vụ chính website này.

Vì vậy khi package phát triển thêm trong tương lai, hướng đi sẽ không dừng ở font và colors. Những phần hợp lý để mở rộng tiếp gồm:

  • spacing và sizing tokens
  • border radius và shadow tokens
  • button, input, card, badge, alert
  • layout utilities
  • theme presets
  • tài liệu có live preview

Tức là trang dịch vụ này đang giới thiệu một nền móng đang sống và sẽ tiếp tục lớn lên cùng quorix-vietnam, chứ không phải một package đã “xong việc”.