Thumbnail

Integrate Gridlex into the Pattern Lab

Thumbnail

Feb Dao

|

Nov 2019

Grid system is an important part of dividing columns and creating layout of a website, Gridlex is one of Grid systems that use Flex boxes to create columns. In this article, I will guide in detail how to integrate it into Pattern Lab

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

gridlex

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

gridlex files

- Import gridlex into _styles-main.scss file

import

Now, Gridlex is imported and ready to use, you can change variables about column width, column spacing and Gridlex break points in _gridlex-vars.scss file

gridlex vars

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.

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