Responsify - a breakpoint tester

Developer
Twixes
Size
5,939 Kb
Views
28,336
  1. Responsify - a breakpoint tester Previews
  2. Responsify - a breakpoint tester HTML Codes
  3. Responsify - a breakpoint tester CSS Codes
  4. Responsify - a breakpoint tester JS Codes

How do I make an responsify - a breakpoint tester?

A breakpoint tester for responsive websites. Designed according to Material Design specs.. What is a responsify - a breakpoint tester? How do you make a responsify - a breakpoint tester? This script and codes were developed by Twixes on 16 September 2022, Friday.

Responsify - a breakpoint tester Previews
IQ Test

Responsify - a breakpoint tester - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsify - a breakpoint tester</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:400,500|Material+Icons'>
<link rel='stylesheet prefetch' href='https://code.getmdl.io/1.1.3/material.grey-red.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="phone" id="device"> <div id="browser-bar"> <input id="url-bar" type="url" placeholder="website address" value="material.io" spellcheck="false"/> <div class="device-menu-button-wrapper"> <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect" id="device-menu-button"><i class="material-icons">more_vert</i></button> </div> <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</i>Phone</li> <li class="mdl-menu__item device-button" device="tablet"><i class="material-icons">tablet</i>Tablet</li> <li class="mdl-menu__item device-button" device="laptop"><i class="material-icons">laptop</i>Laptop</li> <li class="mdl-menu__item device-button" device="desktop"><i class="material-icons">desktop_windows</i>Dekstop</li> </ul> </div> <iframe id="iframe" src="" sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-forms"></iframe>
</div> <script src='https://code.getmdl.io/1.3.0/material.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Responsify - a breakpoint tester - Script Codes CSS Codes

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent;
}
html,
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; background: #eee; color: rgba(0, 0, 0, 0.87); text-rendering: optimizeLegibility; font-family: "Roboto", sans-serif; overflow: hidden;
}
#device { -webkit-animation: slide-in-up 600ms cubic-bezier(0, 0, 0.2, 1); animation: slide-in-up 600ms cubic-bezier(0, 0, 0.2, 1); -webkit-transition: 400ms cubic-bezier(0, 0, 0.2, 1); transition: 400ms cubic-bezier(0, 0, 0.2, 1); z-index: 1; -ms-flex-negative: 0; flex-shrink: 0; border-radius: 2px; box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.15), 0 6px 30px 5px rgba(0, 0, 0, 0.1), 0 8px 10px -5px rgba(0, 0, 0, 0.2); overflow: hidden;
}
#device.phone { width: 360px; height: 640px;
}
#device.tablet { width: 1024px; height: 768px;
}
#device.laptop { width: 1366px; height: 768px;
}
#device.desktop { width: 1600px; height: 900px;
}
#browser-bar { z-index: 3; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 3rem; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25), 0 0 5px 0 rgba(0, 0, 0, 0.2); background: #fff;
}
#url-bar { border: 0; margin: 0; z-index: 5; -webkit-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: 200ms cubic-bezier(0.4, 0, 0.2, 1); width: calc(100% - 6rem); max-width: calc(6rem + 40%); height: 2rem; outline: 0; border-radius: 2px; padding: 0 0.5rem; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.1); text-align: center; font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif; font-size: 1rem;
}
#url-bar:focus { box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.1);
}
#url-bar::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.34); font-weight: 500;
}
#url-bar::-moz-placeholder { color: rgba(0, 0, 0, 0.34); font-weight: 500;
}
#url-bar:-ms-input-placeholder { color: rgba(0, 0, 0, 0.34); font-weight: 500;
}
#url-bar::placeholder { color: rgba(0, 0, 0, 0.34); font-weight: 500;
}
.device-menu-button-wrapper { z-index: 4; position: absolute; top: 0.25rem; right: 0.25rem; height: 2.5rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.device-menu-button-wrapper #device-menu-button { width: 2.5rem; height: 2.5rem; outline: 0;
}
.device-menu-button-wrapper #device-menu-button .mdl-button__ripple-container { overflow: hidden;
}
.mdl-menu__container { top: 0.25rem !important; right: 0.25rem !important; overflow: hidden;
}
.mdl-menu__container .mdl-menu { padding: 0;
}
.mdl-menu__container .mdl-menu .material-icons { padding-right: 1rem; color: rgba(0, 0, 0, 0.54); vertical-align: middle;
}
#iframe { z-index: 2; width: 100%; height: calc(100% - 3rem); background: #fff;
}
#curtain { -webkit-animation: fade-in 400ms cubic-bezier(0.4, 0, 0.2, 1); animation: fade-in 400ms cubic-bezier(0.4, 0, 0.2, 1); z-index: 1000; display: none; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.54);
}
#warning { z-index: 1001; width: 17rem; border-radius: 2px; box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.15), 0 11px 15px -7px rgba(0, 0, 0, 0.1), 0 24px 38px 3px rgba(0, 0, 0, 0.2); background: #fff; font-weight: 500;
}
#warning .material-icons { display: inline-block; padding: 1rem; color: #f44336; vertical-align: middle; font-size: 3rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
#warning .warning-text { display: inline-block; width: 12rem; padding: 1.5rem 1.5rem 1.5rem 0; color: rgba(0, 0, 0, 0.54); vertical-align: middle; line-height: 1.5em;
}
@-webkit-keyframes slide-in-up { 0% { -webkit-transform: translateY(200vh); transform: translateY(200vh); } 100% { -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes slide-in-up { 0% { -webkit-transform: translateY(200vh); transform: translateY(200vh); } 100% { -webkit-transform: translateY(0); transform: translateY(0); }
}
@-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; }
}

Responsify - a breakpoint tester - Script Codes JS Codes

'use strict';
// # 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');
// # size
var _loop = function _loop(i) { deviceButtons[i].onclick = function () { device.className = deviceButtons[i].getAttribute('device'); };
};
for (var i = 0; i < deviceButtons.length; i++) { _loop(i);
}
// # 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 = function () { visit();
};
urlBar.onfocus = function () { urlBar.select();
};
Responsify - a breakpoint tester - Script Codes
Responsify - a breakpoint tester - Script Codes
Home Page Home
Developer Twixes
Username Twixes
Uploaded September 16, 2022
Rating 4
Size 5,939 Kb
Views 28,336
Do you need developer help for Responsify - a breakpoint tester?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Twixes (Twixes) Script Codes
Name
Helio
Inspire - an adjustable color generator
A configurable bouncing Google logo
Headlight.js - text and box shading based on cursor movement
Nordic flags
Layers
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!