Responsify - a breakpoint tester

index.jade

div(id="device" class="phone")
  div(id="browser-bar")
    input(id="url-bar" type="url" value="getmdl.io" spellcheck="false")
    div(class="device-menu-button-wrapper")
      button(id="device-menu-button" class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect")
        i(class="material-icons") more_vert
    ul(class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="device-menu-button")
      li(class="mdl-menu__item device-button" device="phone")
        i(class="material-icons") smartphone
        | Phone
      li(class="mdl-menu__item device-button" device="tablet")
        i(class="material-icons") tablet
        | Tablet
      li(class="mdl-menu__item device-button" device="laptop")
        i(class="material-icons") laptop
        | Laptop
      li(class="mdl-menu__item device-button" device="desktop")
        i(class="material-icons") desktop_windows
        | Dekstop
  iframe(id="iframe" src="" sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-forms")
div(id="curtain")
  div(id="warning")
    i(class="material-icons") error_outline
    span(class="warning-text") This pen will not work properly over HTTPS. Open it from 
      a(href="http://codepen.io/Twixes/pen/GZWXbO") this
      |  link.
      
  

Responsify - a breakpoint tester.markdown

Responsify - a breakpoint tester

A breakpoint tester for responsive websites.
Designed according to Material Design specs.

A Pen by Twixes on CodePen.

License.

script.babel

// # global variables
var curtain = document.getElementById('curtain');
var deviceButtons = document.getElementsByClassName('device-button');
var device = document.getElementById('device');
var urlBar = document.getElementById('url-bar');
var iframe = document.getElementById('iframe');

// # warning
if (window.location.protocol === 'https:') {
  curtain.style.display ='flex';
}

// # size
for (let i = 0; i < deviceButtons.length; i++) {
  deviceButtons[i].onclick = () => {
    device.className = deviceButtons[i].getAttribute('device');
  }
}

// # URL
function visit() {
  var url = urlBar.value;
  if (url.indexOf('http://') < 0 && url.indexOf('https://') < 0) {
    url = 'http://' + url;
  } else if (url.indexOf('http://') >= 0) {
    urlBar.value = urlBar.value.split('http://')[1];
  }
  iframe.setAttribute('src', url);
}

visit();

urlBar.onchange = () => {
  visit();
}

urlBar.onfocus = () => {
  urlBar.select();
}

scripts

<script src="https://code.getmdl.io/1.1.3/material.min.js"></script>

style.scss

$black-1: rgba(#000, 0.87);
$black-2: rgba(#000, 0.54);
$animation-curve: cubic-bezier(0.2, 0.2, 0.2, 1);

* {
  border: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #eee;
  color: $black-1;
  font-size: 16px;
  font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
  overflow: hidden;
}

#device {
  animation: slideInUp 500ms $animation-curve;
  transition: 500ms $animation-curve;
  z-index: 1;
  flex-shrink: 0;
  border-radius: 2px;
  box-shadow: 0 16px 24px 2px rgba(0,0,0,.15), 0 6px 30px 5px rgba(0,0,0,.1), 0 8px 10px -5px rgba(0,0,0,.2);
  overflow: hidden;
  &.phone {
    width: 360px;
    height: 640px;
  } &.tablet {
    width: 1024px;
    height: 768px;
  } &.laptop {
    width: 1366px;
    height: 768px;
  } &.desktop {
    width: 1600px;
    height: 900px;
  }
}

#browser-bar {
  z-index: 3;
  position: relative;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  width: 100%;
  height: 3rem;
  box-shadow: 0 1px 3px 0 rgba(#000, 0.25), 0 0 5px 0 rgba(#000, 0.2);
  background: #fff;
}

#url-bar {
  z-index: 5;
  transition: 250ms $animation-curve;
  width: calc(100% - 6rem);
  max-width: 32rem;
  height: 2rem;
  outline: 0;
  border-radius: 2px;
  padding: 0 1em;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.15), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.1);
  text-align: center;
  font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
  font-size: 1rem;
  &:focus {
    box-shadow: 0 3px 4px 0 rgba(0,0,0,.15), 0 3px 3px -2px rgba(0,0,0,.2), 0 1px 8px 0 rgba(0,0,0,.1)
  }
}

.device-menu-button-wrapper {
  z-index: 4;
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  height: 2.5rem;
  user-select: none;
  & #device-menu-button {
    width: 2.5rem;
    height: 2.5rem;
    & .mdl-button__ripple-container {
      overflow: hidden;
    }
  }
}

.mdl-menu__container {
  top: 0.25rem !important;
  right: 0.25rem !important;  
  & .mdl-menu {
    padding: 0;
     & .material-icons {
      padding-right: 1rem;
      color: $black-2;
      vertical-align: middle;
    }
  }
}

#iframe {
  z-index: 2;
  width: 100%;
  height: calc(100% - 3rem);
  background: #fff;
}

#curtain {
  animation: fadeIn 250ms $animation-curve;
  z-index: 1000;
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: $black-2;
}

#warning {
  z-index: 1001;
  width: 17rem;
  border-radius: 2px;
  box-shadow: 0 9px 46px 8px rgba(0,0,0,.15), 0 11px 15px -7px rgba(0,0,0,.1), 0 24px 38px 3px rgba(0,0,0,.2);
  background: #fff;
  font-weight: 500;
  & .material-icons {
    display: inline-block;
    padding: 1rem;
    color: #f44336;
    vertical-align: middle;
    font-size: 3rem;
    user-select: none;
  } & .warning-text {
    display: inline-block;
    width: 12rem;
    padding: 1.5rem 1.5rem 1.5rem 0;
    color: $black-2;
    vertical-align: middle;
    line-height: 1.5em;
  }
}

@keyframes slideInUp {
  0% {
    transform: translateY(100vh);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=Roboto:400,500|Material+Icons" rel="stylesheet" />
<link href="https://code.getmdl.io/1.1.3/material.min.css" rel="stylesheet" />