compass-susy-plugin 0.7.0.pre6 → 0.7.0.pre7

data/Manifest

@@ -7,15 +7,15 @@ compass-susy-plugin.gemspec
 lib/susy.rb
 lib/susy/compass_plugin.rb
 lib/susy/sass_extensions.rb
-sass/susy/_grid.sass
-sass/susy/_reset.sass
-sass/susy/_susy.sass
-sass/susy/_text.sass
-sass/susy/_utils.sass
-sass/susy/_vertical_rhythm.sass
-templates/project/_base.sass
-templates/project/_defaults.sass
-templates/project/ie.sass
+sass/susy/_grid.scss
+sass/susy/_reset.scss
+sass/susy/_susy.scss
+sass/susy/_text.scss
+sass/susy/_utils.scss
+sass/susy/_vertical_rhythm.scss
+templates/project/_base.scss
+templates/project/_defaults.scss
+templates/project/ie.scss
 templates/project/manifest.rb
-templates/project/print.sass
-templates/project/screen.sass
+templates/project/print.scss
+templates/project/screen.scss

data/README.mkdn

@@ -26,7 +26,7 @@ Create a Susy-based Compass Project
 
     compass -r susy -f susy <project name>
 
-Then edit your `_base.sass`, `_defaults.sass`, `screen.sass` and `print.sass`
+Then edit your `_base.scss`, `_defaults.scss`, `screen.scss` and `print.scss`
 files accordingly. A reset is added automatically, and includes help for some
 HTML5 elements.
 
@@ -61,102 +61,118 @@ But Susy harnesses the power of Compass and Sass to do all the math for you.
 Grid Basics
 ===========
 
-* Set up your default grid values (total columns, column width, gutter
-  width, side gutter width), your base font size, and important mixins
-  in `_base.sass`.
+* Set up your default grid values (total columns, column width, gutter width,
+  side gutter width), your base font size, and important mixins in
+  `_base.scss`.
 
-* Set defaults for all the important HTML tags in `_defaults.sass`. It's
+* Set defaults for all the important HTML tags in `_defaults.scss`. It's
   better than using the browser defaults. And better than using ours.
 
-* Create your grid in `screen.sass`: apply the `+susy` mixin at the top level
-  and the `+container` mixin to the element that contains the page grid.
+* Create your grid in `screen.scss`: apply the `@include susy` mixin at the
+  top level and the `@include container` mixin to the element that contains
+  the page grid.
 
-* Use the `+columns` mixin to declare the width in columns of an element,
-  or `+full` for any element spanning the full width of its context.
+* Use the `@include columns` mixin to declare the width in columns of an
+  element, or `+full` for any element spanning the full width of its context.
 
-* Use `+alpha` and `+omega` to declare elements which include the first or
-  last column within their parent element (`+full` to declare both `+alpha`
-  and `+omega`). Note: `+alpha` is actually only needed in the very top level,
-  and does nothing in nested contexts. Neither is needed on a `+full` element.
+* Use `@include alpha` and `@include omega` to declare elements which include
+  the first or last column within their parent element (`@include full` to
+  declare both `@include alpha` and `@include omega`). Note: `@include alpha`
+  is actually only needed in the very top level, and does nothing in nested
+  contexts. Neither is needed on a `@include full` element.
 
-* Use `+prefix` or `+suffix` to give the width (in columns) of an elements
-  left or right margin, or `+pad` to give both `+prefix` and `+suffix` at
-  once.
+* Use `@include prefix` or `@include suffix` to give the width (in columns) of
+  an elements left or right margin, or `@include pad` to give both `@include
+  prefix` and `@include suffix` at once.
 
 * In nested contexts, all of these mixins take an extra final argument, the
   width in columns of the parent (nesting) element.
 
 That's it for the basics! Here's a sample Susy grid layout:
 
-    +susy
+    @include susy;
      
-    #page
-      +container
+    #page {
+      @include container; 
+    }
      
-    #brand
-      +full
-      +pad(1,1)
-      h1
-        +full(8)
-        +pad(1,2,8)
+    #brand {
+      @include full;
+      @include pad(1,1);
+      
+      h1 {
+        @include full(8);
+        @include pad(1,2,8); 
+      } 
+    }
         
