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

Nếu bạn không muốn dùng Bootstrap nữa, thì UIkit là một CSS Front-end Framework rất đáng để tham khảo.

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

Cấu trúc cơ bản

Sau khi tải UIkit về, giải nén ra bạn sẽ được 2 thư mục css và js.

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <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>

Hoặc bạn không cần tải gì cả bằng cách sử dụng CDN.

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.21.16/css/uikit.min.css" integrity="sha512-uDhfxDqgELKjw67ZVvOCyWWD4eEORa5wjyGyytiThG9LFVK2F8wvYj7QGFpxNlFCyNqjO5PYCNjtVZhWrO2JuQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.21.16/js/uikit.min.js" integrity="sha512-vKDeN+i81+kMaXLe0V9cAAFaYRsVbX61IV4B6JYZIGa8rM9cNlRrMqiKKe358+A3tpO9W8yjaxC3O/AVij3sog==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    </head>
    <body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.21.16/js/uikit-icons.min.js" integrity="sha512-8CCEtD819VpG9jUuabTKr2vrM2CB8njTo+zpQN4DA1BQ6TEG6M4geGQHOP4jnILVXLOTFhDBCY7Gx0uevUHzqQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    </body>
</html>

Lưu ý: Bạn cần để tập tin uikit.min.js trước </head>, vì đây là tập tin hỗ trợ hiển thị các thành phần, để cuối trang trước </body> sẽ gây ra lỗi Cumulative Layout Shift (CLS).