Resize window to see change! Show Your Breakpoint

Whether you're working on buildout or doing QA, it's tough to know the breakpoint you're viewing a page at.
Add this customizable snippet and stop wondering.

<link href="//,tablet:501,desktop:1024" rel="stylesheet">

How does it work?

The above link tag styles the :after pseudo-element of the body with breakpoints you define in the URL. It then changes the content of that pseudo-element with the name of the specified breakpoint. Done.

Read more on how it works

Look to the top-right of your browsering window, then try resizing it and watch the content swap out for the breakpoint defined.

Other examples

Specify EM's if you want (PX default).

View Live Demo <link href="//,large:50em" rel="stylesheet">

Use max or min heights and widths when appended to a value. Comebine with EM's or PX's to really get specific.

View Live Demo <link href="//,tall:40emh" rel="stylesheet">

Add extra query selectors using a dash.

View Live Demo <link href="//,wide:800-1200W" rel="stylesheet">

Change the color theme from default (Red) to Blue with |blue

View Live Demo <link href="//,notebook:800|blue" rel="stylesheet">


Created by Tommy Marshall for fun.