Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Responsify - a breakpoint tester
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

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

A Pen by Twixes on CodePen.

License.

// # 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();
}
<script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
$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;
}
}
<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" />
@Rubel-hossain

This comment has been minimized.

Copy link

@Rubel-hossain Rubel-hossain commented Apr 20, 2016

Thanks very useful script.

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