All activity
r12 is a lightweight grid overlay for inspecting layout structure on the web.
Visualize 12-column, modular, baseline, and rule-of-thirds systems directly on any site to check alignment and spacing in real context.
Designed for speed and simplicity; no setup, no friction, just a quick way to bring structure into your workflow.
Inspired by Swiss design principles.
Already used by designers and developers, and featured on the Chrome Web Store.
r12a Swiss-inspired grid overlay for designers and developers
Konner Bouchardleft a comment
Hello! I built r12 because I was constantly frustrated with eyeballing layouts while building UIs. I’ve lately been inspired by Swiss design and wanted to bring that into the chrome browser in a simple way. r12 lets you overlay a clean grid system on any web surface so you can instantly check alignment, spacing, and layout decisions. It’s designed to be lightweight, fast, and out of your way....
r12a Swiss-inspired grid overlay for designers and developers
Konner Bouchardstarted a discussion
Curious to know the tech behind r12?
As a developer, I wanted to embrace Swiss design principles not only in UI/UX design but also in software development. r12 is built on these principles by using pure JavaScript, HTML, and CSS to enhance performance and reduce bundle size. And uses the most efficient compression libraries: html-minify-html for HTML, parcel for CSS, and swc for JavaScript. The entire extension is around 38kb,...