Mục lục
Khởi đầu nhanh với UIkit
Sau khi tải UIkit, bạn sẽ có hai thư mục:
css/: chứauikit.min.cssjs/: chứauikit.min.jsvàuikit-icons.min.js
Bạn có thể nhúng thủ công hoặc dùng CDN. Dưới đây là ví dụ cấu trúc chuẩn:
1. Cách dùng bằng file tải về
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>UIkit Demo</title>
<link rel="stylesheet" href="css/uikit.min.css" />
<script src="js/uikit.min.js"></script>
</head>
<body>
<script src="js/uikit-icons.min.js"></script>
</body>
</html>2. Cách dùng qua CDN
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.21.16/css/uikit.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.21.16/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.21.16/js/uikit-icons.min.js"></script>
Lưu ý: Nên đặt
uikit.min.js trong <head> để UIkit xử lý layout sớm nhất, tránh lỗi Cumulative Layout Shift (CLS) – một chỉ số quan trọng trong SEO và trải nghiệm người dùng.
Hệ thống thành phần mạnh mẽ
UIkit cung cấp hơn 70 thành phần (component) chia theo module – từ layout cơ bản đến animation, modal, parallax, lightbox, slider… Tất cả đều responsive và dễ mở rộng.
Dưới đây là một số thành phần phổ biến:
- Grid, Flex, Section
- Navbar, Modal, Slider
- Card, List, Button
- Animation, Scrollspy, Sticky
- Lightbox, Parallax
Xem toàn bộ thành phần tại: getuikit.com/docs
Vì sao nên chọn UIkit?
- Giao diện mặc định đẹp, không cần override nhiều.
- Hiệu suất cao – nhẹ hơn nhiều so với Bootstrap.
- Cấu trúc module rõ ràng – dễ custom từng phần.
- Không ràng buộc JS nặng – chỉ dùng chính UIkit, không cần jQuery.
- Tài liệu rõ ràng, có ví dụ tương tác và playground sẵn.
Tổng kết
Nếu bạn cần một framework CSS hiện đại, tinh gọn, dễ học, dễ dùng mà vẫn mạnh mẽ – UIkit là lựa chọn không thể bỏ qua. Bạn có thể dùng cho blog cá nhân, portfolio, web sản phẩm, admin panel, thậm chí cả ứng dụng thực tế lớn.
Chúc bạn xây dựng giao diện đẹp – sạch – nhanh với UIkit!
Bình luận