Reframe.js Example

Developer
Jeff Wainwright
Size
3,759 Kb
Views
20,240
  1. Reframe.js Example Previews
  2. Reframe.js Example HTML Codes
  3. Reframe.js Example CSS Codes
  4. Reframe.js Example JS Codes

How do I make an reframe.js example?

Reframe.js is a javascript plugin that makes elements scale at a fixed ratio. https://github.com/dollarshaveclub/reframe.js. What is a reframe.js example? How do you make a reframe.js example? This script and codes were developed by Jeff Wainwright on 08 December 2022, Thursday.

Reframe.js Example Previews
IQ Test

Reframe.js Example - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Reframe.js Example</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 embedded content responsive.</p> <p>More deeply, this means that it makes elements scale at a fixed ratio.</p>	</header>	<div>	<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 Example - 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;
}
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 Example - 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; var div = document.createElement('div'); var height = frame.offsetHeight; var width = frame.offsetWidth; var padding = height / width * 100; div.style.paddingTop = padding + '%'; div.style.position = 'relative'; div.style.width = '100%'; div.className += classname; frame.parentNode.insertBefore(div, frame); frame.parentNode.removeChild(frame); frame.style.height = '100%'; frame.style.left = '0'; frame.style.position = 'absolute'; frame.style.top = '0'; frame.style.width = '100%'; div.appendChild(frame); }
}
var plugin = window.$ || window.jQuery || window.zepto;
if (plugin) { plugin.fn.extend({ reframe: function reframeFunc(cName) { return reframe(this, cName); } });
}
return reframe;
})));
reframe('iframe');
Reframe.js Example - Script Codes
Reframe.js Example - Script Codes
Home Page Home
Developer Jeff Wainwright
Username yowainwright
Uploaded December 08, 2022
Rating 3
Size 3,759 Kb
Views 20,240
Do you need developer help for Reframe.js Example?

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
Playing with URLs and ScrollSpy
Stickybits Multiple Instances Demo
Reframe.js Demo
Meeting Schedule Widget with Angular
Stickybits Demo
A Pen by Jeff Wainwright
Trucated.js jQuery Demo
Stickybits with a custom vertical position
Noframe.js Example
Quick Bootstrap ScrollSpy Demo
Create amazing marketing copy 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!