Introduction

BrowserGrid allows you to replicate your Photoshop guides in your browser.

Motivation

We found ourselves using tools to overlay semi-opaque designs over our websites to ensure we were working to the correct guide lines. It seemed more logical to have these guides in the browser.

Installation

To install BrowserGrid in a project:

yarn add @parallaxagency/browsergrid

Then import BrowserGrid as a module:

import BrowserGrid from '@parallaxagency/browsergrid'

// eslint-disable-next-line no-unused-vars
const browserGrid = new BrowserGrid([
  {
    width: 1440,
    cols: 18,
    gutter: 10,
    includeCenterLines: 6
  },
  {
    width: 960,
    cols: 12,
    gutter: 10,
    color: '#f00',
    includeCenterLines: 3
  }
])

Development Setup

BrowserGrid uses a slightly different build process than our other projects. Rather than using Gulp, we just use webpack and npm scripts for other functionality like linting.

When actually doing development on this project the only change you will really notice is some of the CLI commands have changed.

To compile JS with webpack and watch for changes:

npm run dev

To make a release version:

npm run build

To run linters:

npm run lint

It's unlikely you will even have to run the last two commands as they are automatically run when publishing a new version or committing changes.