eccoblbjiaighbeajfgcholhgohnfnae
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. * 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.
Better Ruler
A page ruler which can snaps around web elements for easier measurement. Provide convenience for front-end development and ui design **A smart web ruler with element snapping for easier frontend development and UI design.** - **Smart Snapping**: Hold `Alt` (or `Option` on Mac) while moving the cursor to automatically detect and snap to web elements. Supports snapping to **edges, 4 corners, and 4 edge midpoints**, displaying dimensions instantly. The snap preview uses a contrasting color to distinguish from measurement boxes. - **Easy Measurement**: Click and drag to create a measurement layer that snaps to element edges automatically. - **Flexible Editing**: Double-click any layer to enter edit mode: move, resize, or fine-tune. - **Esc**: Exit edit mode - **Backspace**: Delete the selected layer - **Status Indicator**: The extension icon changes based on status (colored = active, gray = inactive) for easy identification. - **Shortcuts Help**: Hover over the `?` button in the toolbar to view all available shortcuts. - **Customization**: - **Individual Colors & Opacity**: Each measurement box can have its own color and opacity; editing when selected only affects the current item - **Global Mode**: When enabled, changing color or opacity affects all existing measurement boxes simultaneously - **Single Mode**: When enabled, only one measurement box can exist at a time; new boxes automatically clear old ones - **Size Position**: Configure where dimension labels appear (center, corners, etc.) - **Dashed Background**: Choose between solid or dashed background for measurement boxes - **Reference Lines**: Automatic horizontal and vertical reference lines with X, Y coordinate labels - **Crosshair Display**: Configure mouse crosshair display mode - **Quick Controls**: - Press `f` (configurable): Toggle toolbar visibility - Press `r` (configurable): Toggle reference lines - Press `s` (configurable): Toggle snap mode (when on, snapping is always active without holding Alt; Alt temporarily disables snapping) - Press `Shift`: Toggle dimension labels - `Ctrl+Z` / `Cmd+Z`: Undo (supports draw, delete, move, resize operations) - `Ctrl+Shift+Z` / `Cmd+Shift+Z`: Redo - `Alt + z` (customizable): Global shortcut to toggle the extension - Double-press `z` (configurable): Quickly activate/deactivate within the page (after first launch) - **Copy Dimensions**: Click the dimension label on any measurement box to copy its size (e.g., `320 x 180`) to clipboard. - **Toolbar Hint**: A toast notification shows how to restore the toolbar after hiding it. - **Shadow Color**: The snap preview color is independently configurable, no longer derived from the measurement box color. - **Local File Support**: Enable "Allow access to file URLs" in `chrome://extensions` to measure local HTML files. - **Mobile Simulation**: Works in DevTools mobile simulation mode (ensure `device type` is set to `no touch`).
Grid Lines Ruler
Create grids on pages that provide the developers visual hints to help in developing the web app layouts. 1. Download and add this extension from Google Chrome. 2. Click on the extension to activate its working. 3. Drag from both Vertical ↕️ or Horizontal ↔️ from the main ruler to create grids. #️⃣ 4. Click on the intersection of vertical and horizontal grids to go into ruler mode. 5. Press and hold the “SHIFT” button to get a straight line. ✨Features ✨: 1. 🆓 & super Easy to set-up. 🆓 2. Creates vertical and horizontal grids. #️⃣ 3. A ruler 📏 to measure distance between your grids too. 📌Pin our extension to create and manage overlays on pages to provide you the visual hints to develop the web app layouts.
Guide lines
Easily check the visual alignment of the page elements. Get a vertical guide (line) and a horizontal guide that follow your mouse and go across the entire viewport. Useful to quickly check the alignment of elements in a page.
Baseliner
Baseliner adds horizontal & vertical lines to help you align your grid to any website. Adds a horizontal and/or vertical lines on top of any website. The Baseliner extension adds a fully customisable CSS layer on top of any website to help you align your design and ensure the grid is in place. -------------------- The best place for support is not in the reviews section below, but on the Baseliner GitHub repo: Check out full set of features and how to contribute on our GitHub page:
