Reframe.js is a javascript plugin that makes unresponsive elements responsive.
npm install reframe.js --save-dev
or
bower install reframe.js --save-dev
- Add
dist/reframe.js. - Add reframe
css/scssto yourcss. reframethe 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 div that is an intrinsic ratio of the original element. This plugin is great 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.
5E52
$('selector').reframe();&, if you'd like to use a custom classname
$('selector').reframe('classname');