Mesh generation tool.

Usage example

generate grid -l 12 -g 24 -w 1024 -o "./style"

After executing the command, two files will be created and copy to working directory:

• _grid-vars.scss - file with variables required for mesh configuration
• _grid.scss - mesh configuration file

In order to find out a list of all commands and options, enter generate grid --help

Options:

• --version Show version
• --help Show help
• -o, --output Output of grid template files [default: "./src/style"]
• -l, --length Maximum number of columns [default: 12]
• -g, --gutter Gutter size [default: 30]
• -w, --container-width Maximum container width [default: 1200]

After creating the files, you need to import the file _grid.scss into your root scss file (example, index.scss) After that, you will have access to classes with which you can organize the grid.

Classes:

Grid:

• col-$i - a class for creating a column, where the desired amount of occupied space is substituted instead (example, col-3). Also create a column for a specific resolution (example, col-md-3). List of available resolution:
  • xxl - > 1400px
  • xl - > 1200px
  • lg - > 992px
  • md - > 768px
  • sm - > 576px
  • xs - < 576px
• container - class for defining the grid container
  • no-gutters - class for disable gutter
• row - class for defining a row of column

Alignment:

• va - Vertical aligment. (example, va-center) List of available alignment
  • center - Vertical aligment by center
  • top - Vertical aligment by top
  • bottom - Vertical aligment by bottom
• ha - Horizontal aligment. (example, ha-between) List of available alignment
  • center - Horizontal aligment by center
  • left - Horizontal aligment by left
  • right - Horizontal aligment by right
  • between - Horizontal aligment by space-between
  • around - Horizontal aligment by space-around