psd-guides
http://noeldelgado.github.io/psd-guides/
psd-guides is a simple script to draw photoshop-like guides.
Can be useful during slicing phase to accomplish pixel-perfect web layouts.
Installation
NPM
npm install psd-guides --save
BOWER
bower install psd-guides --save
Usage
canvasWidth : 1000 horizontalGuides : 20 "355 * 2" 250 20 vericalGuides : 50 "100 * 2" "250 * 2" "50 * 3";
Tip: While defining your guides, if you have similar values that needs to be repeated several times, instead of writing them all you can use the *
character followed by the number you want it to be repeated, for instance: vericalGuides : [10, 10, 10, 10, 10, 20, 30, 20, 30, 20, 30]
can be written as verticalGuides : ["10 * 5", "(20, 30) * 3"]
Defaults
canvas : documentbody // [DOMElement] canvasWidth : 0 // [Integer] (pixels) alignment : "center" // [String] "center"|"left"|"right" backColor : "rgba(132, 170, 234, .25)" // [String] Any valid color format lineColor : "rgba(73, 141, 255, 1)" // [String] Any valid color format horizontalGuides : // [Array] verticalGuides : // [Array] zindex : 9999 // [Number]
API
activate
/** * Display the guides. * @property activate <public> [Function] * @return this [PSDGuides] */ var psd = canvasWidth : 1000 horizontalGuides : 20 "355 * 2" 250 verticalGuides : 50 "100 * 2" "250 * 2" "50 * 3"; psd;
deactivate
/** * Hide the guides. * @property deactivate <public> [Function] * @return this [PSDGuides] */ psd;
update
/** * Update the width and height of psd-guides container, * remove and create the guides using the guides array references. * @property update <public> [Function] * @return this [PSDGuides] */ psd;
destroy
/** * Clean all references to other objects and remove DOMElements. * @property destroy <public> [Function] * @return null */ psd;// => null
# Removing guides
When guides are removed, you need to call the update
or activate
method to reflect the changes.
removeHorizontalGuides
/** * Clear the horizontal guides array reference. * @property removeHorizontalGuides <public> [Function] * @return this [PSDGuides] */ psd;// console.log( psd.getHorizontalGuides() );// => []// console.log( psd.getVerticalGuides() );// => [50, 100, 100, 250, 250, 50, 50, 50]
removeVerticalGuides
/** * Clear the vertical guides array reference. * @property removeVerticalGuides <public> [Function] * @return this [PSDGuides] */ psd;// console.log( psd.getVerticalGuides() );// => []
removeGuides
/** * Clear both horizontal and vertical array references. * @property removeGuides <public> [Function] * @return this [PSDGuides] */ psd;
# Adding guides
When adding guides, you need to call the update
or activate
method after to reflect the changes.
addHorizontalGuides
/** * Add guides to the _horizontalGuides Array holder. * @property addHorizontalGuides <public> [Function] * @argument guides <required> [Array] * @return this [PSDGuides] */ psd;// console.log( psd.getHorizontalGuides() );// => [20, 355, 355, 250]
addVericalGuides
/** * Add guides to the _verticalGuides Array holder. * @property addVerticalGuides <public> [Function] * @argument guides <required> [Array] * @return this [PSDGuides] */ psd;// console.log( psd.getVerticalGuides() );// => [50, 100, 100, 250, 250, 50, 50, 50]
# Getting the guides
Get current saved guides.
getHorizontalGuides
/** * Return the current saved horizontal guides. * @property getHorizontalGuides <public> [Function] * @return this._horizontalGuides [Array] */ psd;// => [20, 355, 355, 250]
getVerticalGuides
/** * Return the current saved vertical guides. * @property getVerticalGuides <public> [Function] * @return this._verticalGuides [Array] */ psd;// => [50, 100, 100, 250, 250, 50, 50, 50]
Examples (960 Grid System)
Applying 960 grid system
12-column grid
canvasWidth : 960 horizontalGuides : "(10, 60, 10) * 12"
16-column grid
canvasWidth : 960 horizontalGuides : "(10, 40, 10) * 16";
24-column grid
canvasWidth : 960 horizontalGuides : "(10, 20, 10) * 24"
There are more examples inside the examples
folder.