7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Material Design Lite

Mẹo nhỏ: Chọn và Kết hợp các Thành phần MDL với Gulp

Scroll to top
Read Time: 4 mins
This post is part of a series called Learning Material Design Lite.
Learning Material Design Lite: Customizing

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

Material Design Lite (MDL), như chúng ta đã học từ các hướng dẫn trước, nó đi kèm với rất nhiều thành phần UI bao gồm Điều hướng, Thẻ và Button, cho phép chúng ta nhanh chóng xây dựng các trang web. Nhưng nếu bạn chỉ muốn một hoặc một vài tính năng trong số đó? Thì tốt nhất là loại bỏ những thành phần không cần thiết, giảm nhẹ stylesheet và các tập tin JavaScript.

Trước khi chúng ta bắt đầu tìm hiểu cách thực hiện điều này, bạn sẽ cần phải cài đặt các công cụ sau trong hệ thống của mình:

  1. Git.
  2. Node Package Manager (NPM).
  3. Gulp.

Các hướng dẫn trên Tuts+ Quản lý các Build Task Với Gulp.js, và Dòng lệnh cho Thiết kế Web: Tự động hóa với Gulp sẽ giúp bạn làm quen với Gulp nếu cần.

Lấy Mã nguồn MDL

Để bắt đầu, chúng ta phải lấy về các tập tin mã nguồn gốc của MDL bằng cách sao chép chúng từ kho lưu trữ. Chạy lệnh sau trong Terminal hoặc Command Prompt:

Lệnh này sẽ tải tất cả các tập tin và lưu chúng vào một thư mục mới có tên là "mdl". Điều hướng đến thư mục đó, chạy lệnh cd mdl, và bạn sẽ tìm thấy stylesheet chưa được biên dịch và JavaScript được tách ra thành từng phần cho mỗi thành phần, cũng như các mixin và các biến trong MDL.

Các Phụ thuộc của MDL

Bây giờ, hãy chạy lệnh sau bên trong thư mục để kéo về các phụ thuộc của MDL:

Các phụ thuộc bao gồm Mocha, PhantomJS, cùng với một số plugin Gulp, chẳng hạn như gulp-sassgulp-autoprefixer. Đây là những công cụ và thư viện cần thiết để biên dịch tất cả các phần riêng lẻ thành một stylesheet và tập tin JavaScript duy nhất có thể sử dụng lại. Sau khi hoàn thành, bạn sẽ thấy các phụ thuộc được lưu trữ trong một thư mục có tên là "node_modules".

Tùy biến

Trong ví dụ này, chúng ta sẽ sử dụng thành phần điều hướng, nhưng chúng ta cũng sẽ bao gồm buttoninput để chúng ta có thể thêm một trường tìm kiếm có thể mở rộng trong thanh điều hướng. Ngoài ra, chúng ta sẽ bao gồm thành phần tab, đơn giản vì chúng ta có thể áp dụng các tab trong thanh điều hướng.

Bây giờ hãy mở tập tin "material-design-lite.scss" và chú thích các thành phần có liên quan ra khỏi danh sách.

Tương tự, hãy mở "gulpfile.js" và chú thích những JS không cần thiết ở trong tham chiếu SOURCES.

Build

Cuối cùng, chạy lệnh gulp trong Terminal.

Lệnh này biên dịch tập tin stylesheet và JavaScript, sau đó xuất ra phiên bản minified vào thư mục "dist". Vì chúng ta đã xóa rất nhiều phần không cần thiết, nên tập tin stylesheet và JS nhẹ hơn khoảng 40%.

So sánh bản này với bản tiêu chuẩn (khoảng 300 Kb): CSS của chúng ta là 113 Kb chưa biên dịch

Hãy xem demo; thành phần điều hướng và một số ít thành phần khác của chúng ta!

Tóm tắt

Hoàn toàn tùy thuộc vào những gì bạn đưa vào và loại bỏ khỏi Material Design Lite của bạn. Hãy cho chúng tôi biết các thành phần MDL nào bạn muốn sử dụng trong phần bình luận dưới đây nhé.

Đây là phần cuối cùng của loạt bài Tìm hiểu về Material Design Lite của chúng tôi. Tôi hy vọng bạn cảm thấy hứng thú và nó đã giúp bạn làm quen với MDL!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
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.