compass-susy-plugin 0.6.3 → 0.7.0.pre1

data/Manifest

@@ -5,6 +5,7 @@ Manifest
 Rakefile
 README.mkdn
 sass/susy/_grid.sass
+sass/susy/_reset.sass
 sass/susy/_utils.sass
 sass/susy/_text.sass
 sass/susy/_susy.sass
@@ -12,6 +13,7 @@ templates/project/print.sass
 templates/project/screen.sass
 templates/project/ie.sass
 templates/project/_base.sass
+templates/project/_defaults.sass
 templates/project/manifest.rb
 VERSION
 LICENSE.txt

data/README.mkdn

@@ -26,8 +26,9 @@ Create a Susy-based Compass Project
 
     compass -r susy -f susy <project name>
 
-Then edit your `_base.sass`, `screen.sass` and `print.sass` files accordingly.
-A reset is added automatically.
+Then edit your `_base.sass`, `_defaults.sass`, `screen.sass` and `print.sass`
+files accordingly. A reset is added automatically, and includes help for some
+HTML5 elements.
 
 Philosophy and Goals
 --------------------
@@ -48,12 +49,12 @@ It is important for accessibility and usability that we are:
   side-scroll bar. No one likes that. On the large end our design integrity
   and line lengths are more important than taking up all the possible space.
 
-In order to achieve both we need to combine the best of the elastic (em-based)
-and fluid (%-based) models. The solution is simple: First we build a fluid
-grid, then place it inside an elastic shell, and apply a maximum width to that
-shell so that it never exceeds the size of the viewport. It's simple in
-theory, but daunting in practice, as you constantly have to adjust your math
-based on the context.
+In order to achieve both goals we need to combine the best of the elastic
+(em-based) and fluid (%-based) models. The solution is simple: First we build
+a fluid grid, then place it inside an elastic shell, and apply a maximum width
+to that shell so that it never exceeds the size of the viewport. It's simple
+in theory, but daunting in practice, as you constantly have to adjust your
+math based on the context.
 
 But Susy harnesses the power of Compass and Sass to do all the math for you.
 
@@ -61,9 +62,12 @@ Grid Basics
 ===========
 
 * Set up your default grid values (total columns, column width, gutter
-  width, side gutter width), your base font size, and other style defaults
+  width, side gutter width), your base font size, and important mixins
   in `_base.sass`.
 
+* Set defaults for all the important HTML tags in `_defaults.sass`. It's
+  better than using the browser defaults. And better than using ours.
+
 * Create your grid in `screen.sass`: apply the `+susy` mixin to the `body`
   element and the `+container` mixin to the element that contains the page
   grid.
@@ -123,36 +127,35 @@ Extra Utility Mixins
 Extra utilities are included in Susy's `utils.sass` file, with additional list
 options, experimental (CSS3/proprietary) CSS, and more.
 
-* `+show-grid(!src)` will remove all your backgrounds and repeat the specified
-  grid image on an element. Good for testing your baseline grid.
+* `+show-grid(!src)` - Repeat the specified grid image on an element. Good for
+  testing your baseline grid.
 
-* `+inline-block-list([!horizontalpadding])` for making lists inline-block
-  when floating just won't do the trick.
+* `+inline-block-list([!horizontalpadding])` - Make list items inline-block
+  when floating just won't do the trick (if you need them centered or right).
 
-* `+hide` for hiding content from visual browsers while keeping accessability
+* `+hide` - Hide content from visual browsers while keeping accessability
   intact.
 
-* `+skip-link([!top = 0, !right, !bottom, !left])` hide a link, and then show
+* `+skip-link([!top = 0, !right, !bottom, !left])` - Hide a link, and then show
   it again on focus. the TRBL settings allow you to place it absolutely on
   display. Default will be top left of the positioning context.
 
-And then the fun stuff:
+And then the fun stuff in `_CSS3.sass`:
 
