whispy / reframe.js

Reframe unresponsive elements responsively.

🖼 Reframe.js

Reframe.js is a javascript plugin that makes unresponsive elements responsive.

Setup

npm install reframe.js --save-dev

or

bower install reframe.js --save-dev

Run

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

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 a perfect ratio of the original element's size. 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');