tweed / reframe.js

Reframe unresponsive elements responsively.

🖼 Reframe.js

Reframe.js is a javascript plugin that makes elements scale at a fixed ratio

Installing

Install via NPM or Bower

npm i reframe.js --save-dev

or

bower i reframe.js --save-dev

Setup

1. Add dist/reframe.js.
2. Add reframe css/scss to your css.
3. reframe the element you'd like to re-frame.

Examples

reframe('iframe'); // Wrap all iFrames in the page
reframe(document.getElementById('my-frame')); // Pass a DOM element
reframe(document.querySelectorAll('.my-targets')) // Pass a live node list

Elements that have been wrapped with reframe will not be wrapped twice.

How?

Reframe.js removes a specified element's height & width attributes & then wraps that element in div that is an intrinsic ratio of the original element. This plugin is great for embedded content like iframes or videos.

Why?

Reframe.js is inspired by FitVids & does what FitVids does but without the need for jQuery. This makes the plugin highly valuable when including it in a module that has to be very small & with minimal dependencies. Here's a basic codepen example.

This plugin is small - ~1.3kb unminified & is meant to do 1 thing - wrap elements that aren't responsive & make them responsive. 💪

Options

If you'd like to not use the classname 'js-reframe', just use your own.

reframe('iframe', 'my-classname');

jQuery

You can use Reframe.js with jQuery as well.

$('iframe').reframe();

// While using a custom class name
$('iframe').reframe('my-classname');