whispy / reframe.js Goto Github PK

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

npm install reframe.js --save-dev

or

bower install reframe.js --save-dev

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

Basic

reframe('selector');

Or Multiples

reframe('selector');

But not this one

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

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.

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. 💪

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

reframe('selector', 'classname');

You can use Reframe.js with jQuery as well.

$('selector').reframe();

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

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