← Back to branch summary

~ubuntu-accomplishments-web-editor-drivers/ubuntu-accomplishments-web/trunk

« back to all changes in this revision

Viewing changes to ubuntu_website/media/css/core-grid.css

  • Committer: Janos Gyerik
  • Date: 2012-12-14 23:20:41 UTC
  • mfrom: (233.1.14 cleaning)
  • Revision ID: janos@axiom-20121214232041-dutstr2s05outaps
ubuntu_website renamed to ubuntu_theme and cleaned up

Show diffs side-by-side

added added

removed removed

Lines of Context:
ubuntu_website/media/css/core-grid.css
1
 
@charset "UTF-8";
2
 
/**
3
 
 * Ubuntu Core Front-End Framework
4
 
 *
5
 
 * Grid file part of the Ubuntu Core Front-End Framework
6
 
 * 
7
 
 * This grid is composed by 14 columns (units) separated by 13 gutters (1/3 unit).
8
 
 * The first and last column are for padding purposes only.
9
 
 * The content fits in the middle 12 columns.
10
 
 * Possible divisions: 1 (12 units + 11 gutters), 2 (6 units + 5 gutters), 
11
 
 * 3 ( 4 units + 3 gutters) and 4 (3 units + 2 gutters).
12
 
 *
13
 
 * When 1 unit = 60px, 1 gutter = 20px
14
 
 * 
15
 
 * @project             Ubuntu Core Front-End Framework
16
 
 * @author              Web Team at Canonical Ltd
17
 
 * @copyright   2012 Canonical Ltd
18
 
 *
19
 
 * @see                 http://gridinator.com/
20
 
 * @see                 http://blueprintcss.org/
21
 
 */
22
 
 
23
 
/**
24
 
 * Table of contents
25
 
 *
26
 
 * Main containers
27
 
 * Columns
28
 
 * Empty columns
29
 
 * Borders
30
 
 * Push and pull
31
 
 * Verticla gutter
32
 
 * Last
33
 
 * Clearing
34
 
 */
35
 
  
36
 
 /**
37
 
 * Main containers
38
 
 *
39
 
 * @section containers
40
 
 */
41
 
 
42
 
.wrapper {
43
 
        margin: 0 auto;
44
 
        text-align: left;
45
 
        max-width: 65.333em; /* 980px / 15px (baseline font); 980px + (60px x 2) = 1100px */
46
 
}
47
 
 
48
 
@media screen and (min-width: 481px) {
49
 
    .inner-wrapper {
50
 
        background: #fff;
51
 
        clear: both;
52
 
        display: inline; /* HACK_IE_LTE_6: To fix IE 6 double margin bug. */
53
 
        float: left;
54
 
        position: relative;
55
 
    }
56
 
}
57
 
 
58
 
@media screen and (max-width: 481px) {
59
 
    .inner-wrapper {
60
 
        background: #fff;
61
 
        clear: both;
62
 
        display: inline; /* HACK_IE_LTE_6: To fix IE 6 double margin bug. */
63
 
        float: left;
64
 
        padding: 0 0 0 0;
65
 
        position: relative;
66
 
    }
67
 
}
68
 
 
69
 
.inner-wrapper-full-width {
70
 
    background: #fff;
71
 
    clear: both;
72
 
    display: inline; /* HACK_IE_LTE_6: To fix IE 6 double margin bug. */
73
 
    float: left;
74
 
    padding: 0 0 0 0;
75
 
    position: relative;
76
 
    width: 100%;
77
 
}
78
 
 
79
 
@media screen and (min-width: 481px) {
80
 
    .row { /** Clear entire row. */
81
 
        clear: both;
82
 
        float: left;
83
 
        margin: 0 20px;
84
 
        width: 100%;
85
 
    }
86
 
}
87
 
 
88
 
@media screen and (max-width: 481px) {
89
 
    .row { /** Clear entire row. */
90
 
        clear: both;
91
 
        float: left;
92
 
        margin: 0;
93
 
        width: 100%;
94
 
    }
95
 
}
96
 
 
97
 
