Reframe.js

Install

npm install reframe.js --save-dev

Or

yarn add reframe.js --save

Setup

1. Add dist/reframe.min.js.
2. reframe the element you'd like to reframe.

reframe('selector');

Examples

Basic

reframe('selector');

Or Multiples

reframe('selector'); // same function as before (so simple)

But not this one

reframe('selector:not([not this selector])');

How?

Reframe.js removes a specified element's height & width attributes & then wraps that element in responsive div that is an intrinsic ratio of the original element. This plugin is meant 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('selector', 'classname');

jQuery

You can use Reframe.js with jQuery as well.

$('selector').reframe();

&, if you'd like to use a custom classname

$('selector').reframe('classname');

Newer! 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 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 make a responsive intrinsic ratio.

Examples

noframe('iframe');

Or provide a parent element with a max-width

noframe('iframe', 'parent');

jQuery

$('iframe').noframe();

Or add a parent element with a max-width

$('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.