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

data/Manifest

@@ -15,6 +15,7 @@ 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

data/README.mkdn

@@ -1,19 +1,22 @@
 Susy - Compass Plugin 
 =====================
 
-Susy is a semantic CSS framework creator entirely native to
-[Compass](http://compass-style.org/).
-Susy is an expert at fluid grids in an elastic (or fluid, or fixed) shell that
-will never activate that bloody side-scroll bar. Susy sets your width on the
-outer element (`container`), adds a `max-width` of `100%` and builds the rest
-of your grid in percentages. The philosophy and technique are based on
-[Natalie Downe](http://natbat.net/)'s "[CSS
+Susy is a semantic CSS grid system for designers.
+
+Build beautiful grids of any type, width and breakdown, without touching your
+markup or changing the way you work. Built entirely native to
+[Compass](http://compass-style.org/), Susy is an expert at fluid grids in an
+elastic (or fluid, or fixed) shell that stay where you want without ever
+activating that bloody side-scroll bar. Susy sets your width on the outer
+element (`container`), adds a `max-width` of `100%` and builds the rest of
+your grid in percentages. The philosophy and technique are based on [Natalie
+Downe](http://natbat.net/)'s "[CSS
 Systems](http://natbat.net/2008/Sep/28/css-systems/)" - which introduces
 difficult math in the service of beautiful structure. With the power of
-Compass/Sass, Susy will do that math for you.
+Compass/Sass, Susy will do that math and let you focus on your designs.
 
-Using simple mixins, columns can be created, suffixed, prefixed, and nested
-easily - and always in flexible percentages.
+Using simple mixins, columns can be created, suffixed, prefixed, and nested -
+always in flexible percentages and without touching your markup.
 
 Install 
 =======
@@ -26,17 +29,19 @@ Create a Susy-based Compass Project
     compass -r susy -f susy <project name>
 
 Then edit your `_base.scss`, `_defaults.scss`, `screen.scss` and `print.scss`
-files accordingly. A reset is added automatically, and includes help for some
+files accordingly. A reset is added automatically, and includes support for
 HTML5 elements.
 
 Philosophy and Goals
---------------------
+====================
 
 The method comes from [Natalie Downe](http://natbat.net/)'s "[CSS
 Systems](http://natbat.net/2008/Sep/28/css-systems/)", but I'll cover it here.
 
 It is important for accessibility and usability that we are:
 
+* Able to control our designs and line-lengths with some amount of precision.
+
 * Responsive to text sizing: In order for our site to be accessible we need to
   allow different font-sizes to be set by the client. In order to maintain
   design integrity of proportions and line-lengths, the grid needs to respond
@@ -63,29 +68,162 @@ 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`.
+  
+    Example:
+  
+        $base-font-size: 16px;
+        $base-line-height: 24px;
+
+        $total-cols: 12; /* a 12-column grid */
+        $col-width: 4em; /* each column is 4em (64px) wide */
+        $gutter-width: 1em; /* 1em (16px) gutters between columns */
+        $side-gutter-width: $gutter-width; /* 1em (16px) padding at the edges of the page as well */
 
 * 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.scss`: apply the `@include susy` mixin at the
   top level and the `@include container` mixin to the element that contains
-  the page grid.
+  the page grid. This will set up your font sizes, vertical rhythm, and grid
+  container.
+
+    Example:
+
+        @include susy;
+     
+        #page {
+          @include container; 
+        }
+    
+    CSS Output:
+    
+        body {
+          font-size: 100%;
+          line-height: 1.5em;
+        }
+
+        html > body {
+          font-size: 16px;
+        }
+
+        body {
+          text-align: center;
+        }
+
+        #page {
+          overflow: hidden;
+          display: inline-block;
+          text-align: left;
+          margin-left: auto;
+          margin-right: auto;
+          width: 61em;
+          max-width: 100%;
+        }
+        #page {
+          display: block;
+        }
 
 * 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.
+  element, or `@include full` for any element spanning the full width of its
+  context.
+
+  There is an important distinction between "root" and "nested" contexts in
+  Susy. There is also a distinction between "grid elements" and "non-grid
+  elements". Grid elements are any elements that you assign a span to, either
+  with the `columns` or `full` mixin. Non-Grid elements include everything
+  else. Just as CSS absolute positioning happens in relation to the nearest
+  positioned ancestor, Susy grid "context" depends on the nearest grid-element
+  ancestor. Any element with the `container` as it's nearest grid ancestor is
+  considered to be in the "root" context. Any element within other grid
+  elements (with a nearest grid ancestor other than the `container`) is
+  considered to be in a "nested" context.
+    
+  This is important because side-gutters are handled at the root level, as
+  margins on root grid elements. Margins that we don't want at nested levels.
+  It is also important because Susy grid elements are %-based, and so the
+  context is important to Susy's math. `Full` is simply a shortcut to replace
+  `columns` when the span should be the full width.
+  
+    The `columns` mixin:
+  
+        @include columns($span [, $context]);
+  
+    The `full` mixin:
+  
+        @include full([$context]);
+
+  *Note:* Context _must not_ be passed at the root level, and _must_ be passed at nested levels.
 
 * 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.
+  the first or last column within their parent element.
+  
+  *Note:* `@include alpha` is _only_ needed in the root level, and does
+  nothing in nested contexts. Neither is needed with an `@include full` element.
+  
+    The `alpha` and `omega` mixins:
+    
+        @include alpha;
+        @include omega([$context]);
+  
+    Example Scss:
+    
+        #page {
+          @include container;
+          header {
+            @include full;
+            h1 {
+              @include full(12);
+            }
+          }
+          nav {
+            @include columns(3);
+            @include alpha;
+          }
+          #content {
+            @include columns(9);
+            @include omega;
+            #main {
+              @include columns(6,9);
+            }
+            aside {
+              @include columns(3,9);
+              @include omega(9);
+            }
+          }
+        }
+      
+  Susy's CSS output uses floats to arrange the columns, widths to set the
+  spans, right-margins to set the getter, and both side margins to set the
+  side-gutters on root `alpha` and `omega` elements.
 
