Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/noeldelgado/psd-guides
:triangular_ruler: JS library to draw photoshop-like guides.
https://github.com/noeldelgado/psd-guides
javascript-library js-library photoshop psd-guides sketch
Last synced: 2 months ago
JSON representation
:triangular_ruler: JS library to draw photoshop-like guides.
- Host: GitHub
- URL: https://github.com/noeldelgado/psd-guides
- Owner: noeldelgado
- Created: 2012-07-25T09:25:54.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2022-06-16T01:27:04.000Z (over 2 years ago)
- Last Synced: 2024-10-13T00:10:47.374Z (2 months ago)
- Topics: javascript-library, js-library, photoshop, psd-guides, sketch
- Language: JavaScript
- Homepage: https://noeldelgado.github.io/psd-guides/
- Size: 3.19 MB
- Stars: 28
- Watchers: 7
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# psd-guides
[![npm-image](https://img.shields.io/npm/v/psd-guides.svg)](https://www.npmjs.com/package/psd-guides)
![bower-image](https://img.shields.io/bower/v/psd-guides.svg)https://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**
```sh
npm install psd-guides --save
```**BOWER**
```sh
bower install psd-guides --save
```## Usage
```javascript
new PSDGuides({
canvasWidth : 1000,
horizontalGuides : [20, "355 * 2", 250, 20],
vericalGuides : [50, "100 * 2", "250 * 2", "50 * 3"]
}).activate();
```**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
```javascript
{
canvas : document.body, // [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
```javascript
/**
* Display the guides.
* @property activate [Function]
* @return this [PSDGuides]
*/var psd = new PSDGuides({
canvasWidth : 1000,
horizontalGuides : [20, "355 * 2", 250],
verticalGuides : [50, "100 * 2", "250 * 2", "50 * 3"]
});psd.activate();
```### deactivate
```javascript
/**
* Hide the guides.
* @property deactivate [Function]
* @return this [PSDGuides]
*/psd.deactivate();
```### update
```javascript
/**
* Update the width and height of psd-guides container,
* remove and create the guides using the guides array references.
* @property update [Function]
* @return this [PSDGuides]
*/psd.update();
```### destroy
```javascript
/**
* Clean all references to other objects and remove DOMElements.
* @property destroy [Function]
* @return null
*/psd.destroy();
// => null
```### # Removing guides
When guides are removed, you need to call the `update` or `activate` method to reflect the changes.### removeHorizontalGuides
```javascript
/**
* Clear the horizontal guides array reference.
* @property removeHorizontalGuides [Function]
* @return this [PSDGuides]
*/psd.removeHorizontalGuides();
// console.log( psd.getHorizontalGuides() );
// => []
// console.log( psd.getVerticalGuides() );
// => [50, 100, 100, 250, 250, 50, 50, 50]
```### removeVerticalGuides
```javascript
/**
* Clear the vertical guides array reference.
* @property removeVerticalGuides [Function]
* @return this [PSDGuides]
*/psd.removeVerticalGuides();
// console.log( psd.getVerticalGuides() );
// => []
```### removeGuides
```javascript
/**
* Clear both horizontal and vertical array references.
* @property removeGuides [Function]
* @return this [PSDGuides]
*/psd.removeGuides().update();
```### # Adding guides
When adding guides, you need to call the `update` or `activate` method after to reflect the changes.### addHorizontalGuides
```javascript
/**
* Add guides to the _horizontalGuides Array holder.
* @property addHorizontalGuides [Function]
* @argument guides [Array]
* @return this [PSDGuides]
*/psd.addHorizontalGuides([20, "355 * 2", 250]).update();
// console.log( psd.getHorizontalGuides() );
// => [20, 355, 355, 250]
```### addVericalGuides
```javascript
/**
* Add guides to the _verticalGuides Array holder.
* @property addVerticalGuides [Function]
* @argument guides [Array]
* @return this [PSDGuides]
*/psd.addVerticalGuides([50, "100 * 2", "250 * 2", "50 * 3"]).update();
// console.log( psd.getVerticalGuides() );
// => [50, 100, 100, 250, 250, 50, 50, 50]
```### # Getting the guides
Get current saved guides.### getHorizontalGuides
```javascript
/**
* Return the current saved horizontal guides.
* @property getHorizontalGuides [Function]
* @return this._horizontalGuides [Array]
*/psd.getHorizontalGuides();
// => [20, 355, 355, 250]
```### getVerticalGuides
```javascript
/**
* Return the current saved vertical guides.
* @property getVerticalGuides [Function]
* @return this._verticalGuides [Array]
*/psd.getVerticalGuides();
// => [50, 100, 100, 250, 250, 50, 50, 50]
```## Examples (960 Grid System)
Applying 960 grid system
### 12-column grid
```javascript
new PSDGuides({
canvasWidth : 960,
horizontalGuides : ["(10, 60, 10) * 12"]
}).activate()
```### 16-column grid
```javascript
new PSDGuides({
canvasWidth : 960,
horizontalGuides : ["(10, 40, 10) * 16"]
}).activate();
```### 24-column grid
```javascript
new PSDGuides({
canvasWidth : 960,
horizontalGuides : ["(10, 20, 10) * 24"]
}).activate()
```There are more examples inside the `examples` folder.