r12: grid overlay & layout inspector Chrome extension security report

▔▔▔▔▔▔▔▔▔▔▔▔▔▔ r12 is a precision grid overlay for anyone who values structure — from web designers and developers to creatives and professionals. Activate it with a single click to visualize 12-column, modular, baseline or rule-of-thirds systems directly on websites, documents, design tools or even your resume. Built around clarity, order, and usability. ▔▔▔▔▔▔▔▔▔▔▔▔▔▔ ⊞ GRID OVERLAYS ▪︎ Classic Guides — 12-column, rule-of-thirds, modular, baseline and center lines. ▪︎ Columns & Rows — customizable, responsive grids for any layout. ▪︎ Device Presets — mobile, tablet, laptop, desktop. ▪︎ Gutter Control — adjust inner and outer gutters. ⧉ RESPONSIVE MODE ▪︎ Each preset automatically adjusts columns, rows, gutters, and margins. ▪︎ Switch between mobile, tablet, laptop, and desktop layouts. ▪︎ Adjust breakpoints for each device. ▪︎ Preview grids for different devices. ⇥ MARGIN CONTROL ⇤ ▪︎ Linked / Unlinked Margins — control spacing uniformly or adjust sides independently. ▪︎ Position grids anywhere — align over resumes, portfolios, design tools, or websites. ▪︎ Outer Gutter Toggle — switch between margin-based or gutter-based edges. ▪︎ Responsive Margins — automatically adapt to each device preset. ⊡ POPUP CONTROLS ▪︎ Minimal, fast, and accessible interface. ▪︎ Contrast Control — adjust grid color, line width and opacity. ▪︎ Live Preview — see changes instantly as you adjust settings. ▪︎ Accessibility — ARIA labels, keyboard navigation, high contrast. ⛭ PERFORMANCE & PRIVACY ▪︎ Works anywhere — on design tools, web apps, or static pages. ▪︎ State Memory — all controls are synced to browser storage. ▪︎ Lightweight overlays — zero impact on performance. ▪︎ No analytics, cookies, or data collection — ever. ▔▔▔▔▔▔▔▔▔▔▔▔▔▔ ⌘ HOW TO USE ↳ Add r12 to Chrome and pin it to your toolbar. ↳ Click the r12 globe icon. ↳ Adjust columns, gutters, and margins from the popup. ↳ Use Responsive Mode to preview grids across devices. ↳ Review your layouts. ▔▔▔▔▔▔▔▔▔▔▔▔▔▔ ❖ FAQ ▪︎ If extension is not displaying the grid, try refreshing the page or restarting the browser. ▪︎ Stores only local preferences (grid, margins, color) — no personal data collected. ▪︎ Works on all websites and web-based design tools (e.g., Figma, Canva, Notion). ▪︎ Compatible with both light and dark modes. ▪︎ Free to use. ▔▔▔▔▔▔▔▔▔▔▔▔▔▔ ⁂ GRID FOUNDATIONS ▪︎ Figma — Layout Grids: ⤏ https://www.figma.com/best-practices/everything-you-need-to-know-about-layout-grids/ ▪︎ Google — Material Design Layout: ⤏ https://m2.material.io/design/layout/understanding-layout.html#composition ▪︎ Design Lab — History & Theory ⤏ https://designlab.com/blog/grid-systems-history-ux-ui-layout ▔▔▔▔▔▔▔▔▔▔▔▔▔▔ Questions or feedback? 💌 r12.grids@gmail.com Changelog: r12.io/changelog ▔▔▔▔▔▔▔▔▔▔▔▔▔▔