-
Notifications
You must be signed in to change notification settings - Fork 0
/
columns.css
73 lines (69 loc) · 2.09 KB
/
columns.css
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
/* The 16-column Deco Grid System.
* Available in multiple variants, see http://deco.gs
*
* Cells are 4.16667% (=40px)
* Column margins are 2.08333% (=20px)
* Total is 6.25%. (=80px) (which makes 12 columns)
*
* If page width is fixed to 960px width:
* Cell will be equivalent to 40px, left/right margin will be 10px.
*/
div.row {
float: left;
width: 100%;
display: block;
position: relative;
}
div.cell {
position: relative;
float: left;
left: 100%;
}
/* Width classes.
For a given cell width, the calculation is:
width = (total cell width) * n - (column margins)
In this case: (6.25*n - 2.08333)% */
div.width-1 { width: 4.16667% }
div.width-2 { width: 10.41667% }
div.width-3 { width: 16.66667% }
div.width-4 { width: 22.91667% }
div.width-5 { width: 29.16667% }
div.width-6 { width: 35.41667% }
div.width-7 { width: 41.66667% }
div.width-8 { width: 47.91667% }
div.width-9 { width: 54.16667% }
div.width-10 { width: 60.41667% }
div.width-11 { width: 66.66667% }
div.width-12 { width: 72.91667% }
div.width-13 { width: 79.16667% }
div.width-14 { width: 85.41667% }
div.width-15 { width: 91.66667% }
div.width-16 { width: 97.91667% }
/*
div.width-1 { width: 4% }
div.width-2 { width: 10.25% }
div.width-3 { width: 16.5% }
div.width-4 { width: 22.75% }
...
*/
/* Positioning classes, these are subtracting from a rightmost
position, which is why they seem the wrong way around */
/* For a given position, the calculation is:
-100 + (total cell width * n)
In this case: margin-left: -100 + (6.25*n) */
div.position-0 { margin-left: -100% }
div.position-1 { margin-left: -93.75% }
div.position-2 { margin-left: -87.5% }
div.position-3 { margin-left: -81.25% }
div.position-4 { margin-left: -75% }
div.position-5 { margin-left: -68.75% }
div.position-6 { margin-left: -62.5% }
div.position-7 { margin-left: -56.25% }
div.position-8 { margin-left: -50% }
div.position-9 { margin-left: -43.75% }
div.position-10 { margin-left: -37.5% }
div.position-11 { margin-left: -31.25% }
div.position-12 { margin-left: -25% }
div.position-13 { margin-left: -18.75% }
div.position-14 { margin-left: -12.5% }
div.position-15 { margin-left: -6.25% }