susy 1.0.alpha.2 → 1.0.rc.0

data/CHANGELOG.mkdn

@@ -1,6 +1,12 @@
 Susy Changelog
 ==============
 
+v1.0.alpha.2 [May 12 2012]
+--------------------------
+
+* Fix minor bug with repeated 'display' properties.
+* Lower Compass dependency to 0.12.2.rc.0
+
 v1.0.alpha.1 [May 9 2012]
 -------------------------
 

data/Manifest

@@ -2,7 +2,6 @@ CHANGELOG.mkdn
 LICENSE.txt
 Manifest
 README.mkdn
-REFERENCE.mkdn
 Rakefile
 VERSION
 lib/susy.rb

data/README.mkdn

@@ -1,107 +1,26 @@
-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 `span-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 span-columns(3); }
-
-  #content { 
-    @include span-columns(9 omega);
-
-    #main { @include span-columns(6,9); }
-    aside { @include span-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); }
-```
+# 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](https://github.com/ericam/susy/blob/master/docs/source/guides/getting-started.html.md)
+- [Reference](https://github.com/ericam/susy/blob/master/docs/source/guides/reference.html.md#basic-usage)

data/Rakefile

@@ -5,12 +5,12 @@ begin
   require 'echoe'
 
   Echoe.new('susy', open('VERSION').read) do |p|
-    p.summary = "A responsive grid system plugin for Compass."
-    p.description = "Responsive web design with grids the quick and reliable way."
+    p.summary = "Responsive grids for Compass."
+    p.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."
     p.url = "http://susy.oddbird.net/"
     p.author = "Eric Meyer"
     p.email = "eric@oddbird.net"
-    p.dependencies = ["compass >=0.12.2.rc.0"]
+    p.dependencies = ["compass >=0.12.2.rc.0", "sass >=3.2.0.alpha.237"]
   end
 
 rescue LoadError => boom

data/VERSION

@@ -1 +1 @@
-1.0.alpha.2
+1.0.rc.0

data/susy.gemspec

@@ -2,31 +2,34 @@
 
 Gem::Specification.new do |s|
   s.name = "susy"
-  s.version = "1.0.alpha.2"
+  s.version = "1.0.rc.0"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 1.2") if s.respond_to? :required_rubygems_version=
   s.authors = ["Eric Meyer"]
-  s.date = "2012-05-12"
-  s.description = "Responsive web design with grids the quick and reliable way."
+  s.date = "2012-05-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", "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"]
+  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.homepage = "http://susy.oddbird.net/"
   s.rdoc_options = ["--line-numbers", "--inline-source", "--title", "Susy", "--main", "README.mkdn"]
   s.require_paths = ["lib"]
   s.rubyforge_project = "susy"
   s.rubygems_version = "1.8.15"
-  s.summary = "A responsive grid system plugin for Compass."
+  s.summary = "Responsive grids for Compass."
 
   if s.respond_to? :specification_version then
     s.specification_version = 3
 
     if Gem::Version.new(Gem::VERSION) >= Gem::Version.new('1.2.0') then
       s.add_runtime_dependency(%q<compass>, [">= 0.12.2.rc.0"])
+      s.add_runtime_dependency(%q<sass>, [">= 3.2.0.alpha.237"])
     else
       s.add_dependency(%q<compass>, [">= 0.12.2.rc.0"])
+      s.add_dependency(%q<sass>, [">= 3.2.0.alpha.237"])
     end
   else
     s.add_dependency(%q<compass>, [">= 0.12.2.rc.0"])
+    s.add_dependency(%q<sass>, [">= 3.2.0.alpha.237"])
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification 
 name: susy
 version: !ruby/object:Gem::Version 
-  hash: 2004329407
+  hash: -3651558062
   prerelease: 4
   segments: 
   - 1
   - 0
-  - alpha
-  - 2
-  version: 1.0.alpha.2
+  - rc
+  - 0
+  version: 1.0.rc.0
 platform: ruby
 authors: 
 - Eric Meyer
@@ -16,7 +16,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2012-05-12 00:00:00 Z
+date: 2012-05-13 00:00:00 Z
 dependencies: 
 - !ruby/object:Gem::Dependency 
   name: compass
@@ -26,7 +26,7 @@ dependencies:
     requirements: 
     - - ">="
       - !ruby/object:Gem::Version 
-        hash: 1947843481
+        hash: -3651558046
         segments: 
         - 0
         - 12
@@ -36,7 +36,25 @@ dependencies:
         version: 0.12.2.rc.0
   type: :runtime
   version_requirements: *id001
-description: Responsive web design with grids the quick and reliable way.
+- !ruby/object:Gem::Dependency 
+  name: sass
+  prerelease: false
+  requirement: &id002 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        hash: -1706356446
+        segments: 
+        - 3
+        - 2
+        - 0
+        - alpha
+        - 237
+        version: 3.2.0.alpha.237
+  type: :runtime
+  version_requirements: *id002
+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.
 email: eric@oddbird.net
 executables: []
 
@@ -52,7 +70,6 @@ files:
 - LICENSE.txt
 - Manifest
 - README.mkdn
-- REFERENCE.mkdn
 - Rakefile
 - VERSION
 - lib/susy.rb
@@ -106,6 +123,6 @@ rubyforge_project: susy
 rubygems_version: 1.8.15
 signing_key: 
 specification_version: 3
-summary: A responsive grid system plugin for Compass.
+summary: Responsive grids for Compass.
 test_files: []
 

data/REFERENCE.mkdn

@@ -1,301 +0,0 @@
-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 span-columns(3,12); }
-article { @include span-columns(9 omega,12); }
-```
-**Span Columns**: `span-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 span-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 `span-columns` mixin, but returns the math-ready `%`._
-- `<$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)`