susy 1.0.rc.2 → 1.0.rc.3

data/CHANGELOG.mkdn

@@ -20,6 +20,16 @@ New Features:
 * 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.
+* The `nth-omega` mixin can be used to set omega on any nth-child, nth-of-type,
+  first, last, or only element - using pseudo-class selectors.
+* `remove-omega` and `remove-nth-omega` will remove the omega-specific styles
+  from an element, returning it to the regular grid flow.
+* `$container-width` and `$container-style` settings will override the width
+  and type (magic, fluid, fixed, static, etc) of your grid container.
+* `$breakpoint-media-output` and `$breakpoint-media-output` allow you to turn
+  on and off the different outputs from `at-breakpoint`.
+  This is useful when you have IE-overrides living in a file of their own.
+* Unit tests live in the `/test/` directory.
 
 Changed API:
 

data/Manifest

@@ -1,7 +1,7 @@
 CHANGELOG.mkdn
 LICENSE.txt
 Manifest
-README.mkdn
+README.md
 Rakefile
 VERSION
 lib/susy.rb
@@ -17,3 +17,14 @@ susy.gemspec
 templates/project/_base.scss
 templates/project/manifest.rb
 templates/project/screen.scss
+test/config.rb
+test/css/background.css
+test/css/grid.css
+test/css/margin.css
+test/css/media.css
+test/css/padding.css
+test/scss/background.scss
+test/scss/grid.scss
+test/scss/margin.scss
+test/scss/media.scss
+test/scss/padding.scss

data/README.md