-* 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
+* Use `@include prefix` or `@include suffix` to pad (in columns) the width of
+  an element using left and right padding, 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.
+  
+    The `prefix`, `suffix` and `pad` mixins:
+    
+        @include prefix($prefix-span [, $context])
+        @include prefix($suffix-span [, $context])
+        @include pad($prefix-span, $suffix-span [, $context])
+  
+    Used with `full` these are subtractive, so the full width remains:
+    
+        header {
+          @include full;
+          @prefix(2);
+        }
+    
+    Will result in a full-width element, with 2 columns of padding to the left.
+    
+    Used with `columns` these are addative, so the content width remains:
+    
+        aside {
+          @include columns(3,9);
+          @prefix(3,9)
+        }
+    
+    Will result in a 6-column element, with 3 of those columns used as padding 
+    on the left.
 
 That's it for the basics! Here's a sample Susy grid layout:
 
@@ -95,41 +233,36 @@ That's it for the basics! Here's a sample Susy grid layout:
       @include container; 
     }
      
-    #brand {
+    header {
       @include full;
       @include pad(1,1);
       
       h1 {
-        @include full(8);
-        @include pad(1,2,8); 
+        @include full(10);
       } 
     }
         
-    #nav {
-      @include columns(2);
+    nav {
+      @include columns(3);
       @include alpha;
     }
      
     #content {
-      @include columns(8);
+      @include columns(9);
       @include omega;
-      
-      #description {
-        @include columns(5,8);
+      #main {
+        @include columns(6,9);
       }
-      
-      #credit {
-        @include columns(3,8);
-        @include omega(8);
+      aside {
+        @include columns(3,9);
+        @include omega(9);
       }
     }
 
 Tutorial
 ========
 
-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.
+Being built...
 
 Extra Utility Mixins 
 =====================

data/VERSION

@@ -1 +1 @@
-0.7.0.pre8
+0.7.0.rc1

data/compass-susy-plugin.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |s|
   s.name = %q{compass-susy-plugin}
