Reframe.js Demo

Developer
Jeff Wainwright
Size
3,821 Kb
Views
12,144
  1. Reframe.js Demo Previews
  2. Reframe.js Demo HTML Codes
  3. Reframe.js Demo CSS Codes
  4. Reframe.js Demo JS Codes

How do I make an reframe.js demo?

Reframe unresponsive elements responsively. https://github.com/dollarshaveclub/reframe.js. What is a reframe.js demo? How do you make a reframe.js demo? This script and codes were developed by Jeff Wainwright on 08 December 2022, Thursday.

Reframe.js Demo Previews
IQ Test

Reframe.js Demo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Reframe.js Demo</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <article>	<header>	<h1>	Reframe.js	</h1>	<p>This page is a demo of a <a href="https://github.com/yowainwright/reframe.js">Reframe.js</a> - a very basic lightweight plugin that makes iframes or any div responsive.</p>	</header>	<div>	<p>Reframe.js makes all iframes selected responsive.</p>	<figure>	<iframe width="560" height="315" src="https://www.youtube.com/embed/6FQsIfE7sZM" frameborder="0" allowfullscreen></iframe>	<figcaption>This is an <code>iframe</code> that contains a video.</figcaption>	</figure>	</div>	<footer>	<p>~Thanks</p>	</footer>	</article> <script src="js/index.js"></script>
</body>
</html>

Reframe.js Demo - Script Codes CSS Codes

html { box-sizing: border-box; font-family: sans-serif; -webkit-text-size-adjust: 2; -ms-text-size-adjust: 2; text-size-adjust: 2;
}
*, :after, :before { box-sizing: inherit;
}
body { color: #000; font-family: sans-serif; margin: 0;
}
article, figcaption, figure, footer, header, main { display: block;
}
video { display: inline-block;
}
[hidden] { display: none;
}
code { font-family: monospace,monospace;
}
select { font: inherit; margin: 0; overflow: visible; text-transform: none;
}
[type=reset], [type=submit], html [type=button] { -webkit-appearance: button;
}
[type=checkbox], [type=radio] { box-sizing: border-box; padding: 0;
}
[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto;
}
[type=search] { -webkit-appearance: textfield;
}
[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration { -webkit-appearance: none;
}
body, figure, h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0;
}
figure, h1, h2, h3, h4, h5, h6, p { margin-bottom: .5rem;
}
h1, h2, h3, h4, h5, h6 { font-weight: 400;
}
a { background-color: transparent; color: #000; text-decoration: none;
}
a:active, a:hover { outline-width: 0;
}
.js-reframe { padding-top: 56.25%; position: relative; width: 100%;
}
.js-reframe iframe { height: 100%; left: 0; position: absolute; top: 0; width: 100%;
}
figure, p { margin: 1rem 0;
}
figcaption { margin: .5rem 0; text-align: center;
}
article { margin: 1rem auto; max-width: calc(100% - 4rem);
}
@media screen and (min-width: 768px) { article { max-width: 700px; }
}
footer p, h1 { text-align: center;
}
footer, h1 { margin: 2rem auto;
}

Reframe.js Demo - Script Codes JS Codes

(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global.reframe = factory());
}(this, (function () { 'use strict';
function Reframe(target, cName) { var frames = typeof target === 'string' ? document.querySelectorAll(target) : target; if (!('length' in frames)) { frames = [frames]; } var classname = cName || 'js-reframe'; for (var i = 0; i < frames.length; i++) { var frame = frames[i]; var hasClass = frame.className.split(' ').indexOf(classname); if (hasClass >= 0) return false; var div = document.createElement('div'); var height = frame.offsetHeight; var width = frame.offsetWidth; var padding = height / width * 100; div.style.paddingTop = padding + '%'; frame.height = frame.width = ''; div.className += classname; frame.parentNode.insertBefore(div, frame); frame.parentNode.removeChild(frame); div.appendChild(frame); } return this;
}
function reframe (target, cName) { return new Reframe(target, cName);
}
if (window.$ || window.jQuery || window.Zepto) { window.$.fn.reframe = function reframeFunc(cName) { return new Reframe(this, cName); };
}
return reframe;
})));
reframe('iframe');
Reframe.js Demo - Script Codes
Reframe.js Demo - Script Codes
Home Page Home
Developer Jeff Wainwright
Username yowainwright
Uploaded December 08, 2022
Rating 4
Size 3,821 Kb
Views 12,144
Do you need developer help for Reframe.js Demo?

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!

Jeff Wainwright (yowainwright) Script Codes
Name
A Pen by Jeff Wainwright
Noframe.js Example
Meeting Schedule Widget with Angular
Reframe.js Example
Quick Bootstrap ScrollSpy Demo
Stickybits with a custom vertical position
Playing with URLs and ScrollSpy
Stickybits Demo
Stickybits Multiple Instances Demo
Shave, a javascript plugin for truncating text
Create amazing sales emails 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!