Instantly share code, notes, and snippets.

Embed
What would you like to do?
Create a div that shows the pixel dimensions for developing responsive sites
// =========================================
// NOTE: whatWidth for Dev only
// =========================================
(function() {
window.addEventListener("resize", resizeThrottler, false);
var resizeTimeout;
function resizeThrottler() {
// ignore resize events as long as an actualResizeHandler execution is in the queue
if ( !resizeTimeout ) {
resizeTimeout = setTimeout(function() {
resizeTimeout = null;
actualResizeHandler();
}, 100);
}
}
function getWidth() {
if (self.innerWidth) {
return self.innerWidth;
}
if (document.documentElement && document.documentElement.clientWidth) {
return document.documentElement.clientWidth;
}
if (document.body) {
return document.body.clientWidth;
}
}
function actualResizeHandler() {
if (!document.getElementById('width')) {
let widthElem = document.createElement('div');
widthElem.setAttribute('id', 'width');
widthElem.innerHTML = "<p><strong><span id='pixels'></span>px</strong> </p>";
document.body.appendChild(widthElem);
}
let px = getWidth();
let pixels = document.getElementById('pixels');
pixels.innerText = px;
}
actualResizeHandler();
}());
#width
transition opacity .3s ease-out
border-color transparent
margin-bottom 0
opacity(1)
padding .2em .5em
fixed left 10px bottom 10px
width auto
z-index 9000
p
color: #fff;
font-size: .9em;
margin: 0;
padding: 0;
text-align: center;
&:after
display none
&:hover
opacity(1)
p:after
display inline-block
+at('xs')
background-color green
p:after
content " | xs: 0px - 320px"
+at('s')
background-color yellow
p:after
content " | s: 320px - 480px"
+at('m')
background-color orange
p:after
content " | m: 480px - 768px"
+at('l')
background-color red
p:after
content " | l: 768px - 1024px"
+at('xl')
background-color darkred
p:after
content " | xl: 1024px - 1280px"
+at('hd')
background-color maroon
p:after
content " | hd: 1280px - 1680px"
+at("k")
background-color maroon
p:after
content " | hd: 1280px - 1680px"
.blt
background-color fc-blue
border-radius border-radius*3
color fc-white
display inline-block
// font-size 80%
font-weight bold
padding padding-base*.3 padding-base*.7
&.blt-green
background-color fc-green
&.blt-red
background-color fc-red
&.blt-yellow
background-color fc-yellow
color fc-darkgrey
@yankeyhotel

This comment has been minimized.

Show comment
Hide comment
@yankeyhotel

yankeyhotel Sep 16, 2016

Uses the Rupture responsive framework for stylus media queries

Owner

yankeyhotel commented Sep 16, 2016

Uses the Rupture responsive framework for stylus media queries

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment