{"id":20366,"date":"2014-05-26T13:01:42","date_gmt":"2014-05-26T05:01:42","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=20366"},"modified":"2025-04-04T01:52:42","modified_gmt":"2025-04-03T17:52:42","slug":"rulersguides-js-photoshop-style-rulers","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/rulersguides-js-photoshop-style-rulers\/","title":{"rendered":"Photoshop-Style Rulers and Guides for Web Design with RulersGuides.js"},"content":{"rendered":"<p>One of the best things about Photoshop is its <strong>easy-to-use guide lines<\/strong> that can be pulled from the rulers. Those guides can make <a href=\"https:\/\/www.hongkiat.com\/blog\/why-designing-without-a-design-brief-is-like-playing-charades\/\">the designing process<\/a> a lot easier when it comes to positioning an item and getting the balance just right.<\/p>\n<p>Much to our delight, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/mark-rolich\">Mark Rolich<\/a> has implemented this particular feature for use on the Web. He has created RulersGuide.js based on Photoshop\u2019s rulers and guide lines.<\/p>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/mark-rolich.github.io\/RulersGuides.js\/\">RulersGuide.js<\/a> has the ability to <strong>add a Photoshop guide line style interface onto a web page<\/strong>. Lines that have been created can be saved for future use as well. It provides you with three usage options: as a <strong>javascript library,<\/strong> as a <strong>bookmarklet<\/strong> or as a <strong>Chrome Extension<\/strong>.<\/p>\n<h2>The Javascript<\/h2>\n<p>RulersGuide.js requires some other dependencies to work well. As it works via dragging and dropping lines into the page and requires some event utilisation, you\u2019ll need to add Dragdrop.js (available <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/mark-rolich\/Dragdrop.js\">here<\/a>) and Event.js (available <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/mark-rolich\/Event.js\">here<\/a>). Then, include those dependencies along with the RulersGuide.js source (download <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/mark-rolich\/RulersGuides.js\">here<\/a>) like so:<\/p>\n<pre>\r\n &lt;script type=\"text\/javascript\" src=\"js\/Event.js\"&gt;&lt;\/script&gt;\r\n &lt;script type=\"text\/javascript\" src=\"js\/Dragdrop.js\"&gt;&lt;\/script&gt;\r\n &lt;script type=\"text\/javascript\" src=\"js\/RulersGuides.js\"&gt;&lt;\/script&gt;\r\n <\/pre>\n<p>If you don\u2019t like the default style, you can edit its CSS to suit your taste. Then, initialize those packages with the following script:<\/p>\n<pre>\r\n &lt;script type=\"text\/javascript\"&gt;\r\n var evt = new Event(),\r\n dragdrop = new Dragdrop(evt),\r\n rg = new RulersGuides(evt, dragdrop);\r\n &lt;\/script&gt;\r\n <\/pre>\n<h2>Bookmarklet And Chrome Extension<\/h2>\n<p>For convenience, you can use this tool as a bookmarklet or Chrome extension and open it whenever and wherever you want.<\/p>\n<h2>Bookmarklet Installation<\/h2>\n<p>For the <strong>bookmarklet<\/strong>, just install it as usually you do. Since Internet Explorer sometimes works in a different way, this tool accommodates that by differentiating the bookmarklet installer for the IE and Non-IE user. Simply drag and drop the appropriate link below to your bookmarklet bar.<\/p>\n<ul class=\"download download-2c\">\n<li> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"\">Non-IE Bookmarklet<\/a> <\/li>\n<li> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"\/\/rawgithub.com\/mark-rolich\/',libs=%5B'Event.js\/master\/Event.js','Dragdrop.js\/master\/Dragdrop.js','RulersGuides.js\/master\/RulersGuides.js'%5D,i=0;for(i;i%3Clibs.length;i++)%7Bdocument.body.appendChild(document.createElement('script')).src=mainUrl+libs%5Bi%5D;%7Dvar%20evt=new%20Event(),dragdrop=new%20Dragdrop(evt);window.rg=new%20RulersGuides(evt,dragdrop);%7Dif(window.rg.status===1)%7Bwindow.rg.disable();%7Delse%7Bwindow.rg.enable();%7D%7D)()\">IE Users Bookmarklet<\/a> <\/li>\n<\/ul>\n<h2>Chrome Extension Installation<\/h2>\n<p>If you are a Chrome lover, you might like this option. Unfortunately, RulersGuide is not yet available in the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/chrome.google.com\/webstore\/\">Chrome Webstore<\/a>. The only choice is to install it manually.<\/p>\n<p>First, grab the extension file <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/mark-rolich.github.io\/RulersGuides.js\/RulersGuides.crx\">here<\/a>. The browser will ask you to confirm the file; just hit continue. The extension won\u2019t be automatically installed because Chrome has its <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/support.google.com\/chrome_webstore\/answer\/2664769?visit_id=637946755512849040-2673327763&p=crx_warning&rd=1\">security protocol<\/a> to keep you safe.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/rulersguides-js-photoshop-style-rulers\/restriction.jpg\" width=\"500\" height=\"60\"><\/figure>\n<p>Open it by navigating to <strong>Option &gt; Tools &gt; Extensions<\/strong> or open a new tab then copy and paste <strong>chrome:\/\/extensions<\/strong> into the address bar. Then, drag and drop the downloaded RulersGuide.crx file to the extension page as shown below.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/rulersguides-js-photoshop-style-rulers\/install-extension.jpg\" width=\"500\" height=\"300\"><\/figure>\n<p>The extension is now ready.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/rulersguides-js-photoshop-style-rulers\/installation-success.jpg\" width=\"500\" height=\"175\"><\/figure>\n<h2>Working With RulersGuide<\/h2>\n<p>As mentioned, RulersGuide works exactly like the Photoshop ruler and guide line. When you enable this tool, you\u2019ll get rulers at the top and left side of your browser. You can pull out some lines from those rulers.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/rulersguides-js-photoshop-style-rulers\/rulers.jpg\" width=\"500\" height=\"320\"><\/figure>\n<p>And in the top left of the page, you can get more options from the available menu. From this menu, you can customize whether you want the lines to be shown, saved, locked and more.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/rulersguides-js-photoshop-style-rulers\/menu.jpg\" width=\"500\" height=\"330\"><\/figure>\n<p>Let\u2019s get to know the options better.<\/p>\n<ul>\n<li>The <strong>hide<\/strong> option is used to hide both rulers and guides as you desire. Even when the rulers are hidden, you can still see the menu option.<\/li>\n<\/ul>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/rulersguides-js-photoshop-style-rulers\/hidden-rulers.jpg\" width=\"500\" height=\"135\"><\/figure>\n<ul>\n<li>If you hit <strong>Unlock<\/strong>, the rulers will stay visible in the page as you scroll. <strong>Clear all guides<\/strong> is useful when you want to erase all the guides you\u2019ve made.<\/li>\n<li>The <strong>Save grid<\/strong> option is used to save the grid you\u2019ve made. The grid will be saved based on page location, so you may not use the same grid on other browser windows\/tabs. And as one would expect, the <strong>Open grid<\/strong> option is to open your saved grids.<\/li>\n<\/ul>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/rulersguides-js-photoshop-style-rulers\/save-open.jpg\" width=\"500\" height=\"250\"><\/figure>\n<ul>\n<li>When you hit <strong>Show detailed info<\/strong> option, the detailed info mode will be enabled. It can show you the position and size of regions of the grid you create as well as any changes you make to the guide\u2019s position.<\/li>\n<\/ul>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/rulersguides-js-photoshop-style-rulers\/detail-info.jpg\" width=\"500\" height=\"320\"><\/figure>\n<ul>\n<li>The last one is the <strong>snapping option<\/strong>. This is what I like about RulersGuide. You can snap the guides to the DOM element or use it with the defined pixel size. Note that, the <strong>Snap to DOM<\/strong> option is still in its experimental stage at the time of writing. It may slow down or be unresponsive on a page with many elements.<\/li>\n<\/ul>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/rulersguides-js-photoshop-style-rulers\/snap-size.jpg\" width=\"500\" height=\"150\"><\/figure>\n<h2>Conclusion<\/h2>\n<p>Unfortunately, there\u2019s still a slight drawback. It <strong>can\u2019t remove a single guide<\/strong> like in Photoshop. You can only remove all guides, and sxtart creating them from scratch. Still, if you <strong>work on web layouts frequently on browsers<\/strong>, then this tool is for you.<\/p>","protected":false},"excerpt":{"rendered":"<p>One of the best things about Photoshop is its easy-to-use guide lines that can be pulled from the rulers. Those guides can make the designing process a lot easier when it comes to positioning an item and getting the balance just right. Much to our delight, Mark Rolich has implemented this particular feature for use&hellip;<\/p>\n","protected":false},"author":136,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[4117,3414],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Photoshop-Style Rulers and Guides for Web Design with RulersGuides.js - Hongkiat<\/title>\n<meta name=\"description\" content=\"One of the best things about Photoshop is its easy-to-use guide lines that can be pulled from the rulers. Those guides can make the designing process a\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/rulersguides-js-photoshop-style-rulers\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Photoshop-Style Rulers and Guides for Web Design with RulersGuides.js\" \/>\n<meta property=\"og:description\" content=\"One of the best things about Photoshop is its easy-to-use guide lines that can be pulled from the rulers. Those guides can make the designing process a\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/rulersguides-js-photoshop-style-rulers\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2014-05-26T05:01:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:52:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/rulersguides-js-photoshop-style-rulers\/restriction.jpg\" \/>\n<meta name=\"author\" content=\"Irfan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@IrfanFza\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Irfan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/rulersguides-js-photoshop-style-rulers\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/rulersguides-js-photoshop-style-rulers\\\/\"},\"author\":{\"name\":\"Irfan\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/483b1092b8017f37d977331e91935d8c\"},\"headline\":\"Photoshop-Style Rulers and Guides for Web Design with RulersGuides.js\",\"datePublished\":\"2014-05-26T05:01:42+00:00\",\"dateModified\":\"2025-04-03T17:52:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/rulersguides-js-photoshop-style-rulers\\\/\"},\"wordCount\":743,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/rulersguides-js-photoshop-style-rulers\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/rulersguides-js-photoshop-style-rulers\\\/restriction.jpg\",\"keywords\":[\"Javascripts\",\"toolkit\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/rulersguides-js-photoshop-style-rulers\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/rulersguides-js-photoshop-style-rulers\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/rulersguides-js-photoshop-style-rulers\\\/\",\"name\":\"Photoshop-Style Rulers and Guides for Web Design with RulersGuides.js - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/rulersguides-js-photoshop-style-rulers\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/rulersguides-js-photoshop-style-rulers\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/rulersguides-js-photoshop-style-rulers\\\/restriction.jpg\",\"datePublished\":\"2014-05-26T05:01:42+00:00\",\"dateModified\":\"2025-04-03T17:52:42+00:00\",\"description\":\"One of the best things about Photoshop is its easy-to-use guide lines that can be pulled from the rulers. Those guides can make the designing process a\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/rulersguides-js-photoshop-style-rulers\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/rulersguides-js-photoshop-style-rulers\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/rulersguides-js-photoshop-style-rulers\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/rulersguides-js-photoshop-style-rulers\\\/restriction.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/rulersguides-js-photoshop-style-rulers\\\/restriction.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/rulersguides-js-photoshop-style-rulers\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Photoshop-Style Rulers and Guides for Web Design with RulersGuides.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/483b1092b8017f37d977331e91935d8c\",\"name\":\"Irfan\",\"description\":\"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/IrfanFza\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/irfan_fauzii\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Photoshop-Style Rulers and Guides for Web Design with RulersGuides.js - Hongkiat","description":"One of the best things about Photoshop is its easy-to-use guide lines that can be pulled from the rulers. Those guides can make the designing process a","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/rulersguides-js-photoshop-style-rulers\/","og_locale":"en_US","og_type":"article","og_title":"Photoshop-Style Rulers and Guides for Web Design with RulersGuides.js","og_description":"One of the best things about Photoshop is its easy-to-use guide lines that can be pulled from the rulers. Those guides can make the designing process a","og_url":"https:\/\/www.hongkiat.com\/blog\/rulersguides-js-photoshop-style-rulers\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-05-26T05:01:42+00:00","article_modified_time":"2025-04-03T17:52:42+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/rulersguides-js-photoshop-style-rulers\/restriction.jpg","type":"","width":"","height":""}],"author":"Irfan","twitter_card":"summary_large_image","twitter_creator":"@IrfanFza","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Irfan","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/rulersguides-js-photoshop-style-rulers\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/rulersguides-js-photoshop-style-rulers\/"},"author":{"name":"Irfan","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/483b1092b8017f37d977331e91935d8c"},"headline":"Photoshop-Style Rulers and Guides for Web Design with RulersGuides.js","datePublished":"2014-05-26T05:01:42+00:00","dateModified":"2025-04-03T17:52:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/rulersguides-js-photoshop-style-rulers\/"},"wordCount":743,"commentCount":1,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/rulersguides-js-photoshop-style-rulers\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/rulersguides-js-photoshop-style-rulers\/restriction.jpg","keywords":["Javascripts","toolkit"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/rulersguides-js-photoshop-style-rulers\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/rulersguides-js-photoshop-style-rulers\/","url":"https:\/\/www.hongkiat.com\/blog\/rulersguides-js-photoshop-style-rulers\/","name":"Photoshop-Style Rulers and Guides for Web Design with RulersGuides.js - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/rulersguides-js-photoshop-style-rulers\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/rulersguides-js-photoshop-style-rulers\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/rulersguides-js-photoshop-style-rulers\/restriction.jpg","datePublished":"2014-05-26T05:01:42+00:00","dateModified":"2025-04-03T17:52:42+00:00","description":"One of the best things about Photoshop is its easy-to-use guide lines that can be pulled from the rulers. Those guides can make the designing process a","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/rulersguides-js-photoshop-style-rulers\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/rulersguides-js-photoshop-style-rulers\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/rulersguides-js-photoshop-style-rulers\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/rulersguides-js-photoshop-style-rulers\/restriction.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/rulersguides-js-photoshop-style-rulers\/restriction.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/rulersguides-js-photoshop-style-rulers\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Photoshop-Style Rulers and Guides for Web Design with RulersGuides.js"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/483b1092b8017f37d977331e91935d8c","name":"Irfan","description":"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.","sameAs":["https:\/\/x.com\/IrfanFza"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/irfan_fauzii\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-5iu","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/20366","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/136"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=20366"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/20366\/revisions"}],"predecessor-version":[{"id":73692,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/20366\/revisions\/73692"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=20366"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=20366"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=20366"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=20366"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}