quick-media-indicator

// these are breakpoints made with Neat grids.
$medium-screen: new-breakpoint(min-width 640px 12);
$bigger-screen: new-breakpoint(min-width 910px 12);
$hugest-screen: new-breakpoint(min-width 1200px 12);

// to use: put this div at the top of your page
// <div id="sizer"></div>

#sizer {
	font-size: 0.5em;
	color: white;
	padding: 0.1em 0.25em;
	text-align: center;
	background-color: green;
	opacity: 0.75;
	&:before {
		content: "default";
	}
	@include media( $medium-screen )
	{
		background-color: blue;
		&:before { content: "$medium-screen"; }
	}
	@include media( $bigger-screen )
	{
		background-color: purple;
		&:before { content: "$bigger-screen"; }
	}
	@include media( $hugest-screen )
	{
		background-color: red;
		&:before { content: "$hugest-screen"; }
	}
}