-    #nav
-      +columns(2)
-      +alpha
+    #nav {
+      @include columns(2);
+      @include alpha;
+    }
      
-    #content
-      +columns(8)
-      +omega
-      #description
-        +columns(5,8)
-      #credit
-        +columns(3,8)
-        +omega(8)
+    #content {
+      @include columns(8);
+      @include omega;
+      
+      #description {
+        @include columns(5,8);
+      }
+      
+      #credit {
+        @include columns(3,8);
+        @include omega(8);
+      }
+    }
 
 Tutorial
 ========
 
-For more details, read [the tutorial](http://www.oddbird.net/susy/tutorial/).  
-It's also included with Susy in the docs/ folder.
+The original [tutorial](http://www.oddbird.net/susy/tutorial/) was written for
+earlier versions of Susy and is no longer entirely accurate for version 0.7.
+An updated tutorial will be released soon.
 
 Extra Utility Mixins 
 =====================
 
-Extra utilities are included in Susy's `utils.sass` file, with additional list
+Extra utilities are included in Susy's `utils.scss` file, with additional list
 options, experimental (CSS3/proprietary) CSS, and more.
 
-* `+show-grid(!src)` - Repeat the specified grid image on an element. Good for
-  testing your baseline and grid.
+* `@include show-grid($src)` - Repeat the specified grid image on an element.
+  Good for testing your baseline and grid.
 
-* `+inline-block-list([!horizontalpadding])` - Make list items inline-block
-  when floating just won't do the trick (if you need them centered or right).
+* `@include 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` - Hide content from visual browsers while keeping accessability
-  intact.
+* `@include hide` - Hide content from visual browsers while keeping
+  accessability intact.
 
-* `+skip-link([!top, !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.
+* `@include skip-link([$top, $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 in `_vertical_rhythm.sass`, written by Chris Eppstein
-and probably moving to the compass core before too long:
+And then the fun stuff in `_vertical_rhythm.scss`, originally written by Chris
+Eppstein and probably moving to the compass core before too long:
 
-* `+adjust-font-size-to(!to_size, [!lines, !from_size])` - adjust the font size and number
-  of baseline (line) units to occupy.
+* `@include adjust-font-size-to($to_size, [$lines, $from_size])` - adjust the
+  font size and number of baseline (line) units to occupy.
 
-* `+leader([!lines, !font_size, !property])` and `+trailer([!lines,
-  !font_size, !property])` - add leading or trailing whitespace to an element.
-  These are added as top and bottom margins (by default) that keep your
-  vertical rhythm intact. You can also send "padding" as the `!property` or
-  use `+padding-leader` and `+padding-trailer`. Be aware that this may
-  conflict with uses of rhythm-borders.
+* `@include leader([$lines, $font_size, $property])` and `@include
+  trailer([$lines, $font_size, $property])` - add leading or trailing
+  whitespace to an element. These are added as top and bottom margins (by
+  default) that keep your vertical rhythm intact. You can also send "padding"
+  as the `$property` or use `@include padding-leader` and `@include
+  padding-trailer`. Be aware that this may conflict with uses of
+  rhythm-borders.
 
-* `+leading-border([!width, !lines, !font_size, !style])` and
-  `+trailing-border([!width, !lines, !font_size, !style])` will combine border
-  and padding to create borders that also keep the vertical rhythm going. The
-  defaults are `1px, 1, !base_font_size, 'solid'`. Also available:
-  `+horizontal-borders` (for both leading and trailing), and `+rhythm-borders`
-  for applying equal borders and padding to all sides of a box.
+* `@include leading-border([$width, $lines, $font_size, $style])` and
+  `@include trailing-border([$width, $lines, $font_size, $style])` will
+  combine border and padding to create borders that also keep the vertical
+  rhythm going. The defaults are `1px, 1, $base_font_size, 'solid'`. Also
+  available: `@include horizontal-borders` (for both leading and trailing),
+  and `@include rhythm-borders` for applying equal borders and padding to all
+  sides of a box.
 
 
 Advanced Options
@@ -164,74 +180,80 @@ Advanced Options
 
 Susy is built for flexibility, so that you always write the code you want to
 write. While everything should 'just work' out of the box, there are plenty of
-advanced options hidden inside. Here's a few:
+advanced options hidden inside. Here are a few:
 
-* `!hacks` is a boolean constant that you can set in your base.sass file to
+* `$hacks` is a boolean constant that you can set in your base.sass file to
   choose between using targeted hacks for IE (a variation of the star hack in
   most cases) in your screen.css, or using a conditional-comment targeted
-  ie.css. All the needed mixins are available for either setting. `!hacks` is
+  ie.css. All the needed mixins are available for either setting. `$hacks` is
   true by default so there is no extra work maintaining multiple files unless
   you want to.
 
     Example 1:
     
-        !hacks = true
+        $hacks: true;
     
-        #nav
-          +inline-block-list
+        #nav {
+          @include inline-block-list;          
+        }
     
     Example 2:
     
-        !hacks = false
+        $hacks: false;
       
-        (in screen.sass)
-        #nav
-          +inline-block-list
+        // in screen.scss
+        #nav {
+          @include inline-block-list;
+        }
         
-        (in ie.sass)
-        #nav li
-          +ie-inline-block
+        //in ie.scss
+        #nav li {
+         @include ie-inline-block; 
+        }
 
-    It requires more maintenance on your part, but the result is a
-    hack-free output.
+    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
-    `+omega` (`+ie-omega([!right-floated = false])`), `+inline-block`
-    (`+ie-inline-block`), and `+inline-block-list` which sets
-    `+inline-block` on the list items.
+     The Susy mixins that use either hacks or targeted mixins are `@include
+    omega` (`@include ie-omega([$right-floated: false])`), `@include
+    inline-block` (`@include ie-inline-block`), and `@include
+    inline-block-list` which sets `@include inline-block` on the list items.
     
-    The ie-specific mixins only add the needed ie-specific adjustments,
-    so they need to be used in addition to their counterparts, not on
-    their own.
+     The ie-specific mixins only add the needed ie-specific adjustments, so
+    they need to be used in addition to their counterparts, not on their own.
 
-* `gutter(!context)` is a function that you can call at any time to return the
+* `gutter($context)` is a function that you can call at any time to return the
   size of a gutter in your given context as a percentage.
 
     Example:
         
-        #nav
-          padding-right= gutter(5)
+        #nav {
+          padding-right: gutter(5);
+        }
 
