<h1>Number Clamp in EQCSS</h1>
<h2>Demonstrating Min/Max Font-Size</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
@element p {
  $this {
    font-size: eval("clamp(10, innerWidth/40, 20)")px;
  }
}
/* The font-size will be no smaller than 10px, no larger than 20px, and if it falls within that range, the height of the font will be the width of the window divided by forty */
// Number clamp
function clamp(min, mid, max) {
  return Math.min(Math.max(min, mid), max)
}

External CSS

  1. //fonts.googleapis.com/css?family=Fira+Sans:300,400,500,700,300italic,400italic,500italic,700italic
  2. //fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic
  3. //fonts.googleapis.com/css?family=Source+Code+Pro:300,400,500,600,700,900
  4. https://s3-us-west-2.amazonaws.com/s.cdpn.io/67439/basic.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/eqcss/1.5.1/EQCSS-polyfills.min.js
  2. //cdnjs.cloudflare.com/ajax/libs/eqcss/1.5.1/EQCSS.min.js