When working with a framework knowing what break-point you’re looking at isn’t always obvious. And it’s really not obvious to the non-technical people reviewing your work.
For this reason I created a pure css breakpoint indicator.
This one is based off the Bootstrap breakpoints, but the idea can be adapted to work with any framework.
In my personal use I’ve extended the Bootstrap framework by adding a couple breakpoints, then I reflected those with the marker. I also placed this in a css file that is only enqueued while in a development environment. I highly recommend this to avoid forgetting to remove the marker and it showing in production.
Small, simple things like this can really make your life easier. Thanks for reading and happy coding.
Download from Github – https://github.com/dustin-schwartz/bootstrap-size-marker/