compass-susy-plugin 0.7.0 → 0.8.0.pre1

data/README.mkdn

@@ -66,8 +66,7 @@ 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.scss`.
+  side gutter width), your base font size, and important mixins in `_base.scss`.
   
     Example:
   
@@ -83,7 +82,7 @@ Grid Basics
   better than using the browser defaults. And better than using ours.
 
 * 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
+  top level and the `@include container` mixin to the element(s) that contains
   the page grid. This will set up your font sizes, vertical rhythm, and grid
   container.
 
@@ -101,26 +100,24 @@ Grid Basics
           font-size: 100%;
           line-height: 1.5em;
         }
-
         html > body {
           font-size: 16px;
         }
 
-        body {
-          text-align: center;
+        #page { 
+          *zoom: 1; 
+          margin-left: auto; 
+          margin-right: auto; 
+          width: 61em; 
+          max-width: 100%; 
         }
-
-        #page {
-          overflow: hidden;
-          display: inline-block;
-          text-align: left;
-          margin-left: auto;
-          margin-right: auto;
-          width: 61em;
-          max-width: 100%;
-        }
-        #page {
-          display: block;
+        #page:after { 
+          content: "\0020"; 
+          display: block; 
+          height: 0; 
+          clear: both; 
+          overflow: hidden; 
+          visibility: hidden; 
         }
 
 * Use the `@include columns` mixin to declare the width in columns of an
@@ -146,7 +143,7 @@ Grid Basics
   
     The `columns` mixin:
   
-        @include columns($span [, $context]);
+        @include columns($span, [$context]);
   
     The `full` mixin:
   
@@ -262,31 +259,16 @@ That's it for the basics! Here's a sample Susy grid layout:
 Tutorial
 ========
 
-Being built...
+Check out the tutorial at [susy.oddbird.net/tutorial/](http://susy.oddbird.net/tutorial/) for more details.
 
 Extra Utility Mixins 
 =====================
 
-Extra utilities are included in Susy's `utils.scss` file, with additional list
-options, experimental (CSS3/proprietary) CSS, and more.
+Extra utilities are included in Susy's `_utils.scss` and `_vertical_rhythm.scss`:
 
 * `@include show-grid($src)` - Repeat the specified grid image on an element.
   Good for testing your baseline and grid.
 
-* `@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).
-
-* `@include hide` - Hide content from visual browsers while keeping
-  accessability intact.
-
-* `@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.scss`, originally written by Chris
-Eppstein and probably moving to the compass core before too long:
-
 * `@include adjust-font-size-to($to_size, [$lines, $from_size])` - adjust the
   font size and number of baseline (line) units to occupy.
 
@@ -314,46 +296,6 @@ 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 are a few:
 
