Difficulty:IntermediateLength:MediumLanguages:url-selector#selectionChanged” data-controller=”url-selector”>EnglishEspañolBahasa IndonesiaTiếng Việt
Trong khi Bootstrap và Foundation có thể là hai framework cho front-end phổ biến nhất đối với các nhà thiết kế web, tuy nhiên trong bài viết này tôi sẽ giới thiệu với bạn các tính năng của UIkit, một framwork nhẹ và có tính mô-đun cho fron-end cái mà tôi sử dụng trong hầu hết các dự án của tôi.
Đang xem: Một chuyến tham quan nhanh Đến uikit là gì, tìm hiểu uikit front
Lưu ý: Bài viết này giả định rằng bạn đã quen với cách làm việc của các framework cho front-end. Ngoài ra, mục tiêu chính của bài viết này không phải là để mở rộng các phần riêng biệt của framework này (ví dụ như hệ thống grid). Thay vào đó chúng ta sẽ tập trung vào trình bày các tính năng ngắn gọn hữu dụng của UIkit.
Bắt đầu
UIkit được xây dựng và duy truỳ bởi YOOtheme, một công ty của Đức, đây là công ty tập trung vào việc xây dựng các theme và ứng dụng cho web.
Cách tải về UIkit
Có sẵn một vài tùy chọn khác nhau để thêm UIkit vào trong các dự án của bạn. Bạn có thể sử dụng một trình quản lý gói như Bower, một Mạng Phân phối Nội dung giống như cdnjs, hoặc bạn có thể tải nó bằng tay từ trang GitHub của nó. Lưu ý rằng UIkit yêu cầu jQuery, vì vậy hãy chắc chắn rằng bạn đã bao gồm nó trong dự án của bạn.
Với mục đích của hướng dẫn này, chúng ta sẽ sử dụng cdnjs để kéo các tập tin UIkit cần thiết vào các demo trên CodePen của chúng ta. Hầu hết, để đơn giản, chúng ta sẽ phải bao gồm các tập tin uikit.min.css và uikit.min.js. Dù vậy trong hai ví dụ cuối cùng, chúng ta cũng sẽ thêm một số tập tin bổ sung mà không được bao gồm trong nhân của framework. Hãy nhớ rằng UIkit là mô-đun, cho phép chúng ta có thể chỉ tải và nạp các tập tin mà chúng ta thực sự cần thiết.
Bạn có thể tìm hiểu về cấu trúc của UIkit trên trang này.
Tuỳ biến UIkit
Đây là framework có thể được tuỳ biến một cách đầy đủ. Trước khi tải về, chúng ta có thể ghi đè lên các style mặc định của nó và áp dụng các style riêng của chúng ta. Ví dụ, nếu chúng ta muốn thay đổi các breakpoint (điểm ngắt) mặc định, chúng ta có thể truy cập vào trang customizer và tích vào tùy chọn Advanced Mode. Từ đó, chúng ta tìm thấy điểm các phần Breakpoint và thêm các breakpoint mới của chúng ta. Sau đó, chúng ta có được file CSS mới được tạo.
Trình duyệt hỗ trợ
UIkit hoạt động trong tất cả các trình duyệt hiện tại, cụ thể:
Hình ảnh lấy từ trang GitHub của UIkit
Các tính năng hữu ích của UIkit
Bây giờ là lúc để khám phá một số tính năng hữu ích của UIkit mà bạn có thể muốn sử dụng trong các dự án sắp tới của bạn!
Flexbox và Grids
UIkit cung cấp các thành phần Grid và Flex của nó để xây dựng các layout có tính đáp ứng (responsive). Để hiểu rõ hơn về cách các thành phần này làm việc, hãy tạo một giao diện đơn giản. Trước khi làm điều đó, chúng ta phải thêm tập tin uikit.min.css vào ví dụ của chúng ta.
Dưới đây là các yêu cầu:
Trên các viewport rộng đến 767px, tất cả các cột được đặt theo chiều dọc. Trên các viewport rộng hơn 767px, chiều rộng của các cột thứ nhất và thứ ba là 25% độ rộng của thành phần cha, trong khi đó chiều rộng của cột thứ hai là 50% của thành phần cha.
Mã html trông giống thế này:
Lưu ý các thành phần .card bên trong các cột của chúng ta. Vì lý do văn phong, chúng ta sẽ áp dụng một số style cơ bản:
.card { background: #e0e0e0; padding: 10px; margin-top: 35px;}Dưới đây là demo trên Codepen:
Như bạn có thể nhìn thấy các demo ở trên (khi chiều rộng của viewport là lớn hơn 767px), thì các thành phần .card không giãn hết toàn bộ chiều cao của thành phần cha. Giả sử chúng ta muốn điều đó xảy ra.
Một giải pháp nhanh chóng có thể là cho các thành phần mong muốn thuộc tính height: 100%, đúng chứ? Tuy nhiên, điều này không hoạt động trong một số trình duyệt (ví dụ Safari) vì vậy chúng ta phải loại bỏ cách đó và tìm kiếm một sự thay thế. Một thủ thuật là định nghĩa các cột như là các flex container bằng cách cho cúng một lớp uk-flex. Vì vậy bây giờ nếu chúng ta kiểm tra trang lại một lần nữa, chúng ta sẽ thấy rằng các thành phần .card thừa kế chiều cao từ thành phần cha. Nếu bạn muốn lấy một vài thông tin về lý do tại sao giải pháp đó hoạt động, thì tôi khuyên bạn đọc cái thread này trên Stack Overflow.
Dưới đây là demo đã được cập nhật:
Tạo hiệu ứng động dựa trên việc cuộn trang
Nếu bạn là một fan của các hiệu ứng động dựa vào việc cuộn trang thì bạn chắc chắn sẽ cảm kích trước thành phần Scrollspy của UIkit. Thành phần này cho phép chúng ta kích hoạt hiệu ứng động và các sự kiện khi chúng ta cuộn lên hoạc xuống một trang. Hãy xem một ví dụ thực tế để biết cách nó hoạt động.
Đối với ví dụ này, chúng ta sẽ thêm các file uikit.min.css và uikit.min.js vào trong dự án của chúng ta.
Cấu trúc của code giống với ví dụ trước đó. Mục tiêu của chúng ta là kích hoạt các hiệu ứng động khác nhau khi các thành phần với lớp blue (có tất cả năm cái) đi vào viewport. Để cài đặt hành vi này, chúng ta thêm thuộc tính data-uk-scrollspy vào trong các thành phần đích của chúng ta; giá trị của chúng đang là một đối tượng có thể cấu hình mà kiểm soát hiệu ứng động thật sự. Ví dụ, thuộc tính cls lưu trữ kiểu hiệu ứng:
Dưới đây là demo tương ứng trên Codepen:
Thao tác với SVG
UIkit cung cấp một cách kiểm soát thuận tiện diện mạo của SVG. Thay vì thổi phồng HTML của chúng ta với các inline SVG, chúng ta có thể sử dụng thẻ img để nạp SVG của chúng ta, sau đó thêm thuộc tính data-uk-svg vào các thẻ. Bằng cách này, những hình ảnh được chuyển đổi thành các inline SVG mà chúng ta có thể thao tác sau này. Hành vi này là có thể nếu chúng ta thêm các file uikit.min.js vào dự án của chúng ta.
Xem thêm: Thuế Ttđb Là Gì – Thuế Tiêu Thụ Đặc Biệt Là Gì
Mã html cho một SVG đơn giản như sau:
Bây giờ trong CSS, chúng ta có thể tùy biến nó. Ví dụ, trong trường hợp của chúng ta, chúng ta thay đổi một vài style cơ bản:
svg { width: 100px; height: auto; fill: maroon;}Demo trên Codepen:
Hình nền với kích thước tự động đáp ứng (responsive)
Có nhiều khi chúng ta muốn có một hình nền để thực hiện những hành vi đáp ứng của một thẻ img. Để làm như vậy, chúng ta có thể tận dụng điểm mạnh của thành phần Cover của UIkit. Vì vậy, đầu tiên chúng ta thêm lớp uk-invisible vào một thẻ img và sau đó bọc nó trong một thành phần cha với lớp uk-cover-background. Tiếp theo, tùy ý bạn, chúng ta có thể sử dụng các thành phần Utility và Flex để định vị trí nội dung bên trên hình nền.
Để cho điều này hoạt động được, chúng ta phải bao gồm tập tin uikit.min.css trong dự án của chúng ta.
Với suy nghĩ đó, để tạo ra một hình nền đáp ứng với nội dung được canh giữa theo chiều dọc và chiều ngang bên trong nó, chúng ta sẽ cần HTML như thế này:
Trong CSS, bây giờ chúng ta có để xác định hình nền cho các thành phần cha ở ngoài cùng (tất nhiên chúng ta cũng có thể thêm một hình nền nội tuyến):
div.uk-cover-background { background-image: url(IMAGE_PATH);}Điều đó cho chúng ta là kết quả sau đây:
Tạo các lớp che phủ
UIkit cung cấp thành phần Overlay để giúp xây dựng các hình ảnh che phủ. Đây là một thành phần tuyệt vời, các lớp che phủ này có các style khác nhau với rất nhiều tuỳ chọn thú vị.
Đối với hành vi này, yêu cầu duy nhất là file uikit.min.css. Một ví dụ của mã html cần thiết cho việc xây dựng bốn lớp che phủ được chỉ ra ở dưới đây:
Đừng sợ các code ở trên. Phần lớn là do một số lớp helper (trợ giúp) mà chúng ta đã thêm vào hình ảnh của chúng tôi. Để hiểu rõ hơn, hãy chắc chắn bạn đã đọc các tài liệu cho thành phần này.
Đây là bản demo nhúng từ Codepen:
Tạo trình chiếu hình ảnh toàn màn hình có khả năng đáp ứng (responsive)
Một trong những điều tuyệt vời nhất của các thành phần UIkit là Slideshow. Điều này cho phép chúng ta tạo (hãy xem bạn có thể đoán không) các trình chiếu hình ảnh đẹp có khả năng đáp ứng cao. Để mô phỏng nó, hãy xây dựng một trình chiếu ảnh toàn màn hình có tính đáp ứng.
Dưới đây là các file UIkit mà chúng ta sẽ cần:
uikit.min.css slideshow.min.css slideshow.min.css uikit.min.js slideshow.min.js
Code cho trình chiếu ảnh trông như sau:
Hai điều cần lưu ý ở đây là:
Hãy nhìn vào bản demo liên quan trên Codepen sau đây:
Tạo tiêu đề cố định
Thành phần hữu ích khác đó là thành phần Sticky. Hãy tìm hiểu nó bằng cách tạo ra một tiêu đề cố định.
Một lần nữa, ở đây là các file UIkit cần thiết:
uikit.min.css sticky.min.css uikit.min.js sticky.min.js
Trong đoạn html, chúng ta thêm thuộc tính data-uk-sticky vào phần tử header. Ngoài ra, với mục đích văn phong, chúng ta sử dụng thành phần navbar để xây dựng thanh điều hướng.
Dưới đây là một phần của mã HTML:
Trong ví dụ này, chúng ta không truyền bất kỳ giá trị nào cho thuộc tính data-uk-sticky. Nhưng nếu chúng ta muốn tuỳ biến hành vi mặc định của phần tử sticky, chúng ta phải sửa đổi các đối tượng mà được truyền như là một giá trị vào thuộc tính này.
Bản demo liên quan trên Codepen:
Kết luận
Tôi hy vọng bạn sẽ thích chuyến tham quan nhanh đến UIkit và đã tìm thấy một ý tưởng về những gì chúng ta có thể xây dựng với framework tuyệt vời này. Tất nhiên, có rất nhiều thành phần khác tuyệt vời sẵn có mà chúng ta đã không khảo sát, do đó, tôi khuyên bạn nên tìm hiểu sâu hơn. Cuối cùng nhưng không kém phần quan trọng, một phiên bản UIkit mới (v.3) sẽ được phát hành trong các tháng sắp tới với các tính năng thú vị hơn. Nhớ theo dõi nhé!
Nếu bạn có bất kỳ câu hỏi nào liên quan đến UIkit, hãy cho tôi biết trong phần bình luận dưới đây.