-* `columns(!number, !context)` returns the span of `!number` columns in
-  `!context` as a percentage. This span includes any gutters between the
+* `columns($number, $context)` returns the span of `$number` columns in
+  `$context` as a percentage. This span includes any gutters between the
   columns spanned.
 
     Example:
         
-        #nav
-          padding-left= columns(3,5)
+        #nav {
+          padding-left: columns(3,5);
+        }
 
 * `side_gutter()` is also available and takes no arguments since it is always
   used at the top nesting level.
 
-* `!px2em` is a variable that represents the height of one pixel as a fraction
+* `$px2em` is a variable that represents the height of one pixel as a fraction
   of your base em-height. Multiply it with your target pixel value to
   represent that value in ems. Note that this is only accurate at your
-  `!base_font_size`.
+  `$base_font_size`.
 
     Example:
     
-        #nav
-          border-bottom:
-            style: solid
-            width= !px2em*2px
+        #nav {
+          border-bottom: {
+            style: solid;
+            width: $px2em*2px;
+          };
+        }

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 >=0.10.0.pre1"]
+    p.dependencies = ["compass >=0.10.0.rc2"]
     p.has_rdoc = false
   end
  

data/VERSION

@@ -1 +1 @@
-0.7.0.pre6
+0.7.0.pre7

data/compass-susy-plugin.gemspec

@@ -2,20 +2,20 @@
 
 Gem::Specification.new do |s|
   s.name = %q{compass-susy-plugin}
-  s.version = "0.7.0.pre6"
+  s.version = "0.7.0.pre7"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 1.2") if s.respond_to? :required_rubygems_version=
   s.authors = ["Eric Meyer"]
-  s.date = %q{2010-03-18}
+  s.date = %q{2010-04-13}
   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 = ["LICENSE.txt", "README.mkdn", "lib/susy.rb", "lib/susy/compass_plugin.rb", "lib/susy/sass_extensions.rb"]
