Screen Ruler
Measure the Web
387 followers
Measure the Web
387 followers
Screen Ruler is the perfect companion for web developers and designers. See sizes, distances, margins and paddings of any element on any web page.
This is the 3rd launch from Screen Ruler. View more
Screen Ruler
Launched this week
Unlike browser DevTools, Screen Ruler is built for design workflows: visual flexbox/grid breakdown, gradient inspection with color stops, multi-element pseudo-state simulation, CSS-to-Tailwind conversion, and a Page tab with Performance, SEO, and Social previews.
Free Options
Launch Team / Built With
Screen Ruler
Can it measure elements across different browser zoom levels?
Screen Ruler
@nithin_raju1 Yes. Measurements are in CSS pixels, so they're accurate at every zoom level.
Haven't launched on Product Hunt yet, but this caught my eye. Most rulers just measure. You added actual dev tools.
Genuinely curious – devs or designers as the main user?
Screen Ruler
@riley_hansen Thanks for the comment. The audience is both but definitely skews to the design-conscious developer.
As a designer this seems useful to do design QA and provide specific feedback to devs on what to change.
I've typically done this manually through browser developer tools. I find the item, adjust the css until I get the desired result (when possible). Then I give that info to dev for updating.
This will save a bit of time, although it would nice to be able to edit the code from the Screen Ruler sidebar. Then I wouldn't have to use dev tools at all. But I'm not sure the browser allows that.
Great work!
Screen Ruler
@amperisk Thanks for your comment. Editing is on the roadmap!
Right thing shows up at the right time ! I'm making a pitch deck for my product and it's so hard to center / align stuffs and this help a lot. Well done G
Now that is something we all never asked for. But we all need it
Nailed it man 🫡