Create a div that shows the pixel dimensions for developing responsive sites

whatWidth.js

// =========================================
// 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();

}());

whatWidth.styl

#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

Uses the Rupture responsive framework for stylus media queries