Package Exports
- gridlify
- gridlify/lib/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (gridlify) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Gridlify
A simple tool to dynamically build a grid css layout, aswell as dynamically positioning elements in to grid layouts.
How to install
npm i gridlify
How to use
Import with ES6 module:
import { gridlify } from '/node_modules/gridlify/lib/index.js'
Set grid layout for html element:
const myGrid = {
rows: ['200px', '500px', '500px', '200px'],
columns: ['1fr', '1fr', '1fr'],
rowGap: '5px',
columnGap: '5px'
}
gridlify.setGrid(myGrid, 'body')
Position a html element in the grid:
const myPositions = {
startRow: 2,
endRow: 3,
startColumn: 1,
endColumn: 3
}
gridlify.setPosition(myGrid, '#childElement')
You can also change rows, columns and gap properties individually:
gridlify.setRows(['20%', '20%', '60%'], '.parentElement')
gridlify.setColumns(['200px', 'min-content', 'auto%'], '.parentElement')
gridlify.setRowGap('20px', '.parentElement')
gridlify.setColumnGap('10px', '.parentElement')
To get the CSS code for the layout, simply:
const gridTemplate = gridlify.getGridCss(myGrid, '#childElement')
console.log(gridTemplate)
// Output
// {
// display: grid;
// grid-template-rows: 200px 500px 500px 200px;
// grid-template-columns: 1fr 1fr 1fr;
// grid-row-gap: 5px;
// grid-column-gap: 5px;
// }
const positionTemplate = gridlify.getPositionCss(myPositions, '#childElement')
console.log(positionTemplate)
// Output
// { grid-area: 2 / 1 / 3 / 3; }
Note that gridlify uses the doucment.querySelector()-API to select elements in the DOM.
To manipulate elements by
class, use the.-identifier.To manipulate elements by
id, use the#-identifier.
Contributing
- Fork the project on Github.
- Run
npm installto install dev dependencies. - Implement/fix your feature, comment your code. Follow the code style of the project, including indentation.
- Implement tests for new feature.
- Run tests.
- Create a pull request.