Official website: https://pixelgrid.zwezdin.com

The tool to overlap your website layout with a grid. It’s available for the most popular browser and as an npm package.

Usage

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.

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);

Browser extensions

If you don't want to mess up your website with additional packages, it could be a good option to use browser extension instead. In this case, you don't need to integrate anything into your website sources. You have to install a browser extension instead.

For the moment following browser extensions are supported:

1. Google Chrome
2. Mozilla Firefox
3. Opera browser
4. Yandex browser

Not supported for the moment:

1. Edge - actually, the code of the extension is ready for Edge browser, but Microsoft doesn't allow to publish new extensions for the current version of Edge, since they are going to release Chromium-based version.
2. Safari - Apple discontinued support of HTML/JS-based extensions for Safari, so, for now, need to re-build the extension to use new API. One day I will have time for that and will re-build the extension to use WKWebview.

Documentation

1. Getting started
2. Layout type
3. Responsive layout

Contributing

If you have any problems while using PixelGrid, feel free to submit an issue or feature request here.

If you want to help with development, feel free to create Pull Request for your changes. Any improvements are very appreciated. To get more information, please read the Contribution Guidelines.

License

PixelGrid is released under the MIT License.