{"id":13907296,"url":"https://github.com/noeldelgado/psd-guides","last_synced_at":"2025-04-30T20:08:10.960Z","repository":{"id":4072428,"uuid":"5177139","full_name":"noeldelgado/psd-guides","owner":"noeldelgado","description":":triangular_ruler: JS library to draw photoshop-like guides.","archived":false,"fork":false,"pushed_at":"2022-06-16T01:27:04.000Z","size":3341,"stargazers_count":28,"open_issues_count":0,"forks_count":0,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-30T20:08:04.690Z","etag":null,"topics":["javascript-library","js-library","photoshop","psd-guides","sketch"],"latest_commit_sha":null,"homepage":"https://noeldelgado.github.io/psd-guides/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/noeldelgado.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-07-25T09:25:54.000Z","updated_at":"2024-09-12T02:08:30.000Z","dependencies_parsed_at":"2022-08-06T15:00:06.172Z","dependency_job_id":null,"html_url":"https://github.com/noeldelgado/psd-guides","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noeldelgado%2Fpsd-guides","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noeldelgado%2Fpsd-guides/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noeldelgado%2Fpsd-guides/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noeldelgado%2Fpsd-guides/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/noeldelgado","download_url":"https://codeload.github.com/noeldelgado/psd-guides/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251774896,"owners_count":21641731,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript-library","js-library","photoshop","psd-guides","sketch"],"created_at":"2024-08-06T23:01:52.671Z","updated_at":"2025-04-30T20:08:10.941Z","avatar_url":"https://github.com/noeldelgado.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# psd-guides\n\n[![npm-image](https://img.shields.io/npm/v/psd-guides.svg)](https://www.npmjs.com/package/psd-guides)\n![bower-image](https://img.shields.io/bower/v/psd-guides.svg)\n\nhttps://noeldelgado.github.io/psd-guides/\n\npsd-guides is a simple script to draw photoshop-like guides.\n\nCan be useful during slicing phase to accomplish pixel-perfect web layouts.\n\n## Installation\n**NPM**\n```sh\nnpm install psd-guides --save\n```\n\n**BOWER**\n```sh\nbower install psd-guides --save\n```\n\n## Usage\n```javascript\nnew PSDGuides({\n  canvasWidth : 1000,\n  horizontalGuides : [20, \"355 * 2\", 250, 20],\n  vericalGuides : [50, \"100 * 2\", \"250 * 2\", \"50 * 3\"]\n}).activate();\n```\n\n**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\"]`\n\n## Defaults\n```javascript\n{\n  canvas : document.body,                 // [DOMElement]\n  canvasWidth : 0,                        // [Integer] (pixels)\n  alignment : \"center\",                   // [String] \"center\"|\"left\"|\"right\"\n  backColor : \"rgba(132, 170, 234, .25)\", // [String] Any valid color format\n  lineColor : \"rgba(73, 141, 255, 1)\",    // [String] Any valid color format\n  horizontalGuides : [],                  // [Array]\n  verticalGuides : [],                    // [Array]\n  zindex : 9999                           // [Number]\n}\n```\n\n## API\n\n### activate\n```javascript\n/**\n * Display the guides.\n * @property activate \u003cpublic\u003e [Function]\n * @return this [PSDGuides]\n */\n\nvar psd = new PSDGuides({\n\tcanvasWidth : 1000,\n\thorizontalGuides : [20, \"355 * 2\", 250],\n\tverticalGuides : [50, \"100 * 2\", \"250 * 2\", \"50 * 3\"]\n});\n\npsd.activate();\n```\n\n### deactivate\n```javascript\n/**\n * Hide the guides.\n * @property deactivate \u003cpublic\u003e [Function]\n * @return this [PSDGuides]\n */\n\npsd.deactivate();\n```\n\n### update\n```javascript\n/**\n * Update the width and height of psd-guides container,\n * remove and create the guides using the guides array references.\n * @property update \u003cpublic\u003e [Function]\n * @return this [PSDGuides]\n */\n\npsd.update();\n```\n\n### destroy\n```javascript\n/**\n * Clean all references to other objects and remove DOMElements.\n * @property destroy \u003cpublic\u003e [Function]\n * @return null\n */\n\npsd.destroy();\n// =\u003e null\n```\n\n### # Removing guides\nWhen guides are removed, you need to call the `update` or `activate` method to reflect the changes.\n\n### removeHorizontalGuides\n```javascript\n/**\n * Clear the horizontal guides array reference.\n * @property removeHorizontalGuides \u003cpublic\u003e [Function]\n * @return this [PSDGuides]\n */\n\npsd.removeHorizontalGuides();\n// console.log( psd.getHorizontalGuides() );\n// =\u003e []\n// console.log( psd.getVerticalGuides() );\n// =\u003e [50, 100, 100, 250, 250, 50, 50, 50]\n```\n\n### removeVerticalGuides\n```javascript\n/**\n * Clear the vertical guides array reference.\n * @property removeVerticalGuides \u003cpublic\u003e [Function]\n * @return this [PSDGuides]\n */\n\npsd.removeVerticalGuides();\n// console.log( psd.getVerticalGuides() );\n// =\u003e []\n```\n\n### removeGuides\n```javascript\n/**\n * Clear both horizontal and vertical array references.\n * @property removeGuides \u003cpublic\u003e [Function]\n * @return this [PSDGuides]\n */\n\npsd.removeGuides().update();\n```\n\n### # Adding guides\nWhen adding guides, you need to call the `update` or `activate` method after to reflect the changes.\n\n### addHorizontalGuides\n```javascript\n/**\n * Add guides to the _horizontalGuides Array holder.\n * @property addHorizontalGuides \u003cpublic\u003e [Function]\n * @argument guides \u003crequired\u003e [Array]\n * @return this [PSDGuides]\n */\n\npsd.addHorizontalGuides([20, \"355 * 2\", 250]).update();\n// console.log( psd.getHorizontalGuides() );\n// =\u003e [20, 355, 355, 250]\n```\n\n### addVericalGuides\n```javascript\n/**\n * Add guides to the _verticalGuides Array holder.\n * @property addVerticalGuides \u003cpublic\u003e [Function]\n * @argument guides \u003crequired\u003e [Array]\n * @return this [PSDGuides]\n */\n\npsd.addVerticalGuides([50, \"100 * 2\", \"250 * 2\", \"50 * 3\"]).update();\n// console.log( psd.getVerticalGuides() );\n// =\u003e [50, 100, 100, 250, 250, 50, 50, 50]\n```\n\n### # Getting the guides\nGet current saved guides.\n\n### getHorizontalGuides\n```javascript\n/**\n * Return the current saved horizontal guides.\n * @property getHorizontalGuides \u003cpublic\u003e [Function]\n * @return this._horizontalGuides [Array]\n */\n\npsd.getHorizontalGuides();\n// =\u003e [20, 355, 355, 250]\n```\n\n### getVerticalGuides\n```javascript\n/**\n * Return the current saved vertical guides.\n * @property getVerticalGuides \u003cpublic\u003e [Function]\n * @return this._verticalGuides [Array]\n */\n\npsd.getVerticalGuides();\n// =\u003e [50, 100, 100, 250, 250, 50, 50, 50]\n```\n\n## Examples (960 Grid System)\n\nApplying 960 grid system\n\n### 12-column grid\n```javascript\nnew PSDGuides({\n    canvasWidth : 960,\n    horizontalGuides : [\"(10, 60, 10) * 12\"]\n}).activate()\n```\n\n### 16-column grid\n```javascript\nnew PSDGuides({\n    canvasWidth : 960,\n    horizontalGuides : [\"(10, 40, 10) * 16\"]\n}).activate();\n```\n\n### 24-column grid\n```javascript\nnew PSDGuides({\n    canvasWidth : 960,\n    horizontalGuides : [\"(10, 20, 10) * 24\"]\n}).activate()\n```\n\nThere are more examples inside the `examples` folder.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnoeldelgado%2Fpsd-guides","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnoeldelgado%2Fpsd-guides","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnoeldelgado%2Fpsd-guides/lists"}