UNPKG

6.63 kBCSSView Raw
1/*
2 960 Grid System ~ Core CSS.
3 Learn more ~ http://960.gs/
4
5 Licensed under GPL and MIT.
6*/
7
8/* =Containers
9--------------------------------------------------------------------------------*/
10
11.container_12,
12.container_16
13{
14 width: 92%;
15 margin-left: 4%;
16 margin-right: 4%;
17}
18
19/* =Grid >> Global
20--------------------------------------------------------------------------------*/
21
22.grid_1,
23.grid_2,
24.grid_3,
25.grid_4,
26.grid_5,
27.grid_6,
28.grid_7,
29.grid_8,
30.grid_9,
31.grid_10,
32.grid_11,
33.grid_12,
34.grid_13,
35.grid_14,
36.grid_15,
37.grid_16
38{
39 display: inline;
40 float: left;
41 margin-left: 1%;
42 margin-right: 1%;
43}
44
45.container_12 .grid_3,
46.container_16 .grid_4
47{
48 width: 23%;
49}
50
51.container_12 .grid_6,
52.container_16 .grid_8
53{
54 width: 48%;
55}
56
57.container_12 .grid_9,
58.container_16 .grid_12
59{
60 width: 73%;
61}
62
63.container_12 .grid_12,
64.container_16 .grid_16
65{
66 width: 98%;
67}
68
69/* =Grid >> Children (Alpha ~ First, Omega ~ Last)
70--------------------------------------------------------------------------------*/
71
72.alpha
73{
74 margin-left: 0;
75}
76
77.omega
78{
79 margin-right: 0;
80}
81
82/* =Grid >> 12 Columns
83--------------------------------------------------------------------------------*/
84
85.container_12 .grid_1
86{
87 width: 6.333%;
88}
89
90.container_12 .grid_2
91{
92 width: 14.666%;
93}
94
95.container_12 .grid_4
96{
97 width: 31.333%;
98}
99
100.container_12 .grid_5
101{
102 width: 39.666%;
103}
104
105.container_12 .grid_7
106{
107 width: 56.333%;
108}
109
110.container_12 .grid_8
111{
112 width: 64.666%;
113}
114
115.container_12 .grid_10
116{
117 width: 81.333%;
118}
119
120.container_12 .grid_11
121{
122 width: 89.666%;
123}
124
125/* =Grid >> 16 Columns
126--------------------------------------------------------------------------------*/
127
128.container_16 .grid_1
129{
130 width: 4.25%;
131}
132
133.container_16 .grid_2
134{
135 width: 10.5%;
136}
137
138.container_16 .grid_3
139{
140 width: 16.75%;
141}
142
143.container_16 .grid_5
144{
145 width: 29.25%;
146}
147
148.container_16 .grid_6
149{
150 width: 35.5%;
151}
152
153.container_16 .grid_7
154{
155 width: 41.75%;
156}
157
158.container_16 .grid_9
159{
160 width: 54.25%;
161}
162
163.container_16 .grid_10
164{
165 width: 60.5%;
166}
167
168.container_16 .grid_11
169{
170 width: 66.75%;
171}
172
173.container_16 .grid_13
174{
175 width: 79.25%;
176}
177
178.container_16 .grid_14
179{
180 width: 85.5%;
181}
182
183.container_16 .grid_15
184{
185 width: 91.75%;
186}
187
188/* =Prefix Extra Space >> Global
189--------------------------------------------------------------------------------*/
190
191.container_12 .prefix_3,
192.container_16 .prefix_4
193{
194 padding-left: 25%;
195}
196
197.container_12 .prefix_6,
198.container_16 .prefix_8
199{
200 padding-left: 50%;
201}
202
203.container_12 .prefix_9,
204.container_16 .prefix_12
205{
206 padding-left: 75%;
207}
208
209/* =Prefix Extra Space >> 12 Columns
210--------------------------------------------------------------------------------*/
211
212.container_12 .prefix_1
213{
214 padding-left: 8.333%;
215}
216
217.container_12 .prefix_2
218{
219 padding-left: 16.666%;
220}
221
222.container_12 .prefix_4
223{
224 padding-left: 33.333%;
225}
226
227.container_12 .prefix_5
228{
229 padding-left: 41.666%;
230}
231
232.container_12 .prefix_7
233{
234 padding-left: 58.333%;
235}
236
237.container_12 .prefix_8
238{
239 padding-left: 66.666%;
240}
241
242.container_12 .prefix_10
243{
244 padding-left: 83.333%;
245}
246
247.container_12 .prefix_11
248{
249 padding-left: 91.666%;
250}
251
252/* =Prefix Extra Space >> 16 Columns
253--------------------------------------------------------------------------------*/
254
255.container_16 .prefix_1
256{
257 padding-left: 6.25%;
258}
259
260.container_16 .prefix_2
261{
262 padding-left: 12.5%;
263}
264
265.container_16 .prefix_3
266{
267 padding-left: 18.75%;
268}
269
270.container_16 .prefix_5
271{
272 padding-left: 31.25%;
273}
274
275.container_16 .prefix_6
276{
277 padding-left: 37.5%;
278}
279
280.container_16 .prefix_7
281{
282 padding-left: 43.75%;
283}
284
285.container_16 .prefix_9
286{
287 padding-left: 56.25%;
288}
289
290.container_16 .prefix_10
291{
292 padding-left: 62.5%;
293}
294
295.container_16 .prefix_11
296{
297 padding-left: 68.75%;
298}
299
300.container_16 .prefix_13
301{
302 padding-left: 81.25%;
303}
304
305.container_16 .prefix_14
306{
307 padding-left: 87.5%;
308}
309
310.container_16 .prefix_15
311{
312 padding-left: 93.75%;
313}
314
315/* =Suffix Extra Space >> Global
316--------------------------------------------------------------------------------*/
317
318.container_12 .suffix_3,
319.container_16 .suffix_4
320{
321 padding-right: 25%;
322}
323
324.container_12 .suffix_6,
325.container_16 .suffix_8
326{
327 padding-right: 50%;
328}
329
330.container_12 .suffix_9,
331.container_16 .suffix_12
332{
333 padding-right: 75%;
334}
335
336/* =Suffix Extra Space >> 12 Columns
337--------------------------------------------------------------------------------*/
338
339.container_12 .suffix_1
340{
341 padding-right: 8.333%;
342}
343
344.container_12 .suffix_2
345{
346 padding-right: 16.666%;
347}
348
349.container_12 .suffix_4
350{
351 padding-right: 33.333%;
352}
353
354.container_12 .suffix_5
355{
356 padding-right: 41.666%;
357}
358
359.container_12 .suffix_7
360{
361 padding-right: 58.333%;
362}
363
364.container_12 .suffix_8
365{
366 padding-right: 66.666%;
367}
368
369.container_12 .suffix_10
370{
371 padding-right: 83.333%;
372}
373
374.container_12 .suffix_11
375{
376 padding-right: 91.666%;
377}
378
379/* =Suffix Extra Space >> 16 Columns
380--------------------------------------------------------------------------------*/
381
382.container_16 .suffix_1
383{
384 padding-right: 6.25%;
385}
386
387.container_16 .suffix_2
388{
389 padding-right: 16.5%;
390}
391
392.container_16 .suffix_3
393{
394 padding-right: 18.75%;
395}
396
397.container_16 .suffix_5
398{
399 padding-right: 31.25%;
400}
401
402.container_16 .suffix_6
403{
404 padding-right: 37.5%;
405}
406
407.container_16 .suffix_7
408{
409 padding-right: 43.75%;
410}
411
412.container_16 .suffix_9
413{
414 padding-right: 56.25%;
415}
416
417.container_16 .suffix_10
418{
419 padding-right: 62.5%;
420}
421
422.container_16 .suffix_11
423{
424 padding-right: 68.75%;
425}
426
427.container_16 .suffix_13
428{
429 padding-right: 81.25%;
430}
431
432.container_16 .suffix_14
433{
434 padding-right: 87.5%;
435}
436
437.container_16 .suffix_15
438{
439 padding-right: 93.75%;
440}
441
442/* =Clear Floated Elements
443--------------------------------------------------------------------------------*/
444
445/* http://sonspring.com/journal/clearing-floats */
446
447html body * span.clear,
448html body * div.clear,
449html body * li.clear,
450html body * dd.clear
451{
452 background: none;
453 border: 0;
454 clear: both;
455 display: block;
456 float: none;
457 font-size: 0;
458 list-style: none;
459 margin: 0;
460 padding: 0;
461 overflow: hidden;
462 visibility: hidden;
463 width: 0;
464 height: 0;
465}
466
467/* http://www.positioniseverything.net/easyclearing.html */
468
469.clearfix:after
470{
471 clear: both;
472 content: '.';
473 display: block;
474 visibility: hidden;
475 height: 0;
476}
477
478.clearfix
479{
480 display: inline-block;
481}
482
483* html .clearfix
484{
485 height: 1%;
486}
487
488.clearfix
489{
490 display: block;
491}
\No newline at end of file