psd-guides is a library to draw photoshop-like guides.

Download .zip file View on Github
npm install psd-guides --save

Demo

To see it in action, click here.

Sample Usage

var PSDGuides = require('psd-guides');

– Custom guides example

new PSDGuides({
  canvasWidth: 1000,
  horizontalGuides: [20, "355 * 2", 250, 20],
  verticalGuides: [50, "100 * 2", "250 * 2", "50 * 3"]
});

– Applying 960 grid system

12 column grid

new PSDGuides({
  canvasWidth: 960,
  horizontalGuides: ["(10, 60, 10) * 12"]
});

16 column grid

new PSDGuides({
  canvasWidth: 960,
  horizontalGuides: ["(10, 40, 10) * 16"]
});

24 column grid

new PSDGuides({
  canvasWidth: 960,
  horizontalGuides : ["(10, 20, 10) * 24"]
});

License

Copyright © Noel Delgado.

Licensed under the MIT License