Whenever I’m developing a responsive site or app, I sometimes get confused as to which breakpoint range I am currently viewing, to then effect changes to a particular file. So I thought that whilst working up through the minimum size breakpoints, following mobile first principles, it would be nice to have a notification on the screen that told me what the current / last breakpoint was that had been met.

The SASS code below simply accepts a map of project breakpoints and handles the generation of the media queries required for each notification, simply drop into your project and edit accordingly. Of course this is something that you would only want during development and therefore only include in your dev build. However, depending on your project setup, it may be quite easy to add a top level css class to the body that identifies what the current environment is, for example my debugger will only display if the class env-development is applied.

The breakpoint variables used above are from the Bootstrap framework, of course you can customise this further to fit your project by adding additional breakpoints if you required.

The result is an unobtrusive breakpoint notifier in the bottom corner of the screen, that will change responsively according to the current viewport width:

Snippet

LEAVE A COMMENT

Notify of
avatar
wpDiscuz