Measure
Design Tool for All Devices
Measure is a set of design tools that will assist you refining your responsive layouts so that they look good across all devices. The ruler will assist you in seeing the widths and heights of components on the page quickly across all breakpoints. Device Viewer will let you preview your site quickly across many different mobile devices out there.
Key Features
Ruler
Measure width and height of any layout on the page.
Ruler Sets
Pre-defined ruler rulesets for all major frameworks and devices.
Measure Swatch
Add a ruler to anything on your page with just a class.
Device Viewer
Quickly preview your site in the dimensions of any mobile device.
{{{ icon }}}
{{ title }}
{{{ summary }}}
Demo
Measure Parts or Entire Page
The Measure stack can measure individual parts of a page, like this container with text. You can also measure the entire width of the browser window.
Here are some more interesting features:
- Measure width, height or both.
- The colors of the rulers change with predefined breakpoints.
- Double Click to show/hide the rulers
- Shift + Double Click to show/hide all rulers
- Show breakpoints and labels inside the ruler
With Breakpoint Labels
Device Viewer Demo
Make sure that you have poups enabled.
Reviews
We have recently started gathering reviews for our products. So if you don't see a review above, be the first to submit a review and let others know how you like this stack.
Screenshots
Tutorials
Downloads
Measure Demo Project
Uploaded by Weaver's Space
{{ title }}
Uploaded by {{{ from }}}
Updates
v1.0.2
- Fixed some missed breakpoint logic when measuring inside a parent with custom breakpoints
v1.0.0
v{{ version }}
© 2025 Weavers Space | Terms of Service | Privacy Policy