← Back to branch summary

~fougner/+junk/light-django-linaro-theme-new-design

« back to all changes in this revision

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

  • Committer: Alexander Fougner
  • Date: 2012-03-23 22:38:31 UTC
  • Revision ID: fougner89@gmail.com-20120323223831-voqt77dr44rfslj2
initial commit for porting to new design

Show diffs side-by-side

added added

removed removed

Lines of Context:
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
        padding:0 60px;
 
46
        width: 65.333em; /* 980px / 15px (baseline font); 980px + (60px x 2) = 1100px */
 
47
}
 
48
 
 
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
        padding: 0 1.333em; /* 20px / 15px */
 
55
        position: relative;
 
56
        width: 62.667em; /* 940px / 15px */
 
57
}
 
58
 
 
59
.row { /** Clear entire row. */
 
60
        clear: both;
 
61
        float: left;
 
62
        margin: 0;
 
63
        width: 100%;    
 
64
}
 
65
 
 
66
/**
 
67
 * Columns
 
68
 *
 
69
 * @section columns
 
70
 */
 
71
 
 
72
.span-3, .span-4, .span-6, .span-5, .span-7, .span-8, .span-9, .span-12 {
 
73
        clear: none;
 
74
        display: inline; /* HACK_IE_LTE_6: To fix IE 6 double margin bug. */
 
75
        float: left;
 
76
        margin: 0 1.333em 1.333em 0;
 
77
        padding: 0;
 
78
        position: relative;
 
79
}
 
80
 
 
81
.span-3 {
 
82
        width: 14.666em; /* 220px / 15px */
 
83
}
 
84
.span-4 {
 
85
        width: 20em; /* 300px / 15px */
 
86
}
 
87
.span-5 {
 
88
        width: 25.333em; /* 380px / 15px */
 
89
}
 
90
.span-6 {
 
91
        width: 30.666em; /* 460px / 15px */
 
92
}
 
93
.span-7 {
 
94
        width: 36em; /* 540px / 15px */
 
95
}
 
96
.span-8 {
 
97
        width: 41.333em; /* 620px / 15px */
 
98
}
 
99
.span-9 {
 
100
        width: 46.666em; /* 700px / 15px */
 
101
}
 
102
.span-12 { /** Full width. */
 
103
        width: 62.666em; /* 940px / 15px */
 
104
        margin-right: 0;
 
105
}
 
106
 
 
107
/**
 
108
 * Empty columns
 
109
 *
 
110
 * Add these to a column to append or prepend 
 
111
 * empty columns
 
112
 *
 
113
 * @section empty-columns
 
114
 */
 
115
 
 
116
.append-1 { padding-right: 5.333em; } /* 80px / 15px */
 
117
.append-2 { padding-right: 10.666em; } /* 160px / 15px */
 
118
.append-3 { padding-right: 16em; } /* 240px / 15px */
 
119
.append-4 { padding-right: 21.333em; } /* 320px / 15px */
 
120
.append-5 { padding-right: 26.666em; } /* 400px / 15px */
 
121
.append-6 { padding-right: 32em; } /* 480px / 15px */
 
122
.append-7 { padding-right: 37.333em; } /* 560px / 15px */
 
123
.append-8 { padding-right: 42.666em; } /* 640px / 15px */
 
124
.append-9 { padding-right: 48em; } /* 720px / 15px */
 
125
.append-10 { padding-right: 53.333em; } /* 800px / 15px */
 
126
.append-11 { padding-right: 58.666em; } /* 880px / 15px */
 
127
 
 
128
.prepend-1 { padding-left: 5.333em; }
 
129
.prepend-2 { padding-left: 10.666em; }
 
130
.prepend-3 { padding-left: 16em; }
 
131
.prepend-4 { padding-left: 21.333em; }
 
132
.prepend-5 { padding-left: 26.666em; }
 
133
.prepend-6 { padding-left: 32em; }
 
134
.prepend-7 { padding-left: 37.333em; }
 
135
.prepend-8 { padding-left: 42.666em; }
 
136
.prepend-9 { padding-left: 48em; }
 
137
.prepend-10 { padding-left: 53.333em; }
 
138
.prepend-11 { padding-left: 58.666em; }
 
