ericam-compass-susy-plugin 0.4.1 → 0.5.0
Sign up to get free protection for your applications and to get access to all the features.
- data/README.mkdn +79 -6
- data/VERSION +1 -1
- data/compass-susy-plugin.gemspec +1 -1
- data/docs/tutorial/index.mkdn +42 -79
- data/sass/susy/_grid.sass +49 -26
- data/sass/susy/_susy.sass +4 -0
- data/sass/susy/_utils.sass +24 -3
- data/templates/project/_base.sass +39 -10
- data/templates/project/screen.sass +1 -1
- metadata +3 -2
data/README.mkdn
CHANGED
@@ -70,10 +70,12 @@ Grid Basics
|
|
70
70
|
grid.
|
71
71
|
|
72
72
|
* Use the `+columns` mixin to declare the width in columns of an element,
|
73
|
+
or `+full` for any element spanning the full width of its context.
|
73
74
|
|
74
75
|
* Use `+alpha` and `+omega` to declare elements which include the first or
|
75
76
|
last column within their parent element (`+full` to declare both `+alpha`
|
76
|
-
and `+omega`).
|
77
|
+
and `+omega`). Note: `+alpha` is actually only needed in the very top level,
|
78
|
+
and does nothing in nested contexts. Neither is needed on a `+full` element.
|
77
79
|
|
78
80
|
* Use `+prefix` or `+suffix` to give the width (in columns) of an elements
|
79
81
|
left or right margin, or `+pad` to give both `+prefix` and `+suffix` at
|
@@ -91,13 +93,11 @@ That's it for the basics! Here's a sample Susy grid layout:
|
|
91
93
|
+container
|
92
94
|
|
93
95
|
#brand
|
94
|
-
+columns(8)
|
95
|
-
+pad(1,1)
|
96
96
|
+full
|
97
|
+
+pad(1,1)
|
97
98
|
h1
|
98
|
-
+columns(5,8)
|
99
|
-
+pad(1,2,8)
|
100
99
|
+full(8)
|
100
|
+
+pad(1,2,8)
|
101
101
|
|
102
102
|
#nav
|
103
103
|
+columns(2)
|
@@ -108,7 +108,6 @@ That's it for the basics! Here's a sample Susy grid layout:
|
|
108
108
|
+omega
|
109
109
|
#description
|
110
110
|
+columns(5,8)
|
111
|
-
+alpha(8)
|
112
111
|
#credit
|
113
112
|
+columns(3,8)
|
114
113
|
+omega(8)
|
@@ -154,3 +153,77 @@ And then the fun stuff:
|
|
154
153
|
|
155
154
|
* `+box-shadow(!verticaloffset, !horizontaloffset, !blur, !color)` for
|
156
155
|
box-shadow in webkit and CSS3.
|
156
|
+
|
157
|
+
Advanced Options
|
158
|
+
================
|
159
|
+
|
160
|
+
Susy is built for flexibility, so that you always write the code you want to
|
161
|
+
write. While everything should 'just work' out of the box, there are plenty of
|
162
|
+
advanced options hidden inside. Here's a few:
|
163
|
+
|
164
|
+
* `!hacks` is a boolean constant that you can set in your base.sass file to
|
165
|
+
choose between using targeted hacks for IE (a variation of the star hack in
|
166
|
+
most cases) in your screen.css, or using a conditional-comment targeted
|
167
|
+
ie.css. All the needed mixins are available for either setting. `!hacks` is
|
168
|
+
true by default so there is no extra work maintaining multiple files unless
|
169
|
+
you want to.
|
170
|
+
|
171
|
+
Example 1:
|
172
|
+
|
173
|
+
!hacks = true
|
174
|
+
|
175
|
+
#nav
|
176
|
+
+inline-block-list
|
177
|
+
|
178
|
+
Example 2:
|
179
|
+
|
180
|
+
!hacks = false
|
181
|
+
|
182
|
+
(in screen.sass)
|
183
|
+
#nav
|
184
|
+
+inline-block-list
|
185
|
+
|
186
|
+
(in ie.sass)
|
187
|
+
#nav li
|
188
|
+
+ie-inline-block
|
189
|
+
|
190
|
+
It requires more maintenance on your part, but the result is a hack-free output.
|
191
|
+
|
192
|
+
The susy mixins that use either hacks or targeted mixins are `+omega`
|
193
|
+
('+ie-omega([!right-floated = false])'), `+inline-block` (`+ie-inline-block`), and
|
194
|
+
`+inline-block-list` which sets `+inline-block` on the list items.
|
195
|
+
|
196
|
+
These ie-specific mixins only add the needed ie-specific adjustments, so
|
197
|
+
they need to be used in addition to their counterparts, not on their own.
|
198
|
+
|
199
|
+
* `gutter(!context)` is a function that you can call at any time to return the
|
200
|
+
size of a gutter in your given context using percentages. The number is
|
201
|
+
returned without units so that you can perform math on it. In order to use
|
202
|
+
it, you will have to add "%" to it.
|
203
|
+
|
204
|
+
Example:
|
205
|
+
|
206
|
+
#nav
|
207
|
+
:padding-right= gutter(5) + "%"
|
208
|
+
|
209
|
+
* `columns(!number, !context)` returns the span of `!number` columns in
|
210
|
+
`!context` as a percentage (again without the units declared). This span
|
211
|
+
includes any gutters between the columns spanned.
|
212
|
+
|
213
|
+
Example:
|
214
|
+
|
215
|
+
#nav
|
216
|
+
:padding-left= columns(3,5) + "%"
|
217
|
+
|
218
|
+
* `side_gutter()` is also available and takes no arguments since it is always
|
219
|
+
used at the top nesting level.
|
220
|
+
|
221
|
+
* `px2em()` takes one numeric argument representing the number of pixels you
|
222
|
+
want to mimic. The return is an em value (with no units declared) that
|
223
|
+
approximates that number of pixels. Useful for keeping your entire design
|
224
|
+
fluid.
|
225
|
+
|
226
|
+
Example:
|
227
|
+
|
228
|
+
#nav
|
229
|
+
:border-bottom= px2em(2) + "em"
|
data/VERSION
CHANGED
@@ -1 +1 @@
|
|
1
|
-
0.
|
1
|
+
0.5.0
|
data/compass-susy-plugin.gemspec
CHANGED
data/docs/tutorial/index.mkdn
CHANGED
@@ -67,7 +67,8 @@ all your defaults.
|
|
67
67
|
|
68
68
|
To create a grid, set the `!grid_unit` (units that your grid is based in),
|
69
69
|
`!total_cols` (total number of columns in your grid), `!col_width` (width of
|
70
|
-
columns),
|
70
|
+
columns), `!gutter_width` (width of gutters), and `!side_gutter_width` (width
|
71
|
+
of side gutters) variables.
|
71
72
|
|
72
73
|
The default values are 16 columns, 4em column widths, 1em gutters and side
|
73
74
|
gutters that match the internal ones. But we want a 10 column grid, with 5em
|
@@ -96,43 +97,9 @@ The default values here are 12px fonts with an 18px line-height. For us:
|
|
96
97
|
|
97
98
|
`_base.sass` also has everything you need for setting default font families,
|
98
99
|
colors to reuse throughout, and default styles for all those elements that
|
99
|
-
ought have a default (but don't because of the reset).
|
100
|
-
|
101
|
-
|
102
|
-
most important defaults. We want some colors to choose from, and defaults for
|
103
|
-
links and paragraphs.
|
104
|
-
|
105
|
-
So let's add some colors:
|
106
|
-
|
107
|
-
!text = #332016
|
108
|
-
!light = #CC8866
|
109
|
-
!links = #4CAAC0
|
110
|
-
|
111
|
-
And style the links:
|
112
|
-
|
113
|
-
a
|
114
|
-
&:link, &:visited
|
115
|
-
:color= !links
|
116
|
-
:text-decoration none
|
117
|
-
&:focus, &:hover, &:active
|
118
|
-
:color= !light
|
119
|
-
:border-bottom
|
120
|
-
:width= px2em(2) + "em"
|
121
|
-
:style dashed
|
122
|
-
|
123
|
-
(Susy provides the convenience function `px2em`, which can approximate a pixel
|
124
|
-
value in ems, given our chosen `!base_font_size_px`. Here we want the dashed
|
125
|
-
bottom border to be 2 pixels wide at the default font size, but we size it in
|
126
|
-
ems - the result here will be .1429em. Susy's math functions return bare
|
127
|
-
numbers, so we add "em" ourselves).
|
128
|
-
|
129
|
-
And we'll add a bit of margin to our paragraphs:
|
130
|
-
|
131
|
-
p
|
132
|
-
:margin-bottom 1.5em
|
133
|
-
|
134
|
-
That's it. You can look around at the other defaults and set what you like, or
|
135
|
-
juse use [mine](../src/_base.sass).
|
100
|
+
ought have a default (but don't because of the reset). we're going to skip
|
101
|
+
that for now and play with the fun toys. You can look around at the other
|
102
|
+
defaults and set what you like, or juse use [mine](../src/_base.sass).
|
136
103
|
|
137
104
|
|
138
105
|
Making Semantic Grids
|
@@ -148,17 +115,19 @@ First the explanation:
|
|
148
115
|
building the grid shell, this sets your horizontal margins to auto (for
|
149
116
|
centered designs) and returns your text-alignment to "left". Change the
|
150
117
|
internal text alignment with an optional `left | center | right` argument.
|
151
|
-
|
118
|
+
|
152
119
|
* Use the `+columns` mixin to set the width (in columns) of a grid element.
|
153
120
|
The first argument is the number of columns to span, the second (optional)
|
154
|
-
argument is the width (in columns) of the containing element when
|
155
|
-
|
156
|
-
|
121
|
+
argument is the width (in columns) of the containing element when nesting.
|
122
|
+
If the element is not nested (its parent is the grid container), don't pass
|
123
|
+
a second argument. For an element that will span the full width (including
|
124
|
+
prefix and suffix), you can simply use `+full`, which takes one argument
|
125
|
+
of the context (in columns) when nested.
|
157
126
|
|
158
127
|
* Use the `+alpha` and `+omega` mixins to declare the first and last elements
|
159
|
-
in a row
|
160
|
-
|
161
|
-
element.
|
128
|
+
in a row. In a nested context `+omega` takes one argument repesenting its
|
129
|
+
context. `+alpha` is only needed in the very top level, and does nothing in
|
130
|
+
nested contexts. Neither one is needed on a `+full` element.
|
162
131
|
|
163
132
|
* Use the `+prefix` and `+suffix` mixins with one argument to add that many
|
164
133
|
grid columns as padding before or after a grid element. These mixins also
|
@@ -179,21 +148,16 @@ is so tempting and easy with Sass. It's part personal preference and part
|
|
179
148
|
Natalie Downe's voice in my head. Don't nest when you don't need to. It keeps
|
180
149
|
your output code much cleaner.
|
181
150
|
|
182
|
-
While we're at it, why don't we get the fonts
|
183
|
-
the start?
|
151
|
+
While we're at it, why don't we get the fonts going right from the start?
|
184
152
|
|
185
153
|
#page
|
186
154
|
+container
|
187
155
|
+sans-family
|
188
|
-
:color= !text
|
189
156
|
|
190
157
|
Perfect. Take a look at [the results](02_container/). So far we have:
|
191
158
|
|
192
159
|
* Reset everything. This happens by default in the background.
|
193
160
|
|
194
|
-
* Added a few of our own replacement default styles, like links, paragraphs,
|
195
|
-
fonts and colors.
|
196
|
-
|
197
161
|
* Created an elastic container for our grid at 70em that goes fluid for small
|
198
162
|
windows (try it!).
|
199
163
|
|
@@ -202,7 +166,7 @@ Laying Out The Components
|
|
202
166
|
--------------------------
|
203
167
|
|
204
168
|
It's time to lay out our grid components. We'll just work our way through the
|
205
|
-
|
169
|
+
HTML, starting with our brand header (#brand). We can refer back to our [target
|
206
170
|
site with a grid overlay](01_target/) to see what we need. Looks like our
|
207
171
|
branding gets an entire row to itself, with the content starting one row
|
208
172
|
in. For the sake of argument, let's say we want the header content contained
|
@@ -222,7 +186,8 @@ add:
|
|
222
186
|
+omega
|
223
187
|
|
224
188
|
Or we would have to, but there are several shortcuts available to us. To
|
225
|
-
declare something as both alpha and omega we can just declare it
|
189
|
+
declare something as full width (both alpha and omega) we can just declare it
|
190
|
+
as full:
|
226
191
|
|
227
192
|
+full
|
228
193
|
|
@@ -230,26 +195,24 @@ There is also a shorcut for prefix and suffix additions (+pad), so we can
|
|
230
195
|
simplify down to:
|
231
196
|
|
232
197
|
#brand
|
233
|
-
+columns(8)
|
234
|
-
+pad(1,1)
|
235
198
|
+full
|
199
|
+
+pad(1,1)
|
236
200
|
|
237
201
|
Since we don't have an image in there yet, let's move the text over to line up
|
238
202
|
with the future placement of our main content area. By turning the `h1` link
|
239
203
|
into a grid element and prefixing a padding of one column, we can move the
|
240
204
|
text without any effect on the image that will replace it (using the Compass
|
241
|
-
utility `+replace-text`, though I'll leave the implementation that as an
|
205
|
+
utility `+replace-text`, though I'll leave the implementation of that as an
|
242
206
|
exercise for you to figure out). To line it all up with the content below it,
|
243
207
|
we'll assign it 5 columns in a context of 8, with the extra 3 split between a
|
244
|
-
prefix of 1 and a suffix of 2 - giving it a full span.
|
208
|
+
prefix of 1 and a suffix of 2 - giving it a full span again. This time we are
|
209
|
+
nested and need to supply the context.
|
245
210
|
|
246
211
|
h1 a
|
247
|
-
+columns(5,8)
|
248
|
-
+pad(1,2,8)
|
249
212
|
+full(8)
|
213
|
+
+pad(1,2,8)
|
250
214
|
|
251
|
-
|
252
|
-
container (such as #brand in this case) *must not declare a context*. If you
|
215
|
+
Note: when not nested, you *must not declare a context*. If you
|
253
216
|
do, your side-gutters will be ignored. At every nested layer below that, even
|
254
217
|
if the context hasn't changed, you *must declare a context* or it will try to
|
255
218
|
add side-gutters again. That means even if you have one nested element
|
@@ -258,14 +221,18 @@ does not get a context but its descendants do, even where that context is the
|
|
258
221
|
same as the full page.
|
259
222
|
|
260
223
|
For example, these *will not work*:
|
261
|
-
|
224
|
+
|
225
|
+
/*because context is declared at the top level:*/
|
262
226
|
#page
|
263
227
|
+container
|
228
|
+
|
264
229
|
.inner
|
265
|
-
+columns(
|
266
|
-
|
230
|
+
+columns(8,10)
|
231
|
+
|
232
|
+
/*because context is not declared in a nested level:*/
|
267
233
|
#page
|
268
234
|
+container
|
235
|
+
|
269
236
|
.inner
|
270
237
|
+columns(10)
|
271
238
|
#brand
|
@@ -275,12 +242,11 @@ This *will work*:
|
|
275
242
|
|
276
243
|
#page
|
277
244
|
+container
|
245
|
+
|
278
246
|
.inner
|
279
247
|
+columns(10)
|
280
248
|
#brand
|
281
|
-
+columns(
|
282
|
-
|
283
|
-
Remember that if your side gutters or columns ever seem the wrong size.
|
249
|
+
+columns(8,10)
|
284
250
|
|
285
251
|
We're only worried about structure for now, so the header is done. Let's move
|
286
252
|
on to the navigation (#nav). The nav spans 2 columns, including the first
|
@@ -290,40 +256,37 @@ column in it's context.
|
|
290
256
|
+columns(2)
|
291
257
|
+alpha
|
292
258
|
|
293
|
-
Done. The content (
|
259
|
+
Done. The #content (which includes both #description and #credit)
|
294
260
|
spans the remaining 8 columns, including the last one.
|
295
261
|
|
296
262
|
#content
|
297
263
|
+columns(8)
|
298
264
|
+omega
|
299
265
|
|
300
|
-
Done. #description spans 5
|
301
|
-
|
266
|
+
Done. #description spans 5; #credit spans 3 including the last. Both are in a
|
267
|
+
nested context of 8, which we now need to pass on:
|
302
268
|
|
303
269
|
#description
|
304
270
|
+columns(5,8)
|
305
|
-
+alpha(8)
|
306
271
|
|
307
272
|
#credit
|
308
273
|
+columns(3,8)
|
309
274
|
+omega(8)
|
310
275
|
|
311
276
|
Done and done. All we have left is the footer (#site-info) spanning the full
|
312
|
-
width, but
|
277
|
+
width, but with two blank columns on the left:
|
313
278
|
|
314
279
|
#site-info
|
315
|
-
+columns(8)
|
316
|
-
+prefix(2)
|
317
280
|
+full
|
281
|
+
+prefix(2)
|
318
282
|
|
319
|
-
Nested in the footer are `.license` and `.styles`, so let's put them in
|
320
|
-
|
321
|
-
|
322
|
-
|
283
|
+
Nested in the footer are `.license` and `.styles`, so let's put them in place.
|
284
|
+
I'm going to say that each should match the width of the element visually
|
285
|
+
above it on the page. So .license will span 5 columns in its context of 8, and
|
286
|
+
.styles will span 3 including the last.
|
323
287
|
|
324
288
|
p.license
|
325
289
|
+columns(5,8)
|
326
|
-
+alpha(8)
|
327
290
|
p.styles
|
328
291
|
+columns(3,8)
|
329
292
|
+omega(8)
|
data/sass/susy/_grid.sass
CHANGED
@@ -50,44 +50,67 @@
|
|
50
50
|
=suffix(!n, !context = false)
|
51
51
|
:padding-right= columns(!n, !context) + gutter(!context) + "%"
|
52
52
|
|
53
|
+
//**
|
54
|
+
set as shortcut for prefix and suffix
|
55
|
+
=pad(!p = 0, !s = 0, !c = false)
|
56
|
+
@if !p != 0
|
57
|
+
+prefix(!p,!c)
|
58
|
+
@if !s != 0
|
59
|
+
+suffix(!s,!c)
|
60
|
+
|
53
61
|
//**
|
54
|
-
set on
|
55
|
-
|
62
|
+
set on any element spanning the first column in non-nested context
|
63
|
+
to take side-gutters into account
|
56
64
|
=alpha(!nested = false)
|
57
|
-
@if !nested
|
58
|
-
:margin-left 0
|
59
|
-
@else
|
65
|
+
@if !nested == false
|
60
66
|
:margin-left= side_gutter() + "%"
|
61
67
|
|
68
|
+
//**
|
69
|
+
when global constant !hacks == true:
|
70
|
+
- this will be called automatically with hacks
|
71
|
+
when global constant !hacks == false:
|
72
|
+
- you can call it yourself in ie.sass without the hacks
|
73
|
+
=ie-omega(!nested = false, !right = false, !hack = false)
|
74
|
+
!s = side_gutter()
|
75
|
+
@if !right
|
76
|
+
@if !hack
|
77
|
+
:#margin-left -1%
|
78
|
+
@else
|
79
|
+
:margin-left -1%
|
80
|
+
@else
|
81
|
+
@if !nested
|
82
|
+
@if !hack
|
83
|
+
:#margin-right -1%
|
84
|
+
@else
|
85
|
+
:margin-right -1%
|
86
|
+
@else
|
87
|
+
@if !hack
|
88
|
+
:#margin-right= !s - 1 + "%"
|
89
|
+
@else
|
90
|
+
:margin-right= !s - 1 + "%"
|
91
|
+
|
62
92
|
//**
|
63
93
|
set on the last element of a row to take side-gutters into account
|
64
94
|
- set !nested for nested columns
|
65
|
-
- set !
|
95
|
+
- set !float for right-floated omega elements
|
66
96
|
=omega(!nested = false, !right = false)
|
67
97
|
!s = side_gutter()
|
68
98
|
@if !nested
|
69
99
|
:margin-right 0
|
70
100
|
@else
|
71
101
|
:margin-right= !s + "%"
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
:#margin-right -1%
|
78
|
-
@else
|
79
|
-
:#margin-right= !s - 1 + "%"
|
80
|
-
|
102
|
+
@if !hacks
|
103
|
+
/* ugly hacks for IE6-7 */
|
104
|
+
+ie-omega(!nested, !right,"*")
|
105
|
+
/* end ugly hacks */
|
106
|
+
|
81
107
|
//**
|
82
108
|
set on an element that will span it's entire context
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
=
|
90
|
-
|
91
|
-
+prefix(!p,!c)
|
92
|
-
@if !s != 0
|
93
|
-
+suffix(!s,!c)
|
109
|
+
- no need for +columns, +alpha or +omega on a +full element
|
110
|
+
=full(!nested = false)
|
111
|
+
:clear both
|
112
|
+
+clearfix
|
113
|
+
@if !nested == false
|
114
|
+
!s = side_gutter() + "%"
|
115
|
+
margin-right= !s
|
116
|
+
margin-left= !s
|
data/sass/susy/_susy.sass
CHANGED
data/sass/susy/_utils.sass
CHANGED
@@ -13,18 +13,39 @@
|
|
13
13
|
div
|
14
14
|
:background rgba(0,0,0,.125)
|
15
15
|
|
16
|
+
//**
|
17
|
+
brings IE in line with inline-block display
|
18
|
+
- using hacks if called automatically because !hacks == true
|
19
|
+
- or without if you call it from ie.sass
|
20
|
+
=ie-inline-block(!hack = false)
|
21
|
+
@if !hack
|
22
|
+
/* ugly hacks for IE6-7 */
|
23
|
+
:#display inline
|
24
|
+
// fixes alignment against native input/button on IE6
|
25
|
+
:#vertical-align auto
|
26
|
+
/* end ugly hacks */
|
27
|
+
@else
|
28
|
+
:display inline
|
29
|
+
// fixes alignment against native input/button on IE6
|
30
|
+
:vertical-align auto
|
31
|
+
|
32
|
+
//**
|
33
|
+
an override for compass inline-block that lets you take advantage
|
34
|
+
of Susys !hacks constant. if true, hacks. if false, use ie-inline-block
|
35
|
+
to help ie along in your ie.sass
|
16
36
|
=inline-block
|
17
37
|
:display -moz-inline-box
|
18
38
|
:-moz-box-orient vertical
|
19
39
|
:display inline-block
|
20
40
|
:vertical-align middle
|
21
|
-
|
22
|
-
|
23
|
-
:#vertical-align auto
|
41
|
+
@if !hacks
|
42
|
+
+ie-inline-block("*")
|
24
43
|
|
25
44
|
//**
|
26
45
|
an inline-block list that works in IE
|
27
46
|
for those awkward moments when a floated horizontal list just wont cut it
|
47
|
+
if global !hacks == false:
|
48
|
+
- you'll need to fix list items in ie.sass with +ie-inline-block
|
28
49
|
=inline-block-list(!hpad = 0)
|
29
50
|
+horizontal-list-container
|
30
51
|
li
|
@@ -1,7 +1,7 @@
|
|
1
1
|
//**
|
2
2
|
// Susy: Elastic-Fluid grids without all the math
|
3
3
|
// by Eric Meyer and OddBird Collective
|
4
|
-
// oddbird.
|
4
|
+
// Site: www.oddbird.net/susy/
|
5
5
|
//**
|
6
6
|
|
7
7
|
//**
|
@@ -14,6 +14,14 @@
|
|
14
14
|
// !gutter_width = 1
|
15
15
|
// !side_gutter_width = !gutter_width
|
16
16
|
|
17
|
+
//**
|
18
|
+
HACKS
|
19
|
+
Are you using hacks or conditional comments? Susy makes both possible.
|
20
|
+
Leave this as 'true' to use hacks, set it as false for conditional comments.
|
21
|
+
Conditional comments will require overrides for +omega, +inline-block and
|
22
|
+
several other mixins.
|
23
|
+
!hacks = true
|
24
|
+
|
17
25
|
//**
|
18
26
|
FONT-SIZE
|
19
27
|
un-comment and override these values as needed (defaults are shown)
|
@@ -27,7 +35,6 @@
|
|
27
35
|
// (don't move this @import above the GRID and FONT-SIZE overrides)
|
28
36
|
@import susy/susy.sass
|
29
37
|
|
30
|
-
|
31
38
|
// COLORS
|
32
39
|
// set any colors you will need later
|
33
40
|
!dark = #000
|
@@ -41,18 +48,26 @@
|
|
41
48
|
=serif-family
|
42
49
|
:font-family 'Adobe Caslon Pro', 'Big Caslon', Garamond, 'Hoefler Text', 'Times New Roman', Times, serif
|
43
50
|
|
44
|
-
|
45
51
|
// Remember to add default styles to everything!
|
46
|
-
|
52
|
+
|
53
|
+
/* @group links */
|
54
|
+
|
47
55
|
\:focus
|
48
56
|
|
49
|
-
/* links
|
50
57
|
a
|
51
58
|
|
52
|
-
/*
|
59
|
+
/* @end */
|
60
|
+
|
61
|
+
|
62
|
+
/* @group headers */
|
63
|
+
|
53
64
|
h1, h2, h3, h4, h5, h6
|
54
65
|
|
55
|
-
/*
|
66
|
+
/* @end */
|
67
|
+
|
68
|
+
|
69
|
+
/* @group forms */
|
70
|
+
|
56
71
|
form
|
57
72
|
|
58
73
|
fieldset
|
@@ -65,7 +80,11 @@ input
|
|
65
80
|
|
66
81
|
input[type=submit]
|
67
82
|
|
68
|
-
/*
|
83
|
+
/* @end */
|
84
|
+
|
85
|
+
|
86
|
+
/* @group block tags */
|
87
|
+
|
69
88
|
p
|
70
89
|
|
71
90
|
=list-default(!ol = false)
|
@@ -84,7 +103,11 @@ ul
|
|
84
103
|
|
85
104
|
blockquote
|
86
105
|
|
87
|
-
/*
|
106
|
+
/* @end */
|
107
|
+
|
108
|
+
|
109
|
+
/* @group inline tags */
|
110
|
+
|
88
111
|
cite
|
89
112
|
|
90
113
|
em
|
@@ -99,5 +122,11 @@ ins
|
|
99
122
|
del
|
100
123
|
:text-decoration line-through
|
101
124
|
|
102
|
-
/*
|
125
|
+
/* @end */
|
126
|
+
|
127
|
+
|
128
|
+
/* @group replaced tags */
|
129
|
+
|
103
130
|
img
|
131
|
+
|
132
|
+
/* @end */
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: ericam-compass-susy-plugin
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.5.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Eric Meyer
|
@@ -67,6 +67,7 @@ files:
|
|
67
67
|
- compass-susy-plugin.gemspec
|
68
68
|
has_rdoc: false
|
69
69
|
homepage: http://github.com/ericam/compass-susy-plugin
|
70
|
+
licenses:
|
70
71
|
post_install_message:
|
71
72
|
rdoc_options:
|
72
73
|
- --line-numbers
|
@@ -92,7 +93,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
92
93
|
requirements: []
|
93
94
|
|
94
95
|
rubyforge_project: compass-susy-plugin
|
95
|
-
rubygems_version: 1.
|
96
|
+
rubygems_version: 1.3.5
|
96
97
|
signing_key:
|
97
98
|
specification_version: 3
|
98
99
|
summary: A Compass grid system plugin.
|