PostCSS Fluid Demo

You can find various examples in this page. By resizing the windows below, you will be able to see the fluid effect this library creates.
This page is best viewed on devices that has a screen wider than 780px. On smaller devices you might not be able to resize the examples.

Fluid Typography

awesome-site.com 
div {
  font-size: fluid(16px, 28px, 480px, 720px);
  line-height: fluid(26px, 38px, 480px, 720px);
  letter-spacing: fluid(0, 0.6px, 480px, 720px);
}

/* Compiled output:
div {
  font-size: clamp(16px, -8px + 5vw, 28px);
  line-height: clamp(26px, 2px + 5vw, 38px);
  letter-spacing: clamp(0px, -1.2px + 0.25vw, 0.6px);
}
*/

Width and Height

awesome-site.com 
div {
  width: fluid(50px, 200px, 480px, 720px);
  height: fluid(50px, 200px, 480px, 720px);
}

/* Compiled output:
div {
  width: clamp(50px, -250px + 62.5vw, 200px);
  height: clamp(50px, -250px + 62.5vw, 200px);
}
*/

Padding

awesome-site.com 
div {
  padding: fluid(4px, 40px, 480px, 720px);
}

/* Compiled output:
div {
  padding: clamp(4px, -68px + 15vw, 40px);
}
*/

Position

awesome-site.com 
div {
  position: absolute;
  top: fluid(0px, 60px, 480px, 720px);
  left: fluid(0px, 60px, 480px, 720px);
}

/* Compiled output:
div {
  position: absolute;
  top: clamp(0px, -120px + 25vw, 60px);
  left: clamp(0px, -120px + 25vw, 60px);
}
*/

Larger Value on Mobile

awesome-site.com 
div {
  width: fluid(200px, 50px, 480px, 720px);
  height: fluid(200px, 50px, 480px, 720px);
}

/* Compiled output:
div {
  width: clamp(50px, 500px + -62.5vw, 200px);
  height: clamp(50px, 500px + -62.5vw, 200px);
}
*/

Border Radius

awesome-site.com 
div {
  border-radius: fluid(0, 50px, 480px, 720px);
}

/* Compiled output:
div {
  border-radius: clamp(0px, -100px + 20.8333vw, 50px);
}
*/

Gap

awesome-site.com 
div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: fluid(0, 30px, 480px, 720px);
}

/* Compiled output:
div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0px, -60px + 12.5vw, 30px);
}
*/

Border

awesome-site.com 
div {
  border: fluid(10px, 22px, 480px, 720px) solid black;
}

/* Compiled output:
div {
  border: clamp(10px, -14px + 5vw, 22px) solid black;
}
*/