-  s.version = "0.7.0.pre8"
+  s.version = "0.7.0.rc1"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 1.2") if s.respond_to? :required_rubygems_version=
   s.authors = ["Eric Meyer"]
@@ -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.rc2"])
+      s.add_runtime_dependency(%q<compass>, [">= 0.10.0"])
     else
-      s.add_dependency(%q<compass>, [">= 0.10.0.rc2"])
+      s.add_dependency(%q<compass>, [">= 0.10.0"])
     end
   else
-    s.add_dependency(%q<compass>, [">= 0.10.0.rc2"])
+    s.add_dependency(%q<compass>, [">= 0.10.0"])
   end
 end

data/sass/susy/_reset.scss

@@ -1,10 +1,9 @@
 //** Susy Reset **//
 
+/* Reset --------------------------------------------------------------*/
 
-/* @group reset */
 @import "compass/reset";
 
-// HTML5 reset
-@include reset-html5;
+/* HTML5 Reset --------------------------------------------------------------*/
 
-/* @end */
+@include reset-html5;

data/sass/susy/_vertical_rhythm.scss

@@ -8,10 +8,10 @@ $default-rhythm-border-style: solid !default;
 $ie-font-ratio: 16px / 100%;
 
 // The base line height is the basic unit of line hightness.
-$base-line-height: 18px !default;
+$base-line-height: 24px !default;
 
 // The base font size
-$base-font-size: 12px !default;
+$base-font-size: 16px !default;
 
 // The basic unit of font rhythm
 $base-rhythm-unit: $base-line-height / $base-font-size * 1em;

data/templates/project/_base.scss

@@ -1,60 +1,43 @@
 //**
-//  Susy: Fixed-Elastic-Fluid grids without all the math
-//  By: Eric A. Meyer and OddBird Collective
+//  Susy: Un-obtrusive grids for designers
+//  By: Eric A. Meyer and OddBird
 //  Site: www.oddbird.net/susy/
 //**
 
-// FONT-SIZE
-// Override these values as needed (defaults are 12/18)
+// Font Sizes --------------------------------------------------------------
 
 $base-font-size: 16px;
 $base-line-height: 24px;
 
-// GRID
-// Set these values as needed for your grid layout.
-//  - defaults are shown.
+// Grid --------------------------------------------------------------
 
 $total-cols: 12;
 $col-width: 4em;
 $gutter-width: 1em;
 $side-gutter-width: $gutter-width;
 
-// OMEGA_FLOAT
-// By default, +omega elements are floated right.
-// You can override that globally here:
-
-// $omega_float: right
-
-// HACKS
-// Are you using hacks or conditional comments? Susy makes both possible.
-// Leave this as 'true' to use hacks, set it as false for conditional 
-// comments. Conditional comments will require overrides for +omega, 
-// +inline-block and several other mixins.
-
-// $hacks: true
-
-// SUSY
-// Don't move this @import above the GRID and FONT-SIZE overrides.
-
+// Don't move this @import above the GRID and FONT-SIZE variables.
 @import "susy/susy";
 
-// COLORS
-// Set any colors you will need later.
+// Colors --------------------------------------------------------------
 
-$base: black;
+$base: #4c4c4c;
 $alt: #005498;
 
-// FONTS
-// Give yourself some font stacks to work with.
+// Fonts --------------------------------------------------------------
 
 @mixin sans-family {
-  font-family: Helvetica, Arial, sans-serif; 
+  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
 }
 
 @mixin serif-family {
-  font-family: Baskerville, Palatino, serif; 
+  font-family: 'Adobe Caslon Pro', Caslon, Baskerville, Palatino, 'Palatino Linotype', "Hoefler Text", Garamond, "URW Palladio L", "Book Antiqua", 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;
 }
 
-// OTHER MIXINS
+// OTHER MIXINS --------------------------------------------------------------
 // Mixins set here will be available in defaults, screen, print and IE
 // Or anywhere you import either base.sass or defaults.sass

data/templates/project/_defaults.scss

@@ -1,168 +1,257 @@
 //** DEFAULT STYLES **//
