Skip to content

Getting started

Sergey Zwezdin edited this page Oct 16, 2019 · 5 revisions

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
  1. 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:

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

pixelgrid-extension

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