r12: visualize grids and layouts

customise precise, modular layouts with clarity and balance — powered by flexible grid systems.

▔▔▔▔▔▔▔▔▔▔▔▔▔▔ Minimal. Functional. Modular. r12 is a precision grid overlay for anyone who values structure — from designers and developers to creatives, and professionals. Activate it with one click to visualize 12-column, modular, 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 adapts columns, rows, gutters, and margins automatically. ▪︎ 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 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 ▪︎ Works on all websites and web-based design tools (e.g., Figma, Canva, Notion). ▪︎ Stores only local preferences (grid, margins, color) — no personal data collected. ▪︎ Compatible with both light and dark modes. ▪︎ Free to use. Questions or feedback? 💌 r12.grids@gmail.com ▔▔▔▔▔▔▔▔▔▔▔▔▔▔