/**
98
 
 * Columns
99
 
 *
100
 
 * @section columns
101
 
 */
102
 
 
103
 
@media screen and (min-width: 481px) {
104
 
    .span-3, .span-4, .span-6, .span-5, .span-7, .span-8, .span-9, .span-12 {
105
 
        clear: none;
106
 
        display: inline; /* HACK_IE_LTE_6: To fix IE 6 double margin bug. */
107
 
        float: left;
108
 
        margin: 0 1.333em 1.333em 0;
109
 
        padding: 0;
110
 
        position: relative;
111
 
    }
112
 
}
113
 
 
114
 
 
115
 
@media screen and (max-width: 481px) {
116
 
    .span-3, .span-4, .span-6, .span-5, .span-7, .span-8, .span-9, .span-12 {
117
 
        clear: none;
118
 
        display: inline; /* HACK_IE_LTE_6: To fix IE 6 double margin bug. */
119
 
        float: left;
120
 
        margin: 0 0.5em 0.5em 0;
121
 
        padding: 0;
122
 
        position: relative;
123
 
    }
124
 
}
125
 
 
126
 
.span-3 {
127
 
        width: 14.666em; /* 220px / 15px */
128
 
}
129
 
.span-4 {
130
 
        width: 20em; /* 300px / 15px */
131
 
}
132
 
.span-5 {
133
 
        width: 25.333em; /* 380px / 15px */
134
 
}
135
 
.span-6 {
136
 
        width: 30.666em; /* 460px / 15px */
137
 
}
138
 
.span-7 {
139
 
        width: 36em; /* 540px / 15px */
140
 
}
141
 
@media screen and (max-width: 481px) {
142
 
    .span-8 {
143
 
        max-width: 41.333em; /* 620px / 15px */
144
 
    }
145
 
}
146
 
@media screen and (min-width: 481px) {
147
 
    .span-8 {
148
 
        width: 41.333em; /* 620px / 15px */
149
 
    }
150
 
}
151
 
.span-9 {
152
 
        width: 46.666em; /* 700px / 15px */
153
 
}
154
 
.span-12 { /** Full width. */
155
 
        width: 62.666em; /* 940px / 15px */
156
 
        margin-right: 0;
157
 
}
158
 
 
159
 
/**
160
 
 * Empty columns
161
 
 *
162
 
 * Add these to a column to append or prepend 
163
 
 * empty columns
164
 
 *
165
 
 * @section empty-columns
166
 
 */
167
 
 
168
 
.append-1 { padding-right: 5.333em; } /* 80px / 15px */
169
 
.append-2 { padding-right: 10.666em; } /* 160px / 15px */
170
 
.append-3 { padding-right: 16em; } /* 240px / 15px */
171
 
.append-4 { padding-right: 21.333em; } /* 320px / 15px */
172
 
.append-5 { padding-right: 26.666em; } /* 400px / 15px */
173
 
.append-6 { padding-right: 32em; } /* 480px / 15px */
174
 
.append-7 { padding-right: 37.333em; } /* 560px / 15px */
175
 
.append-8 { padding-right: 42.666em; } /* 640px / 15px */
176
 
.append-9 { padding-right: 48em; } /* 720px / 15px */
177
 
.append-10 { padding-right: 53.333em; } /* 800px / 15px */
178
 
.append-11 { padding-right: 58.666em; } /* 880px / 15px */
179
 
 
180
 
.prepend-1 { padding-left: 5.333em; }
181
 
.prepend-2 { padding-left: 10.666em; }
182
 
.prepend-3 { padding-left: 16em; }
183
 
.prepend-4 { padding-left: 21.333em; }
184
 
.prepend-5 { padding-left: 26.666em; }
185
 
.prepend-6 { padding-left: 32em; }
186
 
.prepend-7 { padding-left: 37.333em; }
187
 
.prepend-8 { padding-left: 42.666em; }
188
 
.prepend-9 { padding-left: 48em; }
189
 
.prepend-10 { padding-left: 53.333em; }
190
 
.prepend-11 { padding-left: 58.666em; }
191
 
 
192
 
