npm install reframe.js --save-dev
yarn add reframe.js --save
- reframe the element you'd like to reframe.
reframe('selector'); // same function as before (so simple)
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 an intrinsic ratio of the original element. This plugin is meant for embedded content like
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.
You can use Reframe.js with jQuery as well.
&, if you'd like to use a custom classname
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.
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.
- Add dist/noframe.js
- noframe the element you'd like to make a responsive intrinsic ratio.
Or provide a parent element with a
Or add a parent element with a
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.