Ruler Grid by MDesign

Ultimate web design toolkit! Precision rulers, eyedropper, font scanner, and live page editing in one powerful tool. Measure distances, pick colors, and tweak any layout in real-time. Build pixel-perfect websites faster. Essential for dev and design.

Some features may require payment

0 (0 reviews)

Download Firefox and get the extension

Download file

About this extension

Ruler Grid — All-in-One Toolkit for Designers & Frontend Developers

Ruler Grid is a powerful Firefox extension that helps you analyze and refine any website’s layout. Measure elements, inspect styles, pick colors, and experiment with designs — all directly in your browser.

Key Features:

• Rulers & Guides
Measure distances and align elements with precision using horizontal and vertical guides.

• Eyedropper Tool
Pick any color or gradient from the page and copy values in HEX, RGB, or HSL.

• Typography Inspector
Identify fonts, sizes, weights, and line heights instantly.

• Live Page Editing
Edit text, spacing, and layout directly on any website without opening DevTools.

• CSS & Style Inspector
View computed styles, CSS properties, and Tailwind classes with one click.

• Responsive Grids
Overlay layout grids to check columns, gutters, and alignment across screen sizes.

Why Ruler Grid?
Fast, lightweight, and easy to use — Ruler Grid gives you the tools you need to analyze layouts and improve your workflow without leaving the page.

Rated 0 by 0 reviewers

Ruler Grid by MDesign

Required permissions:

Optional permissions:

Data collection: