npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

gridlify

v1.0.8

Published

A tool to create css-grid layouts and setting positions for elements in a grid layout

Downloads

18

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

alilljealillje

Keywords

gridlayoutgridlifypositioningcssgridscss-griddisplay

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

  • px
  • fr
  • %

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.