55da385022302664040110

Materialize là gì nhỉ?

Bạn có thấy cụm từ trên rất quen thuộc không? Vâng, nó được lấy ý tưởng từ “Material Design” rất quen thuộc đối với hầu hết  web designer chúng ta hiện nay, nó được ông lớn Google định nghĩa nên. Sau đó, Google đã cho ra đời bộ Giao diện chuẩn Material nhưng rất tiếc chúng chỉ dùng cho những ứng dụng web có sử dụng AngularJS. Vậy làm thế nào một website bình thường có được giao diện chuẩn “Material” như Google bây giờ?

Các bạn đừng lo vì đã có một nhóm sinh viên của trường Đại học Carnegie Mellon, US đã tạo ra một bộ giao diện tương tự như vậy cho chúng ta. Và chúng có tên là “Materialize“.

Vậy chúng có điểm gì đặc biệt đáng để chúng ta sử dụng? Chúng ta cùng khám và phá thôi nào!

Ưu điểm đầu tiên phải nói đến đó là nó rất nhẹ và mượt, đồng thời rất dễ sử dụng. Chỉ cần gắn một file css và một file js vào bộ source của chúng ta là bạn đã có thể sử dụng rồi. Nó khá là quen thuộc nếu bạn đã từng sử dụng Bootstrap. Cú pháp ngắn gọn khá nhiều so với Bootstrap nhưng vẫn hỗ trợ tốt trên nhiều thiết bị.

Ví dụ về cách chia layout:

<div class="row">
 <div class="col s12"><p>s12</p></div>
 <div class="col s12 m4 l2"><p>s12 m4</p></div>
 <div class="col s12 m4 l8"><p>s12 m4</p></div>
 <div class="col s12 m4 l2"><p>s12 m4</p></div>
 </div>
 <div class="row">
 <div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
 <div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
 <div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
 <div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
</div>

Trong Materialize có hỗ trợ một số thành phần hữu ích như: button, badge, breadcrumb, pagination, navbar,… và một số thành phần đặc biệt như chips, collections, preloader, cards…

Ví dụ:

Collections

Materialize demo

Cards

Materialize cards demo

Tiếp đến, Materialize còn có một thư viện JS phong phú giúp cho giao diện web trở nên sinh động và linh hoạt hơn rất nhiều. Ví dụ như click để xem hình ảnh kích thước lớn hơn, hiển thị cửa sổ popup, hiển thị thông báo và nhiều thứ khác nữa.

Showcase của một số website đã sử dụng Materialize xem tại đây.

Cuối cùng là hướng dẫn chi tiết xem tại: http://materializecss.com/getting-started.html.

Kết luận ngắn ngọn:

Materialize là một bộ giao diện khá chuẩn dành cho web designer dù bạn chưa có bất kì kiến thức nào về Material Design vẫn có thể sử dụng nó một cách dễ dàng.

Materialize là gì nhỉ?
5 (100%) 3 votes

Từ khóa tìm kiếm:

  • phần mềm lọc bạn ko tương tác
  • tìm và lọc bạn bè ít tương tác
  • xoa bạn fb nhu nao

Bình luận

1 Bình luận on "Materialize là gì nhỉ?"

Thông báo
avatar
Sắp xếp:   Mới nhất | Cũ nhất | Bình chọn nhiều
Hải Long
Admin

Tập tành design thôi 😀

wpDiscuz