For those who don't know what Gridlex is, I have written an introduction to it here: https://www.lilengine.co/articles/gridlex-useful-flexbox-grid-system. You can read to understand more about its features.
And here is an introduction to Pattern Lab: https://www.lilengine.co/vi/articles/tao-style-guide-voi-pattern-lab
To integrate Gridlex into the Pattern Lab, please follow these steps:
- Access and download the Gridlex repos https://github.com/devlint/gridlex, focus on the
src folder, we will see the following files
- Now we need to rename them with the prefix
_ in front of each file for easy use in the pattern lab. Then copy all the files into a directory call
vendors/gridlex in the
scss directory of the pattern lab. They will be as follows:
- Import gridlex into _styles-main.scss file
Now, Gridlex is imported and ready to use, you can change variables about column width, column spacing and Gridlex break points in
Using Gridlex instead of creating your own grid system will help you reduce your lack of time with grid, you can easily create layouts for your website using Gridlex's available classes.