Pattern Lab là một công cụ rất tuyệt vời hỗ trợ việc tạo Style Guide, bạn có thể dễ dàng cài đặt và bắt đầu công việc tạo những trang style guide riêng của mình chỉ bằng những câu lệnh đơn giản.

Hãy nhìn vào hình ảnh dưới đây để biết Pattern Lab có cấu trúc như thế nào

Khá là dễ hiểu phải ko?

Hãy đi cụ thể hơn vào demo này: http://demo.patternlab.io/, chú ý vào phần top navigation ta sẽ thấy bên phải là các tính năng:

- Thay đổi chiều rộng của phần hiển thị - giả lập để test giao diện trên các thiết bị khác nhau, từ mobile đến desktop

- Hình bánh răng cưa ngoài cùng bên phải là nơi mà bạn có thể chọn lựa thêm các tùy chọn khác như:

• Hiển thị thông tin chi tiết của mỗi thành phần
• Mở trang hiện tại ở 1 cửa sổ trình duyệt mới
• Link đến trang hướng dẫn sử dụng Pattern Lab
• Tìm kiếm thành phần nào đó

Trong khi đó, ở bên trái của top navigation là tất cả các thành phần được liệt kê trong Style Guide, được sắp xếp và phân loại theo từng phần riêng biệt dựa trên khái niệm atomic design (Bạn có thể tìm hiểu kỹ hơn về khái niệm này ở link: http://atomicdesign.bradfrost.com/ ).

Hãy đi sâu và tìm hiểu thêm chút nữa:

- Atoms: Là nơi để liệt kê những danh sách các biến màu, font chữ, các kiểu hiệu ứng được sử dụng trong website của bạn. Đây cũng là nơi để thể hiện style của các thành phần cơ bản trong trang web như: Text, form elements, images, video, button, link...

- Molecules: Là nơi bạn có thể liệt kê các thành phần có cấp độ lớn hơn, nó có thể là 1 component đơn giản như: block search, hero banner, menu... hoặc là 1 item của component phức tạp như: item của 1 danh sách các bài viết mới, item của 1 slider....

- Organisms: Với các thành phần cấp độ lớn hơn molecules thì đây là nơi liệt kê và hiển thị nó, ví dụ như 1 slideshow, một block list, các thành phần thuộc header, footer...

- Templates: Có thể được gọi là layout, nơi mà chúng ta có thể liệt kê các loại layout sẽ được dùng trong website, có thể là 1 column, 2 columns, full width hoặc có container

- Pages: Và cuối cùng là pages, đây là nơi chúng ta liệt kê tất các các pages mà client yêu cầu, page được tạo thành bằng cách kết hợp các Molecules, Organisms và Templates lại với nhau

Pattern Lab có nhiều các phiên bản khác nhau: Node version và PHP Editions với nhiều loại template phù hợp với lựa chọn của từng người để tạo ra 1 bản Live Style Guide - là loại style guide hỗ trợ tối đa về mặt templates, bạn chỉ cần include template của Style Guide và sử dụng trong template trong website của bạn, sau này khi cần update hoặc thay đổi gì đó, chỉ cần làm điều đó 1 lần trong Style Guide, nó sẽ tự động thay đổi trong website :D

Rất tuyệt phải ko?

Hãy tìm hiểu thêm và thử bắt đầu với Pattern Lab tại đây nhé: https://patternlab.io/