Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Material Design Lite
Webdesign

Học Material Design Lite: Grid

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Learning Material Design Lite.
Learning Material Design Lite: Navigation

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Gần đây chúng ta đã tìm hiểu framework dành cho phát triển front-end mới của Google, Material Design Lite (MDL). Chúng ta đã biết rằng MDL đi kèm với các thành phần UI (giao diện người dùng) để xây dựng các trang web theo nguyên tắc và hướng dẫn thiết kế Material Design.

Trong loạt bài này, chúng ta sẽ nghiên cứu từng thành phần MDL một cách chi tiết hơn, bắt đầu với hệ thống Grid tạo thành nền tảng cho bất kỳ framework front-end nào. Hãy bắt đầu nào!

Làm quen

Trước khi chúng ta có thể sử dụng Grid, hoặc bất kỳ thành phần nào khác trong MDL, trước tiên chúng ta cần phải triển khai các thư viện MDL—các stylesheet và JavaScript. Có một số cách để chúng ta có thể thực hiện việc này, nhưng có lẽ đơn giản nhất là liên kết đến các tập tin được lưu trữ trên Google CDN. Và những tập tin này bao gồm:

  • Stylesheet chứa phông chữ biểu tượng của Material Design
  • Roboto, là phông chữ tiêu chuẩn của Material Design
  • Stylesheet chính
  • Tập tin JavaScript

Bảng Màu

Một khi chúng ta đã thêm chúng, chúng ta có thể bắt đầu xây dựng UI với màu sắc theo định nghĩa trong tên stylesheet chính. Stylesheet chính được đặt tên theo quy ước sau: material.{primary}-{accent}.min.css. Màu primary của chúng ta ở đây là màu xanh mòng két trong khi màu đỏ là accent. Những màu này được áp dụng cho các thành phần như điều hướng và các button, nhưng chúng sẽ không ảnh hưởng đến Grid trừ khi chúng ta thêm các lớp đặc biệt như .mdl-color-primary.mdl-color-accent.

Bạn có thể thay đổi phối màu bằng bất cứ màu nào mà bạn thích bằng cách tham khảo đặc tả màu của Material Design, ví dụ: material.purple-pink.min.css, material.blue_grey-pink.min.css, and material.blue-orange.min.css.

Tuy nhiên, nếu bạn thấy sự kết hợp màu sắc bên trong tập tin css không được trực quan, bạn luôn có thể sử dụng công cụ Customize để thay thế. Chọn bất kỳ màu nào mà bạn cần, sau đó, thay thế liên kết đến stylesheet chính bằng một stylesheet được tạo ra thông qua công cụ.

Material Design color wheel
Sao chép stylesheet

Xây dựng Grid

Grid, cùng với Điều hướng và Footer trong MDL, là một phần của thành phần Layout. Grid trong MDL được xây dựng bằng Flexbox giúp nó linh hoạt hơn so với các framework truyền thống dựa vào float. Grid bao gồm các cột; mười hai cột cho viewport "desktop", tám cột cho viewport của "máy tính bảng" (800px và thấp hơn), và bốn cột cho viewport của "di động" (dưới 500px).

Chúng ta bắt đầu một Grid bằng một div rỗng. Sau đó, thêm một lớp mdl-grid, và một lớp tuỳ chỉnh không bắt buộc để ghi đè hoặc định nghĩa các phong cách tùy biến cho Grid sau này:

Hãy nghĩ về mdl-grid giống như row hoặc container của Bootstrap. Tuy nhiên, thay vì xác định trước, MDL lại hoàn toàn để nguyên chiều rộng cho chúng ta. Do đó, trong stylesheet của bạn, bạn có thể cần chỉ định rõ max-width của Grid theo yêu cầu của bạn:

Cột

Để xây dựng các cột, thêm một hoặc nhiều phần tử div (hoặc bất kỳ phần tử nào phù hợp với nhu cầu của bạn) cùng với một lớp mdl-cell bên trong mdl-grid.

Lúc này, chúng ta đã có thể tạo ra một Grid một cách hiệu quả. Chúng ta đã thêm ba cột. Mỗi cột được canh chỉnh hợp lý và được thiết lập chiều rộng bằng nhau 33.3333333333%. MDL xem như chúng ta sẽ thêm ba cột bên trong một hàng.