@@ -0,0 +1,130 @@
+# Susy [a Compass plugin]
+
+Susy is a semantic CSS grid system with a responsive twist.
+
+The web is a responsive place,
+from your lithe & lively development process
+to your end user's super-tablet-multi-magic-lap-phone.
+You need grids that are powerful, but custom;
+reliable, but responsive.
+
+Susy grids are fluid on the inside,
+ready to respond at any moment,
+but contained in the candy shell of your choice,
+so they respond how and when and where you want them to.
+
+This isn't another one-size-fits-all grid framework
+that will make your sites look identical
+and litter your markup with meaningless "col2of5" jargon.
+We don't design your site or write your markup,
+we just do the math and get out of your way.
+
+## Resources
+- [Website](http://susy.oddbird.net)
+- [Changelog](https://github.com/ericam/susy/blob/master/CHANGELOG.mkdn)
+- [Tutorial](http://susy.oddbird.net/guides/getting-started/)
+- [Reference](http://susy.oddbird.net/guides/reference/)
+- [Sites using Susy](http://susy.oddbird.net/sites-using-susy/)
+- [Twitter @CompassSusy](http://twitter.com/compasssusy/)
+
+## Why is 1.0 a release candidate?
+
+Susy 1.0 is stable and tested, all the features are in,
+and we're ready to launch.
+But our 1.0 depends on unreleased Sass features.
+We think those features are stable as well,
+and we'll do what it takes to stay on top of any changes they make,
+but we can't officially land until they do.
+
+## Contributing
+
+We love contributions,
+both as ideas and pull requests.
+The core of Susy is all in the `/sass/` directory.
+
+Once you make changes,
+you can test them by building the gem
+and installing it somewhere to test.
+We also have unit tests that you can run.
+
+### Building the gem
+
+You'll need Rake and Echoe installed:
+
+```bash
+# command line
+gem install rake
+gem install echoe
+```
+
+It might be helpful to bump the version number in `VERSION`,
+but any changes you make there
+should not be committed.
+
+Then you can build:
+
+```bash
+# command line
+rake build
+```
+
+Your new gem will appear in
+a folder called `pkg`.
+You can install it for testing
+directly from there.
+
+```bash
+# command line
+gem install <path-to-file>
+```
+
+### Building the docs
+
+If you are adding features
+or changing how a current feature works,
+your changes should be documented.
+Or you might be helping us maintain the docs.
+In either case,
+you'll need to run the docs dev server
+in order to see your changes.
+
+In the `docs` folder:
+
+```bash
+# command line
+gem install bundler
+bundle install
+```
+
+The site is built with
+[middleman](http://middlemanapp.com/).
+To run the development server:
+
+```bash
+# command line
+middleman
+```
+
+The server should now be running at `localhost:4567`.
+
+Make any changes you need
+under the `source` directory,
+then commit your changes
+and submit a pull request when you are done!
+
+### Tests
+
+The tests we have are very basic at this point.
+Simply go into the `test` directory
+(with the latest Sass and Compass gems installed)
+and run `compass compile --force`.
+
+There should be no changes.
+If there are changes,
+go back and find what caused the change.
+If the change was intentional,
+simply commit the changed test files.
+If it was not intentional,
+go back and find what caused the problem.
+
+Use `git diff` to see the changes.

data/VERSION

@@ -1 +1 @@
-1.0.rc.2
+1.0.rc.3

data/sass/susy/_functions.scss

@@ -13,7 +13,7 @@ $browser-default-font-size-pt       : 12pt;
 // Grid Functions
 
 // Returns the full width of a grid based on your grid settings.
-// 
+//
 //  $columns  : The number of columns to get width for.
 @function columns-width(
   $columns  : $total-columns
@@ -40,7 +40,7 @@ $browser-default-font-size-pt       : 12pt;
 }
 
 // Return the percentage width of multiple 'columns' in a given 'context'.
-// 
+//
 //  $columns  : The number of columns to get relative width for.
 //  $context  : The grid context in columns, if nested.
 @function columns(
@@ -51,7 +51,7 @@ $browser-default-font-size-pt       : 12pt;
 }
 
 // Return the percentage width of a single gutter in a given 'context'.
-// 
+//
 //  $context  : The grid context in columns, if nested.
 @function gutter(
   $context : $total-columns
@@ -61,7 +61,7 @@ $browser-default-font-size-pt       : 12pt;
 
 // Return the total space occupied by multiple columns and associated gutters.
 // Useful for adding padding or margins (preifx, suffix, push, pull, etc.)
-// 
+//
 //  $columns  : The number of columns to get relative space for.
 //  $context  : The grid context in columns, if nested.
 @function space(
@@ -92,7 +92,7 @@ $browser-default-font-size-pt       : 12pt;
       } @else {
         @warn '"#{$var}" is not a valid part of "$columns: #{$columns}" in the columns() mixin.';
       }
-    } 
+    }
   }
 
   @if $request == 'columns' {
@@ -106,6 +106,22 @@ $browser-default-font-size-pt       : 12pt;
   }
 }
 
+// Accept nth-selector variables, and format them as a valid CSS3 selector.
+//
+// $n         : [first | only | last | <equation>]
+// $selector  : [child | last-child | of-type | last-of-type ]
+@function format-nth(
+  $n        : last,
+  $selector : child
+) {
+  @if ($n == 'last') or ($n =='first') or ($n =='only') {
+    $selector: '#{$n}-#{$selector}';
+  } @else {
+    $selector: 'nth-#{$selector}(#{$n})';
+  }
+  @return $selector;
+}
+
 // ---------------------------------------------------------------------------
 // Media Functions
 
@@ -260,8 +276,8 @@ $browser-default-font-size-pt       : 12pt;
   $layout-cols  : nth($media-layout,2);
   $max          : nth($media-layout,3);
 
-  @if $min or $max { 
-    @return false; 
+  @if $min or $max {
+    @return false;
   } @else {
     @return if($layout-cols == $total-columns,true,false);
   }

data/sass/susy/_grid.scss

@@ -86,14 +86,14 @@
   $to       : opposite-position($from);
   $pos      : split-columns-value($columns,position);
   $cols     : split-columns-value($columns,columns);
-  
+
   width: columns($cols, $context);
 
   @if ($pos == 'omega') {
     @include omega($from);
-  } @else {  
+  } @else {
     float: $from;
-    margin-#{$to}: gutter($context);      
+    margin-#{$to}: gutter($context);
     @if $legacy-support-for-ie6 {
       display: inline;
     }
@@ -109,7 +109,7 @@
 ) {
   $to     : opposite-position($from);
   $hack   : opposite-position($omega-float);
-  
+
   float: $omega-float;
   margin-#{$to}: 0;
 
@@ -119,8 +119,21 @@
   }
 }
 
+// Shortcut to apply omega to a specific subset of elements.
+//
+// $n         : [first | only | last | <equation>]
+// $selector  : [child | last-child | of-type | last-of-type ]
+// $from      : The start-direction for your document.
+@mixin nth-omega(
+  $n        : last,
+  $selector : child,
+  $from     : $from-direction
+) {
+  &:#{format-nth($n,$selector)} { @include omega($from); }
+}
+
 // ---------------------------------------------------------------------------
-// Reset Columns
+// Resets
 
 // Reset a '+columns' grid element to default block behavior
 //
@@ -134,9 +147,44 @@
   float: none;
   width: auto;
   margin-#{$to}: auto;
-  
+
   @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
     #margin-#{$hack}: auto;
     @if $legacy-support-for-ie6 { display: block; }
   }
 }
+
+// Apply to elements previously set as omega.
+// This will return floats and margins back to non-omega settigns.
+//
+// $context : [optional] The context (columns spanned by parent).
+// $from    : The start-direction for your document.
+@mixin remove-omega(
+  $context  : $total-columns,
+  $from     : $from-direction
+) {
+  $to     : opposite-position($from);
+  $hack   : opposite-position($omega-float);
+
+  float: $from;
+  margin-#{$to}: gutter($context);
+
+  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
+    #margin-#{$hack}: 0;
+  }
+}
+
+// Shortcut to apply remove-omega to a specific subset of elements.
+//
+// $n         : [first | only | last | <equation>]
+// $selector  : [child | last-child | of-type | last-of-type ]
+// $context   : [optional] The context (columns spanned by parent).
+// $from      : The start-direction for your document.
+@mixin remove-nth-omega(
+  $n        : last,
+  $selector : child,
+  $context  : $total-columns,
+  $from     : $from-direction
+) {
+  &:#{format-nth($n,$selector)} { @include remove-omega($context,$from); }
+}

data/sass/susy/_media.scss

@@ -36,6 +36,10 @@
   $max          : nth($media-layout,3);
   $ie           : nth($media-layout,4);
 
+  @if not $breakpoint-media-output and not $breakpoint-ie-output {
+    @warn "Either $breakpoint-media-output or $breakpoint-ie-output must be true for at-breakpoint to work.";
+  }
+
   // We need to have either a min-width breakpoint or a layout in order to proceed.
   @if $min or $layout or $max {
 
@@ -48,31 +52,33 @@
     @if $layout {
       // Set our new layout context.
       @include layout($layout) {
-        @if $min and $max {
-          // Both $min and $max
-          @media (min-width: $min) and (max-width: $max) {
-            @content;
-          }
-        } @else {
-          @if (not $min) and (not $max) {
-            // Neither $min nor $max:
-            // We can create a breakpoint based on the number of columns in the layout.
-            $min: fix-ems(container-outer-width());
-          }
-          @if $min {
-            // Min only:
-            @media (min-width: $min) {
+        @if $breakpoint-media-output {
+          @if $min and $max {
+            // Both $min and $max
+            @media (min-width: $min) and (max-width: $max) {
               @content;
             }
           } @else {
-            // Max only: 
-            @media (max-width: $max) {
-              @content;
-            }              
+            @if (not $min) and (not $max) {
+              // Neither $min nor $max:
+              // We can create a breakpoint based on the number of columns in the layout.
+              $min: fix-ems(container-outer-width());
+            }
+            @if $min {
+              // Min only:
+              @media (min-width: $min) {
+                @content;
+              }
+            } @else {
+              // Max only:
+              @media (max-width: $max) {
+                @content;
+              }
+            }
           }
         }
         // Set an IE fallback
-        @if $ie {
+        @if $ie and $breakpoint-ie-output {
           @if (type-of($ie) == 'bool') {
             $ie: 'lt-ie9';
           }

data/sass/susy/_settings.scss

@@ -28,9 +28,19 @@ $omega-float        : opposite-position($from-direction)    !default;
 $container-width    : false           !default;
 
 // Container Style:
-// 'magic'  - Static (fixed or elastic) when there's enough space, 
+// 'magic'  - Static (fixed or elastic) when there's enough space,
 //            fluid when there isn't. This is the SUSY MAGIC SAUCE(TM).
 // 'static' - Forces the grid container to remain static at all times.
 // 'fluid'  - Forces the grid to remain fluid at all times.
 //            (this will overrule any static $container-width settings)
-$container-style    : mixed           !default;
+$container-style    : magic           !default;
+
+// ---------------------------------------------------------------------------
+// IE Settings
+
+// When you are using a seperate IE stylesheet,
+// you can use these settings to control the output of at-breakpoint.
+// By default, at-breakpoint will output media-queries as well as
+// any defined ie-fallback classes.
+$breakpoint-media-output  : true;
+$breakpoint-ie-output     : true;

data/susy.gemspec

@@ -2,20 +2,20 @@
 
 Gem::Specification.new do |s|
   s.name = "susy"
-  s.version = "1.0.rc.2"
+  s.version = "1.0.rc.3"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 1.2") if s.respond_to? :required_rubygems_version=
   s.authors = ["Eric Meyer"]
-  s.date = "2012-06-25"
+  s.date = "2012-07-13"
   s.description = "Susy grids are fluid on the inside, ready to respond at any moment, but contained in the candy shell of your choice, so they respond how and when and where you want them to. We don't design your site or dictate your markup, we just do the math and get out of your way."
   s.email = "eric@oddbird.net"
-  s.extra_rdoc_files = ["CHANGELOG.mkdn", "LICENSE.txt", "README.mkdn", "lib/susy.rb"]
-  s.files = ["CHANGELOG.mkdn", "LICENSE.txt", "Manifest", "README.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"]
+  s.extra_rdoc_files = ["CHANGELOG.mkdn", "LICENSE.txt", "README.md", "lib/susy.rb"]
+  s.files = ["CHANGELOG.mkdn", "LICENSE.txt", "Manifest", "README.md", "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", "test/config.rb", "test/css/background.css", "test/css/grid.css", "test/css/margin.css", "test/css/media.css", "test/css/padding.css", "test/scss/background.scss", "test/scss/grid.scss", "test/scss/margin.scss", "test/scss/media.scss", "test/scss/padding.scss"]
   s.homepage = "http://susy.oddbird.net/"
-  s.rdoc_options = ["--line-numbers", "--inline-source", "--title", "Susy", "--main", "README.mkdn"]
+  s.rdoc_options = ["--line-numbers", "--inline-source", "--title", "Susy", "--main", "README.md"]
   s.require_paths = ["lib"]
   s.rubyforge_project = "susy"
-  s.rubygems_version = "1.8.24"
+  s.rubygems_version = "1.8.15"
   s.summary = "Responsive grids for Compass."
 
   if s.respond_to? :specification_version then

data/test/config.rb

@@ -0,0 +1,10 @@
+# Compass CSS framework config file
+
+project_type = :stand_alone
+http_path = "/"
+sass_dir = "scss"
+css_dir = "css"
+line_comments = false
+preferred_syntax = :scss
+output_style = :expanded
+relative_assets = true

data/test/css/background.css

@@ -0,0 +1,16 @@
+.background {
+  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(0%, rgba(100, 100, 225, 0.25)), color-stop(6.78%, rgba(100, 100, 225, 0.25)), color-stop(6.78%, rgba(0, 0, 0, 0)), color-stop(8.475%, rgba(0, 0, 0, 0)), color-stop(8.475%, rgba(100, 100, 225, 0.25)), color-stop(15.254%, rgba(100, 100, 225, 0.25)), color-stop(15.254%, rgba(0, 0, 0, 0)), color-stop(16.949%, rgba(0, 0, 0, 0)), color-stop(16.949%, rgba(100, 100, 225, 0.25)), color-stop(23.729%, rgba(100, 100, 225, 0.25)), color-stop(23.729%, rgba(0, 0, 0, 0)), color-stop(25.424%, rgba(0, 0, 0, 0)), color-stop(25.424%, rgba(100, 100, 225, 0.25)), color-stop(32.203%, rgba(100, 100, 225, 0.25)), color-stop(32.203%, rgba(0, 0, 0, 0)), color-stop(33.898%, rgba(0, 0, 0, 0)), color-stop(33.898%, rgba(100, 100, 225, 0.25)), color-stop(40.678%, rgba(100, 100, 225, 0.25)), color-stop(40.678%, rgba(0, 0, 0, 0)), color-stop(42.373%, rgba(0, 0, 0, 0)), color-stop(42.373%, rgba(100, 100, 225, 0.25)), color-stop(49.153%, rgba(100, 100, 225, 0.25)), color-stop(49.153%, rgba(0, 0, 0, 0)), color-stop(50.847%, rgba(0, 0, 0, 0)), color-stop(50.847%, rgba(100, 100, 225, 0.25)), color-stop(57.627%, rgba(100, 100, 225, 0.25)), color-stop(57.627%, rgba(0, 0, 0, 0)), color-stop(59.322%, rgba(0, 0, 0, 0)), color-stop(59.322%, rgba(100, 100, 225, 0.25)), color-stop(66.102%, rgba(100, 100, 225, 0.25)), color-stop(66.102%, rgba(0, 0, 0, 0)), color-stop(67.797%, rgba(0, 0, 0, 0)), color-stop(67.797%, rgba(100, 100, 225, 0.25)), color-stop(74.576%, rgba(100, 100, 225, 0.25)), color-stop(74.576%, rgba(0, 0, 0, 0)), color-stop(76.271%, rgba(0, 0, 0, 0)), color-stop(76.271%, rgba(100, 100, 225, 0.25)), color-stop(83.051%, rgba(100, 100, 225, 0.25)), color-stop(83.051%, rgba(0, 0, 0, 0)), color-stop(84.746%, rgba(0, 0, 0, 0)), color-stop(84.746%, rgba(100, 100, 225, 0.25)), color-stop(91.525%, rgba(100, 100, 225, 0.25)), color-stop(91.525%, rgba(0, 0, 0, 0)), color-stop(93.22%, rgba(0, 0, 0, 0)), color-stop(93.22%, rgba(100, 100, 225, 0.25)), color-stop(100.0%, rgba(100, 100, 225, 0.25)), color-stop(100.0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
+  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(100, 100, 225, 0.25) 0%, rgba(100, 100, 225, 0.25) 6.78%, rgba(0, 0, 0, 0) 6.78%, rgba(0, 0, 0, 0) 8.475%, rgba(100, 100, 225, 0.25) 8.475%, rgba(100, 100, 225, 0.25) 15.254%, rgba(0, 0, 0, 0) 15.254%, rgba(0, 0, 0, 0) 16.949%, rgba(100, 100, 225, 0.25) 16.949%, rgba(100, 100, 225, 0.25) 23.729%, rgba(0, 0, 0, 0) 23.729%, rgba(0, 0, 0, 0) 25.424%, rgba(100, 100, 225, 0.25) 25.424%, rgba(100, 100, 225, 0.25) 32.203%, rgba(0, 0, 0, 0) 32.203%, rgba(0, 0, 0, 0) 33.898%, rgba(100, 100, 225, 0.25) 33.898%, rgba(100, 100, 225, 0.25) 40.678%, rgba(0, 0, 0, 0) 40.678%, rgba(0, 0, 0, 0) 42.373%, rgba(100, 100, 225, 0.25) 42.373%, rgba(100, 100, 225, 0.25) 49.153%, rgba(0, 0, 0, 0) 49.153%, rgba(0, 0, 0, 0) 50.847%, rgba(100, 100, 225, 0.25) 50.847%, rgba(100, 100, 225, 0.25) 57.627%, rgba(0, 0, 0, 0) 57.627%, rgba(0, 0, 0, 0) 59.322%, rgba(100, 100, 225, 0.25) 59.322%, rgba(100, 100, 225, 0.25) 66.102%, rgba(0, 0, 0, 0) 66.102%, rgba(0, 0, 0, 0) 67.797%, rgba(100, 100, 225, 0.25) 67.797%, rgba(100, 100, 225, 0.25) 74.576%, rgba(0, 0, 0, 0) 74.576%, rgba(0, 0, 0, 0) 76.271%, rgba(100, 100, 225, 0.25) 76.271%, rgba(100, 100, 225, 0.25) 83.051%, rgba(0, 0, 0, 0) 83.051%, rgba(0, 0, 0, 0) 84.746%, rgba(100, 100, 225, 0.25) 84.746%, rgba(100, 100, 225, 0.25) 91.525%, rgba(0, 0, 0, 0) 91.525%, rgba(0, 0, 0, 0) 93.22%, rgba(100, 100, 225, 0.25) 93.22%, rgba(100, 100, 225, 0.25) 100.0%, rgba(0, 0, 0, 0) 100.0%, rgba(0, 0, 0, 0) 100%);
+  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(100, 100, 225, 0.25) 0%, rgba(100, 100, 225, 0.25) 6.78%, rgba(0, 0, 0, 0) 6.78%, rgba(0, 0, 0, 0) 8.475%, rgba(100, 100, 225, 0.25) 8.475%, rgba(100, 100, 225, 0.25) 15.254%, rgba(0, 0, 0, 0) 15.254%, rgba(0, 0, 0, 0) 16.949%, rgba(100, 100, 225, 0.25) 16.949%, rgba(100, 100, 225, 0.25) 23.729%, rgba(0, 0, 0, 0) 23.729%, rgba(0, 0, 0, 0) 25.424%, rgba(100, 100, 225, 0.25) 25.424%, rgba(100, 100, 225, 0.25) 32.203%, rgba(0, 0, 0, 0) 32.203%, rgba(0, 0, 0, 0) 33.898%, rgba(100, 100, 225, 0.25) 33.898%, rgba(100, 100, 225, 0.25) 40.678%, rgba(0, 0, 0, 0) 40.678%, rgba(0, 0, 0, 0) 42.373%, rgba(100, 100, 225, 0.25) 42.373%, rgba(100, 100, 225, 0.25) 49.153%, rgba(0, 0, 0, 0) 49.153%, rgba(0, 0, 0, 0) 50.847%, rgba(100, 100, 225, 0.25) 50.847%, rgba(100, 100, 225, 0.25) 57.627%, rgba(0, 0, 0, 0) 57.627%, rgba(0, 0, 0, 0) 59.322%, rgba(100, 100, 225, 0.25) 59.322%, rgba(100, 100, 225, 0.25) 66.102%, rgba(0, 0, 0, 0) 66.102%, rgba(0, 0, 0, 0) 67.797%, rgba(100, 100, 225, 0.25) 67.797%, rgba(100, 100, 225, 0.25) 74.576%, rgba(0, 0, 0, 0) 74.576%, rgba(0, 0, 0, 0) 76.271%, rgba(100, 100, 225, 0.25) 76.271%, rgba(100, 100, 225, 0.25) 83.051%, rgba(0, 0, 0, 0) 83.051%, rgba(0, 0, 0, 0) 84.746%, rgba(100, 100, 225, 0.25) 84.746%, rgba(100, 100, 225, 0.25) 91.525%, rgba(0, 0, 0, 0) 91.525%, rgba(0, 0, 0, 0) 93.22%, rgba(100, 100, 225, 0.25) 93.22%, rgba(100, 100, 225, 0.25) 100.0%, rgba(0, 0, 0, 0) 100.0%, rgba(0, 0, 0, 0) 100%);
+  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(100, 100, 225, 0.25) 0%, rgba(100, 100, 225, 0.25) 6.78%, rgba(0, 0, 0, 0) 6.78%, rgba(0, 0, 0, 0) 8.475%, rgba(100, 100, 225, 0.25) 8.475%, rgba(100, 100, 225, 0.25) 15.254%, rgba(0, 0, 0, 0) 15.254%, rgba(0, 0, 0, 0) 16.949%, rgba(100, 100, 225, 0.25) 16.949%, rgba(100, 100, 225, 0.25) 23.729%, rgba(0, 0, 0, 0) 23.729%, rgba(0, 0, 0, 0) 25.424%, rgba(100, 100, 225, 0.25) 25.424%, rgba(100, 100, 225, 0.25) 32.203%, rgba(0, 0, 0, 0) 32.203%, rgba(0, 0, 0, 0) 33.898%, rgba(100, 100, 225, 0.25) 33.898%, rgba(100, 100, 225, 0.25) 40.678%, rgba(0, 0, 0, 0) 40.678%, rgba(0, 0, 0, 0) 42.373%, rgba(100, 100, 225, 0.25) 42.373%, rgba(100, 100, 225, 0.25) 49.153%, rgba(0, 0, 0, 0) 49.153%, rgba(0, 0, 0, 0) 50.847%, rgba(100, 100, 225, 0.25) 50.847%, rgba(100, 100, 225, 0.25) 57.627%, rgba(0, 0, 0, 0) 57.627%, rgba(0, 0, 0, 0) 59.322%, rgba(100, 100, 225, 0.25) 59.322%, rgba(100, 100, 225, 0.25) 66.102%, rgba(0, 0, 0, 0) 66.102%, rgba(0, 0, 0, 0) 67.797%, rgba(100, 100, 225, 0.25) 67.797%, rgba(100, 100, 225, 0.25) 74.576%, rgba(0, 0, 0, 0) 74.576%, rgba(0, 0, 0, 0) 76.271%, rgba(100, 100, 225, 0.25) 76.271%, rgba(100, 100, 225, 0.25) 83.051%, rgba(0, 0, 0, 0) 83.051%, rgba(0, 0, 0, 0) 84.746%, rgba(100, 100, 225, 0.25) 84.746%, rgba(100, 100, 225, 0.25) 91.525%, rgba(0, 0, 0, 0) 91.525%, rgba(0, 0, 0, 0) 93.22%, rgba(100, 100, 225, 0.25) 93.22%, rgba(100, 100, 225, 0.25) 100.0%, rgba(0, 0, 0, 0) 100.0%, rgba(0, 0, 0, 0) 100%);
+  background-image: linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(100, 100, 225, 0.25) 0%, rgba(100, 100, 225, 0.25) 6.78%, rgba(0, 0, 0, 0) 6.78%, rgba(0, 0, 0, 0) 8.475%, rgba(100, 100, 225, 0.25) 8.475%, rgba(100, 100, 225, 0.25) 15.254%, rgba(0, 0, 0, 0) 15.254%, rgba(0, 0, 0, 0) 16.949%, rgba(100, 100, 225, 0.25) 16.949%, rgba(100, 100, 225, 0.25) 23.729%, rgba(0, 0, 0, 0) 23.729%, rgba(0, 0, 0, 0) 25.424%, rgba(100, 100, 225, 0.25) 25.424%, rgba(100, 100, 225, 0.25) 32.203%, rgba(0, 0, 0, 0) 32.203%, rgba(0, 0, 0, 0) 33.898%, rgba(100, 100, 225, 0.25) 33.898%, rgba(100, 100, 225, 0.25) 40.678%, rgba(0, 0, 0, 0) 40.678%, rgba(0, 0, 0, 0) 42.373%, rgba(100, 100, 225, 0.25) 42.373%, rgba(100, 100, 225, 0.25) 49.153%, rgba(0, 0, 0, 0) 49.153%, rgba(0, 0, 0, 0) 50.847%, rgba(100, 100, 225, 0.25) 50.847%, rgba(100, 100, 225, 0.25) 57.627%, rgba(0, 0, 0, 0) 57.627%, rgba(0, 0, 0, 0) 59.322%, rgba(100, 100, 225, 0.25) 59.322%, rgba(100, 100, 225, 0.25) 66.102%, rgba(0, 0, 0, 0) 66.102%, rgba(0, 0, 0, 0) 67.797%, rgba(100, 100, 225, 0.25) 67.797%, rgba(100, 100, 225, 0.25) 74.576%, rgba(0, 0, 0, 0) 74.576%, rgba(0, 0, 0, 0) 76.271%, rgba(100, 100, 225, 0.25) 76.271%, rgba(100, 100, 225, 0.25) 83.051%, rgba(0, 0, 0, 0) 83.051%, rgba(0, 0, 0, 0) 84.746%, rgba(100, 100, 225, 0.25) 84.746%, rgba(100, 100, 225, 0.25) 91.525%, rgba(0, 0, 0, 0) 91.525%, rgba(0, 0, 0, 0) 93.22%, rgba(100, 100, 225, 0.25) 93.22%, rgba(100, 100, 225, 0.25) 100.0%, rgba(0, 0, 0, 0) 100.0%, rgba(0, 0, 0, 0) 100%);
+  background-position: left top;
+  -webkit-background-origin: content;
+  -moz-background-origin: content;
+  -ms-background-origin: content-box;
+  -o-background-origin: content-box;
+  background-origin: content-box;
+  -webkit-background-clip: content-box;
+  -moz-background-clip: content-box;
+  background-clip: content-box;
+}

data/test/css/grid.css

@@ -0,0 +1,77 @@
+.container {
+  *zoom: 1;
+  max-width: 59em;
+  _width: 59em;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+.container:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.complex-container {
+  *zoom: 1;
+  max-width: 59em;
+  _width: 59em;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+.complex-container:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+@media (min-width: 71em) {
+  .complex-container {
+    max-width: 69em;
+    _width: 69em;
+  }
+}
+
+.span-columns {
+  width: 49.153%;
+  float: right;
+  margin-right: 0;
+  #margin-left: -1em;
+  display: inline;
+}
+
+.reset-columns {
+  float: none;
+  width: auto;
+  margin-right: auto;
+  #margin-left: auto;
+  display: block;
+}
+
+.omega {
+  float: right;
+  margin-right: 0;
+  #margin-left: -1em;
+  display: inline;
+}
+
+.nth-omega:last-child {
+  float: right;
+  margin-right: 0;
+  #margin-left: -1em;
+  display: inline;
+}
+
+.remove-omega {
+  float: left;
+  margin-right: 1.695%;
+  #margin-left: 0;
+}
+
+.remove-nth-omega:last-child {
+  float: left;
+  margin-right: 1.695%;
+  #margin-left: 0;
+}

data/test/css/margin.css

@@ -0,0 +1,20 @@
+.pre {
+  margin-left: 25.424%;
+}
+
+.post {
+  margin-right: 33.898%;
+}
+
+.push {
+  margin-left: 25.424%;
+}
+
+.pull {
+  margin-left: -33.898%;
+}
+
+.squish {
+  margin-left: 12.821%;
+  margin-right: 25.641%;
+}

data/test/css/media.css

@@ -0,0 +1,37 @@
+.layout {
+  *zoom: 1;
+  max-width: 19em;
+  _width: 19em;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+.layout:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+@media (min-width: 31em) {
+  .breakpoint .break6 {
+    *zoom: 1;
+    max-width: 29em;
+    _width: 29em;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1em;
+    padding-right: 1em;
+  }
+  .breakpoint .break6:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+@media (min-width: 30em) and (max-width: 60em) {
+  .breakpoint .break60-8-30 {
+    max-width: 39em;
+    _width: 39em;
+  }
+}

data/test/css/padding.css

@@ -0,0 +1,12 @@
+.prefix {
+  padding-left: 16.949%;
+}
+
+.suffix {
+  padding-right: 22.727%;
+}
+
+.pad {
+  padding-left: 20.408%;
+  padding-right: 40.816%;
+}

data/test/scss/background.scss

@@ -0,0 +1,11 @@
+// ---------------------------------------------------------------------------
+// Imports
+
+@import "../../sass/susy";
+
+// ---------------------------------------------------------------------------
+// Background
+
+.background {
+  @include susy-grid-background;
+}

data/test/scss/grid.scss

@@ -0,0 +1,39 @@
+// ---------------------------------------------------------------------------
+// Imports
+
+@import "../../sass/susy";
+
+// ---------------------------------------------------------------------------
+// Grid
+
+.container {
+  @include container;
+}
+
+.complex-container {
+  @include container($total-columns,14);
+}
+
+.span-columns {
+  @include span-columns(6 omega,12);
+}
+
+.reset-columns {
+  @include reset-columns;
+}
+
+.omega {
+  @include omega;
+}
+
+.nth-omega {
+  @include nth-omega;
+}
+
+.remove-omega {
+  @include remove-omega;
+}
+
+.remove-nth-omega {
+  @include remove-nth-omega;
+}

data/test/scss/margin.scss

@@ -0,0 +1,27 @@
+// ---------------------------------------------------------------------------
+// Imports
+
+@import "../../sass/susy";
+
+// ---------------------------------------------------------------------------
+// Margin
+
+.pre {
+  @include pre(3);
+}
+
+.post {
+  @include post(4,12);
+}
+
+.push {
+  @include push(3);
+}
+
+.pull {
+  @include pull(4,12);
+}
+
+.squish {
+  @include squish(1,2,8);
+}

data/test/scss/media.scss

@@ -0,0 +1,21 @@
+// ---------------------------------------------------------------------------
+// Imports
+
+@import "../../sass/susy";
+
+// ---------------------------------------------------------------------------
+// Media
+
+@include layout(4) {
+  .layout { @include container; }
+}
+
+.breakpoint{
+  @include at-breakpoint(6) {
+    .break6 { @include container; }
+  }
+
+  @include at-breakpoint(60em 8 30em) {
+    .break60-8-30 { @include set-container-width; }
+  }
+}

data/test/scss/padding.scss

@@ -0,0 +1,19 @@
+// ---------------------------------------------------------------------------
+// Imports
+
+@import "../../sass/susy";
+
+// ---------------------------------------------------------------------------
+// Padding
+
+.prefix {
+  @include prefix(2);
+}
+
+.suffix {
+  @include suffix(2,9);
+}
+
+.pad {
+  @include pad(2,4,10);
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification 
 name: susy
 version: !ruby/object:Gem::Version 
-  hash: -1285962380
+  hash: -1697015886
   prerelease: 4
   segments: 
   - 1
   - 0
   - rc
-  - 2
-  version: 1.0.rc.2
+  - 3
+  version: 1.0.rc.3
 platform: ruby
 authors: 
 - Eric Meyer
@@ -16,7 +16,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2012-06-25 00:00:00 Z
+date: 2012-07-13 00:00:00 Z
 dependencies: 
 - !ruby/object:Gem::Dependency 
   name: compass
@@ -42,7 +42,7 @@ dependencies:
     requirements: 
     - - ">="
       - !ruby/object:Gem::Version 
-        hash: 294173447
+        hash: -714522370
         segments: 
         - 3
         - 2
@@ -61,13 +61,13 @@ extensions: []
 extra_rdoc_files: 
 - CHANGELOG.mkdn
 - LICENSE.txt
-- README.mkdn
+- README.md
 - lib/susy.rb
 files: 
 - CHANGELOG.mkdn
 - LICENSE.txt
 - Manifest
-- README.mkdn
+- README.md
 - Rakefile
 - VERSION
 - lib/susy.rb
@@ -83,6 +83,17 @@ files:
 - templates/project/_base.scss
 - templates/project/manifest.rb
 - templates/project/screen.scss
+- test/config.rb
+- test/css/background.css
+- test/css/grid.css
+- test/css/margin.css
+- test/css/media.css
+- test/css/padding.css
+- test/scss/background.scss
+- test/scss/grid.scss
+- test/scss/margin.scss
+- test/scss/media.scss
+- test/scss/padding.scss
 homepage: http://susy.oddbird.net/
 licenses: []
 
@@ -93,7 +104,7 @@ rdoc_options:
 - --title
 - Susy
 - --main
-- README.mkdn
+- README.md
 require_paths: 
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement 

data/README.mkdn

@@ -1,37 +0,0 @@
-# Susy [a Compass plugin]
-
-Susy is a semantic CSS grid system with a responsive twist.
-
-The web is a responsive place, 
-from your lithe & lively development process 
-to your end user's super-tablet-multi-magic-lap-phone. 
-You need grids that are powerful, but custom; 
-reliable, but responsive.
-
-Susy grids are fluid on the inside, 
-ready to respond at any moment, 
-but contained in the candy shell of your choice, 
-so they respond how and when and where you want them to.
-
-This isn't another one-size-fits-all grid framework 
-that will make your sites look identical 
-and litter your markup with meaningless "col2of5" jargon.
-We don't design your site or write your markup,
-we just do the math and get out of your way.
-
-## Resources
-- [Website](http://susy.oddbird.net)
-- [Changelog](https://github.com/ericam/susy/blob/master/CHANGELOG.mkdn)
-- [Tutorial](http://susy.oddbird.net/guides/getting-started/)
-- [Reference](http://susy.oddbird.net/guides/reference/)
-- [Sites using Susy](http://susy.oddbird.net/sites-using-susy/)
-- [Twitter @CompassSusy](http://twitter.com/compasssusy/)
-
-## Why is 1.0 a release candidate?
-
-Susy 1.0 is stable and tested, all the features are in,
-and we're ready to launch. 
-But our 1.0 depends on unreleased Compass and Sass features.
-We think those features are stable as well,
-and we'll do what it takes to stay on top of any changes they make,
-but we can't officially land until they do.