Thumbnail

Tích hợp Gridlex vào Pattern Lab

Thumbnail

Feb Dao

|

Nov 2019

Grid system là một phần quan trọng trong việc chia cột và tạo layout của một trang web, Gridlex là một trong những Grid system sử dụng Flex box để tạo cột. Trong bài viết này, mình sẽ hướng dẫn cụ thể làm thế nào để tích hợp được nó vào Pattern Lab

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:

gridlex

- 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:

gridlex files

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

import

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

gridlex vars

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

The content of this field is kept private and will not be shown publicly.
About text formats

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.

Comments

  • Allowed HTML tags: <em> <strong> <cite> <blockquote cite> <ul type> <ol start type> <li> <dl> <dt> <dd> <p>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
  • Use [gist:#####] where ##### is your gist number to embed the gist
    You may also include a specific file within a multi-file gist with [gist:####:my_file].

Spread the word