Grid Ruler

1 How to use our extension

Grid Ruler



Welcome to Grid Ruler

Thank you for installing and using our extension

Features:

Pixel accuracy is the quiet hero of great design. A single-pixel mis-alignment can break the rhythm of a grid, make text feel off-centre, or cause an entire component to look “almost right” but not quite. Grid Ruler Lite gives front-end developers, UI/UX designers, QA testers, and anyone who cares about visual polish an instant, in-browser measuring toolkit—no heavyweight design software, no cluttered DevTools panels, and no screenshots shuffled into external apps. With a single click the extension overlays a resizable ruler, snap-to-grid guides, and optional baseline grids on top of any webpage so you can check spacing, verify 8-point grids, and capture evidence of layout bugs in seconds.

What Makes Grid Ruler Lite Stand Out? One-Click Activation, One-Click Dismissal Click the toolbar icon (or invoke the shortcut you set in browser keyboard settings) and the extension injects a lightweight overlay encapsulated in its own Shadow-DOM. Your page’s CSS can’t interfere, and the overlay never alters the DOM tree you’re testing. Click again and every guide, grid, and label disappears—no page reload, no lingering event listeners.

Why You’ll Want It in Your Toolkit

Save Time: Measuring paddings in DevTools requires drilling into nested boxes and mentally adding border and margin values. Grid Ruler Lite shows distances visually in one drag.

Reduce Bugs: Catch tiny spacing regressions before they reach staging or, worse, production—especially in responsive break-points where QA eyes don’t always land.

Improve Collaboration: Designers can overlay the 8-point grid directly on a deployed build and share a screenshot, giving developers exact pixel feedback without Figma comments.

Stay Focused: No alt-tabbing into Photoshop or opening Sketch files just to measure a button. Everything happens over the live page, exactly as end-users see it.

Educate & Document: Product managers and technical writers can demonstrate layout behaviour with ruler screenshots, making spec documents clearer for all stakeholders.

Target User Groups

User Group

Front-End Developers
Need to verify CSS spacing, flexbox gaps, and component alignment across break-points Drag rulers, snap to edges, lock guides, export screenshots for PR reviews

UI/UX Designers
Must confirm that dev builds respect 8-point or 10-point design systems Overlay baseline grids, measure paddings, share annotated PNGs

QA Testers
Report pixel-perfect bugs with clear evidence
Quick measurements and one-key screenshot capture go straight into bug trackers

Content Editors & PMs
Check headline wrap, ad slot spacing, and card layouts on CMS-driven pages Non-technical overlay avoids DevTools complexity

Educators & Students
Teach design principles, grid theory, and responsive layouts live in the browser Visual, real-time demonstrations without external tools

Tutorial:

  1. Install the Extension
  2. After installing the extension, click on the icon on the toolbar.