jonathanphz
9/27/2017 - 6:14 PM

Fluid Poperty function for JS - ported from scss mixin

Creates fluid/responsive properties using JS

fluid-property
content_copyfile_download
//The fp() “Fluid Property” SCSS mixin
export function fp(property, min, max, start = 320, end = 1400, clip = true, clipAtStart = true, clipAtEnd = true) {
  const multiplier = (max - min) / (end - start) * 100;
  const adder = (min * end - max * start) / (end - start);
  const formula = `calc((${multiplier}vw) + (${adder}px))`;
  
  return` 
    @media (max-width: ${start}px) {
      ${property}: ${min}px;
    }
    @media (min-width: ${end}px) {
      ${property}: ${max}px;
    }
    ${property}: ${formula};
    `
}