UIkit là một framework CSS hiện đại, nhẹ và linh hoạt – rất phù hợp để xây dựng giao diện cho blog, portfolio, landing page và cả theme WordPress. Dưới đây là danh sách các class UIkit phổ biến và hữu ích nhất mà bất kỳ frontend dev nào cũng nên ghi nhớ.
Layout & Container
| Class |
Công dụng |
.uk-container |
Giới hạn chiều rộng nội dung, có padding |
.uk-section |
Phân khối nội dung (section), có padding lớn |
.uk-grid |
Hệ thống lưới (responsive grid) |
.uk-child-width-1-2@m |
Chia cột 1/2 khi màn hình medium trở lên |
Thẻ & Box & Card
| Class |
Công dụng |
.uk-card |
Thẻ chứa nội dung theo kiểu card |
.uk-card-default / primary / secondary |
Kiểu nền và border card |
.uk-card-body |
Phần nội dung của card |
.uk-box-shadow-hover-medium |
Bóng đổ khi hover |
Typography
| Class |
Công dụng |
.uk-heading-line |
Tiêu đề có gạch ngang |
.uk-text-lead |
Đoạn văn lớn hơn, dùng cho mô tả chính |
.uk-text-muted |
Chữ mờ, ít nổi bật |
.uk-text-center / right / left |
Căn lề nội dung |
Responsive & Visibility
| Class |
Công dụng |
.uk-visible@m |
Chỉ hiện ở màn hình ≥ medium |
.uk-hidden@s |
Ẩn ở màn hình nhỏ |
.uk-width-1-2@m |
Chiều rộng 1/2 từ màn hình medium |
.uk-flex / .uk-flex-center |
Flexbox tiện căn giữa và align |
Nút & Hành động
| Class |
Công dụng |
.uk-button |
Class gốc cho nút bấm |
.uk-button-primary / default / danger |
Kiểu nút theo màu sắc |
.uk-button-small / large |
Thay đổi kích cỡ nút |
Một số class tiện dụng khác
| Class |
Công dụng |
.uk-margin / uk-padding |
Khoảng cách margin/padding |
.uk-light / uk-dark |
Đổi màu chữ sáng/tối tùy nền |
.uk-animation-fade / slide-left |
Hiệu ứng animation |
.uk-overflow-auto |
Cho phép cuộn khi tràn nội dung |
Kết luận
Ghi nhớ những class phổ biến này sẽ giúp bạn tăng tốc khi xây dựng giao diện với UIkit – đặc biệt khi làm theme WordPress, bạn có thể dễ dàng kiểm soát layout, typography, và responsive mà không cần thêm CSS phức tạp. Nếu bạn muốn một file PDF cheat sheet hoàn chỉnh, hãy để lại bình luận bên dưới!
Bình luận