Mercurial > dottes

comparison web/css/960.css @ 192:fd0bcf094cf8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
First go at some contemporary HTML/CSS stuff for the Booke.
author Jim Hague <jim.hague@acm.org>
date Fri, 15 Feb 2013 20:32:21 +0000
parents
children
comparison
equal deleted inserted replaced
191:2fa3c89a0a8a 192:fd0bcf094cf8
1 /*
2 960 Grid System ~ Core CSS.
3 Learn more ~ http://960.gs/
4
5 Licensed under GPL and MIT.
6 */
7
8 /*
9 Forces backgrounds to span full width,
10 even if there is horizontal scrolling.
11 Increase this if your layout is wider.
12
13 Note: IE6 works fine without this fix.
14 */
15
16 body {
17 min-width: 960px;
18 }
19
20 /* `Container
21 ----------------------------------------------------------------------------------------------------*/
22
23 .container_12,
24 .container_16 {
25 margin-left: auto;
26 margin-right: auto;
27 width: 960px;
28 }
29
30 /* `Grid >> Global
31 ----------------------------------------------------------------------------------------------------*/
32
33 .grid_1,
34 .grid_2,
35 .grid_3,
36 .grid_4,
37 .grid_5,
38 .grid_6,
39 .grid_7,
40 .grid_8,
41 .grid_9,
42 .grid_10,
43 .grid_11,
44 .grid_12,
45 .grid_13,
46 .grid_14,
47 .grid_15,
48 .grid_16 {
49 display: inline;
50 float: left;
51 margin-left: 10px;
52 margin-right: 10px;
53 }
54
55 .push_1, .pull_1,
56 .push_2, .pull_2,
57 .push_3, .pull_3,
58 .push_4, .pull_4,
59 .push_5, .pull_5,
60 .push_6, .pull_6,
61 .push_7, .pull_7,
62 .push_8, .pull_8,
63 .push_9, .pull_9,
64 .push_10, .pull_10,
65 .push_11, .pull_11,
66 .push_12, .pull_12,
67 .push_13, .pull_13,
68 .push_14, .pull_14,
69 .push_15, .pull_15 {
70 position: relative;
71 }
72
73 .container_12 .grid_3,
74 .container_16 .grid_4 {
75 width: 220px;
76 }
77
78 .container_12 .grid_6,
79 .container_16 .grid_8 {
80 width: 460px;
81 }
82
83 .container_12 .grid_9,
84 .container_16 .grid_12 {
85 width: 700px;
86 }
87
88 .container_12 .grid_12,
89 .container_16 .grid_16 {
90 width: 940px;
91 }
92
93 /* `Grid >> Children (Alpha ~ First, Omega ~ Last)
94 ----------------------------------------------------------------------------------------------------*/
95
96 .alpha {
97 margin-left: 0;
98 }
99
100 .omega {
101 margin-right: 0;
102 }
103
104 /* `Grid >> 12 Columns
105 ----------------------------------------------------------------------------------------------------*/
106
107 .container_12 .grid_1 {
108 width: 60px;
109 }
110
111 .container_12 .grid_2 {
112 width: 140px;
113 }
114
115 .container_12 .grid_4 {
116 width: 300px;
117 }
118
119 .container_12 .grid_5 {
120 width: 380px;
121 }
122
123 .container_12 .grid_7 {
124 width: 540px;
125 }
126
127 .container_12 .grid_8 {
128 width: 620px;
129 }
130
131 .container_12 .grid_10 {
132 width: 780px;
133 }
134
135 .container_12 .grid_11 {
136 width: 860px;
137 }
138
139 /* `Grid >> 16 Columns
140 ----------------------------------------------------------------------------------------------------*/
141
142 .container_16 .grid_1 {
143 width: 40px;
144 }
145
146 .container_16 .grid_2 {
147 width: 100px;
148 }
149
150 .container_16 .grid_3 {
151 width: 160px;
152 }
153
154 .container_16 .grid_5 {
155 width: 280px;
156 }
157
158 .container_16 .grid_6 {
159 width: 340px;
160 }
161
162 .container_16 .grid_7 {
163 width: 400px;
164 }
165
166 .container_16 .grid_9 {
167 width: 520px;
168 }
169
170 .container_16 .grid_10 {
171 width: 580px;
172 }
173
174 .container_16 .grid_11 {
175 width: 640px;
176 }
177
178 .container_16 .grid_13 {
179 width: 760px;
180 }
181
182 .container_16 .grid_14 {
183 width: 820px;
184 }
185
186 .container_16 .grid_15 {
187 width: 880px;
188 }
189
190 /* `Prefix Extra Space >> Global
191 ----------------------------------------------------------------------------------------------------*/
192
193 .container_12 .prefix_3,
194 .container_16 .prefix_4 {
195 padding-left: 240px;
196 }
197
198 .container_12 .prefix_6,
199 .container_16 .prefix_8 {
200 padding-left: 480px;
201 }
202
203 .container_12 .prefix_9,
204 .container_16 .prefix_12 {
205 padding-left: 720px;
206 }
207
208 /* `Prefix Extra Space >> 12 Columns
209 ----------------------------------------------------------------------------------------------------*/
210
211 .container_12 .prefix_1 {
212 padding-left: 80px;
213 }
214
215 .container_12 .prefix_2 {
216 padding-left: 160px;
217 }
218
219 .container_12 .prefix_4 {
220 padding-left: 320px;
221 }
222
223 .container_12 .prefix_5 {
224 padding-left: 400px;
225 }
226
227 .container_12 .prefix_7 {
228 padding-left: 560px;
229 }
230
231 .container_12 .prefix_8 {
232 padding-left: 640px;
233 }
234
235 .container_12 .prefix_10 {
236 padding-left: 800px;
237 }
238
239 .container_12 .prefix_11 {
240 padding-left: 880px;
241 }
242
243 /* `Prefix Extra Space >> 16 Columns
244 ----------------------------------------------------------------------------------------------------*/
245
246 .container_16 .prefix_1 {
247 padding-left: 60px;
248 }
249
250 .container_16 .prefix_2 {
251 padding-left: 120px;
252 }
253
254 .container_16 .prefix_3 {
255 padding-left: 180px;
256 }
257
258 .container_16 .prefix_5 {
259 padding-left: 300px;
260 }
261
262 .container_16 .prefix_6 {
263 padding-left: 360px;
264 }
265
266 .container_16 .prefix_7 {
267 padding-left: 420px;
268 }
269
270 .container_16 .prefix_9 {
271 padding-left: 540px;
272 }
273
274 .container_16 .prefix_10 {
275 padding-left: 600px;
276 }
277
278 .container_16 .prefix_11 {
279 padding-left: 660px;
280 }
281
282 .container_16 .prefix_13 {
283 padding-left: 780px;
284 }
285
286 .container_16 .prefix_14 {
287 padding-left: 840px;
288 }
289
290 .container_16 .prefix_15 {
291 padding-left: 900px;
292 }
293
294 /* `Suffix Extra Space >> Global
295 ----------------------------------------------------------------------------------------------------*/
296
297 .container_12 .suffix_3,
298 .container_16 .suffix_4 {
299 padding-right: 240px;
300 }
301
302 .container_12 .suffix_6,
303 .container_16 .suffix_8 {
304 padding-right: 480px;
305 }
306
307 .container_12 .suffix_9,
308 .container_16 .suffix_12 {
309 padding-right: 720px;
310 }
311
312 /* `Suffix Extra Space >> 12 Columns
313 ----------------------------------------------------------------------------------------------------*/
314
315 .container_12 .suffix_1 {
316 padding-right: 80px;
317 }
318
319 .container_12 .suffix_2 {
320 padding-right: 160px;
321 }
322
323 .container_12 .suffix_4 {
324 padding-right: 320px;
325 }
326
327 .container_12 .suffix_5 {
328 padding-right: 400px;
329 }
330
331 .container_12 .suffix_7 {
332 padding-right: 560px;
333 }
334
335 .container_12 .suffix_8 {
336 padding-right: 640px;
337 }
338
339 .container_12 .suffix_10 {
340 padding-right: 800px;
341 }
342
343 .container_12 .suffix_11 {
344 padding-right: 880px;
345 }
346
347 /* `Suffix Extra Space >> 16 Columns
348 ----------------------------------------------------------------------------------------------------*/
349
350 .container_16 .suffix_1 {
351 padding-right: 60px;
352 }
353
354 .container_16 .suffix_2 {
355 padding-right: 120px;
356 }
357
358 .container_16 .suffix_3 {
359 padding-right: 180px;
360 }
361
362 .container_16 .suffix_5 {
363 padding-right: 300px;
364 }
365
366 .container_16 .suffix_6 {
367 padding-right: 360px;
368 }
369
370 .container_16 .suffix_7 {
371 padding-right: 420px;
372 }
373
374 .container_16 .suffix_9 {
375 padding-right: 540px;
376 }
377
378 .container_16 .suffix_10 {
379 padding-right: 600px;
380 }
381
382 .container_16 .suffix_11 {
383 padding-right: 660px;
384 }
385
386 .container_16 .suffix_13 {
387 padding-right: 780px;
388 }
389
390 .container_16 .suffix_14 {
391 padding-right: 840px;
392 }
393
394 .container_16 .suffix_15 {
395 padding-right: 900px;
396 }
397
398 /* `Push Space >> Global
399 ----------------------------------------------------------------------------------------------------*/
400
401 .container_12 .push_3,
402 .container_16 .push_4 {
403 left: 240px;
404 }
405
406 .container_12 .push_6,
407 .container_16 .push_8 {
408 left: 480px;
409 }
410
411 .container_12 .push_9,
412 .container_16 .push_12 {
413 left: 720px;
414 }
415
416 /* `Push Space >> 12 Columns
417 ----------------------------------------------------------------------------------------------------*/
418
419 .container_12 .push_1 {
420 left: 80px;
421 }
422
423 .container_12 .push_2 {
424 left: 160px;
425 }
426
427 .container_12 .push_4 {
428 left: 320px;
429 }
430
431 .container_12 .push_5 {
432 left: 400px;
433 }
434
435 .container_12 .push_7 {
436 left: 560px;
437 }
438
439 .container_12 .push_8 {
440 left: 640px;
441 }
442
443 .container_12 .push_10 {
444 left: 800px;
445 }
446
447 .container_12 .push_11 {
448 left: 880px;
449 }
450
451 /* `Push Space >> 16 Columns
452 ----------------------------------------------------------------------------------------------------*/
453
454 .container_16 .push_1 {
455 left: 60px;
456 }
457
458 .container_16 .push_2 {
459 left: 120px;
460 }
461
462 .container_16 .push_3 {
463 left: 180px;
464 }
465
466 .container_16 .push_5 {
467 left: 300px;
468 }
469
470 .container_16 .push_6 {
471 left: 360px;
472 }
473
474 .container_16 .push_7 {
475 left: 420px;
476 }
477
478 .container_16 .push_9 {
479 left: 540px;
480 }
481
482 .container_16 .push_10 {
483 left: 600px;
484 }
485
486 .container_16 .push_11 {
487 left: 660px;
488 }
489
490 .container_16 .push_13 {
491 left: 780px;
492 }
493
494 .container_16 .push_14 {
495 left: 840px;
496 }
497
498 .container_16 .push_15 {
499 left: 900px;
500 }
501
502 /* `Pull Space >> Global
503 ----------------------------------------------------------------------------------------------------*/
504
505 .container_12 .pull_3,
506 .container_16 .pull_4 {
507 left: -240px;
508 }
509
510 .container_12 .pull_6,
511 .container_16 .pull_8 {
512 left: -480px;
513 }
514
515 .container_12 .pull_9,
516 .container_16 .pull_12 {
517 left: -720px;
518 }
519
520 /* `Pull Space >> 12 Columns
521 ----------------------------------------------------------------------------------------------------*/
522
523 .container_12 .pull_1 {
524 left: -80px;
525 }
526
527 .container_12 .pull_2 {
528 left: -160px;
529 }
530
531 .container_12 .pull_4 {
532 left: -320px;
533 }
534
535 .container_12 .pull_5 {
536 left: -400px;
537 }
538
539 .container_12 .pull_7 {
540 left: -560px;
541 }
542
543 .container_12 .pull_8 {
544 left: -640px;
545 }
546
547 .container_12 .pull_10 {
548 left: -800px;
549 }
550
551 .container_12 .pull_11 {
552 left: -880px;
553 }
554
555 /* `Pull Space >> 16 Columns
556 ----------------------------------------------------------------------------------------------------*/
557
558 .container_16 .pull_1 {
559 left: -60px;
560 }
561
562 .container_16 .pull_2 {
563 left: -120px;
564 }
565
566 .container_16 .pull_3 {
567 left: -180px;
568 }
569
570 .container_16 .pull_5 {
571 left: -300px;
572 }
573
574 .container_16 .pull_6 {
575 left: -360px;
576 }
577
578 .container_16 .pull_7 {
579 left: -420px;
580 }
581
582 .container_16 .pull_9 {
583 left: -540px;
584 }
585
586 .container_16 .pull_10 {
587 left: -600px;
588 }
589
590 .container_16 .pull_11 {
591 left: -660px;
592 }
593
594 .container_16 .pull_13 {
595 left: -780px;
596 }
597
598 .container_16 .pull_14 {
599 left: -840px;
600 }
601
602 .container_16 .pull_15 {
603 left: -900px;
604 }
605
606 /* `Clear Floated Elements
607 ----------------------------------------------------------------------------------------------------*/
608
609 /* http://sonspring.com/journal/clearing-floats */
610
611 .clear {
612 clear: both;
613 display: block;
614 overflow: hidden;
615 visibility: hidden;
616 width: 0;
617 height: 0;
618 }
619
620 /* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
621
622 .clearfix:before,
623 .clearfix:after,
624 .container_12:before,
625 .container_12:after,
626 .container_16:before,
627 .container_16:after {
628 content: '.';
629 display: block;
630 overflow: hidden;
631 visibility: hidden;
632 font-size: 0;
633 line-height: 0;
634 width: 0;
635 height: 0;
636 }
637
638 .clearfix:after,
639 .container_12:after,
640 .container_16:after {
641 clear: both;
642 }
643
644 /*
645 The following zoom:1 rule is specifically for IE6 + IE7.
646 Move to separate stylesheet if invalid CSS is a problem.
647 */
648
649 .clearfix,
650 .container_12,
651 .container_16 {
652 zoom: 1;
653 }