forked from FormstoneClassic/Gridlock
-
Notifications
You must be signed in to change notification settings - Fork 0
/
gridlock-16.css
195 lines (183 loc) · 9.96 KB
/
gridlock-16.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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
/*
* Gridlock - A CSS responsive grid system [16 column]
* @author Ben Plum
* @version 1.2.1
*
* Copyright © 2013 Ben Plum <mr@benplum.com>
* Released under the MIT License <http://www.opensource.org/licenses/mit-license.php>
*/
/* !Tablet, 8 column, 720 (min 740) */
@media screen and (min-width: 740px) {
/* Cells */
.gridlock .row .tablet-1 { width: 10.416666666667%; }
.gridlock .row .tablet-2 { width: 22.916666666667%; }
.gridlock .row .tablet-3 { width: 35.416666666667%; }
.gridlock .row .tablet-4 { width: 47.916666666667%; }
.gridlock .row .tablet-5 { width: 60.416666666667%; }
.gridlock .row .tablet-6 { width: 72.916666666667%; }
.gridlock .row .tablet-7 { width: 85.416666666667%; }
.gridlock .row .tablet-8 { width: 97.916666666667%; }
/* Push */
.gridlock .row .tablet-push-1 { margin-left: 13.54166666666667%; }
.gridlock .row .tablet-push-2 { margin-left: 26.04166666666667%; }
.gridlock .row .tablet-push-3 { margin-left: 38.54166666666667%; }
.gridlock .row .tablet-push-4 { margin-left: 51.04166666666667%; }
.gridlock .row .tablet-push-5 { margin-left: 63.54166666666667%; }
.gridlock .row .tablet-push-6 { margin-left: 76.04166666666667%; }
.gridlock .row .tablet-push-7 { margin-left: 88.54166666666667%; }
/* Contained */
.gridlock .row .contained.tablet-1 { width: 12.5%; }
.gridlock .row .contained.tablet-2 { width: 25%; }
.gridlock .row .contained.tablet-3 { width: 37.5%; }
.gridlock .row .contained.tablet-4 { width: 50%; }
.gridlock .row .contained.tablet-5 { width: 62.5%; }
.gridlock .row .contained.tablet-6 { width: 75%; }
.gridlock .row .contained.tablet-7 { width: 87.5%; }
.gridlock .row .contained.tablet-8 { width: 100%; }
/* Contained Push */
.gridlock .row .contained.tablet-push-1 { margin-left: 12.5%; }
.gridlock .row .contained.tablet-push-2 { margin-left: 25%; }
.gridlock .row .contained.tablet-push-3 { margin-left: 37.5%; }
.gridlock .row .contained.tablet-push-4 { margin-left: 50%; }
.gridlock .row .contained.tablet-push-5 { margin-left: 62.5%; }
.gridlock .row .contained.tablet-push-6 { margin-left: 75%; }
.gridlock .row .contained.tablet-push-7 { margin-left: 87.5%; }
}
/* !Desktop, 16 column, 960 (min 980) */
@media screen and (min-width: 980px) {
/* Cells */
.gridlock .row .desktop-1 { width: 4.166666666667%; }
.gridlock .row .desktop-2 { width: 10.416666666667%; }
.gridlock .row .desktop-3 { width: 16.666666666667%; }
.gridlock .row .desktop-4 { width: 22.916666666667%; }
.gridlock .row .desktop-5 { width: 29.166666666667%; }
.gridlock .row .desktop-6 { width: 35.416666666667%; }
.gridlock .row .desktop-7 { width: 41.666666666667%; }
.gridlock .row .desktop-8 { width: 47.916666666667%; }
.gridlock .row .desktop-9 { width: 54.166666666667%; }
.gridlock .row .desktop-10 { width: 60.416666666667%; }
.gridlock .row .desktop-11 { width: 66.666666666667%; }
.gridlock .row .desktop-12 { width: 72.916666666667%; }
.gridlock .row .desktop-13 { width: 79.166666666667%; }
.gridlock .row .desktop-14 { width: 85.416666666667%; }
.gridlock .row .desktop-15 { width: 91.666666666667%; }
.gridlock .row .desktop-16 { width: 97.916666666667%; }
/* Push */
.gridlock .row .desktop-push-1 { margin-left: 7.291666666667%; }
.gridlock .row .desktop-push-2 { margin-left: 13.541666666667%; }
.gridlock .row .desktop-push-3 { margin-left: 19.791666666667%; }
.gridlock .row .desktop-push-4 { margin-left: 26.041666666667%; }
.gridlock .row .desktop-push-5 { margin-left: 32.29166666666667%; }
.gridlock .row .desktop-push-6 { margin-left: 38.54166666666667%; }
.gridlock .row .desktop-push-7 { margin-left: 44.79166666666667%; }
.gridlock .row .desktop-push-8 { margin-left: 51.29166666666667%; }
.gridlock .row .desktop-push-9 { margin-left: 57.29166666666667%; }
.gridlock .row .desktop-push-10 { margin-left: 63.54166666666667%; }
.gridlock .row .desktop-push-11 { margin-left: 69.79166666666667%; }
.gridlock .row .desktop-push-12 { margin-left: 76.04166666666667%; }
.gridlock .row .desktop-push-13 { margin-left: 82.29166666666667%; }
.gridlock .row .desktop-push-14 { margin-left: 88.54166666666667%; }
.gridlock .row .desktop-push-15 { margin-left: 94.79166666666667%; }
/* Contained */
.gridlock .row .contained.desktop-1 { width: 6.25%; }
.gridlock .row .contained.desktop-2 { width: 12.5%; }
.gridlock .row .contained.desktop-3 { width: 18.75%; }
.gridlock .row .contained.desktop-4 { width: 25%; }
.gridlock .row .contained.desktop-5 { width: 31.25%; }
.gridlock .row .contained.desktop-6 { width: 37.5%; }
.gridlock .row .contained.desktop-7 { width: 43.75%; }
.gridlock .row .contained.desktop-8 { width: 50%; }
.gridlock .row .contained.desktop-9 { width: 5.25%; }
.gridlock .row .contained.desktop-10 { width: 62.5%; }
.gridlock .row .contained.desktop-11 { width: 68.75%; }
.gridlock .row .contained.desktop-12 { width: 75%; }
.gridlock .row .contained.desktop-13 { width: 82.25%; }
.gridlock .row .contained.desktop-14 { width: 87.5%; }
.gridlock .row .contained.desktop-15 { width: 93.75%; }
.gridlock .row .contained.desktop-16 { width: 100%; }
/* Contained Push */
.gridlock .row .contained.desktop-push-1 { margin-left: 6.25%; }
.gridlock .row .contained.desktop-push-2 { margin-left: 12.5%; }
.gridlock .row .contained.desktop-push-3 { margin-left: 18.75%; }
.gridlock .row .contained.desktop-push-4 { margin-left: 25%; }
.gridlock .row .contained.desktop-push-5 { margin-left: 31.25%; }
.gridlock .row .contained.desktop-push-6 { margin-left: 37.5%; }
.gridlock .row .contained.desktop-push-7 { margin-left: 43.75%; }
.gridlock .row .contained.desktop-push-8 { margin-left: 50%; }
.gridlock .row .contained.desktop-push-9 { margin-left: 5.25%; }
.gridlock .row .contained.desktop-push-10 { margin-left: 62.5%; }
.gridlock .row .contained.desktop-push-11 { margin-left: 68.75%; }
.gridlock .row .contained.desktop-push-12 { margin-left: 75%; }
.gridlock .row .contained.desktop-push-13 { margin-left: 82.25%; }
.gridlock .row .contained.desktop-push-14 { margin-left: 87.5%; }
.gridlock .row .contained.desktop-push-15 { margin-left: 93.75%; }
}
/* !Desktop, Max, 12 column, 1200 (min 1220) */
@media screen and (min-width: 1220px) {
.gridlock .row .max-1 { width: 4.166666666667%; }
.gridlock .row .max-2 { width: 10.416666666667%; }
.gridlock .row .max-3 { width: 16.666666666667%; }
.gridlock .row .max-4 { width: 22.916666666667%; }
.gridlock .row .max-5 { width: 29.166666666667%; }
.gridlock .row .max-6 { width: 35.416666666667%; }
.gridlock .row .max-7 { width: 41.666666666667%; }
.gridlock .row .max-8 { width: 47.916666666667%; }
.gridlock .row .max-9 { width: 54.166666666667%; }
.gridlock .row .max-10 { width: 60.416666666667%; }
.gridlock .row .max-11 { width: 66.666666666667%; }
.gridlock .row .max-12 { width: 72.916666666667%; }
.gridlock .row .max-13 { width: 79.166666666667%; }
.gridlock .row .max-14 { width: 85.416666666667%; }
.gridlock .row .max-15 { width: 91.666666666667%; }
.gridlock .row .max-16 { width: 97.916666666667%; }
/* Push Cells */
.gridlock .row .max-push-0 { margin-left: 1.0416666666666667%; }
.gridlock .row .max-push-1 { margin-left: 7.291666666667%; }
.gridlock .row .max-push-2 { margin-left: 13.541666666667%; }
.gridlock .row .max-push-3 { margin-left: 19.791666666667%; }
.gridlock .row .max-push-4 { margin-left: 26.041666666667%; }
.gridlock .row .max-push-5 { margin-left: 32.29166666666667%; }
.gridlock .row .max-push-6 { margin-left: 38.54166666666667%; }
.gridlock .row .max-push-7 { margin-left: 44.79166666666667%; }
.gridlock .row .max-push-8 { margin-left: 51.29166666666667%; }
.gridlock .row .max-push-9 { margin-left: 57.29166666666667%; }
.gridlock .row .max-push-10 { margin-left: 63.54166666666667%; }
.gridlock .row .max-push-11 { margin-left: 69.79166666666667%; }
.gridlock .row .max-push-12 { margin-left: 76.04166666666667%; }
.gridlock .row .max-push-13 { margin-left: 82.29166666666667%; }
.gridlock .row .max-push-14 { margin-left: 88.54166666666667%; }
.gridlock .row .max-push-15 { margin-left: 94.79166666666667%; }
/* Contained */
.gridlock .row .contained.max-1 { width: 6.25%; }
.gridlock .row .contained.max-2 { width: 12.5%; }
.gridlock .row .contained.max-3 { width: 18.75%; }
.gridlock .row .contained.max-4 { width: 25%; }
.gridlock .row .contained.max-5 { width: 31.25%; }
.gridlock .row .contained.max-6 { width: 37.5%; }
.gridlock .row .contained.max-7 { width: 43.75%; }
.gridlock .row .contained.max-8 { width: 50%; }
.gridlock .row .contained.max-9 { width: 5.25%; }
.gridlock .row .contained.max-10 { width: 62.5%; }
.gridlock .row .contained.max-11 { width: 68.75%; }
.gridlock .row .contained.max-12 { width: 75%; }
.gridlock .row .contained.max-13 { width: 82.25%; }
.gridlock .row .contained.max-14 { width: 87.5%; }
.gridlock .row .contained.max-15 { width: 93.75%; }
.gridlock .row .contained.max-16 { width: 100%; }
/* Contained Push */
.gridlock .row .contained.max-push-1 { margin-left: 6.25%; }
.gridlock .row .contained.max-push-2 { margin-left: 12.5%; }
.gridlock .row .contained.max-push-3 { margin-left: 18.75%; }
.gridlock .row .contained.max-push-4 { margin-left: 25%; }
.gridlock .row .contained.max-push-5 { margin-left: 31.25%; }
.gridlock .row .contained.max-push-6 { margin-left: 37.5%; }
.gridlock .row .contained.max-push-7 { margin-left: 43.75%; }
.gridlock .row .contained.max-push-8 { margin-left: 50%; }
.gridlock .row .contained.max-push-9 { margin-left: 5.25%; }
.gridlock .row .contained.max-push-10 { margin-left: 62.5%; }
.gridlock .row .contained.max-push-11 { margin-left: 68.75%; }
.gridlock .row .contained.max-push-12 { margin-left: 75%; }
.gridlock .row .contained.max-push-13 { margin-left: 82.25%; }
.gridlock .row .contained.max-push-14 { margin-left: 87.5%; }
.gridlock .row .contained.max-push-15 { margin-left: 93.75%; }
}