-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
executable file
·116 lines (116 loc) · 3.46 KB
/
index.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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Eses</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="eses.css">
</head>
<body>
<h1><strong>Layouts</strong></h1>
<p>
<h4 class="inline">Tables are back!</h4> Just this time, without all the ugly HTML code. Start a new layout with a <code>.table</code> and some <code>.tcell</code> elements inside it:
</p>
<div class="table">
<div class="tcell">Column 1</div>
<div class="tcell">Column 2</div>
<div class="tcell">Column 3</div>
</div>
<p>
Not quite table-looking yet? Just add a <code>full</code> class to the <code>.table</code>!
</p>
<div class="table full">
<div class="tcell">Column 1</div>
<div class="tcell">Column 2</div>
<div class="tcell">Column 3</div>
</div>
<p>
Resize the window down and behold how each column becomes a block elements. But wait, what if you actually want to preserve columns for small devices? Just add the a <code>for-mobile</code> class to the <code>.table</code> element:
</p>
<div class="table full for-mobile">
<div class="tcell">These columns</div>
<div class="tcell">will be preserved</div>
<div class="tcell">on small-window devices</div>
</div>
<p>
You can align horizontally as well as vertically any column's content and change their sizes, all with just HTML classes
</p>
<div class="table full for-mobile">
<div class="tcell t50 top rgt">
<p>
This column is 50%, aligned to the top right.
</p>
<p>
All this content will be preserved for mobile and small-sized windows.
</p>
<p>
You can even put a table inside a table:
</p>
<div class="table full ctr">
<div class="tcell t40">
<h4>40%</h4>
</div>
<div class="tcell t30">
<h4>30%</h4>
</div>
<div class="tcell t20">
<h4>20%</h4>
</div>
<div class="tcell t10">
<h4>10%</h4>
</div>
</div>
</div>
<div class="tcell t20 middle ctr">
Just 20%, aligned to the center and middle.
</div>
<div class="tcell t30 bottom lft">
30%, aligned to the left and the bottom of the table.
</div>
</div>
<hr>
<h1><strong>Headers</strong> <em>&</em> <strong>Paragraphs</strong></h1>
<article class="table for-mobile middle full">
<div class="tcell t50">
Nice spacing between headers and paragraphs.
</div>
<div class="tcell t50">
<h1>Header 1</h1>
<p>
Paragraph below header
</p>
<p>
Paragraph below header
</p>
<p>
Paragraph below header
</p>
<h2>Header 2</h2>
<p>
Paragraph below header
</p>
<h3>Header 3</h3>
<p>
Paragraph below header
</p>
<h4>Header 4</h4>
<p>
Paragraph below header
</p>
<h5>Header 5</h5>
<p>
Paragraph below header
</p>
<h6>Header 6</h6>
<p>
Paragraph below header
</p>
</div>
</article>
</body>
</html>