139
 
 
140
/**
 
141
 * Borders
 
142
 *
 
143
 * @section borders
 
144
 */
 
145
 
 
146
.border { /** Border on right hand side of a column. */
 
147
  padding-right: .6em;
 
148
  margin-right: .666em;
 
149
  border-right: 1px solid #ddd;
 
150
}
 
151
 
 
152
/**
 
153
 * Push and pull
 
154
 *
 
155
 * Use these classes to push elements into the next 
 
156
 * column and pull it into the previous column
 
157
 *
 
158
 * @section push-pull
 
159
 */
 
160
 
 
161
.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11 {
 
162
        float: left;
 
163
        position: relative;
 
164
}
 
165
.pull-1 {
 
166
        margin-left: -5.333em;
 
167
}
 
168
.pull-2 {
 
169
        margin-left: -10.666em;
 
170
}
 
171
.pull-3 {
 
172
        margin-left: -16em;
 
173
}
 
174
.pull-4 {
 
175
        margin-left: -21.333em;
 
176
}
 
177
.pull-5 {
 
178
        margin-left: -26.666em;
 
179
}
 
180
.pull-6 {
 
181
        margin-left: -32em;
 
182
}
 
183
.pull-7 {
 
184
        margin-left: -37.333em;
 
185
}
 
186
.pull-8 {
 
187
        margin-left: -42.666em;
 
188
}
 
189
.pull-9 {
 
190
        margin-left: -48em;
 
191
}
 
192
.pull-10 {
 
193
        margin-left: -53.333em;
 
194
}
 
195
.pull-11 {
 
196
        margin-left: -58.666em;
 
197
}
 
198
 
 
199
.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11 {
 
200
        float: left;
 
201
        position: relative;
 
202
}
 
203
.push-1 {
 
204
        margin: 0 -6.666em 0 6.666em;
 
205
}
 
206
.push-2 {
 
207
        margin: 0 -12em 0 12em;
 
208
}
 
209
.push-3 {
 
210
        margin: 0 -17.333em 0 17.333em;
 
211
}
 
212
.push-4 {
 
213
        margin: 0 -22.666em 0 22.666em;
 
214
}
 
215
.push-5 {
 
216
        margin: 0 - 28em 0 28em;
 
217
}
 
218
.push-6 {
 
219
        margin: 0 -33.333em 0 33.333em;
 
220
}
 
221
.push-7 {
 
222
        margin: 0 -38.666em 0 38.666em;
 
223
}
 
224
.push-8 {
 
225
        margin: 0 -44em 0 44em;
 
226
}
 
227
.push-9 {
 
228
        margin: 0 -49.333em 0 49.333em;
 
229
}
 
230
.push-10 {
 
231
        margin: 0 -54.666em 0 54.666em;
 
232
}
 
233
.push-11 {
 
234
        margin: 0 -60em 0 60em;
 
235
}
 
236
 
 
237
/**
 
238
 * Vertical gutter
 
239
 *
 
240
 * Add a gutter above or below and element
 
241
 *
 
242
 * @section last
 
243
 */
 
244
 
 
245
div.prepend-top, .prepend-top {
 
246
  margin-top:1.333em;
 
247
}
 
248
div.append-bottom, .append-bottom {
 
249
  margin-bottom:1.333em;
 
250
}
 
251
 
 
252
/**
 
253
 * Last
 
254
 *
 
255
 * Add to last column a row
 
256
 *
 
257
 * @section last
 
258
 */
 
259
 
 
260
.last {
 
261
        margin-right: 0;
 
262
}
 
263
 
 
264
/**
 
265
 * Clearing
 
266
 *
 
267
 * Hard and soft clearing classes
 
268
 *
 
269
 * @section clearing
 
270
 */
 
271
 
 
272
.clear {
 
273
        clear: both;
 
274
}
 
275
.clearfix:after, .container:after {
 
276
  content: "\0020";
 
277
  display: block;
 
278
  height: 0;
 
279
  clear: both;
 
280
  visibility: hidden;
 
281
  overflow:hidden;
 
282
}
 
283
.clearfix {
 
284
        display: block;
 
285
}
 
 
b'\\ No newline at end of file'