endymion-origami 0.1.3 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. data/README.textile +32 -30
  2. data/app/helpers/layout_helper.rb +2 -6
  3. data/app/views/layouts/1_column_pixel.html.erb +1 -70
  4. data/app/views/layouts/3_column_blog_pixel.html.erb +1 -158
  5. data/app/views/layouts/_head.html.erb +9 -3
  6. data/app/views/layouts/_javascript_includes.html.erb +1 -1
  7. data/app/views/layouts/_stylesheets.html.erb +6 -0
  8. data/lib/origami.rb +0 -9
  9. data/origami.gemspec +3 -25
  10. data/version.yml +1 -1
  11. metadata +3 -25
  12. data/app/views/layouts/_layout_and_theme_stylesheets.html.erb +0 -8
  13. data/assets/bluetrip-css-framework/LICENSE +0 -312
  14. data/assets/bluetrip-css-framework/README.rst +0 -37
  15. data/assets/bluetrip-css-framework/css/ie.css +0 -21
  16. data/assets/bluetrip-css-framework/css/print.css +0 -49
  17. data/assets/bluetrip-css-framework/css/screen.css +0 -409
  18. data/assets/bluetrip-css-framework/css/style.css +0 -7
  19. data/assets/bluetrip-css-framework/examples/grid.html +0 -232
  20. data/assets/bluetrip-css-framework/examples/index.html +0 -263
  21. data/assets/bluetrip-css-framework/examples/test-small.jpg +0 -0
  22. data/assets/bluetrip-css-framework/img/grid.png +0 -0
  23. data/assets/bluetrip-css-framework/img/icons/cross.png +0 -0
  24. data/assets/bluetrip-css-framework/img/icons/doc.png +0 -0
  25. data/assets/bluetrip-css-framework/img/icons/email.png +0 -0
  26. data/assets/bluetrip-css-framework/img/icons/external.png +0 -0
  27. data/assets/bluetrip-css-framework/img/icons/feed.png +0 -0
  28. data/assets/bluetrip-css-framework/img/icons/im.png +0 -0
  29. data/assets/bluetrip-css-framework/img/icons/information.png +0 -0
  30. data/assets/bluetrip-css-framework/img/icons/key.png +0 -0
  31. data/assets/bluetrip-css-framework/img/icons/pdf.png +0 -0
  32. data/assets/bluetrip-css-framework/img/icons/tick.png +0 -0
  33. data/assets/bluetrip-css-framework/img/icons/visited.png +0 -0
  34. data/assets/bluetrip-css-framework/img/icons/xls.png +0 -0