-* `+opacity(!opacity)` adds cross-browser opacity settings (takes a range of
-  0 to 1).
+* `+opacity(!opacity)` - add cross-browser opacity settings (takes a range of
+  0 to 1). `+transprent` and `+opaque` are available as shortcuts.
 
-* `+border-radius(!radius)` (`+border-bottom-left-radius` etc. all work) for
-  rounded corners in supporting browsers.
+* `+border-radius(!radius)` - Rounded corners in supporting browsers.
+  `+border-bottom-left-radius` etc. all work.
 
-* `+box-sizing(!model)` for setting the box sizing model in supporting
-  browsers.
+* `+box-sizing(!model)` - Set the box sizing model in supporting browsers.
 
-* `+box-shadow(!verticaloffset, !horizontaloffset, !blur, !color)` for
-  box-shadow in webkit, mozilla and CSS3.
+* `+box-shadow(!verticaloffset, !horizontaloffset, !blur, !color)` -
+  Box-shadow in supporting browsers.
 
 * `+column-count(!number)`, `+column-gap(!length)`, `+column-width(!length)`,
-  and `+column-rule(!width, !style, !color)` for CSS columns in webkit,
-  mozilla and CSS3.
+  and `+column-rule(!width, !style, !color)` - CSS columns in supporting
+  browsers.
 
 Advanced Options
 ================
@@ -190,7 +193,7 @@ advanced options hidden inside. Here's a few:
     It requires more maintenance on your part, but the result is a
     hack-free output.
     
-    The susy mixins that use either hacks or targeted mixins are
+    The Susy mixins that use either hacks or targeted mixins are
     `+omega` (`+ie-omega([!right-floated = false])`), `+inline-block`
     (`+ie-inline-block`), and `+inline-block-list` which sets
     `+inline-block` on the list items.
@@ -207,7 +210,7 @@ advanced options hidden inside. Here's a few:
     Example:
         
         #nav
-          :padding-right= gutter(5) + "%"
+          padding-right= gutter(5) + "%"
 
 * `columns(!number, !context)` returns the span of `!number` columns in
   `!context` as a percentage (again without the units declared). This span
@@ -216,7 +219,7 @@ advanced options hidden inside. Here's a few:
     Example:
         
         #nav
-          :padding-left= columns(3,5) + "%"
+          padding-left= columns(3,5) + "%"
 
 * `side_gutter()` is also available and takes no arguments since it is always
   used at the top nesting level.
@@ -229,4 +232,4 @@ advanced options hidden inside. Here's a few:
     Example:
     
         #nav
-          :border-bottom= px2em(2) + "em"
+          border-bottom= px2em(2) + "em"

data/Rakefile

@@ -12,7 +12,7 @@ begin
     p.url = "http://github.com/ericam/compass-susy-plugin"
     p.author = ['Eric Meyer']
     p.email = "eric@oddbird.net"
-    p.dependencies = ["compass"]
+    p.dependencies = ["compass >=0.10.0.pre1"]
     p.has_rdoc = false
   end
  

data/VERSION

@@ -1 +1 @@
-0.6.3
+0.7.0.pre1

data/compass-susy-plugin.gemspec

@@ -2,19 +2,20 @@
 
 Gem::Specification.new do |s|
   s.name = %q{compass-susy-plugin}
-  s.version = "0.6.3"
+  s.version = "0.7.0.pre1"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 1.2") if s.respond_to? :required_rubygems_version=
   s.authors = ["Eric Meyer"]
