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

data/README.mkdn

@@ -18,7 +18,6 @@ easily - and always in flexible percentages.
 Install 
 =======
 
-    sudo gem sources --add http://gemcutter.org/ 
     sudo gem install compass-susy-plugin
 
 Create a Susy-based Compass Project 

data/VERSION

@@ -1 +1 @@
-0.7.0.pre7
+0.7.0.pre8

data/compass-susy-plugin.gemspec

@@ -2,11 +2,11 @@
 
 Gem::Specification.new do |s|
   s.name = %q{compass-susy-plugin}
-  s.version = "0.7.0.pre7"
+  s.version = "0.7.0.pre8"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 1.2") if s.respond_to? :required_rubygems_version=
   s.authors = ["Eric Meyer"]
-  s.date = %q{2010-04-13}
+  s.date = %q{2010-04-20}
   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"]

data/lib/susy/sass_extensions.rb

@@ -1,5 +1,13 @@
 require 'sass'
 
+module Sass::Script
+  class Number < Literal
+    def ceil
+      Number.new(value.ceil, numerator_units, denominator_units)
+    end
+  end
+end
+
 module Sass::Script::Functions
 
   # some helpful constants
@@ -27,7 +35,7 @@ module Sass::Script::Functions
       sg = @@susy_side_gutter_width
     end
     c, g = [@@susy_column_width, @@susy_gutter_width]
-    n.times(c).plus(n.minus(ONE).times(g)).plus(sg.times(TWO))
+    n.times(c).plus(n.minus(ONE).ceil.times(g)).plus(sg.times(TWO))
   end
 
   # return the percentage width of 'n' columns in a context of
@@ -36,7 +44,7 @@ module Sass::Script::Functions
     raise Sass::SyntaxError, "container() must be called before columns() - should be called in susy/susy.sass" unless defined?(@@susy_column_width)
     w = context(context_columns)
     c, g = [@@susy_column_width, @@susy_gutter_width]
-    n.times(c).plus(n.minus(ONE).times(g)).div(w).times(PERCENT)
+    n.times(c).plus(n.minus(ONE).ceil.times(g)).div(w).times(PERCENT)
   end
 
   # return the percentage width of a single gutter in a context of

data/sass/susy/_grid.scss

@@ -1,4 +1,5 @@
-//** The Susy Grid **//
+//** Susy Grid **//
+
 
 // Your basic settings for the grid.
 // Override these in base.sass to customize your site.
@@ -10,7 +11,7 @@ $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).
+// Set +container() on the outer grid-containing element(s).
 @mixin container($align: left) {
   // clear all floated columns
   @include clearfix;
@@ -19,13 +20,15 @@ $container-width: container($total-cols, $col-width, $gutter-width, $side-gutter
   // use auto horizontal margins to center your page in the body
   margin: {
     left: auto;
-    right: 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%; }
+  max-width: 100%; 
+}
 
-// Set on any column element, even nested ones.
+// Set +columns() 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.
@@ -38,30 +41,48 @@ $container-width: container($total-cols, $col-width, $gutter-width, $side-gutter
   // 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); }
+  margin-right: gutter($context); 
+}
+
+// Set +un-column to reset a column element to default block behavior
+@mixin un-column {
+  float: none;
+  display: block;
+  width: auto;
+  margin-right: auto;  
+}
 
-// Set on any element to add empty colums as padding before or after.
+// Set +prefix() on any element to add empty colums as padding 
+// before or after.
 @mixin prefix($n, $context: false) {
-  padding-left: columns($n, $context) + gutter($context); }
+  padding-left: columns($n, $context) + gutter($context); 
+}
 
 @mixin suffix($n, $context: false) {
-  padding-right: columns($n, $context) + gutter($context); }
+  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); } }
+@mixin pad($p: false, $s: false, $c: false) {
+  @if $p {
+    @include prefix($p, $c); 
+  } 
+  @if $s {
+    @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.
+// Set +alpha 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(); } }
-
+  @if not $nested {
+    margin-left: side-gutter();
+  } @else {
+    @warn "The alpha mixin is not needed in a nested context";
+  }
+}
 
 // Sets the direction that +omega elements are floated
 //  - Override $omega_float globally or set +float locally to change
@@ -74,17 +95,21 @@ $omega-float: right !default;
 @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; } } }
+    @if $hack {
+      #margin-left: - $gutter-width; 
+    } @else {
+      margin-left: - $gutter-width; 
+    } 
+  } @else {
+    @if $hack {
+      #margin-right: - $gutter-width; 
+    } @else {
+      margin-right: - $gutter-width; 
+    } 
+  } 
+}
 
