susy 1.0.alpha.0

data/CHANGELOG.mkdn

@@ -0,0 +1,206 @@
+Susy Changelog
+==============
+
+v1.0 [UNRELEASED]
+-----------------
+
+*Requires the latest unreleased master branch of Compass.*
+
+This release is loaded with new features, but don't let that fool you. Susy 
+just became shockingly simple to use. See the README for updated usage details.
+
+New Features:
+
+* `omega` can now be set directly through the `columns` mixin for much 
+  more compact output.
+* Create responsive grid break-points using `at-breakpoint` and `layout`.
+* `container` mixin now accepts one or more grids/breakpoints as a shortcut.
+* All mixins respect your `$legacy-support-for-ie` settings.
+* The `space` function can be used anywhere you need column+gutter math.
+* `push`, `pull`, `pre`, `post`, and `squish` add margin left/right shortcuts.
+
+Changed API:
+
+* `$total-cols` => `$total-columns`
+* `$col-width` => `$column-width`
+* `$side-gutter-width` => `$grid-padding`
+* `+un-column` & `+reset-column` => `+reset-columns`
+
+Removed:
+
+* `alpha` is no longer needed.
+* `+omega` no longer accepts the `$context` argument.
+* `full` can be replaced by a simple `clear: both;` when needed.
+* `side-gutter()` is no longer needed. Use `$grid-padding` instead.
+
+Upgrade:
+
+1. Find and replace the 4 simple "Changed API's" listed above.
+2. Remove the `$context` argument from all `omega` mixins.
+3. Remove any mention of `alpha` and `full` in your code. 
+   * Replace `full` with `clear: both;` where necessary.
+4. Remove any mention of `side-gutter()`.
+   * This may require some refactoring, depending on your uses.
+5. [Optional] Any time 'columns' and 'omega' are declared in the same block, 
+   they can now be joined together. `@include columns(3); @include omega();` 
+   can become `@include columns(3 omega)`.
+
+You're done! Stop worrying about all that "nested vs. root" bullshit, and start playing with the new toys!
+
+v0.9 [Apr 25 2011]
+------------------
+
+Everything here is about simplicity. Susy has scaled back to it's most basic
+function: providing flexible grids. That is all.
+
+Deprecated:
+
+* The `susy/susy` import is deprecated in favor of simply importing `susy`.
+* The `show-grid` import is deprecated in favor of CSS3 gradient-based
+grid-images. You can now use the `susy-grid-background` mixin. See below.
+
+Removed:
+
+* Susy no longer imports all of compass.
+* Susy no longer establishes your baseline and no longer provides a reset.
+All of that is in the Compass core. You can (and should!) keep using them, but
+you will need to import them from compass.
+
+New:
+
+* Use the `susy-grid-background` mixin on any `container` to display the grid.
+This toggles on and off with the same controls that are used by the compass
+grid-background module.
+
+v0.9.beta.3 [Mar 16 2011]
+-------------------------
+
+Deprecated:
+
+* The `susy/reset` import has been deprecated in favor of the Compass core `compass/reset` import.
+* 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.
+
+Removed:
+
+* 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).
+* 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.
+
+New Features:
+
+* 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.
+* Susy is now written in pure Sass! No extra Ruby functions included! Thanks to the Sass team for making it possible.
+
+v0.8.1 [Sep 24 2010]
+--------------------
+
+* Fixed typos in tutorial and `_defaults.scss`
+
+v0.8.0 [Aug 13 2010]
+--------------------
+
+Deprecated:
+
+* The `skip-link` was deprecated as it doesn't belong in Susy.
+* All the IE-specific mixins have been deprecated, along with the `$hacks` variable. Hacks are now used in the default mixins as per Compass.
+* The `hide` mixin was deprecated in favor of the Compass code `hide-text` mixin.
+
+Other Changes:
+
+* `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.
+* 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.
+* The `container` mixin now uses the `pie-clearfix` compass mixin to avoid setting the overflow to hidden.
+* 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.
+
+v0.7.0 [Jun 01 2010]
+--------------------
+
+* updated documentation
+
+v0.7.0.rc2 [May 13 2010]
+------------------------
+
+* Fixes a bug with grid.png and a typo in the readme. Nothing major here.
+
+v0.7.0.rc1 [May 12 2010]
+------------------------
+
+* template cleanup & simplification - no more pushing CSSEdit comments, etc.
+* expanded base and defaults with better fonts & styles out-of-the-box
+* expanded readme documentation. This will expand out into a larger docs/tutorial site in the next week.
+
+v0.7.0.pre8 [Apr 20 2010]
+-------------------------
+
+* mostly syntax and gem cleanup
+* added `un-column` mixin to reset elements previously declared as columns.
+* added `rhythm` mixin as shortcut for leaders/trailers. accepts 4 args: leader, padding-leader, padding-trailer, trailer.
+* added a warning on `alpha` to remind you that `alpha` is not needed at nested levels.
+
+v0.7.0.pre7 [Apr 13 2010]
+-------------------------
+
+* *Requires HAML 3 and Compass 0.10.0.rc2*
+* Internal syntax switched to scss. This will have little or no effect on users. You can still use Susy with either (Sass/Scss) syntax.
+* `$default-rhythm-border-style` overrides default rhythm border styles
+* Better handling of sub-pixel rounding for IE6
+
+v0.7.0.pre6 [Mar 29 2010]
+-------------------------
+
+* Added `+h-borders()` shortcut for vertical_rhythm `+horizontal-borders()`
+* Fixed vertical rhythm font-size typo (thanks @oscarduignan)
+* Added to template styles, so susy is already in place from the start
+
+v0.7.0.pre5 [Mar 19 2010]
+-------------------------
+
+* Expanded and adjusted `_vertical_rhythm.sass` in ways that are not entirely backwards compatible. Check the file for details.
+* `_defaults.sass` is re-ordered from inline to block.
+* `:focus` defaults cleaned up.
+* README and docs updated.
+
+v0.7.0.pre4 [Jan 20 2010]
+-------------------------
+
+Update: pre2 was missing a file in the manifest. Use pre4.
+
+*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).
+
+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.
+
+Added:
+
+* new `_vertical_rhythm.sass` (thanks to Chris Eppstein) provides better establishing of the baseline grid, as well as mixins to help you manage it.
+* `!px2em` has replaced `px2em()` - see below.
+
+Removed:
+
+* `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).
+* `!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.
+* `!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.
+
+Once you've upgraded, before you compile your files, make these changes:
+
+* remove the "_px" from the font-size and line-height variables, and add "px" to their values.
+* remove the `!grid_units` variable and add units to your grid variable values.
+* find any uses of `px2em()` and replace them with something.
+* enjoy!
+
+v0.7.0.pre1 [Nov 30 2009]
+-------------------------
+
+Not a lot of new functionality here – it all moved over to Compass 0.10.0 – mostly just cleaning it up to match.
+
+* simplified the default styles and gave them their own project template (‘_defaults.sass’).
+* defaults not imported by ‘ie.sass’, as ‘ie.sass’ should be cascading on top of ‘screen.sass’ anyway
+* changed the syntax to match CSS and Compass (‘property:’ replaces ‘:property’)
+* added more inline documentation and brought tutorial up to date
+* moved CSS3 module over to Compass
+* import the compass HTML5 reset along with the normal reset by default (because Susy loves the future)
+* little internal management fixes and so on and so on…
+
+older…
+-------
+
+* not documented here.
+* check the commit log.

