Package Exports

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

Gridlify is a zero-dependency tool to dynamically build a grid css layout, as well as dynamically positioning elements in to grid layouts with an easy-to-use API.
Gridlify is available as an npm package.
Visit the npm documention for more information about getting started with npm.

How to install

npm install gridlify

API

gridlify has the following methods available in it's public interface

getGridCss( {rows, columns, rowGap, columnGap} )

Generates CSS code for a grid layout based on input values.
Takes an object as an argument. The object must contain the following information:

rows - An array of the row values the grid should contain.
columns - An array of the column values the grid should contain.
rowGap: A string, representing the gap between the rows in the grid.
columnGap: A string, representing the gap between the columns in the grid.

getPositionCss ({ startRow, endRow, startColumn, endColumn }

Generates CSS code for an elements position inside a grid layout layout based on input values.
Takes an object as an argument. The object must contain the following information:

startRow - A number representing the starting row coordinate in the grid layout.
endRow - A number representing the ending row coordinate in the grid layout.
startColumn - A number representing the starting column coordinate in the grid layout.
endColumn - A number representing the ending column coordinate in the grid layout.

setGrid ({ rows, columns, rowGap, columnGap }, htmlIdentifier)

Sets the grid layout properties for an HTML element in the DOM.
Takes an object as its first argument. The object must contain the following information:

rows - An array of the row values the grid should contain.
columns - An array of the column values the grid should contain.
rowGap: A string, representing the gap between the rows in the grid.
columnGap: A string, representing the gap between the columns in the grid.

Takes a htmlIdentifier as its second argument.
The HTML identifier is a string that represents an html element in the DOM.

As an example, the <body>-element, becomes 'body'.

setPosition ({ startRow, endRow, startColumn, endColumn }, htmlIdentifier)

Positions an html element inside the grid layout based on input values.
Takes an object as an argument. The object must contain the following information:

startRow - A number representing the starting row coordinate in the grid layout.
endRow - A number representing the ending row coordinate in the grid layout.
startColumn - A number representing the starting column coordinate in the grid layout.
endColumn - A number representing the ending column coordinate in the grid layout.

Takes a htmlIdentifier as its second argument.
The HTML identifier is a string that represents an html element in the DOM.

As an example, this <div id="myDiv"></div> element, becomes '#myDiv'.

setRows (rows, htmlIdentifier)

Sets the rows only for an HTML element that has a grid layout.
Takes an array of string as its first argument. The array of strings represents the rows to be set for the grid layout.
The HTML identifier is a string that represents an html element in the DOM.

setColumns (rows, htmlIdentifier)

Sets the columns only for an HTML element that has a grid layout.
Takes an array of string as its first argument. The arraysof strings represents the columns to be set for the grid layout.
The HTML identifier is a string that represents an html element in the DOM.

setRowGap (gap, htmlIdentifier)

Sets the row gap only for an HTML element that has a grid layout.
Takes an string as its first argument. The string represents the gap between the rows in the grid.

setColumnap (gap, htmlIdentifier)

Sets the row gap only for an HTML element that has a grid layout.
Takes an string as its first argument. The string represents the gap between the columns in the grid.

How to use

Import with ES6 modules
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(myPositions, '#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)
console.log(gridTemplate)

Generates the following CSS Code
{
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)
console.log(positionTemplate)

Generates the following CSS Code
{ grid-area: 2 / 1 / 3 / 3; }

Note that gridlify uses the document.querySelector-API to select elements in the DOM.

To manipulate elements by class, use the .-identifier.
To manipulate elements by id, use the #-identifier.

CSS Measurements

As demonstrated in How to use, all input must be a string containing a non-negative number, followed by a valid CSS measurement.

Currently, the following CSS measurements are possible to use with gridlify

When setting row and column values, it is also possible to use specific sizing-keywords:

auto
min-content

Resources

For more information about grid layouts, visit W3Schools

For more information about NPM and getting started with npm packages, visitnpm.

Contributing

Fork the project on Github.
Run npm install to 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.