susy 1.0.alpha.0

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.
@@ -0,0 +1,206 @@
1
+ Susy Changelog
2
+ ==============
3
+
4
+ v1.0 [UNRELEASED]
5
+ -----------------
6
+
7
+ *Requires the latest unreleased master branch of Compass.*
8
+
9
+ This release is loaded with new features, but don't let that fool you. Susy
10
+ just became shockingly simple to use. See the README for updated usage details.
11
+
12
+ New Features:
13
+
14
+ * `omega` can now be set directly through the `columns` mixin for much
15
+ more compact output.
16
+ * Create responsive grid break-points using `at-breakpoint` and `layout`.
17
+ * `container` mixin now accepts one or more grids/breakpoints as a shortcut.
18
+ * All mixins respect your `$legacy-support-for-ie` settings.
19
+ * The `space` function can be used anywhere you need column+gutter math.
20
+ * `push`, `pull`, `pre`, `post`, and `squish` add margin left/right shortcuts.
21
+
22
+ Changed API:
23
+
24
+ * `$total-cols` => `$total-columns`
25
+ * `$col-width` => `$column-width`
26
+ * `$side-gutter-width` => `$grid-padding`
27
+ * `+un-column` & `+reset-column` => `+reset-columns`
28
+
29
+ Removed:
30
+
31
+ * `alpha` is no longer needed.
32
+ * `+omega` no longer accepts the `$context` argument.
33
+ * `full` can be replaced by a simple `clear: both;` when needed.
34
+ * `side-gutter()` is no longer needed. Use `$grid-padding` instead.
35
+
36
+ Upgrade:
37
+
38
+ 1. Find and replace the 4 simple "Changed API's" listed above.
39
+ 2. Remove the `$context` argument from all `omega` mixins.
40
+ 3. Remove any mention of `alpha` and `full` in your code.
41
+ * Replace `full` with `clear: both;` where necessary.
42
+ 4. Remove any mention of `side-gutter()`.
43
+ * This may require some refactoring, depending on your uses.
44
+ 5. [Optional] Any time 'columns' and 'omega' are declared in the same block,
45
+ they can now be joined together. `@include columns(3); @include omega();`
46
+ can become `@include columns(3 omega)`.
47
+
48
+ You're done! Stop worrying about all that "nested vs. root" bullshit, and start playing with the new toys!
49
+
50
+ v0.9 [Apr 25 2011]
51
+ ------------------
52
+
53
+ Everything here is about simplicity. Susy has scaled back to it's most basic
54
+ function: providing flexible grids. That is all.
55
+
56
+ Deprecated:
57
+
58
+ * The `susy/susy` import is deprecated in favor of simply importing `susy`.
59
+ * The `show-grid` import is deprecated in favor of CSS3 gradient-based
60
+ grid-images. You can now use the `susy-grid-background` mixin. See below.
61
+
62
+ Removed:
63
+
64
+ * Susy no longer imports all of compass.
65
+ * Susy no longer establishes your baseline and no longer provides a reset.
66
+ All of that is in the Compass core. You can (and should!) keep using them, but
67
+ you will need to import them from compass.
68
+
69
+ New:
70
+
71
+ * Use the `susy-grid-background` mixin on any `container` to display the grid.
72
+ This toggles on and off with the same controls that are used by the compass
73
+ grid-background module.
74
+
75
+ v0.9.beta.3 [Mar 16 2011]
76
+ -------------------------
77
+
78
+ Deprecated:
79
+
80
+ * The `susy/reset` import has been deprecated in favor of the Compass core `compass/reset` import.
81
+ * 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.
82
+
83
+ Removed:
84
+
85
+ * 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. (`$px2em` was removed as part of this, but didn't make it into core).
86
+ * 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.
87
+
88
+ New Features:
89
+
90
+ * 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.
91
+ * Susy is now written in pure Sass! No extra Ruby functions included! Thanks to the Sass team for making it possible.
92
+
93
+ v0.8.1 [Sep 24 2010]
94
+ --------------------
95
+
96
+ * Fixed typos in tutorial and `_defaults.scss`
97
+
98
+ v0.8.0 [Aug 13 2010]
99
+ --------------------
100
+
101
+ Deprecated:
102
+
103
+ * The `skip-link` was deprecated as it doesn't belong in Susy.
104
+ * All the IE-specific mixins have been deprecated, along with the `$hacks` variable. Hacks are now used in the default mixins as per Compass.
105
+ * The `hide` mixin was deprecated in favor of the Compass code `hide-text` mixin.
106
+
107
+ Other Changes:
108
+
109
+ * `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.
110
+ * 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.
111
+ * The `container` mixin now uses the `pie-clearfix` compass mixin to avoid setting the overflow to hidden.
112
+ * 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.
113
+
114
+ v0.7.0 [Jun 01 2010]
115
+ --------------------
116
+
117
+ * updated documentation
118
+
119
+ v0.7.0.rc2 [May 13 2010]
120
+ ------------------------
121
+
122
+ * Fixes a bug with grid.png and a typo in the readme. Nothing major here.
123
+
124
+ v0.7.0.rc1 [May 12 2010]
125
+ ------------------------
126
+
127
+ * template cleanup & simplification - no more pushing CSSEdit comments, etc.
128
+ * expanded base and defaults with better fonts & styles out-of-the-box
129
+ * expanded readme documentation. This will expand out into a larger docs/tutorial site in the next week.
130
+
131
+ v0.7.0.pre8 [Apr 20 2010]
132
+ -------------------------
133
+
134
+ * mostly syntax and gem cleanup
135
+ * added `un-column` mixin to reset elements previously declared as columns.
136
+ * added `rhythm` mixin as shortcut for leaders/trailers. accepts 4 args: leader, padding-leader, padding-trailer, trailer.
137
+ * added a warning on `alpha` to remind you that `alpha` is not needed at nested levels.
138
+
139
+ v0.7.0.pre7 [Apr 13 2010]
140
+ -------------------------
141
+
142
+ * *Requires HAML 3 and Compass 0.10.0.rc2*
143
+ * Internal syntax switched to scss. This will have little or no effect on users. You can still use Susy with either (Sass/Scss) syntax.
144
+ * `$default-rhythm-border-style` overrides default rhythm border styles
145
+ * Better handling of sub-pixel rounding for IE6
146
+
147
+ v0.7.0.pre6 [Mar 29 2010]
148
+ -------------------------
149
+
150
+ * Added `+h-borders()` shortcut for vertical_rhythm `+horizontal-borders()`
151
+ * Fixed vertical rhythm font-size typo (thanks @oscarduignan)
152
+ * Added to template styles, so susy is already in place from the start
153
+
154
+ v0.7.0.pre5 [Mar 19 2010]
155
+ -------------------------
156
+
157
+ * Expanded and adjusted `_vertical_rhythm.sass` in ways that are not entirely backwards compatible. Check the file for details.
158
+ * `_defaults.sass` is re-ordered from inline to block.
159
+ * `:focus` defaults cleaned up.
160
+ * README and docs updated.
161
+
162
+ v0.7.0.pre4 [Jan 20 2010]
163
+ -------------------------
164
+
165
+ Update: pre2 was missing a file in the manifest. Use pre4.
166
+
167
+ *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).
168
+
169
+ 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.
170
+
171
+ Added:
172
+
173
+ * new `_vertical_rhythm.sass` (thanks to Chris Eppstein) provides better establishing of the baseline grid, as well as mixins to help you manage it.
174
+ * `!px2em` has replaced `px2em()` - see below.
175
+
176
+ Removed:
177
+
178
+ * `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).
179
+ * `!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.
180
+ * `!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.
181
+
182
+ Once you've upgraded, before you compile your files, make these changes:
183
+
184
+ * remove the "_px" from the font-size and line-height variables, and add "px" to their values.
185
+ * remove the `!grid_units` variable and add units to your grid variable values.
186
+ * find any uses of `px2em()` and replace them with something.
187
+ * enjoy!
188
+
189
+ v0.7.0.pre1 [Nov 30 2009]
190
+ -------------------------
191
+
192
+ Not a lot of new functionality here – it all moved over to Compass 0.10.0 – mostly just cleaning it up to match.
193
+
194
+ * simplified the default styles and gave them their own project template (‘_defaults.sass’).
195
+ * defaults not imported by ‘ie.sass’, as ‘ie.sass’ should be cascading on top of ‘screen.sass’ anyway
196
+ * changed the syntax to match CSS and Compass (‘property:’ replaces ‘:property’)
197
+ * added more inline documentation and brought tutorial up to date
198
+ * moved CSS3 module over to Compass
199
+ * import the compass HTML5 reset along with the normal reset by default (because Susy loves the future)
200
+ * little internal management fixes and so on and so on…
201
+
202
+ older…
203
+ -------
204
+
205
+ * not documented here.
206
+ * check the commit log.
@@ -0,0 +1,28 @@
1
+ Copyright (c) 2011, Eric Meyer
2
+ All rights reserved.
3
+
4
+ Redistribution and use in source and binary forms, with or without
5
+ modification, are permitted provided that the following conditions are
6
+ met:
7
+
8
+ * Redistributions of source code must retain the above copyright
9
+ notice, this list of conditions and the following disclaimer.
10
+ * Redistributions in binary form must reproduce the above
11
+ copyright notice, this list of conditions and the following
12
+ disclaimer in the documentation and/or other materials provided
13
+ with the distribution.
14
+ * Neither the name of the author nor the names of other
15
+ contributors may be used to endorse or promote products derived
16
+ from this software without specific prior written permission.
17
+
18
+ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
19
+ "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
20
+ LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
21
+ A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
22
+ OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
23
+ SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
24
+ LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
25
+ DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
26
+ THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
27
+ (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
28
+ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
@@ -0,0 +1,20 @@
1
+ CHANGELOG.mkdn
2
+ LICENSE.txt
3
+ Manifest
4
+ README.mkdn
5
+ REFERENCE.mkdn
6
+ Rakefile
7
+ VERSION
8
+ lib/susy.rb
9
+ sass/_susy.scss
10
+ sass/susy/_background.scss
11
+ sass/susy/_functions.scss
12
+ sass/susy/_grid.scss
13
+ sass/susy/_margin.scss
14
+ sass/susy/_media.scss
15
+ sass/susy/_padding.scss
16
+ sass/susy/_settings.scss
17
+ susy.gemspec
18
+ templates/project/_base.scss
19
+ templates/project/manifest.rb
20
+ templates/project/screen.scss
@@ -0,0 +1,107 @@
1
+ Susy - Compass Plugin
2
+ =====================
3
+
4
+ Susy is a semantic CSS grid system for designers.
5
+
6
+ Use Susy anywhere. Static sites, Rails sites, Django sites, PHP sites,
7
+ etc. You name it. Susy just helps you with the grid - without ever touching
8
+ your markup.
9
+
10
+ Melts in the mouth
11
+ ------------------
12
+
13
+ Susy grids are always fluid on the inside, but contained in the candy shell of
14
+ your choice (fixed/fluid/elastic/magic). That allows them to flex, react, and
15
+ move as needed.
16
+
17
+ What's a magic grid? That's Susy's Special Sauce. The magic grid begins as a
18
+ simple fixed or elastic grid, but becomes fluid when the window is too small
19
+ to contain it. Based on Natalie Downe's "[CSS Systems]
20
+ (http://www.slideshare.net/nataliedowne/css-systems-presentation)" - this
21
+ otherwise math-heavy technique becomes simple with Susy. It's the only grid
22
+ system I know of that could never exist as a library apart from Sass.
23
+
24
+ Installation
25
+ ------------
26
+
27
+ sudo gem install susy
28
+ compass create <project name> -r susy -u susy
29
+
30
+ Grid Basics
31
+ -----------
32
+
33
+ _(This now refers to the unreleased 1.0 version of Susy.)_
34
+
35
+ ### Settings:
36
+
37
+ Set up your default grid values: total columns, column width, and gutter width.
38
+
39
+ ```scss
40
+ $total-columns : 12; /* a 12-column grid */
41
+ $column-width : 4em; /* each column is 4em wide */
42
+ $gutter-width : 1em; /* 1em gutters between columns */
43
+ $grid-padding : $gutter-width; /* 1em padding on the grid */
44
+ ```
45
+
46
+ ### Mixins:
47
+
48
+ The basic grid is composed using two simple mixins:
49
+ * Apply the `container` mixin to create your initial grid context.
50
+ * Apply the `columns` mixin to declare the width of an element on the grid.
51
+
52
+ Use the 'omega' trigger to declare elements that span the _final_ column of
53
+ their parent element, and pass a 'context' in nested situations. The
54
+ 'context' for any element is equal to the number of columns spanned by it's
55
+ parent.
56
+
57
+ For example:
58
+
59
+ ```scss
60
+ #page {
61
+ @include container;
62
+ /* If you want padding on the grid, just add it to the container. */
63
+
64
+ /*
65
+ full-width items like the header don't need any help from Susy:
66
+ header { ... }
67
+ */
68
+
69
+ nav { @include columns(3); }
70
+
71
+ #content {
72
+ @include columns(9 omega);
73
+
74
+ #main { @include columns(6,9); }
75
+ aside { @include columns(3 omega,9); }
76
+ }
77
+
78
+ footer { clear: both; }
79
+ }
80
+ ```
81
+
82
+ Layouts and Breakpoints
83
+ -----------------------
84
+
85
+ The point is to change layouts (number of columns in the grid) at breakpoints. If you supply only a breakpoint, Susy will supply the closest layout. If you supply only a layout, Susy will provide the closest breakpoint.
86
+
87
+ ```scss
88
+ /* Switch to a 12-column grid when there is room for one. */
89
+ @include at-breakpoint(12) {
90
+ .container { @include container; }
91
+ }
92
+
93
+ /* At a min-width of 30em, switch to the nearest fitting layout. */
94
+ @include at-breakpoint(30em) {
95
+ .container { @include container; }
96
+ }
97
+
98
+ /* Between the min-width of 30em and the max-width of 60em,
99
+ use a 10-column layout. Provide a fallback class for IE. */
100
+ @include at-breakpoint(30em 10 60em ie) {
101
+ .container { @include container; }
102
+ }
103
+
104
+ /* Create all your container layouts in one go.
105
+ Each argument accepts min/layout/max/ie, same as at-breakpoint. */
106
+ .container { @include container(4,8,12); }
107
+ ```
@@ -0,0 +1,301 @@
1
+ Susy Basics
2
+ ===========
3
+
4
+ ```scss
5
+ @import 'susy';
6
+ ```
7
+
8
+ ## Terms
9
+
10
+ - **Susy Grid**: A grid that you build with Susy.
11
+ - **Column**: The main unit of horizontal measurement on the _Grid_.
12
+ - **Layout**: The total number of _Columns_ in a grid.
13
+ - **Gutter**: The space between _Columns_.
14
+ - **Grid Padding**: Padding between the _Grid_ and the document edges.
15
+ - **Grid Element**: Any HTML element that is aligned to a _Grid_.
16
+ - **Container**: The root element of a _Grid_.
17
+ - **Context**: The number of _Columns_ spanned by the parent element.
18
+ - **Omega**: Any _Grid Element_ spanning the last _Column_ in its _Context_.
19
+
20
+ ## Settings
21
+
22
+ ```scss
23
+ $total-columns : 12 !default;
24
+ ```
25
+ **Total Columns**: `$total-columns: <number>;`
26
+ - _The number of Columns in your Susy Grid Layout._
27
+ - `<number>`: Unitless number.
28
+ - Default: `12`.
29
+
30
+ ```scss
31
+ $column-width : 4em !default;
32
+ ```
33
+ **Column Width**: `$column-width: <length>;`
34
+ - _The width of a single Column in your Susy Grid._
35
+ - `<length>`: Length in em, px, %, etc.
36
+ - Default: `4em`.
37
+
38
+ ```scss
39
+ $gutter-width : 1em !default;
40
+ ```
41
+ **Gutter Width**: `$gutter-width: <length>;`
42
+ - _The width of space between Columns._
43
+ - `<length>`: Units must match `$column-width`.
44
+ - Default: `1em`.
45
+
46
+ ```scss
47
+ $grid-padding : $gutter-width !default;
48
+ ```
49
+ **Grid Padding**: `$grid-padding: <length>;`
50
+ - _Padding on the left and right of a grid container._
51
+ - `<length>`: Units must match `$column-width`.
52
+ - Default: `$gutter-width`.
53
+
54
+ ## Mixins
55
+
56
+ ```scss
57
+ .page { @include container; }
58
+ ```
59
+ **Container**: `container([$<media-layout>]*)`
60
+ - _Apply to the outer grid-containing element._
61
+ - `<$media-layout>`: Optional media-layout shortcuts
62
+ (see 'Responsive Grids' below).
63
+ - Default: `$total-columns`.
64
+
65
+ ```scss
66
+ nav { @include columns(3,12); }
67
+ article { @include columns(9 omega,12); }
68
+ ```
69
+ **Columns**: `columns(<$columns> [<omega> , <$context>, <$from>])`
70
+ - _Apply to any element to align it with the Susy Grid._
71
+ - `<$columns>`: The number of _Columns_ to span, with optional `<omega>` flag.
72
+ - `<$context>`: Current nesting _Context_.
73
+ - Default: `$total-columns`.
74
+ - `<$from>`: The origin direction of your document flow.
75
+ - Default: `$from-direction`.
76
+
77
+ ```scss
78
+ .gallery-image {
79
+ @include columns(3,9); // each gallery-image is 3 of 9 cols.
80
+ &:nth-child(3n) { @include omega; } // every third image completes a row.
81
+ }
82
+ ```
83
+ **Omega**: `omega([<$from>])`
84
+ - _Apply to any omega element as an override._
85
+ - `<$from>`: The origin direction of your document flow.
86
+ - Default: `$from-direction`.
87
+
88
+ -------------------------------------------------------------------------------
89
+
90
+ Responsive Grids
91
+ ================
92
+
93
+ ## Terms
94
+
95
+ - **Breakpoint**: A min- or max- viewport width at which to change _Layouts_.
96
+ - **Media-Layout**: Shortcut for declaring _Breakpoints_ and _Layouts_ in Susy:
97
+ - `<min-width> <layout> <max-width> <ie-fallback>`
98
+ - You must supply either `<min>` or `<layout>`.
99
+
100
+ ```scss
101
+ // Example Media-Layouts
102
+
103
+ $media-layout: 12; // Use 12-col layout at matching min-width.
104
+ $media-layout: 30em; // At min 30em, use closest fitting layout.
105
+ $media-layout: 30em 12; // At min 30em, use 12-col layout.
106
+ $media-layout: 12 60em; // Use 12 cols up to max 60em.
107
+ $media-layout: 30em 60em; // Between min 30em & max 60em, use closest layout.
108
+ $media-layout: 30em 12 60em;// Use 12 cols between min 30em & max 60em.
109
+ $media-layout: 60em 12 30em;// Same. Larger length will always be max-width.
110
+
111
+ $media-layout : 12 lt-ie9; // Output is included under `.lt-ie9` class,
112
+ // for use with IE conditional comments
113
+ // on the <html> tag.
114
+ ```
115
+
116
+ ## Mixins
117
+
118
+ ```scss
119
+ $total-columns: 4;
120
+
121
+ .container {
122
+ @include container; // Establish a default 4-col container.
123
+ @include at-breakpoint(10) { // At min-width == 10-cols, use 10-col layout.
124
+ @include container; // Establish a 10-col container inside @media.
125
+ }
126
+ }
127
+ ```
128
+ **At-Breakpoint**:
129
+ `at-breakpoint(<$media-layout> [, <$font-size>]) { <@content> }`
130
+ - _At a given min- or max-width Breakpoint, use a given Layout._
131
+ - `<$media-layout>`: The _Breakpoint/Layout_ combo to use (see above).
132
+ - `<$font-size>`: When using EMs for your grid, the font size is important.
133
+ - Default: `$base-font-size`.
134
+ - `<@content>`: Nested @content block will use the given _Layout_.
135
+
136
+ ```scss
137
+ $total-columns: 4;
138
+
139
+ .container-9 {
140
+ @include layout(9) { // Change total-columns to 9 for all nested code.
141
+ @include container; // Establish a 9-col container.
142
+ }
143
+ }
144
+ ```
145
+ **Layout**: `layout(<$layout-cols>) { <@content> }`
146
+ - _Set an arbitrary Layout to use with any block of content._
147
+ - `<$layout-cols>`: The number of _Columns_ to use in the _Layout_.
148
+ - `<@content>`: Nested @content block will use the given _Layout_.
149
+
150
+ -------------------------------------------------------------------------------
151
+
152
+ Grid Helpers
153
+ ============
154
+
155
+ ## Padding Mixins
156
+
157
+ **Prefix**: `prefix(<$columns> [, <$context>, <$from>])`
158
+ - _Add Columns of empty space as `padding` before an element._
159
+ - `<$columns>`: The number of _Columns_ to be added as `padding` before.
160
+ - `<$context>`: The _Context_.
161
+ - Default: `$total-columns`.
162
+ - `<$from>`: The origin direction of your document flow.
163
+ Default `$from-direction`.
164
+
165
+ **Suffix**: `suffix(<$columns> [, <$context>, <$from>])`
166
+ - _Add columns of empty space as padding after an element._
167
+ - `<$columns>`: The number of _Columns_ to be added as `padding` after.
168
+ - `<$context>`: The _Context_.
169
+ - Default: `$total-columns`.
170
+ - `<$from>`: The origin direction of your document flow.
171
+ - Default: `$from-direction`.
172
+
173
+ **Pad**: `pad([<$prefix>, <$suffix>, <$context>, <$from>])`
174
+ - _Shortcut for adding both Prefix and Suffix `padding`._
175
+ - `<$prefix>`: The number of _Columns_ to be added as `padding` before.
176
+ - `<$suffix>`: The number of _Columns_ to be added as `padding` after.
177
+ - `<$context>`: The _Context_.
178
+ - Default: `$total-columns`.
179
+ - `<$from>`: The origin direction of your document flow.
180
+ - Default: `$from-direction`.
181
+
182
+ ## Margin Mixins
183
+
184
+ **Pre**: `pre(<$columns> [, <$context>, <$from>])`
185
+ - _Add columns of empty space as margin before an element._
186
+ - `<$columns>`: The number of _Columns_ to be added as `margin` before.
187
+ - `<$context>`: The _Context_.
188
+ - Default: `$total-columns`.
189
+ - `<$from>`: The origin direction of your document flow.
190
+ - Default: `$from-direction`.
191
+
192
+ **Post**: `post(<$columns> [, <$context>, <$from>])`
193
+ - _Add columns of empty space as margin after an element._
194
+ - `<$columns>`: The number of _Columns_ to be added as `margin` after.
195
+ - `<$context>`: The _Context_.
196
+ - Default: `$total-columns`.
197
+ - `<$from>`: The origin direction of your document flow.
198
+ - Default: `$from-direction`.
199
+
200
+ **Squish**: `squish([<$pre>, <$post>, <$context>, <$from>])`
201
+ - _Shortcut to add empty space as margin before and after an element._
202
+ - `<$pre>`: The number of _Columns_ to be added as `margin` before.
203
+ - `<$post>`: The number of _Columns_ to be added as `margin` after.
204
+ - `<$context>`: The _Context_.
205
+ - Default: `$total-columns`.
206
+ - `<$from>`: The origin direction of your document flow.
207
+ - Default: `$from-direction`.
208
+
209
+ **Push**: `push(<$columns> [, <$context>, <$from>])`
210
+ - _Add positive margins before an element, to push it with the flow._
211
+ _Identical to `pre`._
212
+
213
+ **Pull**: `pull(<$columns> [, <$context>, <$from>])`
214
+ - _Add negative margins before an element, to pull it against the flow._
215
+ - `<$columns>`: The number of _Columns_ to be subtracted as `margin` before.
216
+ - `<$context>`: The _Context_.
217
+ - Default: `$total-columns`.
218
+ - `<$from>`: The origin direction of your document flow.
219
+ - Default: `$from-direction`.
220
+
221
+ ## Grid Background Image
222
+
223
+ **Susy Grid Background**: `susy-grid-background()`
224
+ - _Apply to a Container to see the Susy Grid as a background-image._
225
+ - Some browsers have trouble with sub-pixel rounding on background images.
226
+ Use it for checking general spacing, not pixel-exact alignment.
227
+
228
+ ## Functions
229
+
230
+ Where a mixin returns property/value pairs, functions return simple values
231
+ that you can put where you want, and use for advanced math.
232
+
233
+ ```scss
234
+ .item { width: columns(3,6); }
235
+ ```
236
+ **Columns**: `columns(<$columns> [, <$context>])`
237
+ - _Identical to `columns` mixin, but returns the math-ready `%` multiplier._
238
+ - `<$columns>`: The number of _Columns_ to span,
239
+ - `<$context>`: The _Context_.
240
+ - Default: `$total-columns`.
241
+
242
+ ```scss
243
+ .item { margin-right: gutter(6) + columns(3,6); }
244
+ ```
245
+ **Gutter**: `gutter([<$context>])`
246
+ - _The `%` width of one gutter in any given context._
247
+ - `<$context>`: The _Context_.
248
+ - Default: `$total-columns`.
249
+
250
+ ```scss
251
+ .item { margin-right: space(3,6); }
252
+ ```
253
+ **Space**: `space(<$columns> [, <$context>])`
254
+ - _Total `%` space taken by Columns, including internal AND external gutters._
255
+ - `<$columns>`: The number of _Columns_ to span,
256
+ - `<$context>`: The _Context_.
257
+ - Default: `$total-columns`.
258
+
259
+ ## Container Override Settings
260
+
261
+ ```scss
262
+ $container-width : false !default;
263
+ ```
264
+ **Container Width**: `$container-width: <length>;`
265
+ - _Override the total width of your grid with an arbitrary length._
266
+ - `<length>`: Length in em, px, %, etc.
267
+ - Default: `false`.
268
+
269
+ ```scss
270
+ $container-style : magic !default;
271
+ ```
272
+ **Container Style**: `$container-style: <style>;`
273
+ - _The type of shell containing your grid._
274
+ - `<style>`: `magic` | `static` | `fluid`.
275
+ - Default: `magic`.
276
+ - `magic`: The Susy Special Sauce (TM). A magic grid has a set width,
277
+ but becomes fluid rather than overflowing the viewport.
278
+ - `static`: A static grid will retain the width defined in your settings.
279
+ - `fluid`: A fluid grid will always be based on the viewport width.
280
+ The percentage will be determined by your grid settings,
281
+ or by `$container-width`, if either is set using `%` units.
282
+ Otherwise it will default to `auto` (100%).
283
+
284
+ ## Direction Override Settings
285
+
286
+ ```scss
287
+ $from-direction : left !default;
288
+ ```
289
+ **From Direction**: `$from-direction: <direction>;`
290
+ - _The side of the Susy Grid from which the flow starts._
291
+ _For ltr documents, this is the left._
292
+ - `<direction>`: `left` | `right`
293
+ - Default: `left`
294
+
295
+ ```scss
296
+ $omega-float : opposite-position($from-direction) !default;
297
+ ```
298
+ **Omega Float**: `$omega-float: <direction>;`
299
+ - _The direction that Omega elements should be floated._
300
+ - `<direction>`: `left` | `right`
301
+ - Default: `opposite-position($from-direction)`