Create grids on pages that provide the developers visual hints to help in developing the web app layouts.
Grid Lines Ruler Extension
⬇️Easy to set up ⬇️:
1. Download and add this extension from Google Chrome.
2. Click on the extension to activate its working.
3. Drag from both Vertical ↕️ or Horizontal ↔️ from the main ruler to create grids. #️⃣
4. Click on the intersection of vertical and horizontal grids to go into ruler mode.
5. Press and hold the “SHIFT” button to get a straight line.
✨Features ✨:
1. 🆓 & super Easy to set-up. 🆓
2. Creates vertical and horizontal grids. #️⃣
3. A ruler 📏 to measure distance between your grids too.
📌Pin our extension to create and manage overlays on pages to provide you the visual hints to develop the web app layouts.
Read more
1. Download and add this extension from Google Chrome.
2. Click on the extension to activate its working.
3. Drag from both Vertical ↕️ or Horizontal ↔️ from the main ruler to create grids. #️⃣
4. Click on the intersection of vertical and horizontal grids to go into ruler mode.
5. Press and hold the “SHIFT” button to get a straight line.
✨Features ✨:
1. 🆓 & super Easy to set-up. 🆓
2. Creates vertical and horizontal grids. #️⃣
3. A ruler 📏 to measure distance between your grids too.
📌Pin our extension to create and manage overlays on pages to provide you the visual hints to develop the web app layouts.
Source Manifest.json
{"update_url": "https://clients2.google.com/service/update2/crx", "name": "Grid Lines Ruler", "description": "Create grids on pages that provide the developers visual hints to help in developing the web app layouts.", "version": "0.0.0.1", "manifest_version": 3, "icons": { "16": "logo/16.png", "32": "logo/32.png", "48": "logo/48.png", "96": "logo/48.png", "128": "logo/128.png" }, "content_scripts": [ { "matches": [\t\t"" \t\t], "css": ["content.css"], "js": ["js/jquery-3.6.0.min.js","content.js"] } ], "action": { "default_icon": { }, "default_title": "Grid Lines Ruler" }, "permissions":["storage"], "background": { "service_worker": "background.js" }, "web_accessible_resources": [ { "resources": ["settings.html"], "matches": [""] } ]}
Read more