Web Design

Giới thiệu MaterializeCSS

Như các bạn có thể nhận thấy, từ khi được giới thiệu tại Google I/O 2014 cùng với Android L (sau này là 5.0), ngôn ngữ Material Design đã trở nên phổ biến với tốc độ lan truyền cao. Với Android, đó có thể là một tiêu chuẩn thiết kế chung vì khi bạn tạo một project mới với Android Studio, bạn đều được “o ép” sử dụng Material Design với AppCompat. Nhưng ví dụ tốt nhất về sức lan tỏa của MD phải chính là Web, vì The Big G không tài nào bắt ép các web devs phải dùng MD được. Vậy mà không cần tốn nhiều công sức như với Android, khá nhiều các trang web, đặc biệt là web apps, đều ít nhiều sử dụng, từ mức một phần các components song song với components của họ đã có, tới việc chuyển hẳn sang phong cách thanh thoát và tốt cho mắt này, chẳng hạn, Electron Builder vốn không thuộc Google nhưng thiết kế của trang lại đa phần dựa trên MD. Ngoài ra, ta còn có các cái tên lớn như Stamplay, hay JetRadar chuyên cung cấp dịch vụ vé máy bay cũng sử dụng MD trong thiết kế của họ. Và cuối cùng, không thể không kể đến ApkMirror vốn cung cấp các tập tin APKs cho Android – trang này được hậu thuẫn bởi AndroidPolice, một trang tin tức hàng đầu về Android cũng như các sản phẩm khác của Google.

MaterializeCSS

Google đã công khai mã nguồn của bộ thư viện Material Design cho Web, bao gồm các CSS classes và cả phần JavaScript nữa. Vì vậy, bạn có thể áp dụng các MD styles vào trang của mình theo cách mà Google áp dụng vào các trang của họ. Song, cá nhân tôi không thích bộ thư viện chính chủ này lắm. Lí do lớn nhất là có quá nhiều CSS class và tên chúng khá khó nhớ. Thứ hai, là nếu bạn đang có một trang web tương đối đồ sộ, nhưng muốn áp dụng thiết kế MD chồng lên, thì sẽ gặp không ít khó khăn, giao diện có thể trở nên lộn xộn, các phần tử bị sai vị trí. Vì vậy, tôi sẽ giới thiệu tới các bạn bộ thư viện MaterializeCSS. Đây là bộ thư viện “ăn theo” nhưng chất lượng ngang ngửa với bộ gốc, còn xét về độ thân thiện, thì tôi cho điểm bộ MaterializeCSS cao hơn hẳn so với bộ gốc. Ngoài ra, bộ thư viện này được thiết kế theo kiểu Bootstrap nên với những ai đã quen thuộc với Bootstrap, bạn chỉ cần vài nốt nhạc là có thể thành thạo với MaterializeCSS ngay và luôn. Và còn chần chừ gì nữa? Bạn hãy click vào liên kết này để chuyển đến trang chủ của họ ngay.

Phần hướng dẫn trên trang chính của họ tương đối dễ hiểu và đầy đủ nên tôi sẽ không giới thiệu thêm ở đây. Tốt nhất, bạn nên download phần thư viện đầy đủ mà họ cung cấp sẵn và liên kết chúng vào tập tin HTML dưới dạng stylesheet link hay script. Ngoài phần CSS, họ cũng cung cấp phần JS để giúp thực hiện các anim dựa trên các JS methods, chẳng hạn như parallax hay sidenav. Phần JS đã tích hợp sẵn jQuery, nên bạn không cần phải, và cũng không nên, liên kết đến jQuery trong HTML. Tất nhiên, đi kèm với đó là bạn có thể sử dụng các jQuery methods luôn. Chẳng hạn:

Và cuối cùng, chúc các bạn vui vẻ với MaterializeCSS.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.