rlugojr / reframe.js

Reframe unresponsive elements responsively.

🖼 Reframe.js

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

Alternatively, noframe.js is provided. Noframe.js scales selected elements at a fixed ratio but does not wrap the selected elements.

Installing

NPM

npm i reframe.js --save

Bower

bower i reframe.js --save

Yarn

yarn add reframe.js 

Setup

1. Add dist/reframe.js
2. 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 wraps a specified element in a div that is an intrinsic ratio of the original element. This plugin is great for embedded content like iframes or videos.

Why Reframe.js?

Reframe.js is inspired by FitVids and 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 and with minimal dependencies. Here's a basic codepen example.

This plugin is small - ~1.3kb unminified and is meant to do 1 thing - wrap elements that aren't responsive and 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 or Zepto as well.

$('iframe').reframe();

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

New: Noframe.js

Noframe.js makes the same ratio as Reframe.js using css calc.

Noframe.js's doesn't wrap the element you'd like to be responsive. It, instead, does a calculation based on its or a parent element's max-width. Here's a basic codepen example.

Noframe.js Notes

• The reframed element requires a parent element with a max width to scale above the selected elements intial size otherwise the reframed element will only scale below its initial size. 👍

Setup

1. Add dist/noframe.js
2. noframe the element you'd like to re-frame.

Examples

noframe('iframe');
noframe('iframe', 'parent');

jQuery

You can use Noframe.js with jQuery as well.

$('iframe').noframe();
$('iframe').noframe('parent');

Reframe.js or Noframe.js?

Reframe.js offers the simplest solution to making elements scale at an intrinsic ratio.

Noframe.js doesn't wrap the selected element to make it scale at an intrinsic ratio. Noframe.js is the ideal solution when various events, like tracking events, could be affected when an element is wrapped. It does require a width or max-width which can involve a bit more setup awareness.