A breakpoint tester for responsive websites.
Designed according to Material Design specs.
Forked from Twixes's Pen Responsify - a breakpoint tester.
A Pen by Saijo George on CodePen.
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. | |
A breakpoint tester for responsive websites.
Designed according to Material Design specs.
Forked from Twixes's Pen Responsify - a breakpoint tester.
A Pen by Saijo George on CodePen.
// # 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" /> |