Với những ai chưa rõ Gridlex là gì, thì mình đã từng viết 1 bài giời thiệu về nó tại đây https://www.lilengine.co/articles/gridlex-useful-flexbox-grid-system Bạn có thể đọc để hiểu thêm các tính năng của nó. Và đây là bài giới thiệu về Pattern Lab https://www.lilengine.co/vi/articles/tao-style-guide-voi-pattern-lab
Để tích hợp Gridlex vào Pattern Lab, hãy làm theo các bước sau đây:
- Truy cập và tải repos của Gridlex về máy: https://github.com/devlint/gridlex, tập trung vào thư mục src ta sẽ thấy các file như sau:

- Lúc này ta cần đổi tên chúng với tiền tố _ ở phía trước mỗi file để dễ dàng sử dụng trong pattern lab. Sau đó copy tất cả các file đó vào thư mục tên là vendors/gridlex trong thư mục scss/ của pattern lab. Chúng ta sẽ được như sau:

- Import gridlex vào file _styles-main.scss

Lúc này gridlex đã được import và sẵn sàng sử dụng, bạn có thể thay đổi các biến về độ rộng của cột, khoảng cách giữa các cột và các khoảng break points của Gridlex ở file _gridlex-vars.scss

Việc sử dụng Gridlex thay vì bạn tự tạo 1 grid system riêng của mình sẽ giúp bạn giảm thiếu thời gian với grid, bạn có thể dễ dàng tạo layout và bố cục cho trang web của mình bằng việc sử dụng các class sẵn có của Gridlex!
Add new comment