-  s.files = ["LICENSE.txt", "Manifest", "README.mkdn", "Rakefile", "VERSION", "compass-susy-plugin.gemspec", "lib/susy.rb", "lib/susy/compass_plugin.rb", "lib/susy/sass_extensions.rb", "sass/susy/_grid.sass", "sass/susy/_reset.sass", "sass/susy/_susy.sass", "sass/susy/_text.sass", "sass/susy/_utils.sass", "sass/susy/_vertical_rhythm.sass", "templates/project/_base.sass", "templates/project/_defaults.sass", "templates/project/ie.sass", "templates/project/manifest.rb", "templates/project/print.sass", "templates/project/screen.sass"]
+  s.files = ["LICENSE.txt", "Manifest", "README.mkdn", "Rakefile", "VERSION", "compass-susy-plugin.gemspec", "lib/susy.rb", "lib/susy/compass_plugin.rb", "lib/susy/sass_extensions.rb", "sass/susy/_grid.scss", "sass/susy/_reset.scss", "sass/susy/_susy.scss", "sass/susy/_text.scss", "sass/susy/_utils.scss", "sass/susy/_vertical_rhythm.scss", "templates/project/_base.scss", "templates/project/_defaults.scss", "templates/project/ie.scss", "templates/project/manifest.rb", "templates/project/print.scss", "templates/project/screen.scss"]
   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.require_paths = ["lib"]
   s.rubyforge_project = %q{compass-susy-plugin}
-  s.rubygems_version = %q{1.3.5}
+  s.rubygems_version = %q{1.3.6}
   s.summary = %q{A Compass grid system plugin.}
 
   if s.respond_to? :specification_version then
@@ -23,11 +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.10.0.pre1"])
+      s.add_runtime_dependency(%q<compass>, [">= 0.10.0.rc2"])
     else
-      s.add_dependency(%q<compass>, [">= 0.10.0.pre1"])
+      s.add_dependency(%q<compass>, [">= 0.10.0.rc2"])
     end
   else
-    s.add_dependency(%q<compass>, [">= 0.10.0.pre1"])
+    s.add_dependency(%q<compass>, [">= 0.10.0.rc2"])
   end
 end

data/sass/susy/_grid.scss

@@ -0,0 +1,110 @@
+//** The Susy Grid **//
+
+// Your basic settings for the grid.
+// Override these in base.sass to customize your site.
+$total-cols: 12 !default;
+$col-width: 4em !default;
+$gutter-width: 1em !default;
+$side-gutter-width: $gutter-width !default;
+
+// 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(s).
+@mixin container($align: left) {
+  // clear all floated columns
+  @include 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;
+  // 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
+@mixin columns($n, $context: false) {
+  // the column is floated left
+  @include float(left);
+  // 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 element to add empty colums as padding before or after.
+@mixin prefix($n, $context: false) {
+  padding-left: columns($n, $context) + gutter($context); }
+
+@mixin suffix($n, $context: false) {
+  padding-right: columns($n, $context) + gutter($context); }
+
+// Set as a shortcut for both prefix and suffix.
+@mixin pad($p: 0, $s: 0, $c: false) {
+  @if $p != 0 {
+    @include prefix($p, $c); }
+  @if $s != 0 {
+    @include suffix($s, $c); } }
+
+// 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.
+@mixin alpha($nested: false) {
+  @if $nested == false {
+    margin-left: side-gutter(); } }
+
+
+// Sets the direction that +omega elements are floated
+//  - Override $omega_float globally or set +float locally to change
+$omega-float: right !default;
+
+// 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
+@mixin ie-omega($dir: $omega-float, $hack: false) {
+  $s: side-gutter();
+  @if $dir == right {
+    @if $hack == true {
+      #margin-left: - $gutter-width; }
+    @else {
+      margin-left: - $gutter-width; } }
+  @else {
+    @if $hack == true {
+      #margin-right: - $gutter-width; }
+    @else {
+      margin-right: - $gutter-width; } } }
+
+// 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.
+@mixin omega($nested: false) {
+  @include float($omega-float);
+  @if $nested {
+    margin-right: 0; }
+  @else {
+    margin-right: side-gutter(); }
+  @if $hacks == true {
+    /* ugly hacks for IE6-7 */
+    @include ie-omega($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.
+@mixin full($nested: false) {
+  clear: both;
+  @if $nested == false {
+    $s: side-gutter();
+    margin-right: $s;
+    margin-left: $s; } }