-
Notifications
You must be signed in to change notification settings - Fork 2
/
example.html
58 lines (56 loc) · 2.35 KB
/
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!doctype html>
<html>
<head>
<title>flowtype tests</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
padding: 60px;
font-size: 18px;
line-height: 26px;
margin: 0 auto;
max-width: 700px;
min-width: 300px;
}
</style>
</head>
<body>
<ul id="size">
<li id="width"></li>
<li id="fontSize"></li>
<li id="lineHeight"></li>
</ul>
<h1>What does flowtype do?</h1>
<p>
Ideally, the most legible typography contains^ between 45 and 75 characters^ per line. This is difficult to accomplish for all screen widths with only CSS media-queries. FlowType.JS eases this difficulty by changing the font-size—and subsequently the line-height—based on a specific element's width. This allows for a perfect character count per line at any screen width.
</p>
<p>
lorem ipsum dolor sit amet consetetur sadipscing elitr sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat sed diam voluptua at vero eos et accusam et justo duo dolores et ea rebum stet clita kasd gubergren no sea takimata sanctus est lorem ipsum dolor sit amet
</p>
<p>
lorem ipsum dolor sit amet consetetur sadipscing elitr sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat sed diam voluptua at vero eos et accusam et justo duo dolores et ea rebum stet clita kasd gubergren no sea takimata sanctus est lorem ipsum dolor sit amet lorem ipsum dolor sit amet consetetur sadipscing elitr sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat sed diam voluptua at vero eos et accusam et
</p>
<p>
lorem ipsum dolor sit amet consetetur sadipscing elitr sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat sed diam voluptua at vero eos et accusam et
</p>
<script>
var each = Function.call.bind([].forEach)
var viewport = require('viewport')
var flow = require('./')
flow(document.body, {
min: 14,
max: 22,
lineRatio: 1.45
})
function onChange(){
var el = document.body
each(el.firstElementChild.children, function(item){
item.textContent = item.id + ' = ' + getComputedStyle(el)[item.id]
})
}
viewport.addListener(onChange)
onChange()
</script>
</body>
</html>