Grid Ruler

Display rulers and grid lines to help align elements on web pages

Grid Ruler transforms any webpage into a dynamic design canvas, offering precise, persistent guides, advanced measurement tools, and customizable presets. Built for designers, developers, and QA teams who demand pixel-perfect accuracy and an efficient workflow. Key Features: * Intuitive Rulers & Guides: * Horizontal and vertical rulers at browser edges. * Drag from rulers to add unlimited, persistent guide lines. * Guides and settings persist across page reloads and browser sessions. * Click and drag to reposition guides. * Effortlessly delete guides by dragging them back to the ruler (New in 1.1) or using the Delete key. * Advanced Measurement Tools: * Measure width, height, diagonal distance, and angles with our dynamic tool. * Measurements accurately reflect drag direction for intuitive use. * Persistent Measurements: Your drawn measurements stay until explicitly cleared. * Use Shift key to lock measurement direction for perfectly straight lines. * Enhanced Precision & Workflow: * Snap to existing guides and measurement lines for ultimate accuracy. * Powerful Context Menu (Right-click on rulers): (New in 1.1) * Instantly clear all guides, all measurements, or everything at once. * Guide Presets: Save your current guide layout as a named preset. (New in 1.1) * Apply common presets (e.g., "Rule of Thirds") or your own saved presets with a single click. (New in 1.1) * Easily manage your presets: Rename or delete them through a simple interface. (New in 1.1) * User-Friendly Interface: * Clean, minimal UI that stays out of your way. * Quickly toggle features on and off. * Improved modal and context menu interactions (close with Escape key or by clicking outside). Use Cases: * Web designers verifying complex layouts and responsive designs. * Developers ensuring pixel-perfect implementation of UI components. * UI/UX teams reviewing interface consistency and spacing. * QA professionals meticulously verifying alignment and dimensions. * Anyone needing to quickly measure or align elements on a webpage. How It Works: 1. Click the extension icon to activate the rulers and guides. 2. Drag from the rulers to create guide lines. 3. Press 'M' to toggle Measurement Mode. 4. Click and drag on the page to measure areas or elements. 5. Right-click on the rulers to access the context menu for clearing items, saving/loading presets, and managing presets. (Enhanced in 1.1) 6. Use Shift to constrain measurement lines to horizontal or vertical. 7. Drag guides back to the rulers (New in 1.1) or select and press 'Delete' to remove them. Why Grid Ruler: * Fast, Flexible, and Powerful: Easy to learn, yet packed with features for pros. * Customizable Workflow: Save time with reusable guide presets tailored to your needs. (New in 1.1) * No Fuss: No accounts, no setup, just instant functionality. * Universal Compatibility: Works reliably on any webpage. Privacy First: * No data collected or transmitted. * No external services or dependencies. * Only requires access to the current tab to function. --- What's New / Changelog: * v1.1.0 (Latest - Context Menu & Presets Update!) * NEW: Guide Presets System! * Save your current guide layout as a custom named preset. * Load your saved presets instantly. * Includes a "Rule of Thirds" common preset to get you started. * Manage your presets with the new "Manage Saved Presets" dialog: Rename or delete presets easily. * NEW: Powerful Ruler Context Menu! (Right-click on rulers) * Quickly access all preset functionalities (Save, Load, Manage). * New "Clear All" options: Clear All Guides & Measurements, Clear All Guides, or Clear All Measurements with a single click. * NEW: Drag-to-Delete Guides! * Simply drag a guide line back into its respective ruler to delete it. * v1.0.0 * Initial release.