Ruler Grid

About

Short Description
Ruler Grid — a powerful web inspector for designers and developers.
Measure elements, inspect styles, extract colors, fonts, and assets on any website — instantly.

Full Description
Ruler Grid is an all-in-one web inspection tool built for designers and developers who want to analyze layouts, verify implementations, and extract design data directly from any webpage.

The plugin supports 10 languages, and the number is constantly growing. It also includes 20+ powerful features, with many more updates and improvements planned for the future.

Just hover over any element to instantly access detailed information — including dimensions, spacing, colors, typography, and CSS properties.

Measurement & Layout
- Measure element dimensions in pixels
- Calculate distances between any elements
- Page rulers and draggable guides for precise alignment
- Responsive overlays that adapt to browser resizing

Element Inspector
- View HTML tags, class names, and IDs
- Floating inspector with detailed element data
- Computed CSS inspection
- Copy CSS to clipboard
- Quickly navigate between parent and child elements

Colors & Styles
- Eyedropper tool to pick colors from anywhere
- Save and manage selected colors
- Extract color palettes (HEX, RGB, HSL)
- Detect and copy CSS gradients

Design & Structure
- Custom layout grid overlays for perfect alignment
- Typography inspection (fonts, sizes, styles)
- X-Ray mode to reveal page structure

Responsive Testing
- Test layouts across different screen sizes
- Interactive device emulator

Advanced Tools
- Extract images, SVGs, and other assets
- Analyze CSS animations and timing curves
- Accessibility checks (WCAG) with actionable suggestions

Why Ruler Grid?
- Works on any website
- Speeds up design QA and development workflow
- Replaces multiple tools in one
- Built for both designers and developers

PRO Version
Unlock advanced features with a one-time purchase for lifetime access.

Our Vision
- We’re committed to building a highly useful, high-quality product that truly improves the workflow of designers and developers.

- Ruler Grid is actively evolving, and we’re continuously working on new features and improvements. You can expect regular updates, performance enhancements, and powerful additions — including upcoming AI integrations designed to make your work even faster and smarter.