@@ -1,409 +0,0 @@
1
- /* -----------------------------------------------------------------------
2
-
3
- BlueTrip CSS Framework
4
-
5
- Mike Crittenden
6
- mike@capsizedesigns.com
7
- Copyright 2008 Mike Crittenden
8
-
9
- License - MIT or GPL (whichever suits you better)
10
-
11
- ----------------------------------------------------------------------- */
12
-
13
- /* MEYER RESET v1.0*/
14
-
15
- html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}
16
-
17
- /* BASIC TYPOGRAPHY */
18
-
19
- html { font-size: 62.5%; font-family: "Liberation Sans", Helvetica, Arial, sans-serif; }
20
- strong, th, thead td, h1, h2, h3, h4, h5, h6 { font-weight: bold; }
21
- cite, em, dfn { font-style: italic; }
22
- code, kbd, samp, pre, tt, var, input[type='text'], input[type='password'], textarea { font-size: 92%; font-family: monaco, "Lucida Console", courier, monospace; }
23
- del { text-decoration: line-through; color: #666; }
24
- ins, dfn { border-bottom: 1px solid #ccc; }
25
- small, sup, sub { font-size: 85%; }
26
- abbr, acronym { text-transform: uppercase; font-size: 85%; letter-spacing: .1em; }
27
- a abbr, a acronym { border: none; }
28
- abbr[title], acronym[title], dfn[title] { cursor: help; border-bottom: 1px solid #ccc; }
29
- sup { vertical-align: super; }
30
- sub { vertical-align: sub; }
31
-
32
- /* QUOTES */
33
-
34
- blockquote { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; color: #666; }
35
- blockquote *:first-child:before { content: "\201C"; }
36
- blockquote *:first-child:after { content: "\201D"; }
37
-
38
- /* FORMS */
39
-
40
- fieldset { padding:1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; }
41
- legend { font-weight: bold; font-size:1.2em; }
42
- label { font-weight: bold; }
43
- textarea, input[type='text'], input[type='password'], select { border: 1px solid #ccc; background: #fff; }
44
- textarea:hover, input[type='text']:hover, input[type='password']:hover, select:hover { border-color: #aaa; }
45
- textarea:focus, input[type='text']:focus, input[type='password']:focus, select:focus { border-color: #888; outline: 2px solid #ffffaa; }
46
- input, select { cursor: pointer; }
47
- input[type='text'],input[type='password'] { cursor: text; }
48
-
49
- /* BASE SIZES */
50
-
51
- .container { font-size: 1.2em; line-height: 1.6em; }
52
- h1 { font-size: 1.9em; }
53
- h2 { font-size: 1.7em; }
54
- h3 { font-size: 1.5em; }
55
- h4 { font-size: 1.3em; }
56
- h5 { font-size: 1.2em; }
57
- h6 { font-size: 1em; }
58
-
59
- /* LISTS */
60
-
61
- ul li { margin-left: .85em; }
62
- ul { list-style-type: disc; }
63
- ul ul { list-style-type: square; }
64
- ul ul ul { list-style-type: circle; }
65
- ol { list-style-position: outside; list-style-type: decimal; }
66
- dt { font-weight: bold; }
67
-
68
- /* TABLES */
69
-
70
- table { border-top: 1px solid #ccc; border-left: 1px solid #ccc; }
71
- th, td { border-bottom: 1px solid #ddd; border-right: 1px solid #ccc; }
72
-
73
- /* MARGINS & PADDINGS */
74
-
75
- blockquote *:first-child { margin: .8em 0; }
76
- hr, p, ul, ol, dl, pre, blockquote, address, table, form { margin-bottom: 1.6em; }
77
- /* NOTE: Calulate header margins: TOP: 1.6em/size, BOTTOM: 1.6em/size/2 */
78
- h1 { margin: 1em 0 .5em; }
79
- h2 { margin: 1.07em 0 .535em; }
80
- h3 { margin: 1.14em 0 .57em; }
81
- h4 { margin: 1.23em 0 .615em; }
82
- h5 { margin: 1.33em 0 .67em; }
83
- h6 { margin: 1.6em 0 .8em; }
84
- th, td { padding: .8em; }
85
- caption { padding-bottom: .8em; } /* padding instead of margin for IE */
86
- blockquote { padding: 0 1em; margin: 1.6em 0; }
87
- fieldset { padding: 0 1em 1em 1em; margin: 1.6em 0; } /* padding-top is margin-top for fieldsets in Opera */
88
- legend { padding-left: .8em; padding-right: .8em; }
89
- legend+* { margin-top: 1em; } /* compensates for the opera margin bug */
90
- textarea, input { padding: .3em .4em .15em .4em; }
91
- select { padding: .1em .2em 0 .2em; }
92
- option { padding: 0 .4em; }
93
- a { position: relative; padding: 0.3em 0 .1em 0; } /* for larger click-area */
94
- dt { margin-top: .8em; margin-bottom: .4em; }
95
- ul { margin-left: 1.5em; }
96
- ol { margin-left: 2.35em; }
97
- ol ol, ul ol { margin-left: 2.5em; }
98
- form div { margin-bottom: .8em; }
99
-
100
- /* COLORS */
101
-
102
- a:link { text-decoration: underline; color: #36c; }
103
- a:visited { text-decoration: underline; color: #99c; }
104
- a:hover { text-decoration: underline; color: #c33; }
105
- a:active, a:focus { text-decoration: underline; color: #000; }
106
- code, pre { color: #c33; } /* very optional, but still useful. W3C uses about the same colors for codes */
107
-
108
- /* 24 COLUMN GRID */
109
-
110
- .container {width:950px;margin:0 auto;}
111
- .showgrid {background:url(/images/bluetrip/grid.png);}
112
- body {margin:1.5em 0;}
113
- div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12, div.span-13, div.span-14, div.span-15, div.span-16, div.span-17, div.span-18, div.span-19, div.span-20, div.span-21, div.span-22, div.span-23 {float:left;margin-right:10px;}
114
- div.span-24 {float:left;}
115
- div.last {margin-right:0;}
116
- .span-1 {width:30px;}
117
- .span-2 {width:70px;}
118
- .span-3 {width:110px;}
119
- .span-4 {width:150px;}
120
- .span-5 {width:190px;}
121
- .span-6 {width:230px;}
122
- .span-7 {width:270px;}
123
- .span-8 {width:310px;}
124
- .span-9 {width:350px;}
125
- .span-10 {width:390px;}
126
- .span-11 {width:430px;}
127
- .span-12 {width:470px;}
128
- .span-13 {width:510px;}
129
- .span-14 {width:550px;}
130
- .span-15 {width:590px;}
131
- .span-16 {width:630px;}
132
- .span-17 {width:670px;}
133
- .span-18 {width:710px;}
134
- .span-19 {width:750px;}
135
- .span-20 {width:790px;}
136
- .span-21 {width:830px;}
137
- .span-22 {width:870px;}
138
- .span-23 {width:910px;}
139
- .span-24, div.span-24 {width:950px;}
140
- .suffix-1 {padding-right:40px;}
141
- .suffix-2 {padding-right:80px;}
142
- .suffix-3 {padding-right:120px;}
143
- .suffix-4 {padding-right:160px;}
144
- .suffix-5 {padding-right:200px;}
145
- .suffix-6 {padding-right:240px;}
146
- .suffix-7 {padding-right:280px;}
147
- .suffix-8 {padding-right:320px;}
148
- .suffix-9 {padding-right:360px;}
149
- .suffix-10 {padding-right:400px;}
150
- .suffix-11 {padding-right:440px;}
151
- .suffix-12 {padding-right:480px;}
152
- .suffix-13 {padding-right:520px;}
153
- .suffix-14 {padding-right:560px;}
154
- .suffix-15 {padding-right:600px;}
155
- .suffix-16 {padding-right:640px;}
156
- .suffix-17 {padding-right:680px;}
157
- .suffix-18 {padding-right:720px;}
158
- .suffix-19 {padding-right:760px;}
159
- .suffix-20 {padding-right:800px;}
160
- .suffix-21 {padding-right:840px;}
161
- .suffix-22 {padding-right:880px;}
162
- .suffix-23 {padding-right:920px;}
163
- .prefix-1 {padding-left:40px;}
164
- .prefix-2 {padding-left:80px;}
165
- .prefix-3 {padding-left:120px;}
166
- .prefix-4 {padding-left:160px;}
167
- .prefix-5 {padding-left:200px;}
168
- .prefix-6 {padding-left:240px;}
169
- .prefix-7 {padding-left:280px;}
170
- .prefix-8 {padding-left:320px;}
171
- .prefix-9 {padding-left:360px;}
172
- .prefix-10 {padding-left:400px;}
173
- .prefix-11 {padding-left:440px;}
174
- .prefix-12 {padding-left:480px;}
175
- .prefix-13 {padding-left:520px;}
176
- .prefix-14 {padding-left:560px;}
177
- .prefix-15 {padding-left:600px;}
178
- .prefix-16 {padding-left:640px;}
179
- .prefix-17 {padding-left:680px;}
180
- .prefix-18 {padding-left:720px;}
181
- .prefix-19 {padding-left:760px;}
182
- .prefix-20 {padding-left:800px;}
183
- .prefix-21 {padding-left:840px;}
184
- .prefix-22 {padding-left:880px;}
185
- .prefix-23 {padding-left:920px;}
186
- div.border {padding-right:4px;margin-right:5px;border-right:1px solid #eee;}
187
- div.colborder {padding-right:24px;margin-right:25px;border-right:1px solid #eee;}
188
- .pull-1 {margin-left:-40px;}
189
- .pull-2 {margin-left:-80px;}
190
- .pull-3 {margin-left:-120px;}
191
- .pull-4 {margin-left:-160px;}
192
- .pull-5 {margin-left:-200px;}
193
- .pull-6 {margin-left:-240px;}
194
- .pull-7 {margin-left:-280px;}
195
- .pull-8 {margin-left:-320px;}
196
- .pull-9 {margin-left:-360px;}
197
- .pull-10 {margin-left:-400px;}
198
- .pull-11 {margin-left:-440px;}
199
- .pull-12 {margin-left:-480px;}
200
- .pull-13 {margin-left:-520px;}
201
- .pull-14 {margin-left:-560px;}
202
- .pull-15 {margin-left:-600px;}
203
- .pull-16 {margin-left:-640px;}
204
- .pull-17 {margin-left:-680px;}
205
- .pull-18 {margin-left:-720px;}
206
- .pull-19 {margin-left:-760px;}
207
- .pull-20 {margin-left:-800px;}
208
- .pull-21 {margin-left:-840px;}
209
- .pull-22 {margin-left:-880px;}
210
- .pull-23 {margin-left:-920px;}
211
- .pull-24 {margin-left:-960px;}
212
- .pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24 {float:left;position:relative;}
213
- .push-1 {margin:0 -40px 1.5em 40px;}
214
- .push-2 {margin:0 -80px 1.5em 80px;}
215
- .push-3 {margin:0 -120px 1.5em 120px;}
216
- .push-4 {margin:0 -160px 1.5em 160px;}
217
- .push-5 {margin:0 -200px 1.5em 200px;}
218
- .push-6 {margin:0 -240px 1.5em 240px;}
219
- .push-7 {margin:0 -280px 1.5em 280px;}
220
- .push-8 {margin:0 -320px 1.5em 320px;}
221
- .push-9 {margin:0 -360px 1.5em 360px;}
222
- .push-10 {margin:0 -400px 1.5em 400px;}
223
- .push-11 {margin:0 -440px 1.5em 440px;}
224
- .push-12 {margin:0 -480px 1.5em 480px;}
225
- .push-13 {margin:0 -520px 1.5em 520px;}
226
- .push-14 {margin:0 -560px 1.5em 560px;}
227
- .push-15 {margin:0 -600px 1.5em 600px;}
228
- .push-16 {margin:0 -640px 1.5em 640px;}
229
- .push-17 {margin:0 -680px 1.5em 680px;}
230
- .push-18 {margin:0 -720px 1.5em 720px;}
231
- .push-19 {margin:0 -760px 1.5em 760px;}
232
- .push-20 {margin:0 -800px 1.5em 800px;}
233
- .push-21 {margin:0 -840px 1.5em 840px;}
234
- .push-22 {margin:0 -880px 1.5em 880px;}
235
- .push-23 {margin:0 -920px 1.5em 920px;}
236
- .push-24 {margin:0 -960px 1.5em 960px;}
237
- .push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24 {float:right;position:relative;}
238
- hr {background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:.1em;margin:0 0 1.45em;border:none;}
239
- hr.space {background:#fff;color:#fff;}
240
- .clearfix:after, .container:after {content:".";display:block;height:0;clear:both;visibility:hidden;max-height:0;}
241
- .clearfix, .container {display:inline-block;}
242
- * html .clearfix, * html .container {height:1%;}
243
- .clearfix, .container {display:block;}
244
- .clear {clear:both;}
245
-
246
- /* to create serif italic dramatic text, use this class */
247
- .fancy {
248
- color: #666;
249
- font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", Georgia, serif;
250
- font-style: italic;
251
- font-weight: normal;
252
- }
253
-
254
- /* creates small caps */
255
- .caps {
256
- font-variant: small-caps;
257
- letter-spacing: 1px;
258
- text-transform: lowercase;
259
- font-size:1.2em;
260
- font-weight:bold;
261
- padding:0 2px;
262
- }
263
-
264
- /* Use this class if a link gets an icon when it shouldn't. */
265
- body a.noicon { background:none !important; padding:0 !important; margin:0 !important; }
266
-
267
- /* Make sure the icons are not cut */
268
- a[href^="http:"], a[href^="mailto:"], a[href^="http:"]:visited,
269
- a[href$=".pdf"], a[href$=".doc"], a[href$=".xls"], a[href$=".rss"],
270
- a[href$=".rdf"], a[href^="aim:"] {
271
- padding:2px 22px 2px 0;
272
- margin:-2px 0;
273
- background-repeat: no-repeat;
274
- background-position: right center;
275
- }
276
-
277
- /* External links */
278
- a[href^="http:"] { background-image: url(/images/bluetrip/icons/external.png); padding-right: 14px; }
279
- a[href^="mailto:"] { background-image: url(/images/bluetrip/icons/email.png); }
280
- a[href^="http:"]:visited { background-image: url(/images/bluetrip/icons/visited.png); }
281
-
282
- /* Files */
283
- a[href$=".pdf"] { background-image: url(/images/bluetrip/icons/pdf.png); }
284
- a[href$=".doc"] { background-image: url(/images/bluetrip/icons/doc.png); }
285
- a[href$=".xls"] { background-image: url(/images/bluetrip/icons/xls.png); }
286
-
287
- /* Misc */
288
- a[href$=".rss"],
289
- a[href$=".rdf"] { background-image: url(/images/bluetrip/icons/feed.png); }
290
- a[href^="aim:"] { background-image: url(/images/bluetrip/icons/im.png); }
291
- a[href^="http://yourwebsite.com"] { background:none; padding:0; margin:0; }
292
-
293
- /* TEXT CLASSES */
294
-
295
- .small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}
296
- .large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
297
- .hide {display:none;}
298
- .quiet {color:#666;}
299
- .loud {color:#000;}
300
- .highlight {background:#ff0;}
301
- .top {margin-top:0;padding-top:0;}
302
- .bottom {margin-bottom:0;padding-bottom:0;}
303
- .thin {font-weight: lighter;}
304
- .error, .notice, .success {padding:.8em;margin-bottom:1.6em;border:2px solid #ddd;}
305
- .error {background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
306
- .notice {background:#FFF6BF;color:#514721;border-color:#FFD324;}
307
- .success {background:#E6EFC2;color:#264409;border-color:#C6D880;}
308
- .error a {color:#8a1f11; background:none; padding:0; margin:0; }
309
- .notice a {color:#514721; background:none; padding:0; margin:0; }
310
- .success a {color:#264409; background:none; padding:0; margin:0; }
311
- .center {text-align: center;}
312
-
313
- /*---------STYLES FOR BUTTONS----------*/
314
- /* Demo: particletree.com/features/rediscovering-the-button-element */
315
- /*
316
- <button type="submit" class="button positive">
317
- <img src="css/blueprint/plugins/buttons/icons/tick.png" alt=""/> Save
318
- </button>
319
-
320
- <a class="button" href="/password/reset/">
321
- <img src="css/blueprint/plugins/buttons/icons/key.png" alt=""/> Change Password
322
- </a>
323
-
324
- <a href="#" class="button negative">
325
- <img src="css/blueprint/plugins/buttons/icons/cross.png" alt=""/> Cancel
326
- </a>
327
- */
328
-
329
- a.button, button {
330
- display: inline-block;
331
- float: left;
332
- margin:0 0.583em 0.667em 0;
333
- padding:5px 10px 5px 7px; /* Links */
334
- border:1px solid #dedede;
335
- border-top:1px solid #eee;
336
- border-left:1px solid #eee;
337
- background-color:#f5f5f5;
338
- font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
339
- font-size:100%;
340
- line-height:130%;
341
- text-decoration:none;
342
- font-weight:bold;
343
- color:#565656;
344
- cursor:pointer;
345
- }
346
- button {
347
- width:auto;
348
- overflow:visible;
349
- padding:4px 10px 3px 7px; /* IE6 */
350
- }
351
- button[type] {
352
- padding:4px 10px 4px 7px; /* Firefox */
353
- line-height:17px; /* Safari */
354
- }
355
-
356
- *:first-child+html .container button[type] {
357
- padding:4px 10px 3px 7px; /* IE7 */
358
- }
359
-
360
- button img, a.button img{
361
- margin:0 3px -3px 0 !important;
362
- padding:0;
363
- border:none;
364
- width:16px;
365
- height:16px;
366
- float:none;
367
- }
368
-
369
- /* Standard Buttons */
370
- button:hover, a.button:hover{
371
- background-color:#dff4ff;
372
- border:1px solid #c2e1ef;
373
- color:#336699;
374
- }
375
- a.button:active, button:active{
376
- background-color:#6299c5;
377
- border:1px solid #6299c5;
378
- color:#fff;
379
- }
380
-
381
- /* Positive */
382
- body .positive {
383
- color:#529214;
384
- }
385
- a.positive:hover, button.positive:hover {
386
- background-color:#E6EFC2;
387
- border:1px solid #C6D880;
388
- color:#529214;
389
- }
390
- a.positive:active, button.positive:active {
391
- background-color:#529214;
392
- border:1px solid #529214;
393
- color:#fff;
394
- }
395
-
396
- /* Negative */
397
- body .negative {
398
- color:#d12f19;
399
- }
400
- a.negative:hover, button.negative:hover {
401
- background:#fbe3e4;
402
- border:1px solid #fbc2c4;
403
- color:#d12f19;
404
- }
405
- a.negative:active, button.negative:active {
406
- background-color:#d12f19;
407
- border:1px solid #d12f19;
408
- color:#fff;
409
- }
@@ -1,7 +0,0 @@
1
- /* Un-set BlueTrip's line-height for the Matthew James Taylor layout elements. */
2
- #header, #frame, #column_1, #column_2, #column_3, #footer { line-height: 0; }
3
-
4
- /* Your site styles go here. If you change these in your style.css in your own
5
- public/stylesheets then your styles will NOT be over-written when you upgrade Origami
6
- and run layous:build. */
7
- body { background-color: #999999; }
@@ -1,232 +0,0 @@
1
-
2
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5
-
6
- <head>
7
-
8
- <!--
9
- ==============================================
10
- | WELCOME TO THE SOURCE CODE! |
11
- ==============================================
12
- | |
13
- | AUTHOR: Mike Crittenden |
14
- | EMAIL: mike@capsizedesigns.com |
15
- |--------------------------------------------|
16
- -->
17
-
18
- <title>BlueTripCSS Grid - A Fusion of Blueprint and Tripoli</title>
19
- <meta http-equiv="content-type" content="text/html;charset=utf-8" />
20
-
21
- <link rel="stylesheet" href="../css/screen.css" type="text/css" media="screen, projection">
22
- <link rel="stylesheet" href="../css/print.css" type="text/css" media="print">
23
-
24
- <!--[if IE]>
25
- <link rel="stylesheet" href="../css/ie.css" type="text/css" media="screen, projection">
26
- <![endif]-->
27
-
28
- <link rel="stylesheet" href="../css/style.css" type="text/css" media="screen, projection">
29
-
30
- </head>
31
-
32
- <body>
33
- <div class="container showgrid">
34
- <h1>BlueTrip CSS Grid Examples</h1>
35
-
36
-
37
- <div class="span-8">
38
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
39
- </div>
40
- <div class="span-8">
41
-
42
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
43
- </div>
44
- <div class="span-8 last">
45
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
46
- </div>
47
-
48
-
49
- <div class="span-6 suffix-1">
50
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
51
-
52
- </div>
53
- <div class="span-6 suffix-2">
54
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
55
- </div>
56
- <div class="span-6 suffix-3 last">
57
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
58
- </div>
59
-
60
-
61
- <div class="span-6 prefix-1">
62
-
63
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
64
- </div>
65
- <div class="span-6 prefix-2">
66
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
67
- </div>
68
- <div class="span-6 prefix-3 last">
69
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
70
-
71
- </div>
72
- <hr>
73
-
74
- <div class="span-12 border" style="margin:-4px; border:4px solid black;">
75
- <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>
76
- </div>
77
- <div class="span-12 last">
78
- <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>
79
-
80
- </div>
81
- <hr>
82
-
83
- <div class="span-1 prefix-1"><p>1</p></div>
84
- <div class="span-1 prefix-2"><p>2</p></div>
85
- <div class="span-1 prefix-3"><p>3</p></div>
86
- <div class="span-1 prefix-4"><p>4</p></div>
87
-
88
- <div class="span-1 prefix-5"><p>5</p></div>
89
- <div class="span-1 prefix-3 last"><p>3</p></div>
90
-
91
- <div class="span-1 suffix-1"><p>1</p></div>
92
- <div class="span-1 suffix-2"><p>2</p></div>
93
- <div class="span-1 suffix-3"><p>3</p></div>
94
- <div class="span-1 suffix-4"><p>4</p></div>
95
-
96
- <div class="span-1 suffix-5"><p>5</p></div>
97
- <div class="span-1 suffix-3 last"><p>3</p></div>
98
-
99
- <div class="span-1 border"><p>1</p></div>
100
- <div class="span-1 border"><p>2</p></div>
101
- <div class="span-1 border"><p>3</p></div>
102
- <div class="span-1 border"><p>4</p></div>
103
-
104
- <div class="span-1 border"><p>5</p></div>
105
- <div class="span-1 border"><p>6</p></div>
106
- <div class="span-1 border"><p>7</p></div>
107
- <div class="span-1 border"><p>8</p></div>
108
- <div class="span-1 border"><p>9</p></div>
109
- <div class="span-1 border"><p>10</p></div>
110
-
111
- <div class="span-1 border"><p>11</p></div>
112
- <div class="span-1 border"><p>12</p></div>
113
- <div class="span-1 border"><p>13</p></div>
114
- <div class="span-1 border"><p>14</p></div>
115
- <div class="span-1 border"><p>15</p></div>
116
- <div class="span-1 border"><p>16</p></div>
117
-
118
- <div class="span-1 border"><p>17</p></div>
119
- <div class="span-1 border"><p>18</p></div>
120
- <div class="span-1 border"><p>19</p></div>
121
- <div class="span-1 border"><p>20</p></div>
122
- <div class="span-1 border"><p>21</p></div>
123
- <div class="span-1 border"><p>22</p></div>
124
-
125
- <div class="span-1 border"><p>23</p></div>
126
- <div class="span-1 last"><p>24</p></div>
127
-
128
-
129
- <div class="span-4"><p>1</p></div>
130
- <div class="span-4"><p>2</p></div>
131
- <div class="span-4"><p>3</p></div>
132
- <div class="span-4"><p>4</p></div>
133
-
134
- <div class="span-4"><p>5</p></div>
135
- <div class="span-4 last"><p>6</p></div>
136
-
137
-
138
- <div class="prefix-23 span-1 last"><p>24</p></div>
139
-
140
-
141
- <div class="prefix-1 span-1"><p>2</p></div>
142
- <div class="prefix-20 span-1 suffix-1 last"><p>23</p></div>
143
- <hr>
144
-
145
-
146
- <div class="span-24">
147
- <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>
148
- </div>
149
-
150
-
151
- <div class="span-12">
152
- <div class="span-6">
153
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
154
- </div>
155
-
156
- <div class="span-6 last">
157
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
158
- </div>
159
-
160
- <div class="span-12 last">
161
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
162
- </div>
163
- </div>
164
-
165
- <div class="span-12 last">
166
- <div class="span-6">
167
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
168
- </div>
169
-
170
- <div class="span-6 last">
171
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
172
- </div>
173
-
174
- <div class="span-12 last">
175
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
176
- </div>
177
- </div>
178
-
179
-
180
- <div class="span-14 prefix-5 suffix-5 last">
181
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
182
- </div>
183
-
184
- <hr>
185
-
186
- <div class="span-12">
187
- <h5>TESTING .PUSH-1 TO .PUSH-5</h5>
188
-
189
- <div class="span-2"><img src="test-small.jpg" class="push-1"></div>
190
- <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>
191
-
192
- <div class="span-2"><img src="test-small.jpg" class="push-2"></div>
193
- <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>
194
-
195
-
196
- <div class="span-2"><img src="test-small.jpg" class="push-3"></div>
197
- <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>
198
-
199
- <div class="span-2"><img src="test-small.jpg" class="push-4"></div>
200
- <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>
201
-
202
- <div class="span-2"><img src="test-small.jpg" class="push-5"></div>
203
- <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>
204
-
205
-
206
- </div>
207
-
208
- <div class="span-12 last">
209
- <h5>TESTING .PULL-1 TO .PULL-5</h5>
210
-
211
- <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>
212
- <div class="span-2 last"><img src="test-small.jpg" class="top pull-1"></div>
213
-
214
- <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>
215
-
216
- <div class="span-2 last"><img src="test-small.jpg" class="top pull-2"></div>
217
-
218
- <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>
219
- <div class="span-2 last"><img src="test-small.jpg" class="top pull-3"></div>
220
-
221
- <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>
222
- <div class="span-2 last"><img src="test-small.jpg" class="top pull-4"></div>
223
-
224
- <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>
225
- <div class="span-2 last"><img src="test-small.jpg" class="top pull-5"></div>
226
-
227
- </div>
228
-
229
- </div> <!-- end .container -->
230
-
231
- </body>
232
- </html>