-  s.date = %q{2009-07-12}
+  s.date = %q{2009-11-30}
   s.description = %q{Susy is a ground-up native Compass plugin grid system that takes full advantage of Sass' capabilities to remove the tedium from grid-based web design.}
   s.email = %q{eric@oddbird.net}
-  s.extra_rdoc_files = ["lib/susy/compass_plugin.rb", "lib/susy/sass_extensions.rb", "lib/susy.rb", "README.mkdn"]
-  s.files = ["lib/susy/compass_plugin.rb", "lib/susy/sass_extensions.rb", "lib/susy.rb", "Manifest", "Rakefile", "README.mkdn", "sass/susy/_grid.sass", "sass/susy/_utils.sass", "sass/susy/_text.sass", "sass/susy/_susy.sass", "templates/project/_base.sass", "templates/project/screen.sass", "templates/project/print.sass", "templates/project/ie.sass", "templates/project/manifest.rb", "VERSION", "LICENSE.txt", "docs/tutorial/index.mkdn", "docs/tutorial/figures/susy_element.png", "docs/tutorial/figures/susy_grid.png", "compass-susy-plugin.gemspec"]
+  s.extra_rdoc_files = ["lib/susy/compass_plugin.rb", "lib/susy/sass_extensions.rb", "lib/susy.rb", "README.mkdn", "LICENSE.txt"]
+  s.files = ["lib/susy/compass_plugin.rb", "lib/susy/sass_extensions.rb", "lib/susy.rb", "Manifest", "Rakefile", "README.mkdn", "sass/susy/_grid.sass", "sass/susy/_reset.sass", "sass/susy/_utils.sass", "sass/susy/_text.sass", "sass/susy/_susy.sass", "templates/project/print.sass", "templates/project/screen.sass", "templates/project/ie.sass", "templates/project/_base.sass", "templates/project/_defaults.sass", "templates/project/manifest.rb", "VERSION", "LICENSE.txt", "compass-susy-plugin.gemspec"]
   s.homepage = %q{http://github.com/ericam/compass-susy-plugin}
-  s.rdoc_options = ["--line-numbers", "--inline-source", "--title", "Compass-Susy-plugin", "--main", "README.mkdn"]
+  s.rdoc_options = ["--line-numbers", "--inline-source", "--title", "Compass-susy-plugin", "--main", "README.mkdn"]
   s.require_paths = ["lib"]
-  s.rubygems_version = %q{1.3.3}
+  s.rubyforge_project = %q{compass-susy-plugin}
+  s.rubygems_version = %q{1.3.5}
   s.summary = %q{A Compass grid system plugin.}
 
   if s.respond_to? :specification_version then
@@ -22,14 +23,11 @@ Gem::Specification.new do |s|
     s.specification_version = 3
 
     if Gem::Version.new(Gem::RubyGemsVersion) >= Gem::Version.new('1.2.0') then
-      s.add_runtime_dependency(%q<compass>, [">= 0"])
-      s.add_development_dependency(%q<echoe>, [">= 0"])
+      s.add_runtime_dependency(%q<compass>, [">= 0.10.0.pre1"])
     else
-      s.add_dependency(%q<compass>, [">= 0"])
-      s.add_dependency(%q<echoe>, [">= 0"])
+      s.add_dependency(%q<compass>, [">= 0.10.0.pre1"])
     end
   else
-    s.add_dependency(%q<compass>, [">= 0"])
-    s.add_dependency(%q<echoe>, [">= 0"])
+    s.add_dependency(%q<compass>, [">= 0.10.0.pre1"])
   end
 end

data/sass/susy/_grid.sass

@@ -1,117 +1,127 @@
-//** Grid Settings **//
+//** The Susy Grid **//
+// Updated 11.20.2009 by Eric A. Meyer
 
-//**
-  Your basic units for the grid
+
+// Your basic settings for the grid.
+// Override these in base.sass to customize your site.
+// The grid_unit will be used for col_width, gutter_width and side_gutter_width
 !grid_unit ||= "em"
 !total_cols ||= 12
 !col_width ||= 4
 !gutter_width ||= 1
 !side_gutter_width ||= !gutter_width
+
+
+// Susy will set your outer shell based on the variables above.
 !container_width = container(!total_cols, !col_width, !gutter_width, !side_gutter_width)
 
 
-//** 
-  set on the outer grid containing element.
+// Set on the outer grid-containing element(s).
 =container(!align = "left")
-  //  clear all floated columns
+  // clear all floated columns
   +clearfix
-  //  align the text back to the left (override for other alignments)
-  :text-align= !align
-  //  use auto horizontal margins to center your page in the body
-  :margin
-    :left auto
-    :right auto
-  //  set the page width based on column settings
-  :width= !container_width + !grid_unit
-  //  never exceed 100% of the browser window (no side-scrolling)
-  :max-width 100%
-
-
-//** 
-  set on any column element, even nested ones.
-  the first agument [required] is the number of columns to span
-  the second argument is the context (columns spanned by parent)
-  this is required in any nested context
-  by default a grid-col is floated left with a right gutter
-  override that with +float("right"), +first or +last
+  // align the text back to the left (override for other alignments)
+  text-align= !align
+  // use auto horizontal margins to center your page in the body
+  margin:
+    left: auto
+    right: auto
+  // set the page width based on column settings
+  width= !container_width + !grid_unit
+  // never exceed 100% of the browser window (no side-scrolling)
+  max-width: 100%
+
+
+// Set on any column element, even nested ones.
+// The first agument [required] is the number of columns to span.
+// The second argument is the context (columns spanned by parent).
+//  - Context is required on any nested elements.
+//  - Context MUST NOT be declared on a top-level element.
+// By default a grid-column is floated left with a right gutter.
+//  - Override those with +float("right"), +alpha or +omega
 =columns(!n, !context = false)
-  //  the width of the column is set as a percentage of the context
-  :width= columns(!n, !context) + "%"
-  //  the column is floated left
+  // the column is floated left
   +float("left")
-  //  the right gutter is added as a percentage of the context
-  :margin-right= gutter(!context) + "%"
+  // the width of the column is set as a percentage of the context
+  width= columns(!n, !context) + "%"
+  // the right gutter is added as a percentage of the context
+  margin-right= gutter(!context) + "%"
+
 
-//** 
-  set on any column to add empty colums before or after
+// Set on any element to add empty colums as padding before or after.
 =prefix(!n, !context = false)
-  :padding-left= columns(!n, !context) + gutter(!context) + "%"
+  padding-left= columns(!n, !context) + gutter(!context) + "%"
 
 =suffix(!n, !context = false)
-  :padding-right= columns(!n, !context) + gutter(!context) + "%"
+  padding-right= columns(!n, !context) + gutter(!context) + "%"
+
 
-//**
-  set as shortcut for prefix and suffix
+// Set as a shortcut for both prefix and suffix.
 =pad(!p = 0, !s = 0, !c = false)
   @if !p != 0
     +prefix(!p,!c)
   @if !s != 0
     +suffix(!s,!c)
 
-//**  
-  set on any element spanning the first column in non-nested context
-  to take side-gutters into account
+
+// Set on any element spanning the first column in non-nested context
+// to take side-gutters into account. Recommended that you pass the
+// actual nested contexts (when nested) rather than a true/false argument
+// for the sake of consistency. Effect is the same.
 =alpha(!nested = false)
   @if !nested == false
-    :margin-left= side_gutter() + "%"
-
-//**
-  when global constant !hacks == true:
-  - this will be called automatically with hacks
-  when global constant !hacks == false:
-  - you can call it yourself in ie.sass without the hacks
-=ie-omega(!nested = false, !right = false, !hack = false)
+    margin-left= side_gutter() + "%"
+
+
+// When global constant !hacks == true:
+//  - this will be called automatically with hacks
+// When global constant !hacks == false:
+//  - you can call it yourself in ie.sass without the hacks
+=ie-omega(!nested = false, !dir = "right", !hack = false)
   !s = side_gutter()
-  @if !right
+  @if !dir == "right"
     @if !hack
-      :#margin-left -1%
+      #margin-left: -1%
     @else
-      :margin-left -1%
+      margin-left: -1%
   @else
     @if !nested
       @if !hack
-        :#margin-right -1%
+        #margin-right: -1%
       @else
-        :margin-right -1%
+        margin-right: -1%
     @else
       @if !hack
-        :#margin-right= !s - 1 + "%"
+        #margin-right= !s - 1 + "%"
       @else
-        :margin-right= !s - 1 + "%"
+        margin-right= !s - 1 + "%"
+
 
-//**  
-  set on the last element of a row to take side-gutters into account
-  - set !nested for nested columns
-  - over-ride !omega_float globally or set +float locally for left-floated omega elements
+// Sets the direction that +omega elements are floated
+//  - Override !omega_float globally or set +float locally to change
 !omega_float ||= "right"
 
-=omega(!nested = false, !right = false)
-  !s = side_gutter()
+
+// Set omega on the last element of a row to take side-gutters 
+// and the page edge into account. Set the !nested argument for nested columns. 
+// It is recommended that you pass the actual nested context when nested, 
+// rather than a true/false argument, for the sake of consistency. Effect is the same.
+=omega(!nested = false)
   +float(!omega_float)
   @if !nested
-    :margin-right 0
+    margin-right: 0
   @else
-    :margin-right= !s + "%"
+    margin-right= side_gutter() + "%"
   @if !hacks
     /* ugly hacks for IE6-7 */
-    +ie-omega(!nested, !right,"*")
+    +ie-omega(!nested, !omega_float, true)
     /* end ugly hacks */
     
-//**
-  set on an element that will span it's entire context
-  - no need for +columns, +alpha or +omega on a +full element
+    
+// Set on an element that will span it's entire context.
+// - no need for +columns, +alpha or +omega on a +full element.
 =full(!nested = false)
-  :clear both
+  clear: both
   @if !nested == false
     !s = side_gutter() + "%"
     margin-right= !s

data/sass/susy/_reset.sass

@@ -0,0 +1,6 @@
+/* @group reset */
+@import compass/reset.sass
+
+// HTML5 reset
++reset-html5
+/* @end */

data/sass/susy/_susy.sass

@@ -1,18 +1,24 @@
-//**
-  tell susy whether you are using hacks or conditional comments
+//** Susy **//
+// Updated 11.20.2009 by Eric A. Meyer
+
+
+// Tell susy whether you are using hacks or conditional comments.
 !hacks ||= true
 
+
+// Import all the Important Stuff.
+@import compass/css3.sass
 @import utils.sass
 @import text.sass
 @import grid.sass
 
-//** 
-  body font size set to browser default (usually 16px)
+
+// Set Susy on your BODY element to get things started.
 =susy(!align = "center")
-  //  text-align set to center by default for auto-centering layouts 
-  //  (override !align for left/right-aligned designs)
-  :text-align= !align
-  //  set your base font sizes
-  :font-size= !base_font_size
-  :line-height= !base_line_height
+  // text-align set to center by default for auto-centering layouts 
+  //  - override !align for left/right-aligned designs
+  text-align= !align
+  // font size is set against the browser default (usually 16px)
+  font-size= !base_font_size
+  line-height= !base_line_height
 

data/sass/susy/_text.sass

@@ -1,14 +1,15 @@
-//** Text Settings **//
+//** Susy Text Settings **//
+// Updated 11.20.2009 by Eric A. Meyer
 
-//** 
-  You set the font and line heights in pixels
+
+// The font size and line height are declared in pixels.
+// You override these default settings in base.sass
 !base_font_size_px ||= 16
 !base_line_height_px ||= 24
 
 
-//** 
-  Susy can do the math to make that relative
-  we call base_font_size function (even though we could do the math here)
-  because Susy needs to "remember" our base_font_size_px for px2em()
+// Susy will do the math to make those sizes relative.
+// We call base_font_size function (even though we could do the math here)
+// because Susy needs to "remember" our base_font_size_px for px2em()
 !base_font_size = base_font_size(!base_font_size_px) + "%"
 !base_line_height = (!base_line_height_px / !base_font_size_px) + "em"