vw-calc
Version:
Sass function to scale pixel-based value(s) proportionally and accessible.
1 lines • 3.49 kB
HTML
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vw-calc()</title><link rel="stylesheet" href="index.d55a8aec.css"></head><body> <div class="container"> <h1 class="title"> vw-calc() </h1> <p class="description"> A <code>Sass</code> function that scales pixel-based value(s) proportionally and accessible. </p> <small>Resize your screen and see it in action!</small> </div> <div class="guide guide--wide"> <span>1440</span> </div> <div class="guide guide--narrow"> <span>375</span> </div> <div class="container"> <div class="grid"> <div class="input-output"> <div class="info"> <div class="block"> <span>Input:</span> <code> <span>font-size: vw-calc(16 32);</span> </code> </div> <div class="block"> <span>Styled Output:</span> <code> font-size: <span data-target="heading" data-property="fontSize" class="js-target-styled-output">[]</span>; </code> </div> <div class="block"> <span>Computed Output:</span> <code> font-size: <span data-target="heading" data-property="fontSize" class="js-target-computed-output output">[]</span>; </code> </div> </div> <h1 class="demo demo--heading js-target-input" data-target="heading"> This is a H1 heading </h1> </div> <div class="input-output"> <div class="info"> <div class="block"> <span>Input:</span> <code> font-size: vw-calc(12 18); <br> line-height: vw-calc(16 20); </code> </div> <div class="block"> <span>Styled Output:</span> <code> font-size: <span data-target="paragraph" data-property="fontSize" class="js-target-styled-output">[]</span>; <br> line-height: <span data-target="paragraph" data-property="lineHeight" class="js-target-styled-output">[]</span>; </code> </div> <div class="block"> <span>Computed Output:</span> <code> font-size: <span data-target="paragraph" data-property="fontSize" class="js-target-computed-output output">[]</span>; <br> line-height: <span data-target="paragraph" data-property="lineHeight" class="js-target-computed-output output">[]</span>; </code> </div> </div> <p class="demo demo--paragraph js-target-input" data-target="paragraph"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe inventore consequatur porro placeat, atque officiis vel aperiam qui ab illo nulla, voluptatum corrupti doloremque id at asperiores voluptate beatae neque. </p> </div> <div class="input-output"> <div class="info"> <div class="block"> <span>Input:</span> <code> width: vw-calc(100 200); <br> height: vw-calc(100 200); <br> border-radius: vw-calc(6 12); </code> </div> <div class="block"> <span>Styled Output:</span> <code> width: <span data-target="box" data-property="width" class="js-target-styled-output">[]</span>; <br> height: <span data-target="box" data-property="height" class="js-target-styled-output">[]</span>; <br> border-radius: <span data-target="box" data-property="borderRadius" class="js-target-styled-output">[]</span>; </code> </div> <div class="block"> <span>Computed Output:</span> <code> width: <span data-target="box" data-property="width" class="js-target-computed-output output">[]</span>; <br> height: <span data-target="box" data-property="height" class="js-target-computed-output output">[]</span>; <br> border-radius: <span data-target="box" data-property="border-radius" class="js-target-computed-output output">[]</span>; </code> </div> </div> <div class="demo demo--box js-target-input" data-target="box"></div> </div> </div> </div> <script src="index.6ce80d62.js"></script> </body></html>