-// Don't forget to set your default styles.
 
-// Get all the details and mixins from base.sass
-@import "base";
+// Based on the work of:
+// Andy Clarke: http://forabeautifulweb.com/
+
+// Imports --------------------------------------------------------------*/
 
-// Reset browser defaults, and prepare block-level HTML5 elements
+@import "base";
 @import "susy/reset";
 
-/* @group defaults */
+/* Body --------------------------------------------------------------*/
 
 body {
-  @include sans-family;
-  color: $base; 
+  @include serif-family;
+  color: $base;
 }
 
-/* @group links */
-
-:focus {
-  outline: 1px dotted $alt; 
-}
+/* Links --------------------------------------------------------------*/
 
 a {
   &:link, &:visited {
-    color: $alt; 
+    color: $alt;
   }
   &:focus, &:hover, &:active {
     color: darken($alt,5);
-    text-decoration: none; 
-  } 
+    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);  
+}
+
+h3 {
+  @include adjust-font-size-to(24px);
+  @include trailer(1,24px);
+}
+
+h4 {
+  @include adjust-font-size-to(18px);
+  @include trailer(1,18px);
 }
 
-/* @end */
+h5, h6 { 
+  @include trailer(1);
+  font-weight: bold;
+}
+
+/* Text --------------------------------------------------------------*/
+
+cite, em, dfn { 
+  font-style: italic;
+}
 
-/* @group inline tags */
+strong, dfn { 
+  font-weight: bold;
+}
 