-// Set omega on the last element of a row to take side-gutters
+// Set +omega() on the last element of a row, in order 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. 
@@ -92,19 +117,23 @@ $omega-float: right !default;
 @mixin omega($nested: false) {
   @include float($omega-float);
   @if $nested {
-    margin-right: 0; }
-  @else {
-    margin-right: side-gutter(); }
-  @if $hacks == true {
+    margin-right: 0; 
+  } @else {
+    margin-right: side-gutter(); 
+  }
+  @if $hacks {
     /* 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.
+// Set +full() on an element that will span it's entire context.
+// There is no need for +columns, +alpha or +omega on a +full element.
 @mixin full($nested: false) {
   clear: both;
-  @if $nested == false {
+  @if not $nested {
     $s: side-gutter();
     margin-right: $s;
-    margin-left: $s; } }
+    margin-left: $s; 
+  } 
+}

data/sass/susy/_reset.scss

@@ -1,3 +1,6 @@
+//** Susy Reset **//
+
+
 /* @group reset */
 @import "compass/reset";
 

data/sass/susy/_susy.scss

@@ -1,5 +1,6 @@
 //** Susy **//
 
+
 // Tell susy whether you are using hacks or conditional comments.
 $hacks: true !default;
 
@@ -15,4 +16,6 @@ $hacks: true !default;
   // text-align set to center by default for auto-centering layouts
   //  - override $align for left/right-aligned designs
   body {
-    text-align: $align; } }
+    text-align: $align; 
+  } 
+}

data/sass/susy/_text.scss

@@ -1,5 +1,6 @@
 //** Susy Text Settings **//
 
+
 @import "vertical_rhythm";
 
 $px2em: 1em / $base-font-size;

data/sass/susy/_utils.scss

@@ -1,5 +1,6 @@
 //** Susy Utilities **//
 
+
 // An extension of the Compass Core Utilities
 @import "compass/utilities";
 
@@ -9,7 +10,9 @@
   background: {
     image: image-url($src);
     repeat: repeat;
-    position: $side-gutter-width 0; }; }
+    position: $side-gutter-width 0; 
+  }; 
+}
 
 // Brings IE in line with inline-block display
 //  - Using hacks if called automatically because $hacks == true
@@ -20,11 +23,12 @@
     #display: inline;
     // fixes alignment against native input/button on IE6
     #vertical-align: auto;
-    /* end ugly hacks */ }
-  @else {
+  } @else {
     display: inline;
     // fixes alignment against native input/button on IE6
-    vertical-align: auto; } }
+    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
@@ -35,7 +39,9 @@
   display: inline-block;
   vertical-align: middle;
   @if $hacks {
-    @include ie-inline-block(true); } }
+    @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
@@ -49,7 +55,10 @@
     white-space: no-wrap;
     padding: {
       left: $hpad;
-      right: $hpad; }; } }
+      right: $hpad; 
+    }; 
+  } 
+}
 
 // Hide an element from the viewport, but keep it around for accessability
 @mixin hide {
@@ -62,12 +71,10 @@
   @include hide;
   display: block;
   &:focus {
-    @if $t {
-      top: $t; }
-    @if $r {
-      right: $r; }
-    @if $b {
-      bottom: $b; }
-    @if $l {
-      left: $l; }
-    z-index: 999; } }
+    @if $t { top: $t; }
+    @if $r { right: $r; }
+    @if $b { bottom: $b; }
+    @if $l { left: $l; }
+    z-index: 999; 
+  } 
+}

data/sass/susy/_vertical_rhythm.scss

@@ -28,13 +28,17 @@ $base-half-leader: $base-leader / 2;
 @mixin establish-baseline($font-size: $base-font-size) {
   body {
     font-size: $font-size / $ie-font-ratio;
-    @include adjust-leading-to(1, $font-size); }
+    @include adjust-leading-to(1, $font-size); 
+  }
   html>body {
-    font-size: $font-size; } }
+    font-size: $font-size; 
+  } 
+}
 
 // Show a background image that can be used to debug your alignments.
 @mixin debug-vertical-alignment {
-  background: url(underline.png); }
+  background: url(underline.png); 
+}
 
 // Adjust a block to have a different font size and leading to maintain the rhythm.
 // $lines is a number that is how many times the baseline rhythm this
