-
Notifications
You must be signed in to change notification settings - Fork 1
/
example.html
167 lines (123 loc) · 4.18 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
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Micro Theme</title>
<style type="text/css">
/*********************************
* Some basic rules for the demo
*********************************/
html { font-size: 1em; }
html, body { padding: 0; margin: 0; }
body {
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode",
"Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans",
Verdana, "Verdana Ref", sans-serif;
font-size: 14px;
line-height: 1.5em;
color: #222;
text-align: center;
}
p { margin: 0; padding: 1em 0; }
#container_1, #container_2, #container_3 { margin: 2em 0; }
#top { background: #eee; }
#middle { background: #ddd; }
#bottom { background: #ccc; }
.container { padding: 4em 0; }
.clearall { clear: both; display: block; width: 100%; }
/*********************************
* Rules to change layout style
*********************************/
/* Nothing needed (Full width) */
#container_1 {}
/* Wrap the entire site at once (Page Width) */
#container_2 { width: 960px; margin: 0 auto; border: 1px solid #aaa;}
/* Wrap all content areas (Full Width - with - Page Width) */
#container_3 .container { width: 960px; margin: 0 auto; border: 1px solid #aaa;}
</style>
</head>
<body>
<h1>Full Width</h1>
<div id="container_1">
<div id="top">
<div class="container">
<p>Header</p>
</div>
</div>
<div id="middle">
<div class="container">
<p>Main</p>
</div>
</div>
<div id="bottom">
<div class="container">
<p>Footer</p>
</div>
</div>
<div class="clearall"></div>
</div>
<h1>Page Width</h1>
<div id="container_2">
<div id="top">
<div class="container">
<p>Header</p>
</div>
</div>
<div id="middle">
<div class="container">
<p>Main</p>
</div>
</div>
<div id="bottom">
<div class="container">
<p>Footer</p>
</div>
</div>
<div class="clearall"></div>
</div>
<h1>Full Width (Design/Background) - Page Width (Content)</h1>
<div id="container_3">
<div id="top">
<div class="container">
<p>Header</p>
</div>
</div>
<div id="middle">
<div class="container">
<p>Main</p>
</div>
</div>
<div id="bottom">
<div class="container">
<p>Footer</p>
</div>
</div>
<div class="clearall"></div>
</div>
<div style="margin: 2em auto; width: 500px; text-align: left;">
<h1>Why?</h1>
<p>Most of the business world uses standard A4 (letter size) paper.
It always comes 8.5"x11" (210mm x 279.4mm) since it is an established standard.</p>
<p>It would be silly for A4 paper to come in random sizes larger than 8.5"x11"
each time you ordered it. Some days it might be 8.5"x11" and other days it might
be 9"x12". Since it must be 8.5x11 to work with scanners and other equipment,
you would have to crop sizes larger back down to 8.5"x11" and then you could use it.</p>
<p>This would be ridiculous. However, aren't our websites the same way?</p>
<p>It seems 98% of all web themes use three basic sections to order content.
Each has a header (top), content area (middle), and footer (bottom).
The look and sub elements of these three sections varies drastically -
but the fact that they are there wrapping those elements doesn't.</p>
<p>In an attempt to standardize this format (if for no-one else by myself)
I have created this file. At the core of all my themes
are these three basic sections. By adopting this file as the
base for all my themes I will be able to standardize my HTML so that I can
concentrate more on CSS styling.</p>
<p>Think of it like a less restrictive <a href="http://csszengarden.com">csszengarden.com</a></p>
<p>I dare you to find a theme that this file isn't built for. Every site out there is
page based, full-width, or the background is full-width while the content is page-based.</p>
<p style="color: #aaa;">P.S. Sub elements like "sidebars" are not included because
they vary tremendously in number and position from theme to theme.</p>
</div>
</body>
</html>