thiết kế web

110120152 – Lâm Ngọc Tài – Chủ đề: Uikit
Tổng quan:
I. Uikit là gì ?
II. Uikit thường bao gồm những gì ?
III. Cách sử dụng
IV. Kết luận
Nội dung:
I. Uikit là gì ?
UIkit là bộ kit giao diện người dùng, là một tập hợp các thành phần giao diện
người dùng được làm sẵn cũng như các nguồn lực cho các dự án website và
mobile. Chúng thường đi kèm với các tùy chọn về style thiết kế và màu sắc
khác nhau, cho phép các designer hoàn toàn tùy chỉnh các yếu tố, template và
bố cục bên trong để thiết kế UI của riêng họ và duy trì sự nhất quán trong
thương hiệu một cách dễ dàng chỉ với vài cú click hoặc thao tác kéo thả đơn
giản.
UIkit đượᴄ хâу dựng ᴠà duу truỳ bởi YOOtheme, một ᴄông tу ᴄủa Đứᴄ, đâу là
ᴄông tу tập trung ᴠào ᴠiệᴄ хâу dựng ᴄáᴄ theme ᴠà ứng dụng ᴄho ᴡeb.
Các thông tin:
 Phát hành: 2013

 Popularity: 3,800+ sao trên GitHub
 Kích thước: 118 KB
 Preprocessors: Less, Sass.
 Responsive: Có.
 Modular: Có.
 Sử dụng cho templates/Layout: Có.
 Icon: Font Awesome.
 Mở rộng: Có.
 Điểm đặc biệt:Article, Flex, Cover, HTML Editor.
 Hỗ trợ trình duyệt: Chrome, Firefox, Safari, IE9+
 Trang chủ: http://getuikit.com/
II. Uikit thường bao gồm những gì ?

 Thanh điều hướng và menu
 Icon, hình ảnh và đồ họa
 Lưới, thẻ và bố cục
 Các nút nhấn, biểu đồ và tab
 Header và footer
 Nút chia sẻ mạng xã hội
 Màu sắc và phong cách thiết kế
 Văn bản và typography
 Template trang
 Tương tác và hoạt ảnh
 Khác
III. Cách sử dụng
1) Cách tải Uikit về

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.
<!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>
2) Một số tính năng cơ bản

 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

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>
<div>
</div>
<div>
</div>
<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>
2</div>
</div>
3</div>
</div>
4</div>
</div>
5</div>
</div>
</div>
 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 .
IV. 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. 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

thiết kế web

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

thiết kế web

Uploaded by

Copyright:

Available Formats

110120152 – Lâm Ngọc Tài – Chủ đề: Uikit

Các thông tin:

 Phát hành: 2013

II. Uikit thường bao gồm những gì ?

III. Cách sử dụng

1) Cách tải Uikit về

2) Một số tính năng cơ bản

<div id="offcanvas" uk-offcanvas>

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

<div class="uk-child-width-1-3@s uk-child-width-1-5@m uk-text-

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

<div class="uk-text-center" uk-grid>

IV. Kết luận

You might also like