Reframe.js

Install

npm install reframe.js --save-dev

Or

bower install 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.

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');