data/LICENSE.txt

@@ -0,0 +1,28 @@
+Copyright (c) 2011, Eric Meyer
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are
+met:
+
+    * Redistributions of source code must retain the above copyright
+      notice, this list of conditions and the following disclaimer.
+    * Redistributions in binary form must reproduce the above
+      copyright notice, this list of conditions and the following
+      disclaimer in the documentation and/or other materials provided
+      with the distribution.
+    * Neither the name of the author nor the names of other
+      contributors may be used to endorse or promote products derived
+      from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

data/Manifest

@@ -0,0 +1,20 @@
+CHANGELOG.mkdn
+LICENSE.txt
+Manifest
+README.mkdn
+REFERENCE.mkdn
+Rakefile
+VERSION
+lib/susy.rb
+sass/_susy.scss
+sass/susy/_background.scss
+sass/susy/_functions.scss
+sass/susy/_grid.scss
+sass/susy/_margin.scss
+sass/susy/_media.scss
+sass/susy/_padding.scss
+sass/susy/_settings.scss
+susy.gemspec
+templates/project/_base.scss
+templates/project/manifest.rb
+templates/project/screen.scss

data/README.mkdn

@@ -0,0 +1,107 @@
+Susy - Compass Plugin
+=====================
+
+Susy is a semantic CSS grid system for designers.
+
+Use Susy anywhere. Static sites, Rails sites, Django sites, PHP sites,
+etc. You name it. Susy just helps you with the grid - without ever touching 
+your markup. 
+
+Melts in the mouth
+------------------
+
+Susy grids are always fluid on the inside, but contained in the candy shell of 
+your choice (fixed/fluid/elastic/magic). That allows them to flex, react, and 
+move as needed.
+
+What's a magic grid? That's Susy's Special Sauce. The magic grid begins as a 
+simple fixed or elastic grid, but becomes fluid when the window is too small 
+to contain it. Based on Natalie Downe's "[CSS Systems]
+(http://www.slideshare.net/nataliedowne/css-systems-presentation)" - this 
+otherwise math-heavy technique becomes simple with Susy. It's the only grid 
+system I know of that could never exist as a library apart from Sass.
+
+Installation
+------------
+
+    sudo gem install susy
+    compass create <project name> -r susy -u susy
+
+Grid Basics
+-----------
+
+_(This now refers to the unreleased 1.0 version of Susy.)_
+
+### Settings:
+
+Set up your default grid values: total columns, column width, and gutter width.
+
+```scss
+$total-columns  : 12;             /* a 12-column grid */
+$column-width   : 4em;            /* each column is 4em wide */
+$gutter-width   : 1em;            /* 1em gutters between columns */
+$grid-padding   : $gutter-width;  /* 1em padding on the grid */
+```
+
+### Mixins:
+
+The basic grid is composed using two simple mixins:
+* Apply the `container` mixin to create your initial grid context. 
+* Apply the `columns` mixin to declare the width of an element on the grid.
+
+Use the 'omega' trigger to declare elements that span the _final_ column of 
+their parent element, and pass a 'context' in nested situations. The 
+'context' for any element is equal to the number of columns spanned by it's 
+parent.
+
+For example:
+
+```scss
+#page {
+  @include container;
+  /* If you want padding on the grid, just add it to the container. */
+
+  /* 
+  full-width items like the header don't need any help from Susy:
+  header { ... }
+  */
+
+  nav { @include columns(3); }
+
+  #content { 
+    @include columns(9 omega);
+
+    #main { @include columns(6,9); }
+    aside { @include columns(3 omega,9); }
+  }
+
+  footer { clear: both; }
+}
+```
+
+Layouts and Breakpoints
+-----------------------
+
+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.
+
+```scss
+/* Switch to a 12-column grid when there is room for one. */
+@include at-breakpoint(12) { 
+  .container { @include container; } 
+}
+
+/* At a min-width of 30em, switch to the nearest fitting layout. */
+@include at-breakpoint(30em) { 
+  .container { @include container; } 
+}
+
+/* Between the min-width of 30em and the max-width of 60em, 
+   use a 10-column layout. Provide a fallback class for IE. */
+@include at-breakpoint(30em 10 60em ie) { 
+  .container { @include container; } 
+}
+
+/* Create all your container layouts in one go. 
+   Each argument accepts min/layout/max/ie, same as at-breakpoint. */
+.container { @include container(4,8,12); }
+```

data/REFERENCE.mkdn

@@ -0,0 +1,301 @@
+Susy Basics
+===========
+
+```scss
+@import 'susy';
+```
+
+## Terms
+
+- **Susy Grid**: A grid that you build with Susy. 
+- **Column**: The main unit of horizontal measurement on the _Grid_.
+- **Layout**: The total number of _Columns_ in a grid.
+- **Gutter**: The space between _Columns_.
+- **Grid Padding**: Padding between the _Grid_ and the document edges.
+- **Grid Element**: Any HTML element that is aligned to a _Grid_.
+- **Container**: The root element of a _Grid_.
+- **Context**: The number of _Columns_ spanned by the parent element.
+- **Omega**: Any _Grid Element_ spanning the last _Column_ in its _Context_.
+
+## Settings
+
+```scss
+$total-columns  : 12              !default;
+```
+**Total Columns**: `$total-columns: <number>;`
+- _The number of Columns in your Susy Grid Layout._
+- `<number>`: Unitless number. 
+  - Default: `12`.
+
+```scss
+$column-width   : 4em             !default;
+```
+**Column Width**: `$column-width: <length>;`
+- _The width of a single Column in your Susy Grid._
+- `<length>`: Length in em, px, %, etc. 
+  - Default: `4em`.
+
+```scss
+$gutter-width   : 1em             !default;
+```
+**Gutter Width**: `$gutter-width: <length>;`
+- _The width of space between Columns._
+- `<length>`: Units must match `$column-width`. 
+  - Default: `1em`.
+
+```scss
+$grid-padding   : $gutter-width   !default;
+```
+**Grid Padding**: `$grid-padding: <length>;`
+- _Padding on the left and right of a grid container._
+- `<length>`: Units must match `$column-width`. 
+  - Default: `$gutter-width`.
+
+## Mixins
+
+```scss
+.page { @include container; }
+```
+**Container**: `container([$<media-layout>]*)`
+- _Apply to the outer grid-containing element._
+- `<$media-layout>`: Optional media-layout shortcuts 
+  (see 'Responsive Grids' below). 
+  - Default: `$total-columns`.
+
+```scss
+nav { @include columns(3,12); }
+article { @include columns(9 omega,12); }
+```
+**Columns**: `columns(<$columns> [<omega> , <$context>, <$from>])`
+- _Apply to any element to align it with the Susy Grid._
+- `<$columns>`: The number of _Columns_ to span, with optional `<omega>` flag.
+- `<$context>`: Current nesting _Context_. 
+  - Default: `$total-columns`.
+- `<$from>`: The origin direction of your document flow. 
+  - Default: `$from-direction`.
+
+```scss
+.gallery-image { 
+  @include columns(3,9);              // each gallery-image is 3 of 9 cols.
+  &:nth-child(3n) { @include omega; } // every third image completes a row.
+}
+```
+**Omega**: `omega([<$from>])`
+- _Apply to any omega element as an override._
+- `<$from>`: The origin direction of your document flow. 
+  - Default: `$from-direction`.
+
+-------------------------------------------------------------------------------
+
+Responsive Grids
+================
+
+## Terms
+
+- **Breakpoint**: A min- or max- viewport width at which to change _Layouts_.
+- **Media-Layout**: Shortcut for declaring _Breakpoints_ and _Layouts_ in Susy:
+  - `<min-width> <layout> <max-width> <ie-fallback>`
+  - You must supply either `<min>` or `<layout>`.
+
+```scss
+// Example Media-Layouts
+
+$media-layout: 12;          // Use 12-col layout at matching min-width.
+$media-layout: 30em;        // At min 30em, use closest fitting layout.
+$media-layout: 30em 12;     // At min 30em, use 12-col layout.
+$media-layout: 12 60em;     // Use 12 cols up to max 60em.
+$media-layout: 30em 60em;   // Between min 30em & max 60em, use closest layout.
+$media-layout: 30em 12 60em;// Use 12 cols between min 30em & max 60em.
+$media-layout: 60em 12 30em;// Same. Larger length will always be max-width.
+
+$media-layout : 12 lt-ie9;  // Output is included under `.lt-ie9` class,
+                            // for use with IE conditional comments 
+                            // on the <html> tag.
+```
+
+## Mixins
+
+```scss
+$total-columns: 4;
+
+.container {
+  @include container;           // Establish a default 4-col container.
+  @include at-breakpoint(10) {  // At min-width == 10-cols, use 10-col layout.
+    @include container;         // Establish a 10-col container inside @media.
+  }
+}
+```
+**At-Breakpoint**: 
+  `at-breakpoint(<$media-layout> [, <$font-size>]) { <@content> }`
+- _At a given min- or max-width Breakpoint, use a given Layout._
+- `<$media-layout>`: The _Breakpoint/Layout_ combo to use (see above).
+- `<$font-size>`: When using EMs for your grid, the font size is important.
+  - Default: `$base-font-size`.
+- `<@content>`: Nested @content block will use the given _Layout_.
+
+```scss
+$total-columns: 4;
+
+.container-9 { 
+  @include layout(9) {    // Change total-columns to 9 for all nested code.
+    @include container;   // Establish a 9-col container.
+  }
+}
+```
+**Layout**: `layout(<$layout-cols>) { <@content> }`
+- _Set an arbitrary Layout to use with any block of content._
+- `<$layout-cols>`: The number of _Columns_ to use in the _Layout_.
+- `<@content>`: Nested @content block will use the given _Layout_.
+
+-------------------------------------------------------------------------------
+
+Grid Helpers
+============
+
+## Padding Mixins
+
+**Prefix**: `prefix(<$columns> [, <$context>, <$from>])`
+- _Add Columns of empty space as `padding` before an element._
+- `<$columns>`: The number of _Columns_ to be added as `padding` before.
+- `<$context>`: The _Context_. 
+  - Default: `$total-columns`.
+- `<$from>`: The origin direction of your document flow. 
+  Default `$from-direction`.
+
+**Suffix**: `suffix(<$columns> [, <$context>, <$from>])`
+- _Add columns of empty space as padding after an element._
+- `<$columns>`: The number of _Columns_ to be added as `padding` after.
+- `<$context>`: The _Context_. 
+  - Default: `$total-columns`.
+- `<$from>`: The origin direction of your document flow. 
+  - Default: `$from-direction`.
+
+**Pad**: `pad([<$prefix>, <$suffix>, <$context>, <$from>])`
+- _Shortcut for adding both Prefix and Suffix `padding`._
+- `<$prefix>`: The number of _Columns_ to be added as `padding` before.
+- `<$suffix>`: The number of _Columns_ to be added as `padding` after.
+- `<$context>`: The _Context_. 
+  - Default: `$total-columns`.
+- `<$from>`: The origin direction of your document flow. 
+  - Default: `$from-direction`.
+
+## Margin Mixins
+
+**Pre**: `pre(<$columns> [, <$context>, <$from>])`
+- _Add columns of empty space as margin before an element._
+- `<$columns>`: The number of _Columns_ to be added as `margin` before.
+- `<$context>`: The _Context_. 
+  - Default: `$total-columns`.
+- `<$from>`: The origin direction of your document flow. 
+  - Default: `$from-direction`.
+
+**Post**: `post(<$columns> [, <$context>, <$from>])`
+- _Add columns of empty space as margin after an element._
+- `<$columns>`: The number of _Columns_ to be added as `margin` after.
+- `<$context>`: The _Context_. 
+  - Default: `$total-columns`.
+- `<$from>`: The origin direction of your document flow. 
+  - Default: `$from-direction`.
+
+**Squish**: `squish([<$pre>, <$post>, <$context>, <$from>])`
+- _Shortcut to add empty space as margin before and after an element._
+- `<$pre>`: The number of _Columns_ to be added as `margin` before.
+- `<$post>`: The number of _Columns_ to be added as `margin` after.
+- `<$context>`: The _Context_. 
+  - Default: `$total-columns`.
+- `<$from>`: The origin direction of your document flow. 
+  - Default: `$from-direction`.
+
+**Push**: `push(<$columns> [, <$context>, <$from>])`
+- _Add positive margins before an element, to push it with the flow._
+  _Identical to `pre`._
+
+**Pull**: `pull(<$columns> [, <$context>, <$from>])`
+- _Add negative margins before an element, to pull it against the flow._
+- `<$columns>`: The number of _Columns_ to be subtracted as `margin` before.
+- `<$context>`: The _Context_. 
+  - Default: `$total-columns`.
+- `<$from>`: The origin direction of your document flow. 
+  - Default: `$from-direction`.
+
+## Grid Background Image
+
+**Susy Grid Background**: `susy-grid-background()`
+- _Apply to a Container to see the Susy Grid as a background-image._
+- Some browsers have trouble with sub-pixel rounding on background images.
+  Use it for checking general spacing, not pixel-exact alignment.
+
+## Functions
+
+Where a mixin returns property/value pairs, functions return simple values 
+that you can put where you want, and use for advanced math.
+
+```scss
+.item { width: columns(3,6); }
+```
+**Columns**: `columns(<$columns> [, <$context>])`
+- _Identical to `columns` mixin, but returns the math-ready `%` multiplier._
+- `<$columns>`: The number of _Columns_ to span, 
+- `<$context>`: The _Context_.
+  - Default: `$total-columns`.
+
+```scss
+.item { margin-right: gutter(6) + columns(3,6); }
+```
+**Gutter**: `gutter([<$context>])`
+- _The `%` width of one gutter in any given context._
+- `<$context>`: The _Context_. 
+  - Default: `$total-columns`.
+
+```scss
+.item { margin-right: space(3,6); }
+```
+**Space**: `space(<$columns> [, <$context>])`
+- _Total `%` space taken by Columns, including internal AND external gutters._
+- `<$columns>`: The number of _Columns_ to span, 
+- `<$context>`: The _Context_.
+  - Default: `$total-columns`.
+
+## Container Override Settings
+
+```scss
+$container-width  : false     !default;
+```
+**Container Width**: `$container-width: <length>;`
+- _Override the total width of your grid with an arbitrary length._ 
+- `<length>`: Length in em, px, %, etc.
+  - Default: `false`.
+
+```scss
+$container-style  : magic     !default;
+```
+**Container Style**: `$container-style: <style>;`
+- _The type of shell containing your grid._
+- `<style>`: `magic` | `static` | `fluid`.
+  - Default: `magic`.
+  - `magic`: The Susy Special Sauce (TM). A magic grid has a set width,
+    but becomes fluid rather than overflowing the viewport.
+  - `static`: A static grid will retain the width defined in your settings.
+  - `fluid`: A fluid grid will always be based on the viewport width.
+    The percentage will be determined by your grid settings,
+    or by `$container-width`, if either is set using `%` units.
+    Otherwise it will default to `auto` (100%).
+
+## Direction Override Settings
+
+```scss
+$from-direction : left        !default;
+```
+**From Direction**: `$from-direction: <direction>;`
+- _The side of the Susy Grid from which the flow starts._
+  _For ltr documents, this is the left._
+- `<direction>`: `left` | `right`
+  - Default: `left`
+
+```scss
+$omega-float    : opposite-position($from-direction)  !default;
+```
+**Omega Float**: `$omega-float: <direction>;`
+- _The direction that Omega elements should be floated._
+- `<direction>`: `left` | `right`
+  - Default: `opposite-position($from-direction)`