Breaq, a resizer bookmarklet

Breaq is a bookmarklet that allows you to resize a website to its critical sizes. It automatically detects the breakpoints in pixel and em.

Drag this link to your bookmarks and discover Breaq on any website:

Breaq

Presentation

I created Breaq because most of the resizer tools use sizes of devices. But I choose my breakpoints depending on my design, not on devices. So I created my own tool. I wanted Breaq as a bookmarklet, so it works on any browser and without installation.

First of all, the bookmarklet allows you to see your breakpoints:

It also allows you to resize your website to the critical sizes. It opens the current website in a popup with the expected proportions. It works with width & height media-queries, but it resizes only once at a time.

It handles em breakpoints well, too. It will convert em values in pixel, based on the detected browser baseline. So if you have a text zoom, it will show you the current breakpoints:

Last but not least, it allows you to detect the double breakpoints.

Limitations

The JavaScript will not be able to read the CSS rules, if they are hosted on an other domain than your website. It is a security limitation from the browsers. So, the Breaq bookmarklet will not work with a stylesheet hosted on a CDN, for example.

The popup can not be resized with bigger dimensions than your screen size. So you have to have one device bigger than your largest breakpoint to test every resolution.

It's on GitHub

Breaq is under MIT License and available on GitHub: https://github.com/tzi/Breaq

Feel free to open an issue or create a pull request!

tl;dr

Drag Breaq to your bookmarks and use it to test your website at its critical sizes.

Breaq