spike 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- data/.document +5 -0
- data/.gitignore +21 -0
- data/.gitmodules +6 -0
- data/LICENSE +20 -0
- data/README.md +45 -0
- data/Rakefile +56 -0
- data/VERSION +1 -0
- data/bin/spike +5 -0
- data/lib/initializers/960.rb +33 -0
- data/lib/initializers/jquery.rb +1 -0
- data/lib/spike.rb +61 -0
- data/lib/template/app.css +0 -0
- data/lib/template/css/960/README.txt +52 -0
- data/lib/template/css/960/code/css/960.css +1 -0
- data/lib/template/css/960/code/css/960_24_col.css +1 -0
- data/lib/template/css/960/code/css/reset.css +1 -0
- data/lib/template/css/960/code/css/rtl_960.css +1 -0
- data/lib/template/css/960/code/css/rtl_960_24_col.css +1 -0
- data/lib/template/css/960/code/css/rtl_text.css +1 -0
- data/lib/template/css/960/code/css/text.css +1 -0
- data/lib/template/css/960/code/css/uncompressed/960.css +628 -0
- data/lib/template/css/960/code/css/uncompressed/960_24_col.css +599 -0
- data/lib/template/css/960/code/css/uncompressed/demo.css +47 -0
- data/lib/template/css/960/code/css/uncompressed/reset.css +53 -0
- data/lib/template/css/960/code/css/uncompressed/rtl_960.css +628 -0
- data/lib/template/css/960/code/css/uncompressed/rtl_960_24_col.css +599 -0
- data/lib/template/css/960/code/css/uncompressed/rtl_text.css +84 -0
- data/lib/template/css/960/code/css/uncompressed/text.css +84 -0
- data/lib/template/css/960/code/demo.html +538 -0
- data/lib/template/css/960/code/demo_24_col.html +411 -0
- data/lib/template/css/960/code/img/12_col.gif +0 -0
- data/lib/template/css/960/code/img/16_col.gif +0 -0
- data/lib/template/css/960/code/img/24_col.gif +0 -0
- data/lib/template/css/960/code/rtl_demo.html +538 -0
- data/lib/template/css/960/code/rtl_demo_24_col.html +411 -0
- data/lib/template/css/960/fireworks_extension/960.gs Grid Commands.mxp +0 -0
- data/lib/template/css/960/fireworks_extension/_source/12 columns.jsf +26 -0
- data/lib/template/css/960/fireworks_extension/_source/16 columns.jsf +26 -0
- data/lib/template/css/960/fireworks_extension/_source/24 columns.jsf +26 -0
- data/lib/template/css/960/fireworks_extension/_source/960.gs Grid Commands.mxi +22 -0
- data/lib/template/css/960/licenses/GPL_license.txt +674 -0
- data/lib/template/css/960/licenses/MIT_license.txt +20 -0
- data/lib/template/css/960/sketch_sheets/960_sketch.pdf +0 -0
- data/lib/template/css/960/templates/acorn/960_grid_12_col.acorn +0 -0
- data/lib/template/css/960/templates/acorn/960_grid_16_col.acorn +0 -0
- data/lib/template/css/960/templates/acorn/960_grid_24_col.acorn +0 -0
- data/lib/template/css/960/templates/corel_draw/960_grid_12_col.cdt +0 -0
- data/lib/template/css/960/templates/corel_draw/960_grid_16_col.cdt +0 -0
- data/lib/template/css/960/templates/corel_draw/960_grid_24_col.cdt +0 -0
- data/lib/template/css/960/templates/expression_design/960_grid_12_col.design +0 -0
- data/lib/template/css/960/templates/expression_design/960_grid_16_col.design +0 -0
- data/lib/template/css/960/templates/expression_design/960_grid_24_col.design +0 -0
- data/lib/template/css/960/templates/fireworks/960_grid_12_col.png +0 -0
- data/lib/template/css/960/templates/fireworks/960_grid_16_col.png +0 -0
- data/lib/template/css/960/templates/fireworks/960_grid_24_col.png +0 -0
- data/lib/template/css/960/templates/flash/960_grid_12_col.fla +0 -0
- data/lib/template/css/960/templates/flash/960_grid_16_col.fla +0 -0
- data/lib/template/css/960/templates/flash/960_grid_24_col.fla +0 -0
- data/lib/template/css/960/templates/gimp/960_grid_12_col.xcf +0 -0
- data/lib/template/css/960/templates/gimp/960_grid_16_col.xcf +0 -0
- data/lib/template/css/960/templates/gimp/960_grid_24_col.xcf +0 -0
- data/lib/template/css/960/templates/illustrator/960_grid_12_col.ai +372 -0
- data/lib/template/css/960/templates/illustrator/960_grid_16_col.ai +361 -0
- data/lib/template/css/960/templates/indesign/960_grid_12_col.inx +1197 -0
- data/lib/template/css/960/templates/indesign/960_grid_16_col.inx +1214 -0
- data/lib/template/css/960/templates/inkscape/960_grid_12_col.svg +217 -0
- data/lib/template/css/960/templates/inkscape/960_grid_16_col.svg +265 -0
- data/lib/template/css/960/templates/inkscape/960_grid_24_col.svg +174 -0
- data/lib/template/css/960/templates/omnigraffle/960_graffle.graffle +0 -0
- data/lib/template/css/960/templates/photoshop/960_grid_12_col.psd +0 -0
- data/lib/template/css/960/templates/photoshop/960_grid_16_col.psd +0 -0
- data/lib/template/css/960/templates/photoshop/960_grid_24_col.psd +0 -0
- data/lib/template/css/960/templates/visio/960_visio.vsd +0 -0
- data/lib/template/css/blueprint/AUTHORS.textile +42 -0
- data/lib/template/css/blueprint/CHANGELOG +159 -0
- data/lib/template/css/blueprint/LICENSE +22 -0
- data/lib/template/css/blueprint/README.textile +81 -0
- data/lib/template/css/blueprint/TUTORIAL.textile +206 -0
- data/lib/template/css/blueprint/blueprint/ie.css +35 -0
- data/lib/template/css/blueprint/blueprint/plugins/buttons/icons/cross.png +0 -0
- data/lib/template/css/blueprint/blueprint/plugins/buttons/icons/key.png +0 -0
- data/lib/template/css/blueprint/blueprint/plugins/buttons/icons/tick.png +0 -0
- data/lib/template/css/blueprint/blueprint/plugins/buttons/readme.txt +32 -0
- data/lib/template/css/blueprint/blueprint/plugins/buttons/screen.css +97 -0
- data/lib/template/css/blueprint/blueprint/plugins/fancy-type/readme.txt +14 -0
- data/lib/template/css/blueprint/blueprint/plugins/fancy-type/screen.css +71 -0
- data/lib/template/css/blueprint/blueprint/plugins/link-icons/icons/doc.png +0 -0
- data/lib/template/css/blueprint/blueprint/plugins/link-icons/icons/email.png +0 -0
- data/lib/template/css/blueprint/blueprint/plugins/link-icons/icons/external.png +0 -0
- data/lib/template/css/blueprint/blueprint/plugins/link-icons/icons/feed.png +0 -0
- data/lib/template/css/blueprint/blueprint/plugins/link-icons/icons/im.png +0 -0
- data/lib/template/css/blueprint/blueprint/plugins/link-icons/icons/pdf.png +0 -0
- data/lib/template/css/blueprint/blueprint/plugins/link-icons/icons/visited.png +0 -0
- data/lib/template/css/blueprint/blueprint/plugins/link-icons/icons/xls.png +0 -0
- data/lib/template/css/blueprint/blueprint/plugins/link-icons/readme.txt +18 -0
- data/lib/template/css/blueprint/blueprint/plugins/link-icons/screen.css +40 -0
- data/lib/template/css/blueprint/blueprint/plugins/rtl/readme.txt +10 -0
- data/lib/template/css/blueprint/blueprint/plugins/rtl/screen.css +110 -0
- data/lib/template/css/blueprint/blueprint/print.css +29 -0
- data/lib/template/css/blueprint/blueprint/screen.css +258 -0
- data/lib/template/css/blueprint/blueprint/src/forms.css +65 -0
- data/lib/template/css/blueprint/blueprint/src/grid.css +280 -0
- data/lib/template/css/blueprint/blueprint/src/grid.png +0 -0
- data/lib/template/css/blueprint/blueprint/src/ie.css +76 -0
- data/lib/template/css/blueprint/blueprint/src/print.css +85 -0
- data/lib/template/css/blueprint/blueprint/src/reset.css +45 -0
- data/lib/template/css/blueprint/blueprint/src/typography.css +106 -0
- data/lib/template/css/blueprint/lib/blueprint/blueprint.rb +39 -0
- data/lib/template/css/blueprint/lib/blueprint/compressor.rb +290 -0
- data/lib/template/css/blueprint/lib/blueprint/core_ext.rb +39 -0
- data/lib/template/css/blueprint/lib/blueprint/css_parser.rb +72 -0
- data/lib/template/css/blueprint/lib/blueprint/custom_layout.rb +72 -0
- data/lib/template/css/blueprint/lib/blueprint/grid.css.erb +146 -0
- data/lib/template/css/blueprint/lib/blueprint/grid_builder.rb +63 -0
- data/lib/template/css/blueprint/lib/blueprint/namespace.rb +38 -0
- data/lib/template/css/blueprint/lib/blueprint/semantic_class_names.rb +64 -0
- data/lib/template/css/blueprint/lib/blueprint/validate/COPYRIGHT.html +93 -0
- data/lib/template/css/blueprint/lib/blueprint/validate/JIGSAW_COPYRIGHT +64 -0
- data/lib/template/css/blueprint/lib/blueprint/validate/README.html +83 -0
- data/lib/template/css/blueprint/lib/blueprint/validate/XERCES_COPYING.txt +56 -0
- data/lib/template/css/blueprint/lib/blueprint/validate/css-validator-javadoc.jar +0 -0
- data/lib/template/css/blueprint/lib/blueprint/validate/css-validator.jar +0 -0
- data/lib/template/css/blueprint/lib/blueprint/validate/jigsaw.jar +0 -0
- data/lib/template/css/blueprint/lib/blueprint/validate/xerces.jar +0 -0
- data/lib/template/css/blueprint/lib/blueprint/validator.rb +49 -0
- data/lib/template/css/blueprint/lib/compress.rb +167 -0
- data/lib/template/css/blueprint/lib/settings.example.yml +33 -0
- data/lib/template/css/blueprint/lib/validate.rb +15 -0
- data/lib/template/css/blueprint/templates/psd/fixed-width.psd +0 -0
- data/lib/template/css/blueprint/tests/index.html +83 -0
- data/lib/template/css/blueprint/tests/parts/elements.html +247 -0
- data/lib/template/css/blueprint/tests/parts/forms.html +191 -0
- data/lib/template/css/blueprint/tests/parts/grid.html +163 -0
- data/lib/template/css/blueprint/tests/parts/sample.html +75 -0
- data/lib/template/css/blueprint/tests/parts/test-small.jpg +0 -0
- data/lib/template/css/blueprint/tests/parts/test.jpg +0 -0
- data/lib/template/css/blueprint/tests/parts/valid.png +0 -0
- data/lib/template/index.html +16 -0
- data/spike.gemspec +190 -0
- data/test/helper.rb +10 -0
- data/test/test_spike.rb +7 -0
- metadata +227 -0
@@ -0,0 +1,411 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html lang="en">
|
3
|
+
<head>
|
4
|
+
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
5
|
+
<title>960 Grid System — Demo</title>
|
6
|
+
<link rel="stylesheet" href="css/reset.css" />
|
7
|
+
<link rel="stylesheet" href="css/text.css" />
|
8
|
+
<link rel="stylesheet" href="css/960_24_col.css" />
|
9
|
+
<link rel="stylesheet" href="css/uncompressed/demo.css" />
|
10
|
+
</head>
|
11
|
+
<body>
|
12
|
+
<h1>
|
13
|
+
<a href="http://960.gs/">960 Grid System</a>
|
14
|
+
</h1>
|
15
|
+
<div class="container_24">
|
16
|
+
<h2>
|
17
|
+
24 Column Grid
|
18
|
+
</h2>
|
19
|
+
<div class="grid_24">
|
20
|
+
<p>
|
21
|
+
950
|
22
|
+
</p>
|
23
|
+
</div>
|
24
|
+
<!-- end .grid_24 -->
|
25
|
+
<div class="clear"></div>
|
26
|
+
<div class="grid_1">
|
27
|
+
<p>
|
28
|
+
30
|
29
|
+
</p>
|
30
|
+
</div>
|
31
|
+
<!-- end .grid_1 -->
|
32
|
+
<div class="grid_23">
|
33
|
+
<p>
|
34
|
+
910
|
35
|
+
</p>
|
36
|
+
</div>
|
37
|
+
<!-- end .grid_23 -->
|
38
|
+
<div class="clear"></div>
|
39
|
+
<div class="grid_2">
|
40
|
+
<p>
|
41
|
+
70
|
42
|
+
</p>
|
43
|
+
</div>
|
44
|
+
<!-- end .grid_2 -->
|
45
|
+
<div class="grid_22">
|
46
|
+
<p>
|
47
|
+
870
|
48
|
+
</p>
|
49
|
+
</div>
|
50
|
+
<!-- end .grid_2 -->
|
51
|
+
<div class="clear"></div>
|
52
|
+
<div class="grid_3">
|
53
|
+
<p>
|
54
|
+
110
|
55
|
+
</p>
|
56
|
+
</div>
|
57
|
+
<!-- end .grid_3 -->
|
58
|
+
<div class="grid_21">
|
59
|
+
<p>
|
60
|
+
830
|
61
|
+
</p>
|
62
|
+
</div>
|
63
|
+
<!-- end .grid_21 -->
|
64
|
+
<div class="clear"></div>
|
65
|
+
<div class="grid_4">
|
66
|
+
<p>
|
67
|
+
150
|
68
|
+
</p>
|
69
|
+
</div>
|
70
|
+
<!-- end .grid_4 -->
|
71
|
+
<div class="grid_20">
|
72
|
+
<p>
|
73
|
+
790
|
74
|
+
</p>
|
75
|
+
</div>
|
76
|
+
<!-- end .grid_20 -->
|
77
|
+
<div class="clear"></div>
|
78
|
+
<div class="grid_5">
|
79
|
+
<p>
|
80
|
+
190
|
81
|
+
</p>
|
82
|
+
</div>
|
83
|
+
<!-- end .grid_5 -->
|
84
|
+
<div class="grid_19">
|
85
|
+
<p>
|
86
|
+
750
|
87
|
+
</p>
|
88
|
+
</div>
|
89
|
+
<!-- end .grid_19 -->
|
90
|
+
<div class="clear"></div>
|
91
|
+
<div class="grid_6">
|
92
|
+
<p>
|
93
|
+
230
|
94
|
+
</p>
|
95
|
+
</div>
|
96
|
+
<!-- end .grid_6 -->
|
97
|
+
<div class="grid_18">
|
98
|
+
<p>
|
99
|
+
710
|
100
|
+
</p>
|
101
|
+
</div>
|
102
|
+
<!-- end .grid_18 -->
|
103
|
+
<div class="clear"></div>
|
104
|
+
<div class="grid_7">
|
105
|
+
<p>
|
106
|
+
270
|
107
|
+
</p>
|
108
|
+
</div>
|
109
|
+
<!-- end .grid_7 -->
|
110
|
+
<div class="grid_17">
|
111
|
+
<p>
|
112
|
+
670
|
113
|
+
</p>
|
114
|
+
</div>
|
115
|
+
<!-- end .grid_17 -->
|
116
|
+
<div class="clear"></div>
|
117
|
+
<div class="grid_8">
|
118
|
+
<p>
|
119
|
+
310
|
120
|
+
</p>
|
121
|
+
</div>
|
122
|
+
<!-- end .grid_8 -->
|
123
|
+
<div class="grid_16">
|
124
|
+
<p>
|
125
|
+
630
|
126
|
+
</p>
|
127
|
+
</div>
|
128
|
+
<!-- end .grid_16 -->
|
129
|
+
<div class="clear"></div>
|
130
|
+
<div class="grid_9">
|
131
|
+
<p>
|
132
|
+
350
|
133
|
+
</p>
|
134
|
+
</div>
|
135
|
+
<!-- end .grid_9 -->
|
136
|
+
<div class="grid_15">
|
137
|
+
<p>
|
138
|
+
590
|
139
|
+
</p>
|
140
|
+
</div>
|
141
|
+
<!-- end .grid_15 -->
|
142
|
+
<div class="clear"></div>
|
143
|
+
<div class="grid_10">
|
144
|
+
<p>
|
145
|
+
390
|
146
|
+
</p>
|
147
|
+
</div>
|
148
|
+
<!-- end .grid_10 -->
|
149
|
+
<div class="grid_14">
|
150
|
+
<p>
|
151
|
+
550
|
152
|
+
</p>
|
153
|
+
</div>
|
154
|
+
<!-- end .grid_14 -->
|
155
|
+
<div class="clear"></div>
|
156
|
+
<div class="grid_11">
|
157
|
+
<p>
|
158
|
+
430
|
159
|
+
</p>
|
160
|
+
</div>
|
161
|
+
<!-- end .grid_11 -->
|
162
|
+
<div class="grid_13">
|
163
|
+
<p>
|
164
|
+
510
|
165
|
+
</p>
|
166
|
+
</div>
|
167
|
+
<!-- end .grid_13 -->
|
168
|
+
<div class="clear"></div>
|
169
|
+
<div class="grid_12">
|
170
|
+
<p>
|
171
|
+
470
|
172
|
+
</p>
|
173
|
+
</div>
|
174
|
+
<!-- end .grid_12 -->
|
175
|
+
<div class="grid_12">
|
176
|
+
<p>
|
177
|
+
470
|
178
|
+
</p>
|
179
|
+
</div>
|
180
|
+
<!-- end .grid_12 -->
|
181
|
+
<div class="clear"></div>
|
182
|
+
<div class="grid_1 suffix_23">
|
183
|
+
<p>
|
184
|
+
30
|
185
|
+
</p>
|
186
|
+
</div>
|
187
|
+
<!-- end .grid_1.suffix_23 -->
|
188
|
+
<div class="clear"></div>
|
189
|
+
<div class="grid_1 prefix_1 suffix_22">
|
190
|
+
<p>
|
191
|
+
30
|
192
|
+
</p>
|
193
|
+
</div>
|
194
|
+
<!-- end .grid_1.prefix_1.suffix_22 -->
|
195
|
+
<div class="clear"></div>
|
196
|
+
<div class="grid_1 prefix_2 suffix_21">
|
197
|
+
<p>
|
198
|
+
30
|
199
|
+
</p>
|
200
|
+
</div>
|
201
|
+
<!-- end .grid_1.prefix_2.suffix_21 -->
|
202
|
+
<div class="clear"></div>
|
203
|
+
<div class="grid_1 prefix_3 suffix_20">
|
204
|
+
<p>
|
205
|
+
30
|
206
|
+
</p>
|
207
|
+
</div>
|
208
|
+
<!-- end .grid_1.prefix_3.suffix_20 -->
|
209
|
+
<div class="clear"></div>
|
210
|
+
<div class="grid_1 prefix_4 suffix_19">
|
211
|
+
<p>
|
212
|
+
30
|
213
|
+
</p>
|
214
|
+
</div>
|
215
|
+
<!-- end .grid_1.prefix_4.suffix_19 -->
|
216
|
+
<div class="clear"></div>
|
217
|
+
<div class="grid_1 prefix_5 suffix_18">
|
218
|
+
<p>
|
219
|
+
30
|
220
|
+
</p>
|
221
|
+
</div>
|
222
|
+
<!-- end .grid_1.prefix_5.suffix_18 -->
|
223
|
+
<div class="clear"></div>
|
224
|
+
<div class="grid_1 prefix_6 suffix_17">
|
225
|
+
<p>
|
226
|
+
30
|
227
|
+
</p>
|
228
|
+
</div>
|
229
|
+
<!-- end .grid_1.prefix_6.suffix_17 -->
|
230
|
+
<div class="clear"></div>
|
231
|
+
<div class="grid_1 prefix_7 suffix_16">
|
232
|
+
<p>
|
233
|
+
30
|
234
|
+
</p>
|
235
|
+
</div>
|
236
|
+
<!-- end .grid_1.prefix_7.suffix_16 -->
|
237
|
+
<div class="clear"></div>
|
238
|
+
<div class="grid_1 prefix_8 suffix_15">
|
239
|
+
<p>
|
240
|
+
30
|
241
|
+
</p>
|
242
|
+
</div>
|
243
|
+
<!-- end .grid_1.prefix_8.suffix_15 -->
|
244
|
+
<div class="clear"></div>
|
245
|
+
<div class="grid_1 prefix_9 suffix_14">
|
246
|
+
<p>
|
247
|
+
30
|
248
|
+
</p>
|
249
|
+
</div>
|
250
|
+
<!-- end .grid_1.prefix_9.suffix_14 -->
|
251
|
+
<div class="clear"></div>
|
252
|
+
<div class="grid_1 prefix_10 suffix_13">
|
253
|
+
<p>
|
254
|
+
30
|
255
|
+
</p>
|
256
|
+
</div>
|
257
|
+
<!-- end .grid_1.prefix_10.suffix_13 -->
|
258
|
+
<div class="clear"></div>
|
259
|
+
<div class="grid_1 prefix_11 suffix_12">
|
260
|
+
<p>
|
261
|
+
30
|
262
|
+
</p>
|
263
|
+
</div>
|
264
|
+
<!-- end .grid_1.prefix_11.suffix_12 -->
|
265
|
+
<div class="grid_1 prefix_12 suffix_11">
|
266
|
+
<p>
|
267
|
+
30
|
268
|
+
</p>
|
269
|
+
</div>
|
270
|
+
<!-- end .grid_1.prefix_12.suffix_11 -->
|
271
|
+
<div class="clear"></div>
|
272
|
+
<div class="grid_1 prefix_13 suffix_10">
|
273
|
+
<p>
|
274
|
+
30
|
275
|
+
</p>
|
276
|
+
</div>
|
277
|
+
<!-- end .grid_1.prefix_13.suffix_10 -->
|
278
|
+
<div class="clear"></div>
|
279
|
+
<div class="grid_1 prefix_14 suffix_9">
|
280
|
+
<p>
|
281
|
+
30
|
282
|
+
</p>
|
283
|
+
</div>
|
284
|
+
<!-- end .grid_1.prefix_14.suffix_9 -->
|
285
|
+
<div class="clear"></div>
|
286
|
+
<div class="grid_1 prefix_15 suffix_8">
|
287
|
+
<p>
|
288
|
+
30
|
289
|
+
</p>
|
290
|
+
</div>
|
291
|
+
<!-- end .grid_1.prefix_15.suffix_8 -->
|
292
|
+
<div class="clear"></div>
|
293
|
+
<div class="grid_1 prefix_16 suffix_7">
|
294
|
+
<p>
|
295
|
+
30
|
296
|
+
</p>
|
297
|
+
</div>
|
298
|
+
<!-- end .grid_1.prefix_16.suffix_7 -->
|
299
|
+
<div class="clear"></div>
|
300
|
+
<div class="grid_1 prefix_17 suffix_6">
|
301
|
+
<p>
|
302
|
+
30
|
303
|
+
</p>
|
304
|
+
</div>
|
305
|
+
<!-- end .grid_1.prefix_17.suffix_6 -->
|
306
|
+
<div class="clear"></div>
|
307
|
+
<div class="grid_1 prefix_18 suffix_5">
|
308
|
+
<p>
|
309
|
+
30
|
310
|
+
</p>
|
311
|
+
</div>
|
312
|
+
<!-- end .grid_1.prefix_18.suffix_5 -->
|
313
|
+
<div class="clear"></div>
|
314
|
+
<div class="grid_1 prefix_19 suffix_4">
|
315
|
+
<p>
|
316
|
+
30
|
317
|
+
</p>
|
318
|
+
</div>
|
319
|
+
<!-- end .grid_1.prefix_19.suffix_4 -->
|
320
|
+
<div class="clear"></div>
|
321
|
+
<div class="grid_1 prefix_20 suffix_3">
|
322
|
+
<p>
|
323
|
+
30
|
324
|
+
</p>
|
325
|
+
</div>
|
326
|
+
<!-- end .grid_1.prefix_20.suffix_3 -->
|
327
|
+
<div class="clear"></div>
|
328
|
+
<div class="grid_1 prefix_21 suffix_2">
|
329
|
+
<p>
|
330
|
+
30
|
331
|
+
</p>
|
332
|
+
</div>
|
333
|
+
<!-- end .grid_1.prefix_21.suffix_2 -->
|
334
|
+
<div class="clear"></div>
|
335
|
+
<div class="grid_1 prefix_22 suffix_1">
|
336
|
+
<p>
|
337
|
+
30
|
338
|
+
</p>
|
339
|
+
</div>
|
340
|
+
<!-- end .grid_1.prefix_22.suffix_1 -->
|
341
|
+
<div class="clear"></div>
|
342
|
+
<div class="grid_1 prefix_23">
|
343
|
+
<p>
|
344
|
+
30
|
345
|
+
</p>
|
346
|
+
</div>
|
347
|
+
<!-- end .grid_1.prefix_23 -->
|
348
|
+
<div class="clear"></div>
|
349
|
+
<div class="grid_12 push_12">
|
350
|
+
<div class="grid_6 alpha">
|
351
|
+
<p>
|
352
|
+
230
|
353
|
+
</p>
|
354
|
+
</div>
|
355
|
+
<!-- end .grid_6.alpha -->
|
356
|
+
<div class="grid_6 omega">
|
357
|
+
<p>
|
358
|
+
230
|
359
|
+
</p>
|
360
|
+
</div>
|
361
|
+
<!-- end .grid_6.omega -->
|
362
|
+
<div class="clear"></div>
|
363
|
+
<div class="grid_1 alpha">
|
364
|
+
<p>
|
365
|
+
30
|
366
|
+
</p>
|
367
|
+
</div>
|
368
|
+
<!-- end .grid_1.alpha -->
|
369
|
+
<div class="grid_11 omega">
|
370
|
+
<p>
|
371
|
+
430
|
372
|
+
</p>
|
373
|
+
</div>
|
374
|
+
<!-- end .grid_11.omega -->
|
375
|
+
<div class="clear"></div>
|
376
|
+
</div>
|
377
|
+
<!-- end .grid_12.push_12 -->
|
378
|
+
<div class="grid_12 pull_12">
|
379
|
+
<div class="grid_1 alpha">
|
380
|
+
<p>
|
381
|
+
30
|
382
|
+
</p>
|
383
|
+
</div>
|
384
|
+
<!-- end .grid_1.alpha -->
|
385
|
+
<div class="grid_11 omega">
|
386
|
+
<p>
|
387
|
+
430
|
388
|
+
</p>
|
389
|
+
</div>
|
390
|
+
<!-- end .grid_11.omega -->
|
391
|
+
<div class="clear"></div>
|
392
|
+
<div class="grid_6 alpha">
|
393
|
+
<p>
|
394
|
+
230
|
395
|
+
</p>
|
396
|
+
</div>
|
397
|
+
<!-- end .grid_6.alpha -->
|
398
|
+
<div class="grid_6 omega">
|
399
|
+
<p>
|
400
|
+
230
|
401
|
+
</p>
|
402
|
+
</div>
|
403
|
+
<!-- end .grid_6.omega -->
|
404
|
+
<div class="clear"></div>
|
405
|
+
</div>
|
406
|
+
<!-- end .grid_12.pull_12 -->
|
407
|
+
<div class="clear"></div>
|
408
|
+
</div>
|
409
|
+
<!-- end .container_24 -->
|
410
|
+
</body>
|
411
|
+
</html>
|
Binary file
|
Binary file
|
Binary file
|
@@ -0,0 +1,538 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html lang="en" dir="rtl">
|
3
|
+
<head>
|
4
|
+
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
5
|
+
<title>960 Grid System — Demo</title>
|
6
|
+
<link rel="stylesheet" href="css/reset.css" />
|
7
|
+
<link rel="stylesheet" href="css/rtl_text.css" />
|
8
|
+
<link rel="stylesheet" href="css/rtl_960.css" />
|
9
|
+
<link rel="stylesheet" href="css/uncompressed/demo.css" />
|
10
|
+
</head>
|
11
|
+
<body>
|
12
|
+
<h1>
|
13
|
+
<a href="http://960.gs/">960 Grid System</a>
|
14
|
+
</h1>
|
15
|
+
<div class="container_12">
|
16
|
+
<h2>
|
17
|
+
12 Column Grid
|
18
|
+
</h2>
|
19
|
+
<div class="grid_12">
|
20
|
+
<p>
|
21
|
+
940
|
22
|
+
</p>
|
23
|
+
</div>
|
24
|
+
<!-- end .grid_12 -->
|
25
|
+
<div class="clear"></div>
|
26
|
+
<div class="grid_1">
|
27
|
+
<p>
|
28
|
+
60
|
29
|
+
</p>
|
30
|
+
</div>
|
31
|
+
<!-- end .grid_1 -->
|
32
|
+
<div class="grid_11">
|
33
|
+
<p>
|
34
|
+
860
|
35
|
+
</p>
|
36
|
+
</div>
|
37
|
+
<!-- end .grid_11 -->
|
38
|
+
<div class="clear"></div>
|
39
|
+
<div class="grid_2">
|
40
|
+
<p>
|
41
|
+
140
|
42
|
+
</p>
|
43
|
+
</div>
|
44
|
+
<!-- end .grid_2 -->
|
45
|
+
<div class="grid_10">
|
46
|
+
<p>
|
47
|
+
780
|
48
|
+
</p>
|
49
|
+
</div>
|
50
|
+
<!-- end .grid_10 -->
|
51
|
+
<div class="clear"></div>
|
52
|
+
<div class="grid_3">
|
53
|
+
<p>
|
54
|
+
220
|
55
|
+
</p>
|
56
|
+
</div>
|
57
|
+
<!-- end .grid_3 -->
|
58
|
+
<div class="grid_9">
|
59
|
+
<p>
|
60
|
+
700
|
61
|
+
</p>
|
62
|
+
</div>
|
63
|
+
<!-- end .grid_9 -->
|
64
|
+
<div class="clear"></div>
|
65
|
+
<div class="grid_4">
|
66
|
+
<p>
|
67
|
+
300
|
68
|
+
</p>
|
69
|
+
</div>
|
70
|
+
<!-- end .grid_4 -->
|
71
|
+
<div class="grid_8">
|
72
|
+
<p>
|
73
|
+
620
|
74
|
+
</p>
|
75
|
+
</div>
|
76
|
+
<!-- end .grid_8 -->
|
77
|
+
<div class="clear"></div>
|
78
|
+
<div class="grid_5">
|
79
|
+
<p>
|
80
|
+
380
|
81
|
+
</p>
|
82
|
+
</div>
|
83
|
+
<!-- end .grid_5 -->
|
84
|
+
<div class="grid_7">
|
85
|
+
<p>
|
86
|
+
540
|
87
|
+
</p>
|
88
|
+
</div>
|
89
|
+
<!-- end .grid_7 -->
|
90
|
+
<div class="clear"></div>
|
91
|
+
<div class="grid_6">
|
92
|
+
<p>
|
93
|
+
460
|
94
|
+
</p>
|
95
|
+
</div>
|
96
|
+
<!-- end .grid_6 -->
|
97
|
+
<div class="grid_6">
|
98
|
+
<p>
|
99
|
+
460
|
100
|
+
</p>
|
101
|
+
</div>
|
102
|
+
<!-- end .grid_6 -->
|
103
|
+
<div class="clear"></div>
|
104
|
+
<div class="grid_1 suffix_11">
|
105
|
+
<p>
|
106
|
+
60
|
107
|
+
</p>
|
108
|
+
</div>
|
109
|
+
<!-- end .grid_1.suffix_11 -->
|
110
|
+
<div class="clear"></div>
|
111
|
+
<div class="grid_1 prefix_1 suffix_10">
|
112
|
+
<p>
|
113
|
+
60
|
114
|
+
</p>
|
115
|
+
</div>
|
116
|
+
<!-- end .grid_1.prefix_1.suffix_10 -->
|
117
|
+
<div class="clear"></div>
|
118
|
+
<div class="grid_1 prefix_2 suffix_9">
|
119
|
+
<p>
|
120
|
+
60
|
121
|
+
</p>
|
122
|
+
</div>
|
123
|
+
<!-- end .grid_1.prefix_2.suffix_9 -->
|
124
|
+
<div class="clear"></div>
|
125
|
+
<div class="grid_1 prefix_3 suffix_8">
|
126
|
+
<p>
|
127
|
+
60
|
128
|
+
</p>
|
129
|
+
</div>
|
130
|
+
<!-- end .grid_1.prefix_3.suffix_8 -->
|
131
|
+
<div class="clear"></div>
|
132
|
+
<div class="grid_1 prefix_4 suffix_7">
|
133
|
+
<p>
|
134
|
+
60
|
135
|
+
</p>
|
136
|
+
</div>
|
137
|
+
<!-- end .grid_1.prefix_4.suffix_7 -->
|
138
|
+
<div class="clear"></div>
|
139
|
+
<div class="grid_1 prefix_5 suffix_6">
|
140
|
+
<p>
|
141
|
+
60
|
142
|
+
</p>
|
143
|
+
</div>
|
144
|
+
<!-- end .grid_1.prefix_5.suffix_6 -->
|
145
|
+
<div class="clear"></div>
|
146
|
+
<div class="grid_1 prefix_6 suffix_5">
|
147
|
+
<p>
|
148
|
+
60
|
149
|
+
</p>
|
150
|
+
</div>
|
151
|
+
<!-- end .grid_1.prefix_6.suffix_5 -->
|
152
|
+
<div class="clear"></div>
|
153
|
+
<div class="grid_1 prefix_7 suffix_4">
|
154
|
+
<p>
|
155
|
+
60
|
156
|
+
</p>
|
157
|
+
</div>
|
158
|
+
<!-- end .grid_1.prefix_7.suffix_4 -->
|
159
|
+
<div class="clear"></div>
|
160
|
+
<div class="grid_1 prefix_8 suffix_3">
|
161
|
+
<p>
|
162
|
+
60
|
163
|
+
</p>
|
164
|
+
</div>
|
165
|
+
<!-- end .grid_1.prefix_8.suffix_3 -->
|
166
|
+
<div class="clear"></div>
|
167
|
+
<div class="grid_1 prefix_9 suffix_2">
|
168
|
+
<p>
|
169
|
+
60
|
170
|
+
</p>
|
171
|
+
</div>
|
172
|
+
<!-- end .grid_1.prefix_9.suffix_2 -->
|
173
|
+
<div class="clear"></div>
|
174
|
+
<div class="grid_1 prefix_10 suffix_1">
|
175
|
+
<p>
|
176
|
+
60
|
177
|
+
</p>
|
178
|
+
</div>
|
179
|
+
<!-- end .grid_1.prefix_10.suffix_1 -->
|
180
|
+
<div class="clear"></div>
|
181
|
+
<div class="grid_1 prefix_11">
|
182
|
+
<p>
|
183
|
+
60
|
184
|
+
</p>
|
185
|
+
</div>
|
186
|
+
<!-- end .grid_1.prefix_11 -->
|
187
|
+
<div class="clear"></div>
|
188
|
+
<div class="grid_6 push_6">
|
189
|
+
<div class="grid_1 alpha">
|
190
|
+
<p>
|
191
|
+
60
|
192
|
+
</p>
|
193
|
+
</div>
|
194
|
+
<!-- end .grid_1.alpha -->
|
195
|
+
<div class="grid_5 omega">
|
196
|
+
<p>
|
197
|
+
380
|
198
|
+
</p>
|
199
|
+
</div>
|
200
|
+
<!-- end .grid_5.omega -->
|
201
|
+
<div class="clear"></div>
|
202
|
+
<div class="grid_3 alpha">
|
203
|
+
<p>
|
204
|
+
220
|
205
|
+
</p>
|
206
|
+
</div>
|
207
|
+
<!-- end .grid_3.alpha -->
|
208
|
+
<div class="grid_3 omega">
|
209
|
+
<p>
|
210
|
+
220
|
211
|
+
</p>
|
212
|
+
</div>
|
213
|
+
<!-- end .grid_3.omega -->
|
214
|
+
<div class="clear"></div>
|
215
|
+
</div>
|
216
|
+
<!-- end .grid_6.push_6 -->
|
217
|
+
<div class="grid_6 pull_6">
|
218
|
+
<div class="grid_3 alpha">
|
219
|
+
<p>
|
220
|
+
220
|
221
|
+
</p>
|
222
|
+
</div>
|
223
|
+
<!-- end .grid_3.alpha -->
|
224
|
+
<div class="grid_3 omega">
|
225
|
+
<p>
|
226
|
+
220
|
227
|
+
</p>
|
228
|
+
</div>
|
229
|
+
<!-- end .grid_3.omega -->
|
230
|
+
<div class="clear"></div>
|
231
|
+
<div class="grid_1 alpha">
|
232
|
+
<p>
|
233
|
+
60
|
234
|
+
</p>
|
235
|
+
</div>
|
236
|
+
<!-- end .grid_1.alpha -->
|
237
|
+
<div class="grid_5 omega">
|
238
|
+
<p>
|
239
|
+
380
|
240
|
+
</p>
|
241
|
+
</div>
|
242
|
+
<!-- end .grid_5.omega -->
|
243
|
+
<div class="clear"></div>
|
244
|
+
</div>
|
245
|
+
<!-- end .grid_6.pull_6 -->
|
246
|
+
<div class="clear"></div>
|
247
|
+
</div>
|
248
|
+
<!-- end .container_12 -->
|
249
|
+
<div class="container_16">
|
250
|
+
<h2>
|
251
|
+
16 Column Grid
|
252
|
+
</h2>
|
253
|
+
<div class="grid_16">
|
254
|
+
<p>
|
255
|
+
940
|
256
|
+
</p>
|
257
|
+
</div>
|
258
|
+
<!-- end .grid_16 -->
|
259
|
+
<div class="clear"></div>
|
260
|
+
<div class="grid_1">
|
261
|
+
<p>
|
262
|
+
40
|
263
|
+
</p>
|
264
|
+
</div>
|
265
|
+
<!-- end .grid_1 -->
|
266
|
+
<div class="grid_15">
|
267
|
+
<p>
|
268
|
+
880
|
269
|
+
</p>
|
270
|
+
</div>
|
271
|
+
<!-- end .grid_15 -->
|
272
|
+
<div class="clear"></div>
|
273
|
+
<div class="grid_2">
|
274
|
+
<p>
|
275
|
+
100
|
276
|
+
</p>
|
277
|
+
</div>
|
278
|
+
<!-- end .grid_2 -->
|
279
|
+
<div class="grid_14">
|
280
|
+
<p>
|
281
|
+
820
|
282
|
+
</p>
|
283
|
+
</div>
|
284
|
+
<!-- end .grid_14 -->
|
285
|
+
<div class="clear"></div>
|
286
|
+
<div class="grid_3">
|
287
|
+
<p>
|
288
|
+
160
|
289
|
+
</p>
|
290
|
+
</div>
|
291
|
+
<!-- end .grid_3 -->
|
292
|
+
<div class="grid_13">
|
293
|
+
<p>
|
294
|
+
760
|
295
|
+
</p>
|
296
|
+
</div>
|
297
|
+
<!-- end .grid_13 -->
|
298
|
+
<div class="clear"></div>
|
299
|
+
<div class="grid_4">
|
300
|
+
<p>
|
301
|
+
220
|
302
|
+
</p>
|
303
|
+
</div>
|
304
|
+
<!-- end .grid_4 -->
|
305
|
+
<div class="grid_12">
|
306
|
+
<p>
|
307
|
+
700
|
308
|
+
</p>
|
309
|
+
</div>
|
310
|
+
<!-- end .grid_12 -->
|
311
|
+
<div class="clear"></div>
|
312
|
+
<div class="grid_5">
|
313
|
+
<p>
|
314
|
+
280
|
315
|
+
</p>
|
316
|
+
</div>
|
317
|
+
<!-- end .grid_5 -->
|
318
|
+
<div class="grid_11">
|
319
|
+
<p>
|
320
|
+
640
|
321
|
+
</p>
|
322
|
+
</div>
|
323
|
+
<!-- end .grid_11 -->
|
324
|
+
<div class="clear"></div>
|
325
|
+
<div class="grid_6">
|
326
|
+
<p>
|
327
|
+
340
|
328
|
+
</p>
|
329
|
+
</div>
|
330
|
+
<!-- end .grid_6 -->
|
331
|
+
<div class="grid_10">
|
332
|
+
<p>
|
333
|
+
580
|
334
|
+
</p>
|
335
|
+
</div>
|
336
|
+
<!-- end .grid_10 -->
|
337
|
+
<div class="clear"></div>
|
338
|
+
<div class="grid_7">
|
339
|
+
<p>
|
340
|
+
400
|
341
|
+
</p>
|
342
|
+
</div>
|
343
|
+
<!-- end .grid_7 -->
|
344
|
+
<div class="grid_9">
|
345
|
+
<p>
|
346
|
+
520
|
347
|
+
</p>
|
348
|
+
</div>
|
349
|
+
<!-- end .grid_9 -->
|
350
|
+
<div class="clear"></div>
|
351
|
+
<div class="grid_8">
|
352
|
+
<p>
|
353
|
+
460
|
354
|
+
</p>
|
355
|
+
</div>
|
356
|
+
<!-- end .grid_8 -->
|
357
|
+
<div class="grid_8">
|
358
|
+
<p>
|
359
|
+
460
|
360
|
+
</p>
|
361
|
+
</div>
|
362
|
+
<!-- end .grid_8 -->
|
363
|
+
<div class="clear"></div>
|
364
|
+
<div class="grid_1 suffix_15">
|
365
|
+
<p>
|
366
|
+
40
|
367
|
+
</p>
|
368
|
+
</div>
|
369
|
+
<!-- end .grid_1.suffix_15 -->
|
370
|
+
<div class="clear"></div>
|
371
|
+
<div class="grid_1 prefix_1 suffix_14">
|
372
|
+
<p>
|
373
|
+
40
|
374
|
+
</p>
|
375
|
+
</div>
|
376
|
+
<!-- end .grid_1.prefix_1.suffix_14 -->
|
377
|
+
<div class="clear"></div>
|
378
|
+
<div class="grid_1 prefix_2 suffix_13">
|
379
|
+
<p>
|
380
|
+
40
|
381
|
+
</p>
|
382
|
+
</div>
|
383
|
+
<!-- end .grid_1.prefix_2.suffix_13 -->
|
384
|
+
<div class="clear"></div>
|
385
|
+
<div class="grid_1 prefix_3 suffix_12">
|
386
|
+
<p>
|
387
|
+
40
|
388
|
+
</p>
|
389
|
+
</div>
|
390
|
+
<!-- end .grid_1.prefix_3.suffix_12 -->
|
391
|
+
<div class="clear"></div>
|
392
|
+
<div class="grid_1 prefix_4 suffix_11">
|
393
|
+
<p>
|
394
|
+
40
|
395
|
+
</p>
|
396
|
+
</div>
|
397
|
+
<!-- end .grid_1.prefix_4.suffix_11 -->
|
398
|
+
<div class="clear"></div>
|
399
|
+
<div class="grid_1 prefix_5 suffix_10">
|
400
|
+
<p>
|
401
|
+
40
|
402
|
+
</p>
|
403
|
+
</div>
|
404
|
+
<!-- end .grid_1.prefix_5.suffix_10 -->
|
405
|
+
<div class="clear"></div>
|
406
|
+
<div class="grid_1 prefix_6 suffix_9">
|
407
|
+
<p>
|
408
|
+
40
|
409
|
+
</p>
|
410
|
+
</div>
|
411
|
+
<!-- end .grid_1.prefix_6.suffix_9 -->
|
412
|
+
<div class="clear"></div>
|
413
|
+
<div class="grid_1 prefix_7 suffix_8">
|
414
|
+
<p>
|
415
|
+
40
|
416
|
+
</p>
|
417
|
+
</div>
|
418
|
+
<!-- end .grid_1.prefix_7.suffix_8 -->
|
419
|
+
<div class="clear"></div>
|
420
|
+
<div class="grid_1 prefix_8 suffix_7">
|
421
|
+
<p>
|
422
|
+
40
|
423
|
+
</p>
|
424
|
+
</div>
|
425
|
+
<!-- end .grid_1.prefix_8.suffix_7 -->
|
426
|
+
<div class="clear"></div>
|
427
|
+
<div class="grid_1 prefix_9 suffix_6">
|
428
|
+
<p>
|
429
|
+
40
|
430
|
+
</p>
|
431
|
+
</div>
|
432
|
+
<!-- end .grid_1.prefix_9.suffix_6 -->
|
433
|
+
<div class="clear"></div>
|
434
|
+
<div class="grid_1 prefix_10 suffix_5">
|
435
|
+
<p>
|
436
|
+
40
|
437
|
+
</p>
|
438
|
+
</div>
|
439
|
+
<!-- end .grid_1.prefix_10.suffix_5 -->
|
440
|
+
<div class="clear"></div>
|
441
|
+
<div class="grid_1 prefix_11 suffix_4">
|
442
|
+
<p>
|
443
|
+
40
|
444
|
+
</p>
|
445
|
+
</div>
|
446
|
+
<!-- end .grid_1.prefix_11.suffix_4 -->
|
447
|
+
<div class="clear"></div>
|
448
|
+
<div class="grid_1 prefix_12 suffix_3">
|
449
|
+
<p>
|
450
|
+
40
|
451
|
+
</p>
|
452
|
+
</div>
|
453
|
+
<!-- end .grid_1.prefix_12.suffix_3 -->
|
454
|
+
<div class="clear"></div>
|
455
|
+
<div class="grid_1 prefix_13 suffix_2">
|
456
|
+
<p>
|
457
|
+
40
|
458
|
+
</p>
|
459
|
+
</div>
|
460
|
+
<!-- end .grid_1.prefix_13.suffix_2 -->
|
461
|
+
<div class="clear"></div>
|
462
|
+
<div class="grid_1 prefix_14 suffix_1">
|
463
|
+
<p>
|
464
|
+
40
|
465
|
+
</p>
|
466
|
+
</div>
|
467
|
+
<!-- end .grid_1.prefix_14.suffix_1 -->
|
468
|
+
<div class="clear"></div>
|
469
|
+
<div class="grid_1 prefix_15">
|
470
|
+
<p>
|
471
|
+
40
|
472
|
+
</p>
|
473
|
+
</div>
|
474
|
+
<!-- end .grid_1.prefix_15 -->
|
475
|
+
<div class="clear"></div>
|
476
|
+
<div class="grid_8 push_8">
|
477
|
+
<div class="grid_1 alpha">
|
478
|
+
<p>
|
479
|
+
40
|
480
|
+
</p>
|
481
|
+
</div>
|
482
|
+
<!-- end .grid_1.alpha -->
|
483
|
+
<div class="grid_7 omega">
|
484
|
+
<p>
|
485
|
+
400
|
486
|
+
</p>
|
487
|
+
</div>
|
488
|
+
<!-- end .grid_7.omega -->
|
489
|
+
<div class="clear"></div>
|
490
|
+
<div class="grid_4 alpha">
|
491
|
+
<p>
|
492
|
+
220
|
493
|
+
</p>
|
494
|
+
</div>
|
495
|
+
<!-- end .grid_4.alpha -->
|
496
|
+
<div class="grid_4 omega">
|
497
|
+
<p>
|
498
|
+
220
|
499
|
+
</p>
|
500
|
+
</div>
|
501
|
+
<!-- end .grid_4.omega -->
|
502
|
+
<div class="clear"></div>
|
503
|
+
</div>
|
504
|
+
<!-- end .grid_8.push_8 -->
|
505
|
+
<div class="grid_8 pull_8">
|
506
|
+
<div class="grid_4 alpha">
|
507
|
+
<p>
|
508
|
+
220
|
509
|
+
</p>
|
510
|
+
</div>
|
511
|
+
<!-- end .grid_4.alpha -->
|
512
|
+
<div class="grid_4 omega">
|
513
|
+
<p>
|
514
|
+
220
|
515
|
+
</p>
|
516
|
+
</div>
|
517
|
+
<!-- end .grid_4.omega -->
|
518
|
+
<div class="clear"></div>
|
519
|
+
<div class="grid_1 alpha">
|
520
|
+
<p>
|
521
|
+
40
|
522
|
+
</p>
|
523
|
+
</div>
|
524
|
+
<!-- end .grid_1.alpha -->
|
525
|
+
<div class="grid_7 omega">
|
526
|
+
<p>
|
527
|
+
400
|
528
|
+
</p>
|
529
|
+
</div>
|
530
|
+
<!-- end .grid_7.omega -->
|
531
|
+
<div class="clear"></div>
|
532
|
+
</div>
|
533
|
+
<!-- end .grid_8.pull_8 -->
|
534
|
+
<div class="clear"></div>
|
535
|
+
</div>
|
536
|
+
<!-- end .container_16 -->
|
537
|
+
</body>
|
538
|
+
</html>
|