-* `$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
-  true by default so there is no extra work maintaining multiple files unless
-  you want to.
-
-    Example 1:
-    
-        $hacks: true;
-    
-        #nav {
-          @include inline-block-list;          
-        }
-    
-    Example 2:
-    
-        $hacks: false;
-      
-        // in screen.scss
-        #nav {
-          @include inline-block-list;
-        }
-        
-        //in ie.scss
-        #nav li {
-         @include ie-inline-block; 
-        }
-
-    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 `@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.
-
 * `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.
 

data/Rakefile

@@ -6,13 +6,12 @@ begin
   require 'echoe'
  
   Echoe.new('compass-susy-plugin', open('VERSION').read) do |p|
-    # p.rubyforge_name = 'susy'
-    p.summary = "A Compass grid system plugin."
-    p.description = "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."
-    p.url = "http://github.com/ericam/compass-susy-plugin"
-    p.author = ['Eric Meyer']
+    p.summary = "A responsive grid system plugin for Compass."
+    p.description = "Responsive web design with grids the quick and reliable way."
+    p.url = "http://susy.oddbird.net/"
+    p.author = "Eric Meyer"
     p.email = "eric@oddbird.net"
-    p.dependencies = ["compass >=0.10.0.rc2"]
+    p.dependencies = ["compass >=0.10.0"]
     p.has_rdoc = false
   end
  

data/VERSION

@@ -1 +1 @@
-0.7.0
+0.8.0.pre1

data/compass-susy-plugin.gemspec

@@ -2,21 +2,21 @@
 
 Gem::Specification.new do |s|
   s.name = %q{compass-susy-plugin}
-  s.version = "0.7.0"
+  s.version = "0.8.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{2010-06-01}
-  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.date = %q{2010-08-12}
+  s.description = %q{Responsive web design with grids the quick and reliable way.}
   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.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/grid.png", "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.files = ["LICENSE.txt", "Manifest", "README.mkdn", "Rakefile", "VERSION", "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/grid.png", "templates/project/ie.scss", "templates/project/manifest.rb", "templates/project/print.scss", "templates/project/screen.scss", "compass-susy-plugin.gemspec"]
+  s.homepage = %q{http://susy.oddbird.net/}
   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.6}
-  s.summary = %q{A Compass grid system plugin.}
+  s.summary = %q{A responsive grid system plugin for Compass.}
 
   if s.respond_to? :specification_version then
     current_version = Gem::Specification::CURRENT_SPECIFICATION_VERSION

data/sass/susy/_grid.scss

@@ -12,11 +12,12 @@ $side-gutter-width: $gutter-width !default;
 $container-width: container($total-cols, $col-width, $gutter-width, $side-gutter-width);
 
 // Set +container() on the outer grid-containing element(s).
-@mixin container($align: left) {
+@mixin container($align: false) {
   // clear all floated columns
-  @include clearfix;
-  // align the text back to the left (override for other alignments)
-  text-align: $align;
+  @include pie-clearfix;
+  @if $align {
+    @warn "the '$align' argument is deprecated because it really isn't that usefull.";
+  }
   // use auto horizontal margins to center your page in the body
   margin: {
     left: auto;
@@ -88,25 +89,9 @@ $container-width: container($total-cols, $col-width, $gutter-width, $side-gutter
 //  - 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
+// This is going away
 @mixin ie-omega($dir: $omega-float, $hack: false) {
-  $s: side-gutter();
-  @if $dir == right {
-    @if $hack {
-      #margin-left: - $gutter-width; 
-    } @else {
-      margin-left: - $gutter-width; 
-    } 
-  } @else {
-    @if $hack {
-      #margin-right: - $gutter-width; 
-    } @else {
-      margin-right: - $gutter-width; 
-    } 
-  } 
+  @warn "the 'ie-omega' mixin is deprecated along with the $hacks constant";
 }
 
 // Set +omega() on the last element of a row, in order to take side-gutters
@@ -121,10 +106,11 @@ $omega-float: right !default;
   } @else {
     margin-right: side-gutter(); 
   }
-  @if $hacks {
-    /* ugly hacks for IE6-7 */
-    @include ie-omega($omega-float, true);
-  } 
+  @if $omega-float == right {
+    #margin-left: - $gutter-width; 
+  } @else {
+    #margin-right: - $gutter-width; 
+  }
 }
 
 // Set +full() on an element that will span it's entire context.
@@ -132,8 +118,7 @@ $omega-float: right !default;
 @mixin full($nested: false) {
   clear: both;
   @if not $nested {
-    $s: side-gutter();
-    margin-right: $s;
-    margin-left: $s; 
+    margin-right: side-gutter();
+    margin-left: side-gutter(); 
   } 
 }

data/sass/susy/_susy.scss

@@ -1,9 +1,6 @@
 //** Susy **//
 
 
-// Tell susy whether you are using hacks or conditional comments.
-$hacks: true !default;
-
 // Import all the Important Stuff.
 @import "compass/css3";
 @import "utils";
@@ -11,11 +8,9 @@ $hacks: true !default;
 @import "grid";
 
 // Set Susy on your BODY element to get things started.
-@mixin susy($align: center) {
+@mixin susy($align: false) {
   @include establish-baseline;
-  // text-align set to center by default for auto-centering layouts
-  //  - override $align for left/right-aligned designs
-  body {
-    text-align: $align; 
-  } 
+  @if $align {
+    @warn "the '$align' argument is deprecated because it really isn't that usefull.";
+  }
 }

data/sass/susy/_utils.scss

@@ -14,67 +14,16 @@
   }; 
 }
 
-// Brings IE in line with inline-block display
-//  - Using hacks if called automatically because $hacks == true
-//  - Or not, if you call it from ie.sass because $hacks == false
 @mixin ie-inline-block($hack: false) {
-  @if $hack {
-    /* ugly hacks for IE6-7 */
-    #display: inline;
-    // fixes alignment against native input/button on IE6
-    #vertical-align: auto;
-  } @else {
-    display: inline;
-    // fixes alignment against native input/button on IE6
-    vertical-align: auto; 
-  } 
-}
-
-// An override for compass inline-block that lets you take advantage
-// of Susys $hacks constant. if true, hacks. if false, use ie-inline-block
-// to help ie along in your ie.sass
-@mixin inline-block {
-  display: -moz-inline-box;
-  -moz-box-orient: vertical;
-  display: inline-block;
-  vertical-align: middle;
-  @if $hacks {
-    @include ie-inline-block(true); 
-  } 
-}
-
-// An inline-block list that works in IE
-// For those awkward moments when a floated horizontal list just wont cut it
-// NOTE: If global !hacks == false:
-//  - you'll need to fix list items in ie.sass with +ie-inline-block
-@mixin inline-block-list($hpad: 0) {
-  @include horizontal-list-container;
-  li {
-    @include no-bullet;
-    @include inline-block;
-    white-space: no-wrap;
-    padding: {
-      left: $hpad;
-      right: $hpad; 
-    }; 
-  } 
+  @warn "the 'ie-inline-block' mixin is deprecated in favor of the compass core solutions.";
 }
 
 // Hide an element from the viewport, but keep it around for accessability
 @mixin hide {
-  position: absolute;
-  top: -9999em; }
+  @warn "the 'hide' mixin is deprecated in favor of 'hide-text' in compass core.";
+  @include hide-text;
+}
 
-// Apply to skip-to-content accessibility links that will appear on focus.
-//  - Set the location arguments if you care where it appears.
 @mixin skip-link($t: 0, $r: false, $b: false, $l: false) {
-  @include hide;
-  display: block;
-  &:focus {
-    @if $t { top: $t; }
-    @if $r { right: $r; }
-    @if $b { bottom: $b; }
-    @if $l { left: $l; }
-    z-index: 999; 
-  } 
+  @warn "the 'skip-link' mixin is deprecated as too tangential to belong in Susy.";
 }

data/templates/project/_base.scss

@@ -1,7 +1,7 @@
 //**
 //  Susy: Un-obtrusive grids for designers
 //  By: Eric A. Meyer and OddBird
-//  Site: www.oddbird.net/susy/
+//  Site: susy.oddbird.net
 //**
 
 // Font Sizes --------------------------------------------------------------
@@ -27,15 +27,15 @@ $alt: #005498;
 // Fonts --------------------------------------------------------------
 
 @mixin sans-family {
-  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
 @mixin serif-family {
-  font-family: 'Adobe Caslon Pro', Caslon, Baskerville, Palatino, 'Palatino Linotype', "Hoefler Text", Garamond, "URW Palladio L", "Book Antiqua", Georgia, serif;
+  font-family: Cambria, Georgia, serif;
 }
 
 @mixin monospace-family {
-  font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif;
+  font-family: "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, Courier, monospace, sans-serif;
 }
 
 // OTHER MIXINS --------------------------------------------------------------

data/templates/project/_defaults.scss

@@ -1,257 +1,262 @@
 //** DEFAULT STYLES **//
 
-// Based on the work of:
+// Based heavily on the work of:
 // Andy Clarke: http://forabeautifulweb.com/
+// Paul Irish & Divya Manian: http://html5boilerplate.com/
+// And many others, less directly...
 
-// Imports --------------------------------------------------------------*/
+// Imports --------------------------------------------------------------
 
 @import "base";
 @import "susy/reset";
 
-/* Body --------------------------------------------------------------*/
+/* Typography -------------------------------------------------------------- */
+/* The following classes are for use with @extend. */
+
+html {
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased; }
+
+.serif {
+  @include serif-family; }
+
+.sans {
+  @include sans-family; }
+
+.mono {
+  @include monospace-family; }
+
+.caps {
+  letter-spacing: 0.1em; }
+
+.allcaps {
+  @extend .caps;
+  text-transform: uppercase; }
+
+.smallcaps {
+  @extend .caps;
+  font-variant: small-caps; }
+
+/* Body -------------------------------------------------------------- */
 
 body {
-  @include serif-family;
-  color: $base;
-}
+  @extend .serif;
+  color: $base; }
+
+/* Selected Text -------------------------------------------------------------- */
+/* -moz- must be declared separately */
+
+@mixin accessible-color($background: white) {
+  @if lightness($background) >= 65% {
+    color: $base; }
+  @else {
+    color: white; } }
+
+::-moz-selection {
+  @include accessible-color($alt);
+  background: $alt;
+  text-shadow: none; }
 
-/* Links --------------------------------------------------------------*/
+::selection {
+  @include accessible-color($alt);
+  background: $alt;
+  text-shadow: none; }
+
+/* Links -------------------------------------------------------------- */
 
 a {
   &:link, &:visited {
-    color: $alt;
-  }
+    color: $alt; }
+  &:link, &:visited, &:hover, &:active {
+    outline: none; }
   &:focus, &:hover, &:active {
-    color: darken($alt,5);
-    text-decoration: none;
-  }
-  img {
-    border: none;
-  }
-}
-
-/* Headings --------------------------------------------------------------*/
-
-h1, h2, h3, h4, h5, h6 { 
-  font-weight: normal;
-  img {
-    margin: 0;
-  }
-}
-
-h1 { 
-  @include adjust-font-size-to(48px);
-  @include trailer(1,48px);
-}
-
-h2 { 
-  @include adjust-font-size-to(32px);
-  @include trailer(1,32px);  
-}
+    color: complement($alt);
+    text-decoration: none; }
+  &:focus {
+    outline: thin dotted; } }
+
+/* Headings -------------------------------------------------------------- */
+
+h2, h3, h4, h5, h6 {
+  @include trailer; }
+
+h1 {
+  @include adjust-font-size-to(21px);
+  @include trailer(1, 21px); }
+
+h1, h2 {
+  @extend .allcaps; }
 
 h3 {
-  @include adjust-font-size-to(24px);
-  @include trailer(1,24px);
-}
+  font-weight: bold; }
 
 h4 {
-  @include adjust-font-size-to(18px);
-  @include trailer(1,18px);
-}
+  @extend .smallcaps;
+  text-transform: lowercase; }
 
-h5, h6 { 
-  @include trailer(1);
-  font-weight: bold;
-}
+h5, h6 {
+  font-style: italic; }
 
-/* Text --------------------------------------------------------------*/
+/* Inline -------------------------------------------------------------- */
 
-cite, em, dfn { 
-  font-style: italic;
-}
+cite, em, dfn, address, i {
+  font-style: italic; }
 
-strong, dfn { 
-  font-weight: bold;
-}
+strong, dfn, b {
+  font-weight: bold; }
 
-sup, sub { 
-  line-height: 0;
-}
+sup, sub {
+  font-size: smaller;
+  line-height: 0; }
 
-abbr, acronym { 
-  border-bottom: 1px dotted;
-  cursor: help;
-}
+sup {
+  vertical-align: super; }
 
-address {
-  @include trailer;
-  font-style: italic;
-}
+sub {
+  vertical-align: sub; }
 
-ins { 
-  text-decoration: underline;
-}
+abbr, acronym {
+  border-bottom: 1px dotted;
+  cursor: help; }
 
-del { 
-  text-decoration: line-through;
-}
+ins {
+  text-decoration: underline; }
 
-pre, code, tt {
-  margin: $base-rhythm-unit {
-    left: -$base-rhythm-unit;
-  };
-  padding-left: $base-rhythm-unit;
-  border-left: 1px dotted;
-  @include monospace-family;
-}
-
-pre { 
-  white-space: pre;
-}
+del {
+  text-decoration: line-through; }
 
-code { 
-  display: block;
-}
+mark {
+  background: #ffff99;
+  background-color: rgba(yellow, 0.5);
+  text-shadow: none; }
+
+small {
+  @include adjust-font-size-to(12px); }
 
 q {
   font-style: italic;
   em {
-    font-style: normal;
-  } 
-}
+    font-style: normal; } }
+
+pre, code, tt {
+  @extend .mono; }
+
+/* Block -------------------------------------------------------------- */
 
 p {
-  @include trailer;
-}
-
-blockquote, q {
-  quotes : "" "";
-}
-
-blockquote { 
-  margin: $base-rhythm-unit {
-    left: -$base-rhythm-unit;
-  };
-  padding-left: $base-rhythm-unit;
-  border-left: 1px solid;
-  @include serif-family;
-  font-style: italic;
-}
+  @include trailer; }
+
+pre {
+  margin: $base-rhythm-unit;
+  white-space: pre;
+  white-space: pre-wrap;
+  white-space: pre-line;
+  word-wrap: break-word; }
 
-blockquote, q {
-  &:before, &:after { 
-    content: "";
-  }
-}
+blockquote {
+  margin: $base-rhythm-unit;
+  font-style: italic; }
 
-/* Replaced --------------------------------------------------------------*/
+/* Replaced -------------------------------------------------------------- */
 
 img {
-  vertical-align: bottom;
-}
-
-/* Lists --------------------------------------------------------------*/
-
-@mixin list-default($ol: false) {
-  margin: 0 $base-rhythm-unit $base-rhythm-unit 0;
-  @if $ol {
-    list-style: decimal;
-  } @else {
-    list-style: disc;
-  } 
-}
-
-@mixin no-style-list {
-  @include no-bullets;
-  margin: 0;
-  padding: 0;
-}
+  vertical-align: text-bottom;
+  max-width: 100%;
+  -ms-interpolation-mode: bicubic; }
+
+/* Lists -------------------------------------------------------------- */
+
+ol, ul, dl {
+  @include trailer;
+  margin-left: $base-rhythm-unit; }
 
 ol {
-  @include list-default(ol);
-}
+  list-style: decimal; }
 
 ul {
-  @include list-default;
-}
-
-li {
-  ul, ol { 
-    list-style-type: circle;
-    margin: 0 $base-rhythm-unit $base-rhythm-unit*.5;
-  }
-}
+  list-style: disc;
+  li & {
+    list-style-type: circle; } }
 
-dl {
-  @include trailer;
-  @include leading-border(1px);
-  dt {
-    @include adjust-font-size-to(18px);
-    @include trailer(.5,18px);
-  }
-}
+dt {
+  @include leader;
+  font-style: italic; }
 
 dd {
-  @include trailer;
-  @include trailing-border(1px);
-}
+  padding-left: $base-rhythm-unit; }
 
-/* Tables --------------------------------------------------------------*/
+/* Tables -------------------------------------------------------------- */
 /* tables still need 'cellspacing="0"' in the markup */
 
 table {
   @include trailer;
   width: 100%;
   border-collapse: separate;
-  border-spacing: 0;
-}
+  border-spacing: 0; }
 
-table, td, th { 
-  vertical-align: top;
-}
+table, td, th {
+  vertical-align: top; }
 
 th, thead th {
-  font-weight: bold;
-}
+  font-weight: bold; }
 
 th, td, caption {
-  padding: $base-rhythm-unit*.5;
+  padding: $base-rhythm-unit * 0.5;
   text-align: left;
-  font-weight: normal;
-}
+  font-weight: normal; }
 
-th, td {
-  @include trailing-border(1px,.5);
-}
+table, th {
+  @include trailing-border(1px, 0.5); }
 
-tfoot { 
-  @include adjust-font-size-to(14px);
-}
+tfoot {
+  @include adjust-font-size-to(14px); }
 
 caption {
-  @include adjust-font-size-to(24px);
-  @include trailer(1,24px);
-}
+  @extend .allcaps; }
 
-/* Forms --------------------------------------------------------------*/
+/* Forms -------------------------------------------------------------- */
 
 fieldset {
   @include trailer;
-  @include rhythm-borders(1px);
-}
+  @include rhythm-borders(1px); }
 
 legend {
   @include adjust-font-size-to(18px);
-  font-weight: bold;
-}
+  font-weight: bold; }
 
-label {
-  font-weight: bold;
-}
+input[type="radio"], input[type="checkbox"] {
+  vertical-align: baseline; }
 
-textarea, input:not([type="radio"]) {
-  // box-sizing will help us control the width of inputs
-  // which are otherwise very hard to manage in the grid.
+label, input[type=button], input[type=submit], button {
+  cursor: pointer; }
+
+label {
+  font-weight: bold; }
+
+// box-sizing helps us control the width of inputs
+// which are otherwise very hard to manage in the grid.
+.textinput {
+  @include sans-family;
+  @include adjust-font-size-to(14px, 1, 16px);
+  @include rhythm-borders(1px, 0.25, 14px);
+  @include trailer(0.5);
   @include box-sizing(border-box);
   width: 100%;
-}
+  margin-top: 0;
+  border-color: $base;
+  height: $base-line-height / 14px * 1.5; }
+
+textarea {
+  @extend .textinput;
+  height: $base-line-height / 14px * 6.5;
+  vertical-align: text-bottom; }
+
+input {
+  &[type=text], &[type=password], &[type=email], &[type=url], &[type=tel],
+  &[type=date], &[type=datetime], &[type=datetime-local], &[type=month], &[type=week], &[type=time],
+  &[type=number], &[type=range], &[type=search], &[type=color] {
+    @extend .textinput; } }
+
+button {
+  width: auto;
+  overflow: visible; }

data/templates/project/print.scss

@@ -1,33 +1,51 @@
-/* Welcome to Susy. Use this file to define print styles.
- * Import this file using the following HTML or equivalent:
- * <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> */
+//** PRINT STYLES **//
 
-// Imports --------------------------------------------------------------*/
+// Based heavily on the work of:
+// Paul Irish & Divya Manian: http://html5boilerplate.com/
+// And many others, less directly...
+
+// Imports --------------------------------------------------------------
 
 @import "defaults";
 
-/* Print Defaults --------------------------------------------------------------*/
-
-@mixin print {
-  nav {
-    // no need to navigate on paper
-    display: none; 
-  }
-  * {
-    // floated elements disappear when they overflow the page
-    float: none !important; 
-    background: none;
-  }
-  body {
-    @include serif-family;
-    font-size: 12pt;
-    background: white;
-    color: black; 
-  }
-  a:link:after, a:visited:after {
-    // print target URLs next to their links
-    content: " (" attr(href) ") "; 
-  } 
-}
-
-@include print;
+/* Print Defaults -------------------------------------------------------------- */
+
+nav {
+  display: none; }
+
+* {
+  background: transparent !important;
+  color: #444444 !important;
+  float: none !important;
+  text-shadow: none !important; }
+
+body {
+  @include serif-family;
+  font-size: 12pt;
+  background: white;
+  color: black; }
+
+a {
+  &:link, &:visited {
+    color: #444444 !important;
+    text-decoration: underline; }
+  &:after {
+    content: " (" attr(href) ") ";
+    font-size: smaller; } }
+
+abbr:after {
+  content: " (" attr(title) ")";
+  font-size: smaller; }
+
+pre, blockquote, img {
+  page-break-inside: avoid; }
+
+@page {
+  margin: 0.5cm; }
+
+p, h2, h3 {
+  orphans: 3;
+  widows: 3; }
+
+h2, h3 {
+  page-break-after: avoid; }

data/templates/project/screen.scss

@@ -1,23 +1,22 @@
-/* Welcome to Susy. Use this file to define screen styles.
- * Import this file using the following HTML or equivalent:
- * <link href="/stylesheets/screen.css" media="screen" rel="stylesheet" type="text/css" /> */
+//** SCREEN STYLES **//
 
-// Imports --------------------------------------------------------------*/
+// Imports --------------------------------------------------------------
 
 @import "defaults";
 
-/* Layout --------------------------------------------------------------*/
+/* Layout -------------------------------------------------------------- */
 
 @include susy;
 
-// change '#page' to match your HTML container element(s)
-#page {
+// change '.container' to match your HTML container element
+// or @extend it to apply multiple containers on your site.
+.container {
   @include container;
   @include show-grid("grid.png"); }
 
 // show-grid loads a 64+16x24 grid image by default
 // For other grid settings, run `compass grid-img 30+10x20`
-// Where 30 is the column width, 10 is the gutter width, 
+// Where 30 is the column width, 10 is the gutter width,
 // and 20 is the (optional) line-height.
 
-/* Styles --------------------------------------------------------------*/
+/* Styles -------------------------------------------------------------- */

metadata

@@ -1,12 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: compass-susy-plugin
 version: !ruby/object:Gem::Version 
-  prerelease: false
+  prerelease: true
   segments: 
   - 0
-  - 7
+  - 8
   - 0
-  version: 0.7.0
+  - pre1
+  version: 0.8.0.pre1
 platform: ruby
 authors: 
 - Eric Meyer
@@ -14,7 +15,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2010-06-01 00:00:00 -06:00
+date: 2010-08-12 00:00:00 -06:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency 
@@ -31,7 +32,7 @@ dependencies:
         version: 0.10.0
   type: :runtime
   version_requirements: *id001
-description: 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.
+description: Responsive web design with grids the quick and reliable way.
 email: eric@oddbird.net
 executables: []
 
@@ -49,7 +50,6 @@ files:
 - README.mkdn
 - Rakefile
 - VERSION
-- compass-susy-plugin.gemspec
 - lib/susy.rb
 - lib/susy/compass_plugin.rb
 - lib/susy/sass_extensions.rb
@@ -66,8 +66,9 @@ files:
 - templates/project/manifest.rb
 - templates/project/print.scss
 - templates/project/screen.scss
+- compass-susy-plugin.gemspec
 has_rdoc: true
-homepage: http://github.com/ericam/compass-susy-plugin
+homepage: http://susy.oddbird.net/
 licenses: []
 
 post_install_message: 
@@ -101,6 +102,6 @@ rubyforge_project: compass-susy-plugin
 rubygems_version: 1.3.6
 signing_key: 
 specification_version: 3
-summary: A Compass grid system plugin.
+summary: A responsive grid system plugin for Compass.
 test_files: []