Responsive Breakpoint Bookmarklet

Have you ever wanted a quick view of your responsive breakpoints? This tool helps you see the relationship between breakpoints for dialing in UI. Change the breakpoints to fit your needs. Change text and color and make it your own.

Breakpoints

Extra Extra Large

Extra Large

Large

Medium

Small

Extra Small

More Bookmarklet Configuration

Popular Css Framework Presets

Drag Me To Your Bookmark Bar

Things to note

  • I don't use Bootstrap but everyone else does so I set it as the default breakpoint settings.
  • Using max-width instead of min-width which goes against what everyone uses for breakpoint systems. I wasn't able to create the same visual effect using min-width so you will need to do the conversions yourself if you are using min-width for your sites. If are able to create something using min-width feel free to open up an issue and let me know in github.
  • The tool bumps the site down a little to make room for the bookmarklet above pages. This is fine unless your site uses position fixed in the nav. If you are trying to debug the nav and there is overlap with the bookmarklet you will need to adjust for this.
  • If you have multiple sites and each site uses different breakpoints. A nice way to organize this tool is by making a bookmark folder and placing each bookmarklet you need in it and renaming each bookmarklet to be the name of each of your sites.