Installation
A library that helps developers draw a Layout Grid like the ones on Figma.
Usage
const fg = new FigmaGrid() uses the default props
If you would like to overwrite any of the default props, FigmaGrid() instance takes in a single object with the props shown below.
The read only fields are still under consideration and may be editable in a later release
Default Props
const fg = new FigmaGrid({
color: 'hsla(0, 100%, 50%, .1)',
layout: 'grid', // _grid|column|row_
size: 8, // size of grid boxes if layout: 'grid'
// layout: 'column|row'
count: 5, // number of rows or columns
gutter: 20, // gutter between rows or columns
margin: 0,
// read only fields!
type: 'Stretch',
width: 'auto'
})
Known Issues
- There might be unexpected behaviour if your default styling is not reset. You could fix this by adding this at the top of your css file
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}