-cite { 
-  font-style: italic; 
+sup, sub { 
+  line-height: 0;
 }
 
-em { 
-  font-style: italic; 
+abbr, acronym { 
+  border-bottom: 1px dotted;
+  cursor: help;
 }
 
-strong { 
-  font-weight: bold; 
+address {
+  @include trailer;
+  font-style: italic;
 }
 
 ins { 
-  text-decoration: underline; 
+  text-decoration: underline;
 }
 
 del { 
-  text-decoration: line-through; 
+  text-decoration: line-through;
+}
+
+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;
+}
+
+code { 
+  display: block;
 }
 
 q {
   font-style: italic;
   em {
-    font-style: normal; 
+    font-style: normal;
   } 
 }
 
-/* @end */
-
-/* @group replaced tags */
-
-img {
-  vertical-align: bottom; 
+p {
+  @include trailer;
 }
 
-/* @end */
-
-/* @group headers */
+blockquote, q {
+  quotes : "" "";
+}
 
-h1, h2, h3, h4, h5, h6 {
-  font-weight: bold; 
+blockquote { 
+  margin: $base-rhythm-unit {
+    left: -$base-rhythm-unit;
+  };
+  padding-left: $base-rhythm-unit;
+  border-left: 1px solid;
+  @include serif-family;
+  font-style: italic;
 }
 
-/* @end */
+blockquote, q {
+  &:before, &:after { 
+    content: "";
+  }
+}
 
-/* @group block tags */
+/* Replaced --------------------------------------------------------------*/
 
-p {
-  @include leader;
-  @include trailer; 
+img {
+  vertical-align: bottom;
 }
 
+/* Lists --------------------------------------------------------------*/
+
 @mixin list-default($ol: false) {
-  @include leader;
-  @include trailer;
+  margin: 0 $base-rhythm-unit $base-rhythm-unit 0;
   @if $ol {
-    list-style: decimal; 
+    list-style: decimal;
   } @else {
-    list-style: disc; 
+    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; 
+li {
+  ul, ol { 
+    list-style-type: circle;
+    margin: 0 $base-rhythm-unit $base-rhythm-unit*.5;
+  }
 }
 
-/* @end */
+dl {
+  @include trailer;
+  @include leading-border(1px);
+  dt {
+    @include adjust-font-size-to(18px);
+    @include trailer(.5,18px);
+  }
+}
 
-/* @group tables */
+dd {
+  @include trailer;
+  @include trailing-border(1px);
+}
 
+/* Tables --------------------------------------------------------------*/
 /* tables still need 'cellspacing="0"' in the markup */
 
 table {
+  @include trailer;
   width: 100%;
-  border: {
-    width: 0;
-    style: solid;
-    color: $base; 
-  };
-  @include horizontal-borders(1px, 0.5); 
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+table, td, th { 
+  vertical-align: top;
+}
+
+th, thead th {
+  font-weight: bold;
+}
+
+th, td, caption {
+  padding: $base-rhythm-unit*.5;
+  text-align: left;
+  font-weight: normal;
+}
+
+th, td {
+  @include trailing-border(1px,.5);
 }
 
-th {
-  font-weight: bold; }
+tfoot { 
+  @include adjust-font-size-to(14px);
+}
 
-/* @end */
+caption {
+  @include adjust-font-size-to(24px);
+  @include trailer(1,24px);
+}
 
-/* @group forms */
+/* Forms --------------------------------------------------------------*/
 
 fieldset {
-  @include trailer; 
+  @include trailer;
+  @include rhythm-borders(1px);
 }
 
 legend {
+  @include adjust-font-size-to(18px);
   font-weight: bold;
-  font-variant: small-caps; 
 }
 
 label {
-  display: block;
-  @include leader; 
-}
-
-legend + label {
-  margin-top: 0; 
+  font-weight: bold;
 }
 
 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 */
-
-/* @end */

data/templates/project/ie.scss

@@ -4,4 +4,7 @@
  *   <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
  * <![endif]--> */
 
+// Imports --------------------------------------------------------------*/
+
 @import "base";
+

data/templates/project/manifest.rb

@@ -3,6 +3,7 @@ stylesheet 'print.scss', :media => "print"
 stylesheet 'ie.scss', :media => "screen, projection"
 stylesheet '_base.scss'
 stylesheet '_defaults.scss'
+image 'grid.png'
 
 description "Susy: a flexible static/fluid/elastic grid system native to compass."
 
@@ -17,6 +18,6 @@ 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.
+To get started, set up your grid in the base partial by following the inline instructions.
 }
 

data/templates/project/print.scss

@@ -2,8 +2,12 @@
  * Import this file using the following HTML or equivalent:
  * <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> */
 
+// Imports --------------------------------------------------------------*/
+
 @import "defaults";
 
+/* Print Defaults --------------------------------------------------------------*/
+
 @mixin print {
   nav {
     // no need to navigate on paper
@@ -12,6 +16,7 @@
   * {
     // floated elements disappear when they overflow the page
     float: none !important; 
+    background: none;
   }
   body {
     @include serif-family;

data/templates/project/screen.scss

@@ -2,35 +2,22 @@
  * Import this file using the following HTML or equivalent:
  * <link href="/stylesheets/screen.css" media="screen" rel="stylesheet" type="text/css" /> */
 
+// Imports --------------------------------------------------------------*/
+
 @import "defaults";
 
-/* @group STRUCTURE */
+/* Layout --------------------------------------------------------------*/
 
 @include susy;
 
 // change '#page' to match your HTML container element(s)
 #page {
-  @include container; }
-
-/* @end */
-
-/* @group COMPONENTS by type */
-
-/* @end */
-
-/* @group OVERRIDES by content */
-
-/* @end */
-
-/* @group OVERRIDES by page */
-
-/* @end */
-
-/* @group DEBUG */
-
-// Uncomment, adjust and use for debugging
+  @include container;
+  @include show-grid("grid.png"); }
 
-// #page {
-//   @include show-grid("your-grid-image.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, 
+// and 20 is the (optional) line-height.
 
-/* @end */
+/* Styles --------------------------------------------------------------*/

metadata

@@ -6,8 +6,8 @@ version: !ruby/object:Gem::Version
   - 0
   - 7
   - 0
-  - pre8
-  version: 0.7.0.pre8
+  - rc1
+  version: 0.7.0.rc1
 platform: ruby
 authors: 
 - Eric Meyer
@@ -29,8 +29,7 @@ dependencies:
         - 0
         - 10
         - 0
-        - rc2
-        version: 0.10.0.rc2
+        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.