build/pgo/blueprint/grid.html

changeset 0
6474c204b198
equal deleted inserted replaced
-1:000000000000 0:3f2fd48509a1
1 <!-- This Source Code Form is subject to the terms of the Mozilla Public
2 - License, v. 2.0. If a copy of the MPL was not distributed with this
3 - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
4
5 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
6 "http://www.w3.org/TR/html4/strict.dtd">
7
8 <html lang="en">
9 <head>
10 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
11 <title>Blueprint Grid Tests</title>
12
13 <!-- Framework CSS -->
14 <link rel="stylesheet" href="screen.css" type="text/css" media="screen, projection">
15 <link rel="stylesheet" href="print.css" type="text/css" media="print">
16 <!--[if IE]><link rel="stylesheet" href="ie.css" type="text/css" media="screen, projection"><![endif]-->
17 </head>
18 <body>
19
20 <div class="container showgrid">
21 <h1>Blueprint Tests: grid.css</h1>
22
23
24 <div class="span-8">
25 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
26 </div>
27 <div class="span-8">
28 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
29 </div>
30 <div class="span-8 last">
31 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
32 </div>
33
34
35 <div class="span-6 append-1">
36 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
37 </div>
38 <div class="span-6 append-2">
39 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
40 </div>
41 <div class="span-6 append-3 last">
42 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
43 </div>
44
45
46 <div class="span-6 prepend-1">
47 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
48 </div>
49 <div class="span-6 prepend-2">
50 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
51 </div>
52 <div class="span-6 prepend-3 last">
53 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
54 </div>
55 <hr>
56
57 <div class="span-12 border">
58 <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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
59 </div>
60 <div class="span-12 last">
61 <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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
62 </div>
63 <hr>
64
65 <div class="span-1 prepend-1"><p>1</p></div>
66 <div class="span-1 prepend-2"><p>2</p></div>
67 <div class="span-1 prepend-3"><p>3</p></div>
68 <div class="span-1 prepend-4"><p>4</p></div>
69 <div class="span-1 prepend-5"><p>5</p></div>
70 <div class="span-1 prepend-3 last"><p>3</p></div>
71
72 <div class="span-1 append-1"><p>1</p></div>
73 <div class="span-1 append-2"><p>2</p></div>
74 <div class="span-1 append-3"><p>3</p></div>
75 <div class="span-1 append-4"><p>4</p></div>
76 <div class="span-1 append-5"><p>5</p></div>
77 <div class="span-1 append-3 last"><p>3</p></div>
78
79 <div class="span-1 border"><p>1</p></div>
80 <div class="span-1 border"><p>2</p></div>
81 <div class="span-1 border"><p>3</p></div>
82 <div class="span-1 border"><p>4</p></div>
83 <div class="span-1 border"><p>5</p></div>
84 <div class="span-1 border"><p>6</p></div>
85 <div class="span-1 border"><p>7</p></div>
86 <div class="span-1 border"><p>8</p></div>
87 <div class="span-1 border"><p>9</p></div>
88 <div class="span-1 border"><p>10</p></div>
89 <div class="span-1 border"><p>11</p></div>
90 <div class="span-1 border"><p>12</p></div>
91 <div class="span-1 border"><p>13</p></div>
92 <div class="span-1 border"><p>14</p></div>
93 <div class="span-1 border"><p>15</p></div>
94 <div class="span-1 border"><p>16</p></div>
95 <div class="span-1 border"><p>17</p></div>
96 <div class="span-1 border"><p>18</p></div>
97 <div class="span-1 border"><p>19</p></div>
98 <div class="span-1 border"><p>20</p></div>
99 <div class="span-1 border"><p>21</p></div>
100 <div class="span-1 border"><p>22</p></div>
101 <div class="span-1 border"><p>23</p></div>
102 <div class="span-1 last"><p>24</p></div>
103
104
105 <div class="span-4"><p>1</p></div>
106 <div class="span-4"><p>2</p></div>
107 <div class="span-4"><p>3</p></div>
108 <div class="span-4"><p>4</p></div>
109 <div class="span-4"><p>5</p></div>
110 <div class="span-4 last"><p>6</p></div>
111
112
113 <div class="prepend-23 span-1 last"><p>24</p></div>
114
115
116 <div class="prepend-1 span-1"><p>2</p></div>
117 <div class="prepend-20 span-1 append-1 last"><p>23</p></div>
118 <hr>
119
120 <div class="span-24">
121 <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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
122 </div>
123
124
125 <div class="span-12">
126 <div class="span-6">
127 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
128 </div>
129
130 <div class="span-6 last">
131 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
132 </div>
133
134 <div class="span-12 last">
135 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
136 </div>
137 </div>
138
139 <div class="span-12 last">
140 <div class="span-6">
141 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
142 </div>
143
144 <div class="span-6 last">
145 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
146 </div>
147
148 <div class="span-12 last">
149 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
150 </div>
151 </div>
152
153
154 <div class="span-14 prepend-5 append-5 last">
155 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
156 </div>
157 <hr>
158
159 <div class="span-12">
160 <h5>TESTING .PUSH-1 TO .PUSH-5</h5>
161
162 <div class="span-2"><img src="test-small.jpg" class="push-1"></div>
163 <div class="span-10 last"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
164
165 <div class="span-2"><img src="test-small.jpg" class="push-2"></div>
166 <div class="span-10 last"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
167
168 <div class="span-2"><img src="test-small.jpg" class="push-3"></div>
169 <div class="span-10 last"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
170
171 <div class="span-2"><img src="test-small.jpg" class="push-4"></div>
172 <div class="span-10 last"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
173
174 <div class="span-2"><img src="test-small.jpg" class="push-5"></div>
175 <div class="span-10 last"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
176
177 </div>
178
179 <div class="span-12 last">
180 <h5>TESTING .PULL-1 TO .PULL-5</h5>
181
182 <div class="span-10"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
183 <div class="span-2 last"><img src="test-small.jpg" class="top pull-1"></div>
184
185 <div class="span-10"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
186 <div class="span-2 last"><img src="test-small.jpg" class="top pull-2"></div>
187
188 <div class="span-10"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
189 <div class="span-2 last"><img src="test-small.jpg" class="top pull-3"></div>
190
191 <div class="span-10"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
192 <div class="span-2 last"><img src="test-small.jpg" class="top pull-4"></div>
193
194 <div class="span-10"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
195 <div class="span-2 last"><img src="test-small.jpg" class="top pull-5"></div>
196
197 </div>
198
199
200
201
202
203 <div class="span-24">
204 <p><a href="http://validator.w3.org/check?uri=referer">
205 <img src="valid.png" alt="Valid HTML 4.01 Strict" height="31" width="88" class="bottom"></a></p>
206 </div>
207
208 </div>
209 </body>
210 </html>

mercurial