/
demo-text.html
88 lines (65 loc) · 4.32 KB
/
demo-text.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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>FEM CSS Framework : Text demo</title>
<link href="css/reset.css" media="all" rel="stylesheet" type="text/css" />
<link href="css/grid.css" media="all" rel="stylesheet" type="text/css" />
<link href="css/text.css" media="all" rel="stylesheet" type="text/css" />
<style type="text/css">
html {
font-size: 62.5%;
}
body {
background: url(img/gridbg.gif);
}
</style>
</head>
<body class="grid-centered">
<div class="box-5">
<h1>FEM Grid System</h1>
<p>With the horizontal grid we can check how the text respects the vertical rhythm. No matter what element is used. This vertical rhythm in web is very weak, and if we add pixel borders or the images does'n respect the proportions the rhythm is lost, but at least we tried :) Another advantage is that it uses proportional sizes, so if we want to modify the size we just need to specify the desired % and everything will resize proportionally (see source)</p>
<ul>
<li>Duis aute irure dolor in reprehenderit</li>
<li>in voluptate velit esse cillum dolore eu fugiat nulla pariatur</li>
<li>Excepteur sint occaecat cupidatat non proident</li>
<li>sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>
<h2>Consectetur adipisicing elit</h2>
<div class="box-2 no-margin-left" id="biopic">
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam.</p>
<h3>Sed do eiusmod tempor incididunt</h3>
<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 nisi ut aliquip ex ea commodo consequat.</p>
<blockquote>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<cite>
Julio Cesar
</cite>
</blockquote>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="box-3">
<h4>Lorem ipsum dolor sit amet</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h4>Lorem ipsum dolor sit amet</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h4>Consectetur adipisicing elit</h4>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h3>Consectetur adipisicing elit</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2>Consectetur adipisicing elit</h2>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h5>Consectetur adipisicing elit</h5>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h6>Consectetur adipisicing elit</h6>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<hr />
<h6>IE 6/7 doesn't maintain the rhythm after a hr tag</h6>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>