@@ -43,57 +47,81 @@ $base-half-leader: $base-leader / 2;
 // Use $from_size to adjust from a non-base font-size.
 @mixin adjust-font-size-to($to-size, $lines: ceil($to-size / $base-line-height), $from-size: $base-font-size) {
   font-size: 1em * $to-size / $from-size;
-  @include adjust-leading-to($lines, $to-size); }
+  @include adjust-leading-to($lines, $to-size); 
+}
 
 @mixin adjust-leading-to($lines, $font-size: $base-font-size) {
-  line-height: 1em * $lines * $base-line-height / $font-size; }
+  line-height: 1em * $lines * $base-line-height / $font-size; 
+}
 
 // Apply leading whitespace
 @mixin leader($lines: 1, $font-size: $base-font-size, $property: margin) {
-  #{$property}-top: 1em * $lines * $base-line-height / $font-size; }
+  #{$property}-top: 1em * $lines * $base-line-height / $font-size; 
+}
 
 @mixin padding-leader($lines: 1, $font-size: $base-font-size) {
-  @include leader($lines, $font-size, padding); }
+  @include leader($lines, $font-size, padding); 
+}
 
 @mixin margin-leader($lines: 1, $font-size: $base-font-size) {
-  @include leader($lines, $font-size, margin); }
+  @include leader($lines, $font-size, margin); 
+}
 
 // Apply trailing whitespace
 @mixin trailer($lines: 1, $font-size: $base-font-size, $property: margin) {
-  #{$property}-bottom: 1em * $lines * $base-line-height / $font-size; }
+  #{$property}-bottom: 1em * $lines * $base-line-height / $font-size; 
+}
 
 @mixin padding-trailer($lines: 1, $font-size: $base-font-size) {
-  @include trailer($lines, $font-size, padding); }
+  @include trailer($lines, $font-size, padding); 
+}
 
 @mixin margin-trailer($lines: 1, $font-size: $base-font-size) {
-  @include trailer($lines, $font-size, margin); }
+  @include trailer($lines, $font-size, margin); 
+}
+
+// Whitespace application shortcut
+// Apply top margin/padding + bottom padding/margin
+@mixin rhythm($leader: 0, $padding-leader: 0, $padding-trailer: 0, $trailer: 0, $font-size: $base-font-size) {
+  @include leader($leader, $font-size);
+  @include padding-leader($padding-leader, $font-size);
+  @include padding-trailer($padding-trailer, $font-size);
+  @include trailer($trailer, $font-size);
+}
 
 // Apply a border width to any side without destroying the vertical rhythm
 @mixin apply-side-rhythm-border($side, $width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
   border-#{$side}: {
     style: $border-style;
-    width: 1em * $width / $font-size; };
-  padding-#{$side}: 1em / $font-size * ($lines * $base-line-height - $width); }
+    width: 1em * $width / $font-size; 
+  };
+  padding-#{$side}: 1em / $font-size * ($lines * $base-line-height - $width); 
+}
 
 // Aplly rhythm borders equally to all sides
 @mixin rhythm-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
   border: {
     style: $border-style;
     width: 1em * $width / $font-size; };
-  padding: 1em / $font-size * ($lines * $base-line-height - $width); }
+  padding: 1em / $font-size * ($lines * $base-line-height - $width); 
+}
 
 // Apply a leading rhythm border
 @mixin leading-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
-  @include apply-side-rhythm-border(top, $width, $lines, $font-size, $border-style); }
+  @include apply-side-rhythm-border(top, $width, $lines, $font-size, $border-style); 
+}
 
 // Apply a trailing rhythm border
 @mixin trailing-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
-  @include apply-side-rhythm-border(bottom, $width, $lines, $font-size, $border-style); }
+  @include apply-side-rhythm-border(bottom, $width, $lines, $font-size, $border-style); 
+}
 
 // Apply both leading and trailing rhythm borders
 @mixin horizontal-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
   @include leading-border($width, $lines, $font-size, $border-style);
-  @include trailing-border($width, $lines, $font-size, $border-style); }
+  @include trailing-border($width, $lines, $font-size, $border-style); 
+}
 
 @mixin h-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
-  @include horizontal-borders($width, $lines, $font-size, $border-style); }
+  @include horizontal-borders($width, $lines, $font-size, $border-style); 
+}

data/templates/project/_base.scss

@@ -48,10 +48,12 @@ $alt: #005498;
 // Give yourself some font stacks to work with.
 
 @mixin sans-family {
-  font-family: Helvetica, Arial, sans-serif; }
+  font-family: Helvetica, Arial, sans-serif; 
+}
 
 @mixin serif-family {
-  font-family: Baskerville, Palatino, serif; }
+  font-family: Baskerville, Palatino, serif; 
+}
 
 // OTHER MIXINS
 // Mixins set here will be available in defaults, screen, print and IE

data/templates/project/_defaults.scss

@@ -11,57 +11,71 @@
 
 body {
   @include sans-family;
-  color: $base; }
+  color: $base; 
+}
 
 /* @group links */
 
 :focus {
-  outline: 1px dotted $alt; }
+  outline: 1px dotted $alt; 
+}
 
 a {
   &:link, &:visited {
-    color: $alt; }
+    color: $alt; 
+  }
   &:focus, &:hover, &:active {
-    color: $alt - #222222;
-    text-decoration: none; } }
+    color: darken($alt,5);
+    text-decoration: none; 
+  } 
+}
 
 /* @end */
 
 /* @group inline tags */
 
