UIkit – CSS Framework cực nhẹ và dễ sử dụng

19/07/2024 0 24 3 phút đọc

UIkit là một CSS Framework nhẹ, modular, hiện đại và rất dễ dùng. Đây là lựa chọn hoàn hảo nếu bạn muốn tạo giao diện web chuyên nghiệp mà không muốn dùng Bootstrap. Giao diện mặc định đẹp, cấu trúc class rõ ràng, tài liệu đầy đủ – UIkit mang đến trải nghiệm vừa tinh gọn vừa mạnh mẽ.

UIkit – CSS Framework cực nhẹ và dễ sử dụng
Mục lục

Truy cập UIkit

Khởi đầu nhanh với UIkit

Sau khi tải UIkit, bạn sẽ có hai thư mục:

  • css/: chứa uikit.min.css
  • js/: chứa uikit.min.js và 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:

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!

Series: Thủ thuật Front-end

Bài Viết Liên Quan

Bình luận

  • Không có bình luận.