flex-text
Version:
Mastering font-size like flexbox!
45 lines (40 loc) • 1.56 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexible Text</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Flexible Text</h1>
<div id="ctrl">
<div>
<span id="width-val" data-desc="width">100</span>
<input type="range" id="width" min="100" max="1000" step="10" value="100" />
</div>
<div>
<span id="spacing-val" data-desc="spacing">0</span>
<input type="range" id="spacing" min="0" max="100" step="1" value="0" />
</div>
<div>
<span id="dollar-val" data-desc="dollar">2.33</span>
<input type="range" id="dollar" min="1" max="100" step="0.001" value="2.33" />
</div>
<div>
<span id="ratio-val" data-desc="flex-ratio">1:2:1:1</span>
<input type="range" data-id="1" class="flex-ratio" min="0.1" max="10" step="0.1" value="1">
<input type="range" data-id="2" class="flex-ratio" min="0.1" max="10" step="0.1" value="2">
<input type="range" data-id="3" class="flex-ratio" min="0.1" max="10" step="0.1" value="1">
<input type="range" data-id="4" class="flex-ratio" min="0.1" max="10" step="0.1" value="1">
</div>
</div>
<div class="dollar">
<span class="symbol">$</span>
<span class="integer">2</span>
<span class="dot">.</span>
<span class="float">33</span>
</div>
<script src="../index.js"></script>
<script src="main.js"></script>
</body>
</html>