Để thay thế kích thước mặc định của cột, chúng ta cần phải thêm một lớp mdl-{number}-col với number từ 1 cho đến 12. Bây giờ hãy thêm lớp cho mỗi div:

Mẹo: Lớp này là không gian tên BEM cho một Modifier. Để tìm hiểu thêm, hãy tham khảo bài viết trước đây của chúng tôi Giới thiệu về Phương pháp luận BEM, trong đó Josh Medeski đã khái quát đầy đủ về BEM.

Cột đầu tiên bây giờ sẽ lớn hơn.

MDL cố gắng làm cho vừa khít các cột trong viewport còn lại bằng cách thay đổi kích thước các cột một cách hợp lý. Khi co lại trên máy tính bảng và di động (nhấp vào biểu tượng), bạn sẽ thấy rằng cột đầu tiên vẫn còn lớn hơn. Hai cột cuối cùng hiện xếp chồng lên nhau ở phía dưới, nhưng chúng vẫn nhỏ hơn một nửa so với cột đầu tiên.

Viewport cho "Máy tính bảng" và "Điện thoại di động"

Thông thường, chúng ta có thể cần phải kiểm soát các kích thước của cột khi chúng được xem trong một kích thước viewport cụ thể. Như đã đề cập trước đó, MDL đưa ra 8 cột ở kích thước viewport của máy tính bảng và 4 cột của điện thoại di động. Các cột nên thêm tối đa là 8 và 4 tương ứng trên máy tính bảng và thiết bị di động.

Lấy ví dụ ở trên: cột đầu tiên giờ đây sẽ lớn hơn cột đầu tiên trên desktop. Cột thứ hai sẽ lớn hơn khi xem trên máy tính bảng. Trên một điện thoại di động, hai cột đầu tiên sẽ được hiển thị cạnh nhau và bằng nhau trong khi cột cuối cùng sẽ chiếm lấy chiều rộng của phần tử cha.

Các Lớp Tiện ích

MDL cũng trang bị cho Grid một số lớp tiện ích hoặc các lớp sửa đổi. Chúng bao gồm một tập hợp các lớp để ẩn các cột ở các kích thước nhất định của viewport:

  • mdl-cell--hide-desktop; ẩn cột trong viewport của desktop (> 840px)
  • mdl-cell--hide-tablet; ẩn cột trong viewport của máy tính bảng (> 480px)
  • mdl-cell--hide-phone; ẩn cột trong viewport của điện thoại di động (<480px)

Một tập hợp các lớp khác để căn chỉnh cột:

  • mdl-cell--stretch; căng cột để lấp đầy phần tử cha, trong trường hợp này, mdl-grid.
  • mdl-cell--top; canh cột lên trên cùng của phần tử cha.
  • mdl-cell--bottom; canh cột xuống dưới cùng của phần tử cha.

Tất cả các lớp này là tùy chọn, nhưng sẵn có trong trường hợp bạn cần chúng. Thêm một hoặc hai lớp vào cột div, ví dụ:

Ví dụ này canh cột thứ ba xuống dưới cùng của hàng trên desktop, ẩn cột thứ hai trên máy tính bảng, trong khi trên di động cột thứ ba bị ẩn. Hãy thử nó:

Tóm tắt

Grid trong MDL được xây dựng một cách tỉ mỉ. Nhờ sử dụng Flexbox thay vì Float, nó giúp dễ dàng hơn để canh, sắp xếp và thay đổi kích thước các cột mà không cần lo lắng về việc phá vỡ layout hoặc ảnh hưởng đến các phần tử kế bên.

Mặc dù không bắt buộc, nhưng tôi khuyến khích bạn nên sử dụng hàm calc() của CSS cũng như phương pháp BEM—cấu trúc mà MDL sử dụng để đặt tên các lớp. Điều này sẽ giúp bạn tuỳ biến Grid trực tiếp của bạn bằng cấu trúc được tích hợp trong MDL.

Trong hướng dẫn tiếp theo, chúng ta sẽ tìm hiểu một thành phần MDL khác. Nhớ chú ý theo dõi nhé!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.