Getting started

There are two options on how to use PixelGrid — install the package via NPM or use a browser extension.

NPM

Use NPM when you want to integrate PixelGrid into your website and control the moment when you want to display the grid on your own.

It could be useful for cases when you don't want to install the browser extension, or there is no extension for your particular browser.

Use initializeGrid() function to integrate PixelGrid into your website:

1. Install the package:

> npm install @sergeyzwezdin/pixelgrid

2. Add layout grid to your website

import { initializeGrid } from ‘@sergeyzwezdin/pixelgrid’;

const presets = [{
        grids: [
        {
            type: 'grid',
            color: '#000000',
            opacity: 0.2,
            size: 8
        }
    }];

initializeGrid(presets);

If you use TypeScript, there are type definitions inside the package.

Every preset you apply contains one or more grids. Every grid in preset can have a different type which defined by type property:

{
    type: 'grid',

    // ...
}

Following types are available:

• grid
• columns-stretch
• columns-center
• columns-left
• columns-right
• rows-stretch
• rows-center
• rows-top
• rows-bottom

In addition to type property, there are two properties to define grid color:

• color (string)
• opacity (number) - 0 - 0%, 0.5 - 50%, 1 - 100%, etc

The other properties of the grid definition object depend on the grid layout type. See Layout type.

There are another parameter for initializeGrid() function. It allows defining additional options while creating grid:

Property	Default value	Description
zIndex	(no)	z-index for grid container
useRem	false	Whether need to use rem units instead of px while defining grid elements
remRootValue	(auto)	If use REM, defines the base root value of font-size. If not specified, will be calculated automatically based on document.body element.

initializeGrid(presets, {
    zIndex: 10000,
    useRem: true,
    remRootValue: 16
});

Browser extension

Alternatively, you can install PixelGrid as a browser extension. Following extensions are available:

• Google Chrome
• Mozilla Firefox
• Opera browser
• Yandex browser

To activate the extension, click PixelGrid icon and select "Enable grid" switch:

Click "Edit Presets" button to edit the grid layout. See Layout type.