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
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.