-cite {
-  font-style: italic; }
+cite { 
+  font-style: italic; 
+}
 
-em {
-  font-style: italic; }
+em { 
+  font-style: italic; 
+}
 
-strong {
-  font-weight: bold; }
+strong { 
+  font-weight: bold; 
+}
 
-ins {
-  text-decoration: underline; }
+ins { 
+  text-decoration: underline; 
+}
 
-del {
-  text-decoration: line-through; }
+del { 
+  text-decoration: line-through; 
+}
 
 q {
   font-style: italic;
   em {
-    font-style: normal; } }
+    font-style: normal; 
+  } 
+}
 
 /* @end */
 
 /* @group replaced tags */
 
 img {
-  vertical-align: bottom; }
+  vertical-align: bottom; 
+}
 
 /* @end */
 
 /* @group headers */
 
 h1, h2, h3, h4, h5, h6 {
-  font-weight: bold; }
+  font-weight: bold; 
+}
 
 /* @end */
 
@@ -69,30 +83,37 @@ h1, h2, h3, h4, h5, h6 {
 
 p {
   @include leader;
-  @include trailer; }
+  @include trailer; 
+}
 
 @mixin list-default($ol: false) {
   @include leader;
   @include trailer;
   @if $ol {
-    list-style: decimal; }
-  @else {
-    list-style: disc; } }
+    list-style: decimal; 
+  } @else {
+    list-style: disc; 
+  } 
+}
 
 @mixin no-style-list {
   @include no-bullets;
   margin: 0;
-  padding: 0; }
+  padding: 0; 
+}
 
 ol {
-  @include list-default(ol); }
+  @include list-default(ol); 
+}
 
 ul {
-  @include list-default; }
+  @include list-default; 
+}
 
 blockquote {
   margin: $base-rhythm-unit;
-  @include serif-family; }
+  @include serif-family; 
+}
 
 /* @end */
 
@@ -105,8 +126,10 @@ table {
   border: {
     width: 0;
     style: solid;
-    color: $base; };
-  @include horizontal-borders(1px, 0.5); }
+    color: $base; 
+  };
+  @include horizontal-borders(1px, 0.5); 
+}
 
 th {
   font-weight: bold; }
@@ -116,22 +139,29 @@ th {
 /* @group forms */
 
 fieldset {
-  @include trailer; }
+  @include trailer; 
+}
 
 legend {
   font-weight: bold;
-  font-variant: small-caps; }
+  font-variant: small-caps; 
+}
 
 label {
   display: block;
-  @include leader; }
+  @include leader; 
+}
 
 legend + label {
-  margin-top: 0; }
+  margin-top: 0; 
+}
 
 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.
   @include box-sizing(border-box);
-  width: 100%; }
+  width: 100%; 
+}
 
 /* @end */
 

data/templates/project/manifest.rb

@@ -3,3 +3,20 @@ stylesheet 'print.scss', :media => "print"
 stylesheet 'ie.scss', :media => "screen, projection"
 stylesheet '_base.scss'
 stylesheet '_defaults.scss'
+
+description "Susy: a flexible static/fluid/elastic grid system native to compass."
+
+help %Q{
+Please see the Susy website for all documentation and tutorials:
+
+    http://www.oddbird.net/susy
+}
+
+welcome_message %Q{
+Please see the Susy website for all documentation and tutorials:
+
+    http://www.oddbird.net/susy
+
+To get started, set up your grid in the grid partial by following the inline instructions.
+}
+

data/templates/project/print.scss

@@ -6,15 +6,23 @@
 
 @mixin print {
   nav {
-    display: none; }
+    // no need to navigate on paper
+    display: none; 
+  }
   * {
-    float: none !important; }
+    // floated elements disappear when they overflow the page
+    float: none !important; 
+  }
   body {
     @include serif-family;
     font-size: 12pt;
     background: white;
-    color: black; }
+    color: black; 
+  }
   a:link:after, a:visited:after {
-    content: " (" attr(href) ") "; } }
+    // print target URLs next to their links
+    content: " (" attr(href) ") "; 
+  } 
+}
 
 @include print;

metadata

@@ -6,8 +6,8 @@ version: !ruby/object:Gem::Version
   - 0
   - 7
   - 0
-  - pre7
-  version: 0.7.0.pre7
+  - pre8
+  version: 0.7.0.pre8
 platform: ruby
 authors: 
 - Eric Meyer
@@ -15,7 +15,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2010-04-13 00:00:00 -06:00
+date: 2010-04-20 00:00:00 -06:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency