CSS for JS bookmarklet that shows which breakpoint Foundation 5 is reading

foundation-5-bookmarklet-styles.css

#foundation-breakpoint-indicator:before {
	content: 'NULL';
	display: block;
	position: fixed;
	top: 0;
	left: 50%;
	margin-left: -50px;
	width: 100px;
	background-color: blue;
	text-align: center;
	color: #fff;
	z-index: 2147483647;
}
/* based on Foundation 5's media queries:
   http://foundation.zurb.com/docs/media-queries.html */

@media only screen and (max-width: 40em) {
	#foundation-breakpoint-indicator:before {
		content: 'SMALL';
	}
}
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
	#foundation-breakpoint-indicator:before {
		content: 'MEDIUM';
	}
}
@media only screen and (min-width: 64.063em) and (max-width: 90em) {
	#foundation-breakpoint-indicator:before {
		content: 'LARGE';
	}
}
@media only screen and (min-width: 90.063em) and (max-width: 120em) {
	#foundation-breakpoint-indicator:before {
		content: 'X-LARGE';
	}
}
@media only screen and (min-width: 120.063em) {
	#foundation-breakpoint-indicator:before {
		content: 'XX-LARGE';
	}
}

foundation-5-media-query-bookmarklet.js

javascript:(function() {
	if (document.getElementById('foundation-breakpoint-indicator') === null) {
		var style = document.createElement('link'),
			el = document.createElement('div');

		style.rel = 'stylesheet';
		style.type = 'text/css';
		style.href = 'https://cdn.rawgit.com/sbone/a59ee9d9b8cd235d9db6/raw/5a8bd5259682488b80478bd1060fc56f3c5d7e5f/foundation-5-bookmarklet-styles.css';
		style.id = 'foundation-breakpoint-indicator-css';
		el.id = 'foundation-breakpoint-indicator';

		document.head.appendChild(style);
		document.body.appendChild(el);
	}
	else {
		document.body.removeChild(document.getElementById('foundation-breakpoint-indicator'));
		document.head.removeChild(document.getElementById('foundation-breakpoint-indicator-css'));
	}
})();