/**
193
 
 * Borders
194
 
 *
195
 
 * @section borders
196
 
 */
197
 
 
198
 
.border { /** Border on right hand side of a column. */
199
 
  padding-right: .6em;
200
 
  margin-right: .666em;
201
 
  border-right: 1px solid #ddd;
202
 
}
203
 
 
204
 
/**
205
 
 * Push and pull
206
 
 *
207
 
 * Use these classes to push elements into the next 
208
 
 * column and pull it into the previous column
209
 
 *
210
 
 * @section push-pull
211
 
 */
212
 
 
213
 
.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11 {
214
 
        float: left;
215
 
        position: relative;
216
 
}
217
 
.pull-1 {
218
 
        margin-left: -5.333em;
219
 
}
220
 
.pull-2 {
221
 
        margin-left: -10.666em;
222
 
}
223
 
.pull-3 {
224
 
        margin-left: -16em;
225
 
}
226
 
.pull-4 {
227
 
        margin-left: -21.333em;
228
 
}
229
 
.pull-5 {
230
 
        margin-left: -26.666em;
231
 
}
232
 
.pull-6 {
233
 
        margin-left: -32em;
234
 
}
235
 
.pull-7 {
236
 
        margin-left: -37.333em;
237
 
}
238
 
.pull-8 {
239
 
        margin-left: -42.666em;
240
 
}
241
 
.pull-9 {
242
 
        margin-left: -48em;
243
 
}
244
 
.pull-10 {
245
 
        margin-left: -53.333em;
246
 
}
247
 
.pull-11 {
248
 
        margin-left: -58.666em;
249
 
}
250
 
 
251
 
.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11 {
252
 
        float: left;
253
 
        position: relative;
254
 
}
255
 
.push-1 {
256
 
        margin: 0 -6.666em 0 6.666em;
257
 
}
258
 
.push-2 {
259
 
        margin: 0 -12em 0 12em;
260
 
}
261
 
.push-3 {
262
 
        margin: 0 -17.333em 0 17.333em;
263
 
}
264
 
.push-4 {
265
 
        margin: 0 -22.666em 0 22.666em;
266
 
}
267
 
.push-5 {
268
 
        margin: 0 - 28em 0 28em;
269
 
}
270
 
.push-6 {
271
 
        margin: 0 -33.333em 0 33.333em;
272
 
}
273
 
.push-7 {
274
 
        margin: 0 -38.666em 0 38.666em;
275
 
}
276
 
.push-8 {
277
 
        margin: 0 -44em 0 44em;
278
 
}
279
 
.push-9 {
280
 
        margin: 0 -49.333em 0 49.333em;
281
 
}
282
 
.push-10 {
283
 
        margin: 0 -54.666em 0 54.666em;
284
 
}
285
 
.push-11 {
286
 
        margin: 0 -60em 0 60em;
287
 
}
288
 
 
289
 
/**
290
 
 * Vertical gutter
291
 
 *
292
 
 * Add a gutter above or below and element
293
 
 *
294
 
 * @section last
295
 
 */
296
 
 
297
 
div.prepend-top, .prepend-top {
298
 
  margin-top:1.333em;
299
 
}
300
 
div.append-bottom, .append-bottom {
301
 
  margin-bottom:1.333em;
302
 
}
303
 
 
304
 
/**
305
 
 * Last
306
 
 *
307
 
 * Add to last column a row
308
 
 *
309
 
 * @section last
310
 
 */
311
 
 
312
 
.last {
313
 
        margin-right: 0;
314
 
}
315
 
 
316
 
/**
317
 
 * Clearing
318
 
 *
319
 
 * Hard and soft clearing classes
320
 
 *
321
 
 * @section clearing
322
 
 */
323
 
 
324
 
.clear {
325
 
        clear: both;
326
 
}
327
 
.clearfix:after, .container:after {
328
 
  content: "\0020";
329
 
  display: block;
330
 
  height: 0;
331
 
  clear: both;
332
 
  visibility: hidden;
333
 
  overflow:hidden;
334
 
}
335
 
.clearfix {
336
 
        display: block;
337
 
}