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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
|
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Blueprint Sample Page</title>
<!-- Framework CSS -->
<link
rel="stylesheet"
href="screen.css"
type="text/css"
media="screen, projection"
/>
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
<!--[if IE
]><link
rel="stylesheet"
href="ie.css"
type="text/css"
media="screen, projection"
/><![endif]-->
<!-- Import fancy-type plugin for the sample page. -->
<link
rel="stylesheet"
href="fancytype-screen.css"
type="text/css"
media="screen, projection"
/>
</head>
<body>
<div class="container">
<h1>A simple sample page</h1>
<hr />
<h2 class="alt">
This sample page demonstrates a tiny fraction of what you get with
Blueprint.
</h2>
<hr />
<div class="span-7 colborder">
<h6>Here's a box</h6>
<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.
</p>
</div>
<div class="span-8 colborder">
<h6>And another box</h6>
<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 laboris nisi ut aliquip.
</p>
</div>
<div class="span-7 last">
<h6>This box is aligned with the sidebar</h6>
<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.
</p>
</div>
<hr />
<hr class="space" />
<div class="span-15 prepend-1 colborder">
<p>
<img src="test.jpg" class="top pull-1" alt="test" />Lorem ipsum dolor
sit amet, <em>consectetuer adipiscing elit</em>. Nunc congue ipsum
vestibulum libero. Aenean vitae justo. Nam eget tellus. Etiam
convallis, est eu lobortis mattis, lectus tellus tempus felis, a
ultricies erat ipsum at metus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<a href="#">Morbi et risus</a>. Aliquam nisl. Nulla facilisi. Cras
accumsan vestibulum ante. Vestibulum sed tortor. Praesent
<span class="caps">SMALL CAPS</span> tempus fringilla elit. Ut elit
diam, sagittis in, nonummy in, gravida non, nunc. Ut orci. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nam egestas, orci eu imperdiet malesuada, nisl
purus fringilla odio, quis commodo est orci vitae justo. Aliquam
placerat odio tincidunt nulla. Cras in libero. Aenean rutrum, magna
non tristique posuere, erat odio eleifend nisl, non convallis est
tortor blandit ligula. Nulla id augue.
</p>
<p>
Nullam mattis, odio ut tempus facilisis, metus nisl facilisis metus,
auctor consectetuer felis ligula nec mauris. Vestibulum odio erat,
fermentum at, commodo vitae, ultrices et, urna. Mauris vulputate, mi
pulvinar sagittis condimentum, sem nulla aliquam velit, sed imperdiet
mi purus eu magna. Nulla varius metus ut eros. Aenean aliquet magna
eget orci. Class aptent taciti sociosqu ad litora.
</p>
<p>
Vivamus euismod. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Suspendisse vel nibh ut turpis dictum
sagittis. Aliquam vel velit a elit auctor sollicitudin. Nam vel dui
vel neque lacinia pretium. Quisque nunc erat, venenatis id, volutpat
ut, scelerisque sed, diam. Mauris ante. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.
Donec mattis. Morbi dignissim sollicitudin libero. Nulla lorem.
</p>
<blockquote>
<p>
Integer cursus ornare mauris. Praesent nisl arcu, imperdiet eu,
ornare id, scelerisque ut, nunc. Praesent sagittis erat sed velit
tempus imperdiet. Ut tristique, ante in interdum hendrerit, erat
enim faucibus felis, quis rutrum mauris lorem quis sem. Vestibulum
ligula nisi, mattis nec, posuere et, blandit eu, ligula. Nam
suscipit placerat odio. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos hymenaeos. Pellentesque
tortor libero, venenatis vitae, rhoncus eu, placerat ut, mi. Nulla
nulla.
</p>
</blockquote>
<p>
Maecenas vel metus quis magna pharetra fermentum.
<em>Integer sit amet tortor</em>. Maecenas porttitor, pede sed gravida
auctor, nulla augue aliquet elit, at pretium urna orci ut metus.
Aliquam in dolor. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Sed aliquam, tellus id ornare
posuere, quam nunc accumsan turpis, at convallis tellus orci et nisl.
Phasellus congue neque a lorem.
</p>
<hr />
<div class="span-7 colborder">
<h6>This is a nested column</h6>
<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. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.
</p>
</div>
<div class="span-7 last">
<h6>This is another nested column</h6>
<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. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.
</p>
</div>
</div>
<div class="span-7 last">
<h3>A <span class="alt">Simple</span> Sidebar</h3>
<p>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede
sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem
nisi vel augue.
</p>
<p>
Mauris a lectus. Aliquam erat volutpat. Phasellus ultrices mi a
sapien. Nunc rutrum egestas lorem. Duis ac sem sagittis elit tincidunt
gravida. Mauris a lectus. Aliquam erat volutpat. Phasellus ultrices mi
a sapien. Nunc rutrum egestas lorem. Duis ac sem sagittis elit
tincidunt gravida.
</p>
<p class="quiet">
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede
sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem
nisi vel augue.
</p>
<h5>Incremental leading</h5>
<p class="incr">
Vestibulum ante ipsum primis in faucibus orci luctus vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet
vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue.
sed aliquet vehicula, lectus tellus.
</p>
<p class="incr">
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede
sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem
nisi vel augue. sed aliquet vehicula, lectus tellus pulvinar neque,
non cursus sem nisi vel augue. ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris
venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque,
non cursus sem nisi vel augue. sed aliquet vehicula, lectus tellus
pulvinar neque, non cursus sem nisi vel augue.
</p>
</div>
<hr />
<h2 class="alt">
You may pick and choose amongst these and many more features, so be
bold.
</h2>
<hr />
<p>
<a href="http://validator.w3.org/check?uri=referer">
<img
src="valid.png"
alt="Valid HTML 4.01 Strict"
height="31"
width="88"
class="top"
/></a>
</p>
</div>
</body>
</html>
|
