Vì sao Init UI đáng thử
Không giống các framework utility-first nặng nề, Init UI theo hướng tối giản và có chủ đích. Mỗi quyết định thiết kế đều nhằm giảm thời gian bạn phải tinh chỉnh CSS thủ công:
- Đổi theme bằng một dòng CSS. Ghi đè biến
--iu-primary-base(hoặc 5 biến gốc còn lại: neutral, success, danger, warning, info), toàn bộ thang màu 11 sắc độ, gradient, focus ring và các cặp tương phản sẽ tự động cập nhật nhờoklch(from ...). - Dark mode dựng sẵn. Hỗ trợ ba chế độ
auto,light,darkthông qua thuộc tínhdata-theme, kèm API JavaScriptInitUI.themevà cơ chế chống flash trắng (FOUC) khi tải trang. - Không phụ thuộc thư viện ngoài. Chỉ cần một file CSS và một file JS, không cần build tool, không cần cấu hình.
- Phong cách thị giác riêng. Các chi tiết như eyebrow label, notched corner, dashed focus ring và noise texture tạo nên nhận diện thị giác khác biệt so với các framework CSS phổ biến hiện nay.
Hệ thống layout và component
Init UI cung cấp đầy đủ các khối dựng layout — Container, Grid, Stack, Cluster cùng bộ tiện ích Flex — và một thư viện component phong phú:
- Button, Card, Badge, Alert, Dropdown, Navbar, Breadcrumbs
- Form Input, Checkbox & Radio, Switch, Password Input (kèm nút hiện/ẩn mật khẩu), Input Group, Custom File Input (drag & drop), Range Slider
- Tabs, Modal (có focus trap), Offcanvas, Tooltip
- Toast, Progress Bar & Progress Ring, Skeleton loading, Avatar, Divider
- Accordion (mở/đóng mượt bằng CSS Grid), Pagination (có ellipsis tự động), Button Loading (spinner tích hợp sẵn)
- List, Table (có chế độ striped, hover, compact), Back To Top
- Command Palette tìm kiếm nhanh bằng phím tắt
Ctrl+K, Kbd, Search Trigger - Form Validation tự động (dựa trên Constraint Validation API) với trạng thái
.iu-is-valid/.iu-is-invalid
Đi kèm là hệ thống token thiết kế đầy đủ: màu sắc, typography, spacing scale, radius, shadow, motion (easing/duration) và z-index — giúp giao diện nhất quán từ component nhỏ nhất đến bố cục tổng thể.
Cài đặt
Init UI có thể được nhúng qua CDN hoặc tải trực tiếp về dự án, không yêu cầu bước build nào:
Nhúng qua CDN:
<link rel="stylesheet" href="https://r2.inithtml.com/init-ui/css/init-ui.min.css" />
<script src="https://r2.inithtml.com/init-ui/js/init-ui.min.js"></script>Hoặc tải trọn bộ mã nguồn về máy tại đây.
Dùng thử ngay
Bạn có thể xem trực tiếp toàn bộ component trong trang demo, hoặc tham khảo tài liệu chi tiết cho từng class và API JavaScript.
Bước tiếp theo
Phiên bản hiện tại của Init UI là v0.2.0, tập trung vào một hệ thống theming linh hoạt và bộ component đủ dùng cho phần lớn dự án thực tế. Framework sẽ tiếp tục được cải thiện dựa trên phản hồi thực tế từ người dùng. Nếu bạn đang tìm một framework CSS nhỏ gọn, dễ tuỳ biến màu sắc và không kéo theo phụ thuộc rườm rà, Init UI là một lựa chọn đáng để thử ngay hôm nay.
Bình luận