compass-susy-plugin 0.9.beta.3 → 0.9
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/CHANGELOG.mkdn +160 -0
- data/Manifest +2 -4
- data/README.mkdn +64 -74
- data/Rakefile +3 -3
- data/VERSION +1 -1
- data/compass-susy-plugin.gemspec +8 -8
- data/lib/susy.rb +4 -1
- data/sass/_susy.scss +3 -0
- data/sass/susy/_grid.scss +65 -46
- data/sass/susy/_susy.scss +3 -11
- data/templates/project/_base.scss +8 -24
- data/templates/project/manifest.rb +0 -1
- data/templates/project/screen.scss +4 -14
- metadata +11 -18
- data/lib/susy/compass_plugin.rb +0 -5
- data/sass/susy/_reset.scss +0 -9
- data/sass/susy/_utils.scss +0 -10
- data/templates/project/grid.png +0 -0
data/CHANGELOG.mkdn
ADDED
@@ -0,0 +1,160 @@
|
|
1
|
+
Susy Changelog
|
2
|
+
==============
|
3
|
+
|
4
|
+
v0.9 [Apr 25 2011]
|
5
|
+
------------------
|
6
|
+
|
7
|
+
Everything here is about simplicity. Susy has scaled back to it's most basic
|
8
|
+
function: providing flexible grids. That is all.
|
9
|
+
|
10
|
+
Deprecated:
|
11
|
+
|
12
|
+
* The `susy/susy` import is deprecated in favor of simply importing `susy`.
|
13
|
+
* The `show-grid` import is deprecated in favor of CSS3 gradient-based
|
14
|
+
grid-images. You can now use the `susy-grid-background` mixin. See below.
|
15
|
+
|
16
|
+
Removed:
|
17
|
+
|
18
|
+
* Susy no longer imports all of compass.
|
19
|
+
* Susy no longer establishes your baseline and no longer provides a reset.
|
20
|
+
All of that is in the Compass core. You can (and should!) keep using them, but
|
21
|
+
you will need to import them from compass.
|
22
|
+
|
23
|
+
New:
|
24
|
+
|
25
|
+
* Use the `susy-grid-background` mixin on any `container` to display the grid.
|
26
|
+
This toggles on and off with the same controls that are used by the compass
|
27
|
+
grid-background module.
|
28
|
+
|
29
|
+
v0.9.beta.3 [Mar 16 2011]
|
30
|
+
-------------------------
|
31
|
+
|
32
|
+
Deprecated:
|
33
|
+
|
34
|
+
* The `susy/reset` import has been deprecated in favor of the Compass core `compass/reset` import.
|
35
|
+
* The `susy` mixin has been deprecated. If you plan to continue using vertical-rhythms, you should replace it with the `establish-baseline` mixin from the Compass Core.
|
36
|
+
|
37
|
+
Removed:
|
38
|
+
|
39
|
+
* The `vertical-rhythm` module has moved into compass core. The API remains the same, but if you were importing it directly, you will have to update that import.
|
40
|
+
* The `defaults` template has been removed as 'out-of-scope'. This will not effect upgrading in any way, but new projects will not get a template with default styles.
|
41
|
+
|
42
|
+
New Features:
|
43
|
+
|
44
|
+
* Susy now supports RTL grids and bi-directional sites using the `$from-direction` variable (default: left) and an optional additional from-direction argument on all affected mixins. Thanks to @bangpound for the initial implementation.
|
45
|
+
* Susy is now written in pure Sass! No extra Ruby functions included! Thanks to the Sass team for making it possible.
|
46
|
+
|
47
|
+
v0.8.1 [Sep 24 2010]
|
48
|
+
--------------------
|
49
|
+
|
50
|
+
* Fixed typos in tutorial and `_defaults.scss`
|
51
|
+
|
52
|
+
v0.8.0 [Aug 13 2010]
|
53
|
+
--------------------
|
54
|
+
|
55
|
+
Deprecated:
|
56
|
+
|
57
|
+
* The `skip-link` was deprecated as it doesn't belong in Susy.
|
58
|
+
* All the IE-specific mixins have been deprecated, along with the `$hacks` variable. Hacks are now used in the default mixins as per Compass.
|
59
|
+
* The `hide` mixin was deprecated in favor of the Compass code `hide-text` mixin.
|
60
|
+
|
61
|
+
Other Changes:
|
62
|
+
|
63
|
+
* `inline-block-list` will be moved to the compass core soon. In preparation, I've cleaned it up some. You can now apply a padding of "0" to override previous padding arguments. You can also use `inline-block-list-container` and `inline-block-list-item` as you would with the Compass `horizontal-list` mixins.
|
64
|
+
* The `$align` arguments have been removed from both the `susy` and `container` mixins. Text-alignment is no longer used or needed in achieving page centering. That was a cary-over from the IE5 Mac days.
|
65
|
+
* The `container` mixin now uses the `pie-clearfix` compass mixin to avoid setting the overflow to hidden.
|
66
|
+
* Default styles have been cleaned up to account for better font stacks and typography, html5 elements, vertically-rhythmed forms, expanded print styles, use of `@extend`, and overall simplification.
|
67
|
+
|
68
|
+
v0.7.0 [Jun 01 2010]
|
69
|
+
--------------------
|
70
|
+
|
71
|
+
* updated documentation
|
72
|
+
|
73
|
+
v0.7.0.rc2 [May 13 2010]
|
74
|
+
------------------------
|
75
|
+
|
76
|
+
* Fixes a bug with grid.png and a typo in the readme. Nothing major here.
|
77
|
+
|
78
|
+
v0.7.0.rc1 [May 12 2010]
|
79
|
+
------------------------
|
80
|
+
|
81
|
+
* template cleanup & simplification - no more pushing CSSEdit comments, etc.
|
82
|
+
* expanded base and defaults with better fonts & styles out-of-the-box
|
83
|
+
* expanded readme documentation. This will expand out into a larger docs/tutorial site in the next week.
|
84
|
+
|
85
|
+
v0.7.0.pre8 [Apr 20 2010]
|
86
|
+
-------------------------
|
87
|
+
|
88
|
+
* mostly syntax and gem cleanup
|
89
|
+
* added `un-column` mixin to reset elements previously declared as columns.
|
90
|
+
* added `rhythm` mixin as shortcut for leaders/trailers. accepts 4 args: leader, padding-leader, padding-trailer, trailer.
|
91
|
+
* added a warning on `alpha` to remind you that `alpha` is not needed at nested levels.
|
92
|
+
|
93
|
+
v0.7.0.pre7 [Apr 13 2010]
|
94
|
+
-------------------------
|
95
|
+
|
96
|
+
* *Requires HAML 3 and Compass 0.10.0.rc2*
|
97
|
+
* Internal syntax switched to scss. This will have little or no effect on users. You can still use Susy with either (Sass/Scss) syntax.
|
98
|
+
* `$default-rhythm-border-style` overrides default rhythm border styles
|
99
|
+
* Better handling of sub-pixel rounding for IE6
|
100
|
+
|
101
|
+
v0.7.0.pre6 [Mar 29 2010]
|
102
|
+
-------------------------
|
103
|
+
|
104
|
+
* Added `+h-borders()` shortcut for vertical_rhythm `+horizontal-borders()`
|
105
|
+
* Fixed vertical rhythm font-size typo (thanks @oscarduignan)
|
106
|
+
* Added to template styles, so susy is already in place from the start
|
107
|
+
|
108
|
+
v0.7.0.pre5 [Mar 19 2010]
|
109
|
+
-------------------------
|
110
|
+
|
111
|
+
* Expanded and adjusted `_vertical_rhythm.sass` in ways that are not entirely backwards compatible. Check the file for details.
|
112
|
+
* `_defaults.sass` is re-ordered from inline to block.
|
113
|
+
* `:focus` defaults cleaned up.
|
114
|
+
* README and docs updated.
|
115
|
+
|
116
|
+
v0.7.0.pre4 [Jan 20 2010]
|
117
|
+
-------------------------
|
118
|
+
|
119
|
+
Update: pre2 was missing a file in the manifest. Use pre4.
|
120
|
+
|
121
|
+
*Update:* Forgot to note one change: `+susy` is no longer assigned to the `body` tag, but instead at the top level of the document (not nested under anything).
|
122
|
+
|
123
|
+
Warning: This update is not backwards compatible. We've changed some things. You'll have to change some things. Our changes were fairly major in cleaning up the code - yours will be minor and also clean up some code.
|
124
|
+
|
125
|
+
Added:
|
126
|
+
|
127
|
+
* new `_vertical_rhythm.sass` (thanks to Chris Eppstein) provides better establishing of the baseline grid, as well as mixins to help you manage it.
|
128
|
+
* `!px2em` has replaced `px2em()` - see below.
|
129
|
+
|
130
|
+
Removed:
|
131
|
+
|
132
|
+
* `px2em()` has been removed and replaced with a simple variable `!px2em` which returns the size of one pixel relative to your basic em-height. Multiply against your desired px dimensions (i.e. `border-width = !px2em*5px` will output the em-equivalent of 5px).
|
133
|
+
* `!base_font_size_px` and `!base_line_height_px` have been replaced with `!base_font_size` and `!base_line_height` which take advantage of sass's built-in unit handling.
|
134
|
+
* `!grid_units` is not needed, as you can now declare your units directly in the other grid `_width` variables. Use any one type of units in declaring your grid. The units you use will be used in setting the container size.
|
135
|
+
|
136
|
+
Once you've upgraded, before you compile your files, make these changes:
|
137
|
+
|
138
|
+
* remove the "_px" from the font-size and line-height variables, and add "px" to their values.
|
139
|
+
* remove the `!grid_units` variable and add units to your grid variable values.
|
140
|
+
* find any uses of `px2em()` and replace them with something.
|
141
|
+
* enjoy!
|
142
|
+
|
143
|
+
v0.7.0.pre1 [Nov 30 2009]
|
144
|
+
-------------------------
|
145
|
+
|
146
|
+
Not a lot of new functionality here – it all moved over to Compass 0.10.0 – mostly just cleaning it up to match.
|
147
|
+
|
148
|
+
* simplified the default styles and gave them their own project template (‘_defaults.sass’).
|
149
|
+
* defaults not imported by ‘ie.sass’, as ‘ie.sass’ should be cascading on top of ‘screen.sass’ anyway
|
150
|
+
* changed the syntax to match CSS and Compass (‘property:’ replaces ‘:property’)
|
151
|
+
* added more inline documentation and brought tutorial up to date
|
152
|
+
* moved CSS3 module over to Compass
|
153
|
+
* import the compass HTML5 reset along with the normal reset by default (because Susy loves the future)
|
154
|
+
* little internal management fixes and so on and so on…
|
155
|
+
|
156
|
+
older…
|
157
|
+
-------
|
158
|
+
|
159
|
+
* not documented here.
|
160
|
+
* check the commit log.
|
data/Manifest
CHANGED
@@ -1,3 +1,4 @@
|
|
1
|
+
CHANGELOG.mkdn
|
1
2
|
LICENSE.txt
|
2
3
|
Manifest
|
3
4
|
README.mkdn
|
@@ -5,12 +6,9 @@ Rakefile
|
|
5
6
|
VERSION
|
6
7
|
compass-susy-plugin.gemspec
|
7
8
|
lib/susy.rb
|
8
|
-
|
9
|
+
sass/_susy.scss
|
9
10
|
sass/susy/_grid.scss
|
10
|
-
sass/susy/_reset.scss
|
11
11
|
sass/susy/_susy.scss
|
12
|
-
sass/susy/_utils.scss
|
13
12
|
templates/project/_base.scss
|
14
|
-
templates/project/grid.png
|
15
13
|
templates/project/manifest.rb
|
16
14
|
templates/project/screen.scss
|
data/README.mkdn
CHANGED
@@ -1,35 +1,29 @@
|
|
1
|
-
Susy - Compass Plugin
|
1
|
+
Susy - Compass Plugin
|
2
2
|
=====================
|
3
3
|
|
4
4
|
Susy is a semantic CSS grid system for designers.
|
5
5
|
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
Using simple mixins, columns can be created, suffixed, prefixed, and nested -
|
19
|
-
always in flexible percentages and without touching your markup.
|
20
|
-
|
21
|
-
Install
|
6
|
+
Use Susy anywhere. Static sites, Rails sites, Django sites, PHP sites,
|
7
|
+
etc. You name it. Susy just helps you with the grid - whether you want it
|
8
|
+
fixed, fluid, elastic or Susy's specialty: fluid on the inside and elastic on
|
9
|
+
the outside. And Susy will do it all without ever touching your markup.
|
10
|
+
|
11
|
+
Built entirely native to [Compass](http://compass-style.org/), Susy is based
|
12
|
+
on the philosophy and techniques of [Natalie Downe](http://natbat.net/)'s
|
13
|
+
"[CSS Systems](http://natbat.net/2008/Sep/28/css-systems/)" - which introduces
|
14
|
+
difficult math in return for beautiful structure. Now Susy will do that math
|
15
|
+
for you and let you focus on your designs.
|
16
|
+
|
17
|
+
Install
|
22
18
|
=======
|
23
19
|
|
24
20
|
sudo gem install compass-susy-plugin
|
25
21
|
|
26
|
-
Create a Susy-based Compass Project
|
22
|
+
Create a Susy-based Compass Project
|
27
23
|
===================================
|
28
24
|
|
29
25
|
compass create <project name> -r susy -u susy
|
30
26
|
|
31
|
-
Then edit your `_base.scss` and `screen.scss` files accordingly.
|
32
|
-
|
33
27
|
Philosophy and Goals
|
34
28
|
====================
|
35
29
|
|
@@ -65,26 +59,26 @@ Grid Basics
|
|
65
59
|
|
66
60
|
* Set up your default grid values (total columns, column width, gutter width,
|
67
61
|
side gutter width) and important mixins in `_base.scss`.
|
68
|
-
|
62
|
+
|
69
63
|
Example:
|
70
|
-
|
64
|
+
|
71
65
|
$total-cols: 12; /* a 12-column grid */
|
72
|
-
$col-width: 4em; /* each column is 4em
|
73
|
-
$gutter-width: 1em; /* 1em
|
74
|
-
$side-gutter-width: $gutter-width; /* 1em
|
66
|
+
$col-width: 4em; /* each column is 4em wide */
|
67
|
+
$gutter-width: 1em; /* 1em gutters between columns */
|
68
|
+
$side-gutter-width: $gutter-width; /* 1em padding at the edges of the page as well */
|
75
69
|
|
76
|
-
* Create your grid in `screen.scss`: apply the `container` mixin to the
|
70
|
+
* Create your grid in `screen.scss`: apply the `container` mixin to the
|
77
71
|
element(s) that contains the page grid. This will set up your font sizes
|
78
72
|
and grid container.
|
79
73
|
|
80
74
|
Example:
|
81
|
-
|
75
|
+
|
82
76
|
#page {
|
83
|
-
@include container;
|
77
|
+
@include container;
|
84
78
|
}
|
85
|
-
|
79
|
+
|
86
80
|
CSS Output:
|
87
|
-
|
81
|
+
|
88
82
|
#page {
|
89
83
|
*zoom: 1;
|
90
84
|
margin: auto;
|
@@ -114,36 +108,36 @@ Grid Basics
|
|
114
108
|
considered to be in the "root" context. Any element within other grid
|
115
109
|
elements (with a nearest grid ancestor other than the `container`) is
|
116
110
|
considered to be in a "nested" context.
|
117
|
-
|
111
|
+
|
118
112
|
This is important because side-gutters are handled at the root level, as
|
119
113
|
margins on root grid elements. Margins that we don't want at nested levels.
|
120
114
|
It is also important because Susy grid elements are %-based, and so the
|
121
115
|
context is important to Susy's math. `Full` is simply a shortcut to replace
|
122
116
|
`columns` when the span should be the full width.
|
123
|
-
|
117
|
+
|
124
118
|
The `columns` mixin:
|
125
|
-
|
119
|
+
|
126
120
|
@include columns($span, [$context]);
|
127
|
-
|
121
|
+
|
128
122
|
The `full` mixin:
|
129
|
-
|
123
|
+
|
130
124
|
@include full([$context]);
|
131
125
|
|
132
126
|
*Note:* Context _must not_ be passed at the root level, and _must_ be passed at nested levels.
|
133
127
|
|
134
128
|
* Use `alpha` and `omega` to declare elements which include
|
135
129
|
the first or last column within their parent element.
|
136
|
-
|
130
|
+
|
137
131
|
*Note:* `alpha` is _only_ needed in the root level, and does
|
138
132
|
nothing in nested contexts. Neither is needed with an `full` element.
|
139
|
-
|
133
|
+
|
140
134
|
The `alpha` and `omega` mixins:
|
141
|
-
|
135
|
+
|
142
136
|
@include alpha;
|
143
137
|
@include omega([$context]);
|
144
|
-
|
138
|
+
|
145
139
|
Example Scss:
|
146
|
-
|
140
|
+
|
147
141
|
#page {
|
148
142
|
@include container;
|
149
143
|
header {
|
@@ -168,62 +162,60 @@ Grid Basics
|
|
168
162
|
}
|
169
163
|
}
|
170
164
|
}
|
171
|
-
|
165
|
+
|
172
166
|
Susy's CSS output uses floats to arrange the columns, widths to set the
|
173
167
|
spans, right-margins to set the getter, and both side margins to set the
|
174
168
|
side-gutters on root `alpha` and `omega` elements.
|
175
169
|
|
176
170
|
* Use `prefix` or `suffix` to pad (in columns) the width of
|
177
|
-
an element using left and right padding, or `pad` to give both `prefix` and
|
171
|
+
an element using left and right padding, or `pad` to give both `prefix` and
|
178
172
|
`@suffix` at once.
|
179
|
-
|
173
|
+
|
180
174
|
The `prefix`, `suffix` and `pad` mixins:
|
181
|
-
|
175
|
+
|
182
176
|
@include prefix($prefix-span [, $context])
|
183
177
|
@include prefix($suffix-span [, $context])
|
184
178
|
@include pad($prefix-span, $suffix-span [, $context])
|
185
|
-
|
179
|
+
|
186
180
|
Used with `full` these are subtractive, so the full width remains:
|
187
|
-
|
181
|
+
|
188
182
|
header {
|
189
183
|
@include full;
|
190
184
|
@prefix(2);
|
191
185
|
}
|
192
|
-
|
186
|
+
|
193
187
|
Will result in a full-width element, with 2 columns of padding to the left.
|
194
|
-
|
188
|
+
|
195
189
|
Used with `columns` these are addative, so the content width remains:
|
196
|
-
|
190
|
+
|
197
191
|
aside {
|
198
192
|
@include columns(3,9);
|
199
193
|
@prefix(3,9)
|
200
194
|
}
|
201
|
-
|
202
|
-
Will result in a 6-column element, with 3 of those columns used as padding
|
195
|
+
|
196
|
+
Will result in a 6-column element, with 3 of those columns used as padding
|
203
197
|
on the left.
|
204
198
|
|
205
199
|
That's it for the basics! Here's a sample Susy grid layout:
|
206
200
|
|
207
|
-
@include susy;
|
208
|
-
|
209
201
|
#page {
|
210
|
-
@include container;
|
202
|
+
@include container;
|
211
203
|
}
|
212
|
-
|
204
|
+
|
213
205
|
header {
|
214
206
|
@include full;
|
215
207
|
@include pad(1,1);
|
216
|
-
|
208
|
+
|
217
209
|
h1 {
|
218
210
|
@include full(10);
|
219
|
-
}
|
211
|
+
}
|
220
212
|
}
|
221
|
-
|
213
|
+
|
222
214
|
nav {
|
223
215
|
@include columns(3);
|
224
216
|
@include alpha;
|
225
217
|
}
|
226
|
-
|
218
|
+
|
227
219
|
#content {
|
228
220
|
@include columns(9);
|
229
221
|
@include omega;
|
@@ -241,14 +233,12 @@ Tutorial
|
|
241
233
|
|
242
234
|
Check out the tutorial at [susy.oddbird.net/tutorial/](http://susy.oddbird.net/tutorial/) for more details.
|
243
235
|
|
244
|
-
|
245
|
-
|
246
|
-
|
247
|
-
Extra utilities are included in Susy's `_utils.scss`:
|
248
|
-
|
249
|
-
* `show-grid($src)` - Repeat the specified grid image on an element.
|
250
|
-
Good for testing your baseline and grid.
|
236
|
+
Show your grids
|
237
|
+
===============
|
251
238
|
|
239
|
+
* `@include susy-grid-background` - For testing it can be helpful to see your
|
240
|
+
grid. Using CSS3 gradients, Susy will show you that grid - and it will flex
|
241
|
+
right along with your site.
|
252
242
|
|
253
243
|
Advanced Options
|
254
244
|
================
|
@@ -261,7 +251,7 @@ advanced options hidden inside. Here are a few:
|
|
261
251
|
size of a gutter in your given context as a percentage.
|
262
252
|
|
263
253
|
Example:
|
264
|
-
|
254
|
+
|
265
255
|
#nav {
|
266
256
|
padding-right: gutter(5);
|
267
257
|
}
|
@@ -272,19 +262,19 @@ advanced options hidden inside. Here are a few:
|
|
272
262
|
shortcut.
|
273
263
|
|
274
264
|
Example:
|
275
|
-
|
265
|
+
|
276
266
|
#nav {
|
277
267
|
padding-left: columns(3,5);
|
278
268
|
}
|
279
269
|
|
280
|
-
* `side_gutter()` returns the percentage width of a side-gutter and takes no
|
270
|
+
* `side_gutter()` returns the percentage width of a side-gutter and takes no
|
281
271
|
arguments since it can always used at the top nesting level.
|
282
272
|
|
283
|
-
Susy now also supports right-to-left and bi-directional documents. For a
|
284
|
-
simple toggle, set the default `$from-direction` (defaults to `left`). For
|
285
|
-
more specific control, you can pass an additional, localized `$from-direction`
|
286
|
-
|
273
|
+
Susy now also supports right-to-left and bi-directional documents. For a
|
274
|
+
simple toggle, set the default `$from-direction` (defaults to `left`). For
|
275
|
+
more specific control, you can pass an additional, localized `$from-direction`
|
276
|
+
argument to any of the Susy mixins that need to know:
|
287
277
|
|
288
|
-
* `columns`, `
|
278
|
+
* `columns`, `reset-column`
|
289
279
|
* `alpha`, `omega`
|
290
280
|
* `prefix`, `suffix`, `pad`
|
data/Rakefile
CHANGED
@@ -3,17 +3,17 @@ require 'sass'
|
|
3
3
|
|
4
4
|
begin
|
5
5
|
require 'echoe'
|
6
|
-
|
6
|
+
|
7
7
|
Echoe.new('compass-susy-plugin', open('VERSION').read) do |p|
|
8
8
|
p.summary = "A responsive grid system plugin for Compass."
|
9
9
|
p.description = "Responsive web design with grids the quick and reliable way."
|
10
10
|
p.url = "http://susy.oddbird.net/"
|
11
11
|
p.author = "Eric Meyer"
|
12
12
|
p.email = "eric@oddbird.net"
|
13
|
-
p.dependencies = ["compass >=0.11.
|
13
|
+
p.dependencies = ["compass >=0.11.1"]
|
14
14
|
p.has_rdoc = false
|
15
15
|
end
|
16
|
-
|
16
|
+
|
17
17
|
rescue LoadError => boom
|
18
18
|
puts "You are missing a dependency required for meta-operations on this gem."
|
19
19
|
puts "#{boom.to_s.capitalize}."
|
data/VERSION
CHANGED
@@ -1 +1 @@
|
|
1
|
-
0.9
|
1
|
+
0.9
|
data/compass-susy-plugin.gemspec
CHANGED
@@ -2,31 +2,31 @@
|
|
2
2
|
|
3
3
|
Gem::Specification.new do |s|
|
4
4
|
s.name = %q{compass-susy-plugin}
|
5
|
-
s.version = "0.9
|
5
|
+
s.version = "0.9"
|
6
6
|
|
7
7
|
s.required_rubygems_version = Gem::Requirement.new(">= 1.2") if s.respond_to? :required_rubygems_version=
|
8
8
|
s.authors = ["Eric Meyer"]
|
9
|
-
s.date = %q{2011-
|
9
|
+
s.date = %q{2011-04-25}
|
10
10
|
s.description = %q{Responsive web design with grids the quick and reliable way.}
|
11
11
|
s.email = %q{eric@oddbird.net}
|
12
|
-
s.extra_rdoc_files = ["
|
13
|
-
s.files = ["LICENSE.txt", "Manifest", "README.mkdn", "Rakefile", "VERSION", "compass-susy-plugin.gemspec", "lib/susy.rb", "
|
12
|
+
s.extra_rdoc_files = ["CHANGELOG.mkdn", "LICENSE.txt", "README.mkdn", "lib/susy.rb"]
|
13
|
+
s.files = ["CHANGELOG.mkdn", "LICENSE.txt", "Manifest", "README.mkdn", "Rakefile", "VERSION", "compass-susy-plugin.gemspec", "lib/susy.rb", "sass/_susy.scss", "sass/susy/_grid.scss", "sass/susy/_susy.scss", "templates/project/_base.scss", "templates/project/manifest.rb", "templates/project/screen.scss"]
|
14
14
|
s.homepage = %q{http://susy.oddbird.net/}
|
15
15
|
s.rdoc_options = ["--line-numbers", "--inline-source", "--title", "Compass-susy-plugin", "--main", "README.mkdn"]
|
16
16
|
s.require_paths = ["lib"]
|
17
17
|
s.rubyforge_project = %q{compass-susy-plugin}
|
18
|
-
s.rubygems_version = %q{1.
|
18
|
+
s.rubygems_version = %q{1.7.2}
|
19
19
|
s.summary = %q{A responsive grid system plugin for Compass.}
|
20
20
|
|
21
21
|
if s.respond_to? :specification_version then
|
22
22
|
s.specification_version = 3
|
23
23
|
|
24
24
|
if Gem::Version.new(Gem::VERSION) >= Gem::Version.new('1.2.0') then
|
25
|
-
s.add_runtime_dependency(%q<compass>, [">= 0.11.
|
25
|
+
s.add_runtime_dependency(%q<compass>, [">= 0.11.1"])
|
26
26
|
else
|
27
|
-
s.add_dependency(%q<compass>, [">= 0.11.
|
27
|
+
s.add_dependency(%q<compass>, [">= 0.11.1"])
|
28
28
|
end
|
29
29
|
else
|
30
|
-
s.add_dependency(%q<compass>, [">= 0.11.
|
30
|
+
s.add_dependency(%q<compass>, [">= 0.11.1"])
|
31
31
|
end
|
32
32
|
end
|
data/lib/susy.rb
CHANGED
@@ -1 +1,4 @@
|
|
1
|
-
require
|
1
|
+
require 'compass'
|
2
|
+
Compass::Frameworks.register('susy',
|
3
|
+
:stylesheets_directory => File.join(File.dirname(__FILE__), '..', 'sass'),
|
4
|
+
:templates_directory => File.join(File.dirname(__FILE__), '..', 'templates'))
|
data/sass/_susy.scss
ADDED
data/sass/susy/_grid.scss
CHANGED
@@ -1,24 +1,26 @@
|
|
1
|
-
|
1
|
+
// Imports -------------------------------------------------------------------
|
2
|
+
|
3
|
+
@import "compass/utilities/general/clearfix";
|
4
|
+
@import "compass/utilities/general/float";
|
5
|
+
@import "compass/layout/grid-background";
|
2
6
|
|
3
7
|
// Variables -----------------------------------------------------------------
|
4
8
|
|
5
9
|
// Your basic settings for the grid.
|
6
|
-
// Override these in base.sass to customize your site.
|
7
10
|
$total-cols : 12 !default;
|
8
11
|
$col-width : 4em !default;
|
9
12
|
$gutter-width : 1em !default;
|
10
13
|
$side-gutter-width : $gutter-width !default;
|
11
14
|
|
12
15
|
// Controls for right-to-left or bi-directional sites.
|
13
|
-
// You can override these case-by-case as needed for bi-directional sites.
|
14
16
|
$from-direction : left !default;
|
15
17
|
|
16
|
-
//
|
18
|
+
// The direction that +omega elements are floated by deafult.
|
17
19
|
$omega-float : opposite-position($from-direction) !default;
|
18
20
|
|
19
21
|
// Functions -----------------------------------------------------------------
|
20
22
|
|
21
|
-
// Return the width of 'n' columns plus 'n - 1' gutters
|
23
|
+
// Return the width of 'n' columns plus 'n - 1' gutters
|
22
24
|
// plus page padding in non-nested contexts
|
23
25
|
@function columns-width(
|
24
26
|
$n: false
|
@@ -43,7 +45,7 @@ $omega-float : opposite-position($from-direction) !default;
|
|
43
45
|
|
44
46
|
// Return the percentage width of 'n' columns in a context of 'c'
|
45
47
|
@function columns(
|
46
|
-
$n,
|
48
|
+
$n,
|
47
49
|
$c: false
|
48
50
|
) {
|
49
51
|
$columns: percent-width(columns-width($n), columns-width($c));
|
@@ -76,7 +78,7 @@ $omega-float : opposite-position($from-direction) !default;
|
|
76
78
|
|
77
79
|
// Base Mixin ----------------------------------------------------------------
|
78
80
|
|
79
|
-
// Set
|
81
|
+
// Set the outer grid-containing element(s).
|
80
82
|
@mixin container() {
|
81
83
|
@include pie-clearfix;
|
82
84
|
margin: auto;
|
@@ -94,8 +96,8 @@ $omega-float : opposite-position($from-direction) !default;
|
|
94
96
|
// By default a grid-column is floated left with a right gutter.
|
95
97
|
// - Override those with +float("right"), +alpha or +omega
|
96
98
|
@mixin columns(
|
97
|
-
$n,
|
98
|
-
$context : false,
|
99
|
+
$n,
|
100
|
+
$context : false,
|
99
101
|
$from : $from-direction
|
100
102
|
) {
|
101
103
|
$to : opposite-position($from);
|
@@ -104,21 +106,26 @@ $omega-float : opposite-position($from-direction) !default;
|
|
104
106
|
// the width of the column is set as a percentage of the context
|
105
107
|
width: columns($n, $context);
|
106
108
|
// the right gutter is added as a percentage of the context
|
107
|
-
margin-#{$to}: gutter($context);
|
109
|
+
margin-#{$to}: gutter($context);
|
108
110
|
}
|
109
111
|
|
110
|
-
//
|
111
|
-
@mixin
|
112
|
+
// @include `reset-column` to reset a column element to default block behavior
|
113
|
+
@mixin reset-column(
|
112
114
|
$from : $from-direction
|
113
115
|
) {
|
114
116
|
$to : opposite-position($from);
|
115
|
-
float
|
116
|
-
display: block;
|
117
|
+
@include reset-float;
|
117
118
|
width: auto;
|
118
|
-
margin-#{$to}: auto;
|
119
|
+
margin-#{$to}: auto;
|
120
|
+
}
|
121
|
+
|
122
|
+
@mixin un-column(
|
123
|
+
$from : $from-direction
|
124
|
+
) {
|
125
|
+
@include reset-column($from);
|
119
126
|
}
|
120
127
|
|
121
|
-
//
|
128
|
+
// @include `full` on an element that will span it's entire context.
|
122
129
|
// There is no need for +columns, +alpha or +omega on a +full element.
|
123
130
|
@mixin full(
|
124
131
|
$nested: false
|
@@ -127,55 +134,56 @@ $omega-float : opposite-position($from-direction) !default;
|
|
127
134
|
@if not $nested {
|
128
135
|
margin: {
|
129
136
|
left: side-gutter();
|
130
|
-
right: side-gutter();
|
137
|
+
right: side-gutter();
|
131
138
|
}
|
132
|
-
}
|
139
|
+
}
|
133
140
|
}
|
134
141
|
|
135
142
|
// Padding Mixins ------------------------------------------------------------
|
136
143
|
|
137
|
-
//
|
138
|
-
// before or after.
|
144
|
+
// add empty colums as padding before an element.
|
139
145
|
@mixin prefix(
|
140
|
-
$n,
|
141
|
-
$context : false,
|
146
|
+
$n,
|
147
|
+
$context : false,
|
142
148
|
$from : $from-direction
|
143
149
|
) {
|
144
|
-
padding-#{$from}: columns($n, $context) + gutter($context);
|
150
|
+
padding-#{$from}: columns($n, $context) + gutter($context);
|
145
151
|
}
|
146
152
|
|
153
|
+
// add empty colums as padding after an element.
|
147
154
|
@mixin suffix(
|
148
|
-
$n,
|
149
|
-
$context : false,
|
155
|
+
$n,
|
156
|
+
$context : false,
|
150
157
|
$from : $from-direction
|
151
158
|
) {
|
152
159
|
$to : opposite-position($from);
|
153
|
-
padding-#{$to}: columns($n, $context) + gutter($context);
|
160
|
+
padding-#{$to}: columns($n, $context) + gutter($context);
|
154
161
|
}
|
155
162
|
|
156
|
-
//
|
163
|
+
// add empty colums as padding before and after an element.
|
157
164
|
@mixin pad(
|
158
|
-
$p : false,
|
159
|
-
$s : false,
|
160
|
-
$c : false,
|
165
|
+
$p : false,
|
166
|
+
$s : false,
|
167
|
+
$c : false,
|
161
168
|
$from : $from-direction
|
162
169
|
) {
|
163
170
|
@if $p {
|
164
|
-
@include prefix($p, $c, $from);
|
165
|
-
}
|
171
|
+
@include prefix($p, $c, $from);
|
172
|
+
}
|
166
173
|
@if $s {
|
167
|
-
@include suffix($s, $c, $from);
|
168
|
-
}
|
174
|
+
@include suffix($s, $c, $from);
|
175
|
+
}
|
169
176
|
}
|
170
177
|
|
171
178
|
// Alpha & Omega Mixins ------------------------------------------------------
|
179
|
+
// I recommend that you pass the actual nested contexts (when nested) rather
|
180
|
+
// than a true/false argument for the sake of consistency. Effect is the same,
|
181
|
+
// but your code will be much more readable.
|
172
182
|
|
173
|
-
//
|
174
|
-
//
|
175
|
-
// the actual nested contexts (when nested) rather than a true/false
|
176
|
-
// argument for the sake of consistency. Effect is the same.
|
183
|
+
// @include on any element spanning the first column in non-nested context to
|
184
|
+
// take side-gutters into account.
|
177
185
|
@mixin alpha(
|
178
|
-
$nested : false,
|
186
|
+
$nested : false,
|
179
187
|
$from : $from-direction
|
180
188
|
) {
|
181
189
|
@if not $nested {
|
@@ -185,24 +193,35 @@ $omega-float : opposite-position($from-direction) !default;
|
|
185
193
|
}
|
186
194
|
}
|
187
195
|
|
188
|
-
//
|
189
|
-
//
|
190
|
-
// columns. It is recommended that you pass the actual nested context when
|
191
|
-
// nested, rather than a true/false argument, for the sake of consistency.
|
192
|
-
// Effect is the same.
|
196
|
+
// @include on the last element of a row, in order to take side-gutters and
|
197
|
+
// the page edge into account. Set the $nested argument for nested columns.
|
193
198
|
@mixin omega(
|
194
|
-
$nested : false,
|
199
|
+
$nested : false,
|
195
200
|
$from : $from-direction
|
196
201
|
) {
|
197
202
|
$to : opposite-position($from);
|
198
203
|
$hack : opposite-position($omega-float);
|
199
204
|
$sg : 0;
|
200
205
|
@if not $nested {
|
201
|
-
$sg: side-gutter();
|
206
|
+
$sg: side-gutter();
|
202
207
|
}
|
203
208
|
@include float($omega-float);
|
204
209
|
margin-#{$to}: $sg;
|
205
210
|
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
|
206
211
|
#margin-#{$hack}: - $gutter-width;
|
207
212
|
}
|
213
|
+
}
|
214
|
+
|
215
|
+
// Susy Grid Backgrounds -----------------------------------------------------
|
216
|
+
|
217
|
+
@mixin susy-grid-background {
|
218
|
+
@include column-grid-background($total-cols, $col-width, $gutter-width, $side-gutter-width, $force-fluid: true);
|
219
|
+
}
|
220
|
+
|
221
|
+
@mixin show-grid($img:false) {
|
222
|
+
@warn "show-grid is deprecated in favor of susy-grid-background.";
|
223
|
+
@if $img {
|
224
|
+
@warn "show-grid and susy-grid-background no longer use any images or take any arguments.";
|
225
|
+
}
|
226
|
+
@include susy-grid-background;
|
208
227
|
}
|
data/sass/susy/_susy.scss
CHANGED
@@ -1,13 +1,5 @@
|
|
1
|
-
|
1
|
+
@warn "The 'susy/susy' import is deprecated. Instead: simply import 'susy'.";
|
2
2
|
|
3
|
-
//
|
4
|
-
@import "compass";
|
5
|
-
@import "utils";
|
6
|
-
@import "grid";
|
3
|
+
// Imports -------------------------------------------------------------------
|
7
4
|
|
8
|
-
@
|
9
|
-
@warn 'The Susy mixin has been deprecated and is no longer needed. If you
|
10
|
-
would like to keep using vertical-rhythms (now in compass core), you should
|
11
|
-
include the establish-baseline mixin instead.';
|
12
|
-
@include establish-baseline;
|
13
|
-
}
|
5
|
+
@import "grid";
|
@@ -1,28 +1,12 @@
|
|
1
|
-
|
2
|
-
// Susy: Un-obtrusive grids for designers
|
3
|
-
// By: Eric A. Meyer and OddBird
|
4
|
-
// Site: susy.oddbird.net
|
5
|
-
//**
|
1
|
+
// Imports -------------------------------------------------------------------
|
6
2
|
|
7
|
-
|
8
|
-
// Susy & Compass use HTML hacks to support IE 6 and 7. You can turn that off:
|
9
|
-
// $legacy-support-for-ie6 : false;
|
10
|
-
// $legacy-support-for-ie7 : false;
|
3
|
+
@import "susy";
|
11
4
|
|
12
|
-
//
|
5
|
+
// Grid ----------------------------------------------------------------------
|
13
6
|
|
14
|
-
$
|
15
|
-
$
|
7
|
+
$total-cols : 12;
|
8
|
+
$col-width : 4em;
|
9
|
+
$gutter-width : 1em;
|
10
|
+
$side-gutter-width : $gutter-width;
|
16
11
|
|
17
|
-
|
18
|
-
|
19
|
-
$total-cols : 12;
|
20
|
-
$col-width : 4em;
|
21
|
-
$gutter-width : 1em;
|
22
|
-
$side-gutter-width : $gutter-width;
|
23
|
-
|
24
|
-
// Don't move this @import above the GRID variables.
|
25
|
-
@import "susy/susy";
|
26
|
-
|
27
|
-
// Mixins --------------------------------------------------------------
|
28
|
-
// Include additional default settings, variables and mixins here.
|
12
|
+
$show-grid-backgrounds : true;
|
@@ -1,20 +1,10 @@
|
|
1
|
-
|
1
|
+
// Imports -------------------------------------------------------------------
|
2
2
|
|
3
|
-
// Imports --------------------------------------------------------------
|
4
|
-
|
5
|
-
@import "compass/reset";
|
6
3
|
@import "base";
|
7
4
|
|
8
|
-
/* Layout
|
9
|
-
|
10
|
-
// establish your vertical baseline grid.
|
11
|
-
// see the compass typography module for details on vertical rhythm.
|
12
|
-
@include establish-baseline;
|
5
|
+
/* Layout ------------------------------------------------------------------*/
|
13
6
|
|
14
|
-
// change '.container' to match your HTML container element
|
15
|
-
// or @extend it to apply multiple containers on your site.
|
16
7
|
.container {
|
17
8
|
@include container;
|
18
|
-
@include
|
19
|
-
|
20
|
-
/* Styles -------------------------------------------------------------- */
|
9
|
+
@include susy-grid-background;
|
10
|
+
}
|
metadata
CHANGED
@@ -1,14 +1,12 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: compass-susy-plugin
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
hash:
|
5
|
-
prerelease:
|
4
|
+
hash: 25
|
5
|
+
prerelease:
|
6
6
|
segments:
|
7
7
|
- 0
|
8
8
|
- 9
|
9
|
-
|
10
|
-
- 3
|
11
|
-
version: 0.9.beta.3
|
9
|
+
version: "0.9"
|
12
10
|
platform: ruby
|
13
11
|
authors:
|
14
12
|
- Eric Meyer
|
@@ -16,8 +14,7 @@ autorequire:
|
|
16
14
|
bindir: bin
|
17
15
|
cert_chain: []
|
18
16
|
|
19
|
-
date: 2011-
|
20
|
-
default_executable:
|
17
|
+
date: 2011-04-25 00:00:00 Z
|
21
18
|
dependencies:
|
22
19
|
- !ruby/object:Gem::Dependency
|
23
20
|
name: compass
|
@@ -27,13 +24,12 @@ dependencies:
|
|
27
24
|
requirements:
|
28
25
|
- - ">="
|
29
26
|
- !ruby/object:Gem::Version
|
30
|
-
hash:
|
27
|
+
hash: 49
|
31
28
|
segments:
|
32
29
|
- 0
|
33
30
|
- 11
|
34
|
-
-
|
35
|
-
|
36
|
-
version: 0.11.beta.3
|
31
|
+
- 1
|
32
|
+
version: 0.11.1
|
37
33
|
type: :runtime
|
38
34
|
version_requirements: *id001
|
39
35
|
description: Responsive web design with grids the quick and reliable way.
|
@@ -43,11 +39,12 @@ executables: []
|
|
43
39
|
extensions: []
|
44
40
|
|
45
41
|
extra_rdoc_files:
|
42
|
+
- CHANGELOG.mkdn
|
46
43
|
- LICENSE.txt
|
47
44
|
- README.mkdn
|
48
45
|
- lib/susy.rb
|
49
|
-
- lib/susy/compass_plugin.rb
|
50
46
|
files:
|
47
|
+
- CHANGELOG.mkdn
|
51
48
|
- LICENSE.txt
|
52
49
|
- Manifest
|
53
50
|
- README.mkdn
|
@@ -55,16 +52,12 @@ files:
|
|
55
52
|
- VERSION
|
56
53
|
- compass-susy-plugin.gemspec
|
57
54
|
- lib/susy.rb
|
58
|
-
-
|
55
|
+
- sass/_susy.scss
|
59
56
|
- sass/susy/_grid.scss
|
60
|
-
- sass/susy/_reset.scss
|
61
57
|
- sass/susy/_susy.scss
|
62
|
-
- sass/susy/_utils.scss
|
63
58
|
- templates/project/_base.scss
|
64
|
-
- templates/project/grid.png
|
65
59
|
- templates/project/manifest.rb
|
66
60
|
- templates/project/screen.scss
|
67
|
-
has_rdoc: true
|
68
61
|
homepage: http://susy.oddbird.net/
|
69
62
|
licenses: []
|
70
63
|
|
@@ -100,7 +93,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
100
93
|
requirements: []
|
101
94
|
|
102
95
|
rubyforge_project: compass-susy-plugin
|
103
|
-
rubygems_version: 1.
|
96
|
+
rubygems_version: 1.7.2
|
104
97
|
signing_key:
|
105
98
|
specification_version: 3
|
106
99
|
summary: A responsive grid system plugin for Compass.
|
data/lib/susy/compass_plugin.rb
DELETED
@@ -1,5 +0,0 @@
|
|
1
|
-
options = Hash.new
|
2
|
-
options[:stylesheets_directory] = File.expand_path(File.join(File.dirname(__FILE__), '..', '..', 'sass'))
|
3
|
-
options[:templates_directory] = File.expand_path(File.join(File.dirname(__FILE__), '..', '..', 'templates'))
|
4
|
-
|
5
|
-
Compass::Frameworks.register('susy', options)
|
data/sass/susy/_reset.scss
DELETED
@@ -1,9 +0,0 @@
|
|
1
|
-
//** Susy Reset **//
|
2
|
-
|
3
|
-
@warn 'The Susy reset is deprecated, as it is now identical to the core Compass
|
4
|
-
reset. It will be removed in the near future. Please change your import from
|
5
|
-
susy/reset to compass/reset.';
|
6
|
-
|
7
|
-
/* Reset --------------------------------------------------------------*/
|
8
|
-
|
9
|
-
@import "compass/reset";
|
data/sass/susy/_utils.scss
DELETED
data/templates/project/grid.png
DELETED
Binary file
|