adrianss-compass-oocss-plugin 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/LICENSE +20 -0
- data/OOCSS-LICENSE +30 -0
- data/README +4 -0
- data/Rakefile +58 -0
- data/lib/compass-oocss-plugin.rb +2 -0
- data/lib/compass-oocss-plugin/compass_plugin.rb +5 -0
- data/lib/compass-oocss-plugin/sass_extensions.rb +10 -0
- data/sass/oocss/_content.sass +271 -0
- data/sass/oocss/_fonts.sass +29 -0
- data/sass/oocss/_grids.sass +113 -0
- data/sass/oocss/_grids_debug.sass +46 -0
- data/sass/oocss/_libraries.sass +3 -0
- data/sass/oocss/_mod.sass +110 -0
- data/sass/oocss/_mod_debug.sass +23 -0
- data/sass/oocss/_mod_skins.sass +414 -0
- data/sass/oocss/_reset.sass +61 -0
- data/sass/oocss/_talk.sass +76 -0
- data/sass/oocss/_talk_skins.sass +55 -0
- data/sass/oocss/_template.sass +81 -0
- data/sass/oocss/_template_debug.sass +15 -0
- data/spec/compass-oocss-plugin_spec.rb +58 -0
- data/spec/grids_system_spec.rb +113 -0
- data/spec/sass_extensions_spec.rb +24 -0
- data/spec/spec_helper.rb +4 -0
- data/spec/support/command_line_helper.rb +102 -0
- data/spec/support/test_case_helper.rb +63 -0
- data/spec/template_system_spec.rb +81 -0
- data/templates/project/ie6.sass +1 -0
- data/templates/project/ie7.sass +1 -0
- data/templates/project/manifest.rb +6 -0
- data/templates/project/partials/_ie6hacks.sass +1 -0
- data/templates/project/partials/_ie7hacks.sass +1 -0
- data/templates/project/print.sass +0 -0
- data/templates/project/screen.sass +9 -0
- metadata +116 -0
@@ -0,0 +1,46 @@
|
|
1
|
+
// grids debug
|
2
|
+
|
3
|
+
=scaffold_grids_debug
|
4
|
+
/* grids debug
|
5
|
+
.line
|
6
|
+
background-color: #e2e2e2
|
7
|
+
|
8
|
+
|
9
|
+
.size1of1
|
10
|
+
background-color: pink
|
11
|
+
|
12
|
+
|
13
|
+
.size1of2
|
14
|
+
background-color: red
|
15
|
+
|
16
|
+
|
17
|
+
.size1of3
|
18
|
+
background-color: orange
|
19
|
+
|
20
|
+
|
21
|
+
.size2of3
|
22
|
+
background-color: yellow
|
23
|
+
|
24
|
+
|
25
|
+
.size1of4
|
26
|
+
background-color: lime
|
27
|
+
|
28
|
+
|
29
|
+
.size3of4
|
30
|
+
background-color: green
|
31
|
+
|
32
|
+
|
33
|
+
.size1of5
|
34
|
+
background-color: aqua
|
35
|
+
|
36
|
+
|
37
|
+
.size2of5
|
38
|
+
background-color: blue
|
39
|
+
|
40
|
+
|
41
|
+
.size3of5
|
42
|
+
background-color: purple
|
43
|
+
|
44
|
+
|
45
|
+
.size4of5
|
46
|
+
background-color: magenta
|
@@ -0,0 +1,110 @@
|
|
1
|
+
|
2
|
+
|
3
|
+
=mod_scaffold
|
4
|
+
/*
|
5
|
+
Copyright (c) 2009, Nicole Sullivan. All rights reserved.
|
6
|
+
Code licensed under the BSD License:
|
7
|
+
version: 0.2
|
8
|
+
|
9
|
+
/* **************** BLOCK STRUCTURES *****************
|
10
|
+
/* mod
|
11
|
+
.mod
|
12
|
+
margin: 10px
|
13
|
+
.inner
|
14
|
+
/*background: url(skin/transparent.png) repeat left top;
|
15
|
+
|
16
|
+
.hd, .bd, .ft
|
17
|
+
overflow: hidden
|
18
|
+
_overflow: visible
|
19
|
+
_zoom: 1
|
20
|
+
|
21
|
+
.inner
|
22
|
+
position: relative
|
23
|
+
|
24
|
+
b
|
25
|
+
display: block
|
26
|
+
background-repeat: no-repeat
|
27
|
+
font-size: 1%
|
28
|
+
position: relative
|
29
|
+
z-index: 10
|
30
|
+
|
31
|
+
.tl, .tr, .bl, .br
|
32
|
+
height: 10px
|
33
|
+
width: 10px
|
34
|
+
float: left
|
35
|
+
|
36
|
+
.tl
|
37
|
+
background-position: left top
|
38
|
+
|
39
|
+
.tr
|
40
|
+
background-position: right top
|
41
|
+
|
42
|
+
.bl
|
43
|
+
background-position: left bottom
|
44
|
+
|
45
|
+
.br
|
46
|
+
background-position: right bottom
|
47
|
+
float: right
|
48
|
+
|
49
|
+
.tr
|
50
|
+
float: right
|
51
|
+
overflow: hidden
|
52
|
+
margin-bottom: -32000px
|
53
|
+
|
54
|
+
.tl
|
55
|
+
overflow: hidden
|
56
|
+
/* margin bottom needs to be < -9px
|
57
|
+
margin-bottom: -32000px
|
58
|
+
|
59
|
+
.bl, .br
|
60
|
+
margin-top: -10px
|
61
|
+
|
62
|
+
.top
|
63
|
+
background-position: center top
|
64
|
+
|
65
|
+
.bottom
|
66
|
+
background-position: center bottom
|
67
|
+
/* this zoom required for IE5.5 only
|
68
|
+
_zoom: 1
|
69
|
+
|
70
|
+
|
71
|
+
/* complex
|
72
|
+
.complex
|
73
|
+
overflow: hidden
|
74
|
+
*position: relative
|
75
|
+
/* position/zoom required for IE7, 6, 5.5
|
76
|
+
*zoom: 1
|
77
|
+
|
78
|
+
.tl, .tr
|
79
|
+
height: 32000px
|
80
|
+
margin-bottom: -32000px
|
81
|
+
width: 10px
|
82
|
+
|
83
|
+
.bl, .br
|
84
|
+
/*margin-top:0;
|
85
|
+
|
86
|
+
.top, .bottom
|
87
|
+
height: 5px
|
88
|
+
/*margin-top:-10px;
|
89
|
+
|
90
|
+
|
91
|
+
/* pop
|
92
|
+
.pop
|
93
|
+
overflow: visible
|
94
|
+
margin: 10px 20px 20px 10px
|
95
|
+
background-position: left top
|
96
|
+
|
97
|
+
.inner
|
98
|
+
right: -10px
|
99
|
+
bottom: -10px
|
100
|
+
background-position: right bottom
|
101
|
+
padding: 0 10px 10px 0
|
102
|
+
|
103
|
+
.tl, .br
|
104
|
+
display: none
|
105
|
+
|
106
|
+
.bl
|
107
|
+
bottom: -10px
|
108
|
+
|
109
|
+
.tr
|
110
|
+
right: -10px
|
@@ -0,0 +1,23 @@
|
|
1
|
+
// debug modules
|
2
|
+
|
3
|
+
/* debug modules
|
4
|
+
.top, .bottom
|
5
|
+
background-color: #e2e2e2
|
6
|
+
|
7
|
+
.tl
|
8
|
+
background-color: red
|
9
|
+
|
10
|
+
.tr
|
11
|
+
background-color: orange
|
12
|
+
|
13
|
+
.bl
|
14
|
+
background-color: yellow
|
15
|
+
|
16
|
+
.br
|
17
|
+
background-color: lime
|
18
|
+
|
19
|
+
.mod
|
20
|
+
background-color: purple
|
21
|
+
|
22
|
+
.inner
|
23
|
+
background-color: #E20074
|
@@ -0,0 +1,414 @@
|
|
1
|
+
!skin_dir ||= "skin"
|
2
|
+
!mod_dir ||= "mod"
|
3
|
+
!skin_mod_dir ||= "#{!skin_dir}/#{!mod_dir}"
|
4
|
+
|
5
|
+
|
6
|
+
=mod_skins_scaffold
|
7
|
+
/*
|
8
|
+
**************** BLOCK SKINS *****************
|
9
|
+
====== Contour blocks ======
|
10
|
+
remove background-image:" to default to square corners for IE
|
11
|
+
|
12
|
+
/* ----- simple (extends mod) -----
|
13
|
+
.simple
|
14
|
+
.inner
|
15
|
+
border: 1px solid #D7D7D7
|
16
|
+
/*-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px;
|
17
|
+
|
18
|
+
b
|
19
|
+
background-image= "url(#{!skin_mod_dir}/simple_corners.png)"
|
20
|
+
|
21
|
+
/* ----- basic (extends mod) -----
|
22
|
+
.basic
|
23
|
+
.inner
|
24
|
+
/*-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px;
|
25
|
+
|
26
|
+
b
|
27
|
+
background-image= "url(#{!skin_mod_dir}/round.png)"
|
28
|
+
|
29
|
+
/* ----- simpleExt (extends mod)
|
30
|
+
.simpleExt
|
31
|
+
border: 1px solid #c7c7c7
|
32
|
+
/*-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px;
|
33
|
+
|
34
|
+
.inner
|
35
|
+
border: 1px solid #c7c7c7
|
36
|
+
border-color: #fff
|
37
|
+
border-width: 4px
|
38
|
+
/*-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px;
|
39
|
+
|
40
|
+
b
|
41
|
+
background-image= "url(#{!skin_mod_dir}/simple_extended.png)"
|
42
|
+
|
43
|
+
.tl
|
44
|
+
left: -1px
|
45
|
+
top: -1px
|
46
|
+
height: 12px
|
47
|
+
width: 12px
|
48
|
+
|
49
|
+
.tr
|
50
|
+
right: -1px
|
51
|
+
top: -1px
|
52
|
+
height: 12px
|
53
|
+
width: 12px
|
54
|
+
|
55
|
+
.bl
|
56
|
+
left: -1px
|
57
|
+
bottom: -1px
|
58
|
+
height: 12px
|
59
|
+
width: 12px
|
60
|
+
margin-top: -12px
|
61
|
+
|
62
|
+
.br
|
63
|
+
right: -1px
|
64
|
+
bottom: -1px
|
65
|
+
height: 12px
|
66
|
+
width: 12px
|
67
|
+
margin-top: -12px
|
68
|
+
|
69
|
+
/* ----- me (extends mod) use for my comments -----
|
70
|
+
.me
|
71
|
+
border: 1px solid #909090
|
72
|
+
/*-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;
|
73
|
+
|
74
|
+
.inner
|
75
|
+
border: 1px solid #909090
|
76
|
+
border-color: #d76a84
|
77
|
+
/*-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;
|
78
|
+
|
79
|
+
b
|
80
|
+
background-image= "url(#{!skin_mod_dir}/me.png)"
|
81
|
+
|
82
|
+
.tl
|
83
|
+
left: -1px
|
84
|
+
top: -1px
|
85
|
+
|
86
|
+
.tr
|
87
|
+
right: -1px
|
88
|
+
top: -1px
|
89
|
+
|
90
|
+
.bl
|
91
|
+
left: -1px
|
92
|
+
bottom: -1px
|
93
|
+
|
94
|
+
.br
|
95
|
+
right: -1px
|
96
|
+
bottom: -1px
|
97
|
+
|
98
|
+
|
99
|
+
/* ----- noted (extends mod) -----
|
100
|
+
.noted
|
101
|
+
border: 1px solid #c2c2c2
|
102
|
+
/*-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;
|
103
|
+
|
104
|
+
.inner
|
105
|
+
border: 1px solid #c2c2c2
|
106
|
+
border-color: #eded68
|
107
|
+
/*-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;
|
108
|
+
|
109
|
+
b
|
110
|
+
background-image= "url(#{!skin_mod_dir}/noted.png)"
|
111
|
+
|
112
|
+
.tl
|
113
|
+
left: -1px
|
114
|
+
top: -1px
|
115
|
+
|
116
|
+
.tr
|
117
|
+
right: -1px
|
118
|
+
top: -1px
|
119
|
+
|
120
|
+
.bl
|
121
|
+
left: -1px
|
122
|
+
bottom: -1px
|
123
|
+
|
124
|
+
.br
|
125
|
+
right: -1px
|
126
|
+
bottom: -1px
|
127
|
+
|
128
|
+
|
129
|
+
/* ----- grab (extends mod) -----
|
130
|
+
.grab
|
131
|
+
/* can't be done w border radius
|
132
|
+
.inner
|
133
|
+
border: 3px solid #00477a
|
134
|
+
border-bottom-width: 10px
|
135
|
+
|
136
|
+
b
|
137
|
+
background-image= "url(#{!skin_mod_dir}/grab.png)"
|
138
|
+
|
139
|
+
.bl, .br
|
140
|
+
height: 16px
|
141
|
+
/*if height is set, margin set
|
142
|
+
margin-top: -16px
|
143
|
+
|
144
|
+
/* ----- faq (extends mod) -----
|
145
|
+
.faq
|
146
|
+
/* can't be done w border radius
|
147
|
+
.inner
|
148
|
+
border: 3px solid #b20029
|
149
|
+
border-bottom-width: 10px
|
150
|
+
|
151
|
+
b
|
152
|
+
background-image= "url(#{!skin_mod_dir}/faq.png)"
|
153
|
+
|
154
|
+
.bl, .br
|
155
|
+
height: 16px
|
156
|
+
/*if height is set, margin set
|
157
|
+
margin-top: -16px
|
158
|
+
|
159
|
+
/* ----- onlinestore (extends mod) -----
|
160
|
+
.onlinestore
|
161
|
+
.inner
|
162
|
+
border: 3px solid #9a9800
|
163
|
+
border-bottom-width: 10px
|
164
|
+
|
165
|
+
b
|
166
|
+
background-image= "url(#{!skin_mod_dir}/store.png)"
|
167
|
+
|
168
|
+
.bl, .br
|
169
|
+
height: 16px
|
170
|
+
margin-top: -16px
|
171
|
+
|
172
|
+
/* ----- about (extends mod) -----
|
173
|
+
.about
|
174
|
+
.inner
|
175
|
+
border: 3px solid #494949
|
176
|
+
border-bottom-width: 10px
|
177
|
+
|
178
|
+
b
|
179
|
+
background-image= "url(#{!skin_mod_dir}/about.png)"
|
180
|
+
|
181
|
+
.bl, .br
|
182
|
+
height: 16px
|
183
|
+
margin-top: -16px
|
184
|
+
|
185
|
+
/* ----- talk (extends mod) -----
|
186
|
+
.talk
|
187
|
+
border: 1px solid #c7c7c7
|
188
|
+
/*-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;
|
189
|
+
|
190
|
+
.inner
|
191
|
+
border: 1px solid #c7c7c7
|
192
|
+
border-color: #ededed
|
193
|
+
/*-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;
|
194
|
+
|
195
|
+
b
|
196
|
+
background-image= "url(#{!skin_mod_dir}/talk.png)"
|
197
|
+
|
198
|
+
.tl
|
199
|
+
left: -1px
|
200
|
+
top: -1px
|
201
|
+
|
202
|
+
.tr
|
203
|
+
right: -1px
|
204
|
+
top: -1px
|
205
|
+
|
206
|
+
.bl
|
207
|
+
left: -1px
|
208
|
+
bottom: -1px
|
209
|
+
|
210
|
+
.br
|
211
|
+
right: -1px
|
212
|
+
bottom: -1px
|
213
|
+
|
214
|
+
/* ----- photo (extends complex) -----
|
215
|
+
.photo
|
216
|
+
/*
|
217
|
+
muck with margins to change how the block will align with other blocks,
|
218
|
+
any value between 0-10px
|
219
|
+
|
220
|
+
.inner
|
221
|
+
border: solid 10px #fff
|
222
|
+
margin: 0 4px
|
223
|
+
|
224
|
+
b
|
225
|
+
background-image= "url(#{!skin_mod_dir}/photo.png)"
|
226
|
+
|
227
|
+
.tr, .tl
|
228
|
+
width: 20px
|
229
|
+
|
230
|
+
.top, .bottom
|
231
|
+
height: 4px
|
232
|
+
margin-top: 0px
|
233
|
+
|
234
|
+
.bl, .br
|
235
|
+
height: 16px
|
236
|
+
margin-top: -12px
|
237
|
+
|
238
|
+
/* ----- flow (extends complex) -----
|
239
|
+
.flow
|
240
|
+
margin: 6px
|
241
|
+
|
242
|
+
b
|
243
|
+
background-image= "url(#{!skin_mod_dir}/even.png)"
|
244
|
+
|
245
|
+
.inner
|
246
|
+
padding: 0 4px
|
247
|
+
|
248
|
+
.top
|
249
|
+
height: 4px
|
250
|
+
|
251
|
+
.bottom
|
252
|
+
height: 4px
|
253
|
+
margin-top: -4px
|
254
|
+
|
255
|
+
.br, .bl
|
256
|
+
margin-top: -6px
|
257
|
+
|
258
|
+
/* ----- shadow test (experimental attempt to match "flow" cross browser w no img)-----
|
259
|
+
.boo
|
260
|
+
-webkit-box-shadow: 0px 0px 1px rgba(0,0,0,33)
|
261
|
+
-moz-box-shadow: black 2px 2px 2px 2px
|
262
|
+
/*-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;
|
263
|
+
border: solid 1px #949494
|
264
|
+
background: #fff
|
265
|
+
|
266
|
+
/* ----- .excerpt (extends complex) -----
|
267
|
+
.excerpt
|
268
|
+
b
|
269
|
+
background-image= "url(#{!skin_mod_dir}/excerpt.png)"
|
270
|
+
|
271
|
+
.top
|
272
|
+
height: 1px
|
273
|
+
|
274
|
+
.bottom
|
275
|
+
/* margin top equal to - height of bottom
|
276
|
+
height: 6px
|
277
|
+
margin-top: -6px
|
278
|
+
|
279
|
+
.br, .bl
|
280
|
+
/* margin top = bottom height - corner height
|
281
|
+
height: 12px
|
282
|
+
margin-top: -6px
|
283
|
+
|
284
|
+
/* ----- sommers (extends pop) -----
|
285
|
+
.sommers
|
286
|
+
/*IE6 backup no alpha transparency
|
287
|
+
background-image= "url(#{!skin_mod_dir}/glow_7px.png)"
|
288
|
+
_background-image: none
|
289
|
+
margin: 3px 20px 20px 3px
|
290
|
+
|
291
|
+
.inner
|
292
|
+
_border: 3px solid #D7D7D7
|
293
|
+
background-image= "url(#{!skin_mod_dir}/glow_7px.png)"
|
294
|
+
_background-image: none
|
295
|
+
|
296
|
+
b
|
297
|
+
background-image= "url(#{!skin_mod_dir}/glow_7px.png)"
|
298
|
+
_background-image: none
|
299
|
+
|
300
|
+
/* ----- gonzalo -----
|
301
|
+
.gonzalo
|
302
|
+
background-image= "url(#{!skin_mod_dir}/gc.png)"
|
303
|
+
|
304
|
+
.inner, b
|
305
|
+
background-image= "url(#{!skin_mod_dir}/gc.png)"
|
306
|
+
|
307
|
+
|
308
|
+
/* ====== Background blocks ======
|
309
|
+
.sale .inner
|
310
|
+
background: red none
|
311
|
+
|
312
|
+
.nicole
|
313
|
+
.inner
|
314
|
+
background: #c01c41 none
|
315
|
+
color: #fff
|
316
|
+
|
317
|
+
*
|
318
|
+
color: #fff
|
319
|
+
|
320
|
+
.login *
|
321
|
+
color: #fff
|
322
|
+
|
323
|
+
.highlight .inner
|
324
|
+
background: #e3e36f none
|
325
|
+
|
326
|
+
.universe .inner
|
327
|
+
background= "url(#{!skin_mod_dir}/universe.png) repeat left top"
|
328
|
+
|
329
|
+
.foo .inner
|
330
|
+
background= "url(#{!skin_mod_dir}/universe_gray.png) repeat left top"
|
331
|
+
|
332
|
+
.login .inner
|
333
|
+
background= "url(#{!skin_mod_dir}/universe_login.png) repeat left top"
|
334
|
+
|
335
|
+
.comment .inner
|
336
|
+
background: #e2e2e2 none
|
337
|
+
|
338
|
+
|
339
|
+
/* ====== Block headers and footers ======
|
340
|
+
.hd
|
341
|
+
h1, h2, h3, h4, h5, h6
|
342
|
+
padding: 5px 10px
|
343
|
+
|
344
|
+
.section
|
345
|
+
background= "#e9e9e9 url(#{!skin_mod_dir}/header.png) repeat-x left bottom"
|
346
|
+
color: #de2c72
|
347
|
+
font-size: 120%
|
348
|
+
padding: 5px 10px
|
349
|
+
|
350
|
+
h1, h2, h3, h4, h5, h6
|
351
|
+
font-size: 100%
|
352
|
+
color: #de2c72
|
353
|
+
padding: 0
|
354
|
+
|
355
|
+
.act
|
356
|
+
background-color: #e9e9e9
|
357
|
+
|
358
|
+
.topper
|
359
|
+
background= "#fff url(#{!skin_mod_dir}/header_gradient_light.png) repeat-x left bottom"
|
360
|
+
color: #4D4D4D
|
361
|
+
font-size: 120%
|
362
|
+
padding: 5px 10px
|
363
|
+
|
364
|
+
h1, h2, h3, h4, h5, h6
|
365
|
+
font-size: 100%
|
366
|
+
color: #4D4D4D
|
367
|
+
padding: 0
|
368
|
+
|
369
|
+
.bam
|
370
|
+
background= "#00477a url(#{!skin_mod_dir}/header_glossy.png) repeat-x left top"
|
371
|
+
color: #fff
|
372
|
+
font-size: 120%
|
373
|
+
padding: 5px 10px
|
374
|
+
|
375
|
+
h1, h2, h3, h4, h5, h6
|
376
|
+
font-size: 100%
|
377
|
+
color: #fff
|
378
|
+
padding: 0
|
379
|
+
|
380
|
+
.gonz
|
381
|
+
background= "url(#{!skin_mod_dir}/gc_header.png) no-repeat left top"
|
382
|
+
|
383
|
+
.online
|
384
|
+
background= "#9a9400 url(#{!skin_mod_dir}/online.png) repeat-x left top"
|
385
|
+
color: #000
|
386
|
+
font-size: 120%
|
387
|
+
padding: 5px 10px
|
388
|
+
|
389
|
+
h1, h2, h3, h4, h5, h6
|
390
|
+
font-size: 100%
|
391
|
+
color: #000
|
392
|
+
padding: 0
|
393
|
+
|
394
|
+
.help
|
395
|
+
background= "#b20029 url(#{!skin_mod_dir}/help.png) repeat-x left top"
|
396
|
+
color: #fff
|
397
|
+
font-size: 120%
|
398
|
+
padding: 5px 10px
|
399
|
+
|
400
|
+
h1, h2, h3, h4, h5, h6
|
401
|
+
font-size: 100%
|
402
|
+
color: #fff
|
403
|
+
padding: 0
|
404
|
+
|
405
|
+
.info
|
406
|
+
background= "#636363 url(#{!skin_mod_dir}/info.png) repeat-x left top"
|
407
|
+
color: #fff
|
408
|
+
font-size: 120%
|
409
|
+
padding: 5px 10px
|
410
|
+
|
411
|
+
h1, h2, h3, h4, h5, h6
|
412
|
+
font-size: 100%
|
413
|
+
color: #fff
|
414
|
+
padding: 0
|