jonathanphz
10/11/2017 - 6:36 PM

Fluid Property function for JS - ported from scss mixin

JavaScript FLuid Property function for CSS - best with Styled-components

fluid-property.js
content_copyfile_download
//The fp() “Fluid Property” function 
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};
    `
}