Back to articles
I built a Pixel Ruler + Alignment Checker Chrome Extension — here's how it works

I built a Pixel Ruler + Alignment Checker Chrome Extension — here's how it works

via Dev.toAtul Srivastava

Front-end development involves a lot of pixel-counting. Is this div 8px from the edge or 12px? Are these two columns actually aligned? I got tired of switching tabs to verify measurements, so I built a Chrome extension that answers those questions inline, without leaving the page. Chrome Web Store: https://chromewebstore.google.com/detail/pixel-ruler-+-alignment-c/mlkckmpmigjabkmodhflghieipignmie Website: https://atul0016.github.io/pixel-ruler-website/ What it does Pixel Ruler + Alignment Checker overlays measurement and alignment tools directly on any webpage: On-screen ruler - drag to measure distances between any two points in pixels Alignment guides - horizontal and vertical lines you can place anywhere on the page Element measurement - click on a DOM element to see its dimensions and position Spacing check - verify the gap between two elements Persistent across scroll - guides stay fixed as you scroll The goal was zero friction: open the extension, start measuring, close and nothi

Continue reading on Dev.to

Opens in a new tab

Read Full Article
2 views

Related Articles