Tìm hiểu Uikit Front-End Framework

Bài đăng này đã không được cập nhật trong 2 năm

Giới Thiệu

Trong bài viết này tôi xin giới thiệu đến các bạn một javascript framework có tên là UIKit, đây là một framework không phổ bến bằng nhưng cũng tương tự như Bootstraps, cung cấp các tính năng để thiết kế giao diện trang web một cách nhanh chóng và hiệu quả. UIKit cung cấp cho các bạn một tập hợp các component về HTML,CSS và JS với khả năng sử dụng dễ dàng, dễ dàng tùy biến và mở rộng các component này. Và UIKit là một framework mã nguồn mở nên các bạn có thể thoải mái chỉnh sửa và sử dụng. Để có cái nhìn tổng quan về các CSS Framework tham khảo bài viết : https://viblo.asia/huongk54a2/posts/qzakzNbRkyO

Làm thế nào để sử dụng

Uikit cũng giống như các framework khác , yêu cầu duy nhất là một file CSS và file javascript nếu như bạn muốn sử dụng những thành phần của chúng và một folder font. HTML của bạn sẽ bắt đầu như sau:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="css/uikit.min.css" />
        <script src="js/jquery.js"></script>
        <script src="js/uikit.min.js"></script>
    </head>
    <body>
    </body>
</html>

Vậy đó bạn đã có thể bắt đầu sử dụng các class của UIkit trong các mã HTML rồi.

Một số tính năng

Với UIkit cũng có đủ các thành phần , trong đây tôi chỉ nêu vài thành phần mà tôi thấy thích

Off-Canvas Nó được sử dụng một cách dễ dàng. Code:

<button class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #offcanvas">Open</button>
<a href="#offcanvas" uk-toggle>Open</a>

<div id="offcanvas" uk-offcanvas>
    <div class="uk-offcanvas-bar">
        <h3>Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <button class="uk-button uk-button-default uk-offcanvas-close uk-width-1-1 uk-margin" type="button">Close</button>
    </div>
</div>

Grid Cách phân chia màn hình responsive của lưới (Gird) như sau:

uk-width-@s và uk-child-width-@s là màn hình > 640px
uk-width-@s và uk-child-width-@s là màn hình > 960px
uk-width-@s và uk-child-width-@s là màn hình > 1200px
uk-width-@s và uk-child-width-@s là màn hình > 1600px

Có 2 cách để có thể tạo grid với uikit Ta sẽ ví dụ với kiểu 5 cột mà ở boostrap 3 không có.

Cách 1 có thể tạo bằng cách đặt class vào phần tử cha của list layout Code

 <div class="uk-child-width-1-3@s uk-child-width-1-5@m uk-text-center" uk-grid>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Item 1</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Item 2</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Item 3</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Item 4</div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">Item 5</div>
        </div>
    </div>

Cách 2 là đặt class grid ngay tại các thẻ Code:

 <div class="uk-text-center" uk-grid>
        <div class="uk-width-1-3@s uk-width-1-5@m">
            <div class="uk-card uk-card-default uk-card-body">Item 1</div>
        </div>
        <div class="uk-width-1-3@s uk-width-1-5@m">
            <div class="uk-card uk-card-default uk-card-body">Item 2</div>
        </div>
        <div class="uk-width-1-3@s uk-width-1-5@m">
            <div class="uk-card uk-card-default uk-card-body">Item 3</div>
        </div>
        <div class="uk-width-1-3@s uk-width-1-5@m">
            <div class="uk-card uk-card-default uk-card-body">Item 4</div>
        </div>
        <div class="uk-width-1-3@s uk-width-1-5@m">
            <div class="uk-card uk-card-default uk-card-body">Item 5</div>
        </div>
    </div>

Kết Quả

Ngoài ra còn có nhiều thành phần khá thú vị như animations, transition … các bạn có thể tìm hiểu kỹ nhất tại https://getuikit.com/docs/introduction .

Kết Luận

Một vài điều được trình bày bên trên đã giúp bạn có một số cái nhìn về Uikit . Với Uikit Tất cả các JavaScript có thể được dễ dàng được gọi thông qua dữ liệu thuộc tính thẻ và class trên thẻ HTML và không yêu cầu bất kỳ JavaScript thêm. Nhưng bạn cũng có thể customize thêm những JavaScript của riêng bạn nếu như bạn mong muốn mở rộng. Bạn cũng có thể đóng góp thêm cho công đồng Uikit thông qua Github https://github.com/uikit/uikit và thậm chí còn có thể làm tốt hơn

Giới Thiệu

Làm thế nào để sử dụng

Một số tính năng

Kết Luận

Mục lục