ericam-compass-susy-plugin 0.3.1 → 0.4.0

data/README.mkdn

@@ -1,5 +1,5 @@
 Susy - Compass Plugin 
-================================
+=====================
 
 Susy is a semantic CSS framework creator entirely native to
 [Compass](http://compass-style.org/).
@@ -23,101 +23,101 @@ Install
     sudo gem install ericam-compass-susy-plugin
 
 Create a Susy-based Compass Project 
-==================================
+===================================
 
     compass -r susy -f susy <project name>
 
 Then edit your `_base.sass`, `screen.sass` and `print.sass` files accordingly.
 A reset is added automatically.
 
-Customizing your Grid System 
-============================
+Philosophy and Goals
+--------------------
 
-Start in your `_base.sass` file. That's where you set all your defaults.
+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.
 
-To create a grid system, set the `!grid_unit` (units that your grid is based
-in), `!total_cols` (total number of columns in your grid), `!col_width` (width
-of columns), and `!gutter_width` (width of gutters) variables in your
-`_base.sass`.
+It is important for accessibility and usability that we are:
 
-Example:
+* 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
+  to those sizes.
 
-    !grid_unit = "em" 
-    !total_cols = 10 
-    !col_width = 7 
-    !gutter_width = 1
-    !side_gutter_width = 2
+* Responsive to window sizing: In order to maintain usability across
+  platforms/monitors, our grid needs to respond to the size of the viewport.
+  This is mainly an issue as the viewport shrinks and we are given a
+  side-scroll bar. No one likes that. On the large end our design integrity
+  and line lengths are more important than taking up all the possible space.
 
-The default values are 16 columns, 4em column widths, and 1em gutters and side
-gutters that match the internal ones.
+In order to achieve both we need to combine the best of the elastic (em-based)
+and fluid (%-based) models. The solution is simple: First we build a fluid
+grid, then place it inside an elastic shell, and apply a maximum width to that
+shell so that it never exceeds the size of the viewport. It's simple in
+theory, but daunting in practice, as you constantly have to adjust your math
+based on the context.
 
-Of course, designing in `em`'s, you'll want to get your font sizes set to make
-this all meaningful. Do that by assigning a pixel value (without the units) to
-`!base_font_size_px` and `!base_line_height_px`. Susy will convert those to a
-percentage of the common browser default (16px) and apply them to your
-`grid-container`.
+But Susy harnesses the power of Compass and Sass to do all the math for you.
 
-Example:
+Grid Basics
+===========
 
-    !base_font_size_px = 14 
-    !base_line_height_px = 16
+* Set up your default grid values (total columns, column width, gutter
+  width, side gutter width), your base font size, and other style defaults
+  in `_base.sass`.
 
-The default values are 12px fonts with an 18px line-height.
+* Create your grid in `screen.sass`: apply the `+susy` mixin to the `body`
+  element and the `+container` mixin to the element that contains the page
+  grid.
 
-`_base.sass` also has everything you need for setting default font families,
-colors to reuse throughout, and default styles for all those elements that
-ought have a default (but don't because of the reset).
+* Use the `+columns` mixin to declare the width in columns of an element,
 
-Making Semantic Grids 
-=====================
+* 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`).
 
-* Use the `+susy` mixin to get things ready, set your base font sizes and
-  center your grid in the browser window. Change the alignment of your grid
-  in the window with an optional `left | center | right` argument.
-
-* Use the `+container` mixin to declare your container
-  element. Besides building the grid shell, this sets your horizontal
-  margins to auto (for centered designs) and returns your
-  text-alignment to "left". Change the internal text alignment with an
-  optional `left | center | right` argument.
-
-* Use the `+columns` mixin to set the width (in columns) of a grid element. 
-  The first argument is the number of columns to span, the second (optional)
-  argument is the width (in columns) of the containing element when nesting
-  (defaults to the container's `!total_cols`). By default, the left margin
-  is set to 0 and the right margin is set to the width of a gutter. Modify
-  this for first and last elements with the `+alpha` and `+omega` mixins
-  (below), or set larger margins using `+prefix` and `+suffix`.
-
-* Use the `+alpha` and `+omega` mixins to declare the first and last
-  elements in a row, or inside a nested element. In the latter case, each of
-  these mixins takes one argument, which is the size (in columns) of the
-  containing element.
-
-* Use the `+prefix` and `+suffix` mixins with one argument to add that
-  many grid columns as margin before or after a grid element. These
-  mixins also take an optional second argument, the size in columns of
-  the containing element when nested.
-
-Example:
-
-    body 
-      +susy
+* 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.
 
-      #page 
-        +container 
-        #left-nav 
-          +columns(3) 
-          +alpha
-          #main-content 
-            +prefix(2)
-            +columns(4, 10) 
-            +omega 
-            .header 
-              +columns(1, 4) 
-            .article 
-              +columns(3, 4) 
-              +omega
+* 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:
+
+    body
+      +susy
+     
+    #page
+      +container
+     
+    #brand
+      +columns(8)
+      +pad(1,1)
+      +full
+      h1
+        +columns(5,8)
+        +pad(1,2,8)
+        +full(8)
+        
+    #nav
+      +columns(2)
+      +alpha
+     
+    #content
+      +columns(8)
+      +omega
+      #description
+        +columns(5,8)
+        +alpha(8)
+      #credit
+        +columns(3,8)
+        +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.
 
 Extra Utility Mixins 
 =====================
@@ -143,13 +143,14 @@ options, experimental (CSS3/proprietary) CSS, and more.
 
 And then the fun stuff:
 
-* `+opacity(!opacity)` adds cross-browser opacity settings (takes a range of 0
-  - 1).
+* `+opacity(!opacity)` adds cross-browser opacity settings (takes a range of
+  0 to 1).
 
 * `+border-radius(!radius)` (`+border-bottom-left-radius` etc. all work) for
   rounded corners in supporting browsers.
 
-* `+box-sizing(!model)` for setting the box sizing model in supporting browsers.
+* `+box-sizing(!model)` for setting the box sizing model in supporting
+  browsers.
 
 * `+box-shadow(!verticaloffset, !horizontaloffset, !blur, !color)` for
   box-shadow in webkit and CSS3.

data/VERSION

@@ -1 +1 @@
-0.3.1
+0.4.0

data/compass-susy-plugin.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |s|
   s.name = %q{compass-susy-plugin}
-  s.version = "0.3.1"
+  s.version = "0.4.0"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 1.2") if s.respond_to? :required_rubygems_version=
   s.authors = ["Eric Meyer"]
@@ -10,7 +10,7 @@ Gem::Specification.new do |s|
   s.description = %q{Susy is a ground-up native Compass plugin grid system that takes full advantage of Sass' capabilities to remove the tedium from grid-based web design.}
   s.email = %q{eric@oddbird.net}
   s.extra_rdoc_files = ["lib/susy/compass_plugin.rb", "lib/susy/sass_extensions.rb", "lib/susy.rb", "README.mkdn"]
-  s.files = ["lib/susy/compass_plugin.rb", "lib/susy/sass_extensions.rb", "lib/susy.rb", "Manifest", "Rakefile", "README.mkdn", "sass/susy/_grid.sass", "sass/susy/_utils.sass", "sass/susy/_text.sass", "sass/susy/_susy.sass", "templates/project/_base.sass", "templates/project/screen.sass", "templates/project/print.sass", "templates/project/ie.sass", "templates/project/manifest.rb", "VERSION", "LICENSE.txt", "compass-susy-plugin.gemspec"]
+  s.files = ["lib/susy/compass_plugin.rb", "lib/susy/sass_extensions.rb", "lib/susy.rb", "Manifest", "Rakefile", "README.mkdn", "sass/susy/_grid.sass", "sass/susy/_utils.sass", "sass/susy/_text.sass", "sass/susy/_susy.sass", "templates/project/_base.sass", "templates/project/screen.sass", "templates/project/print.sass", "templates/project/ie.sass", "templates/project/manifest.rb", "VERSION", "LICENSE.txt", "docs/tutorial/index.mkdn", "docs/tutorial/figures/susy_element.png", "docs/tutorial/figures/susy_grid.png", "compass-susy-plugin.gemspec"]
   s.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"]

data/docs/tutorial/index.mkdn

@@ -0,0 +1,336 @@
+Susy Tutorial
+=============
+
+Once you've [installed
+everything](http://github.com/ericam/compass-susy-plugin/tree/master) we can
+start building our grid. I'll walk you through the steps. I'm starting with
+the assumption that you already know CSS and the Compass/Sass syntax. If you
+don't, check out [Chris Eppstein's great
+intro](http://wiki.github.com/chriseppstein/compass).
+
+For a brief overview of Susy's philosophy and goals, see [the
+README](http://github.com/ericam/compass-susy-plugin/tree/master#readme).
+
+On Susy's Terms
+---------------
+
+Here are the terms to understand for following along and using Susy:
+
+* There is always a **container** element that wraps the page. This container
+  will act as our elastic shell. The **container** also represents a grid
+  structure made up of **columns**, **gutters** between the columns, and
+  **side gutters** on the outside edges of the grid.
+
+  [![The Susy Grid](figures/susy_grid.png)](figures/susy_grid.png)
+
+* The base **context** is the number of columns in your grid system, and any
+  direct children of the **container** will use that base as their
+  **context**.  However, as you continue to nest elements within each other
+  that context will change. Just remember that the **context** is always the
+  number of columns spanned by the parent element.
+
+* There are any number of **grid elements** making up the structure of our
+  site, nested within the **container**. Each grid element has a width that
+  spans any number of **columns** along with the **gutters** between those
+  columns (number of columns minus one), and a right-margin that represents
+  the gutter to the right of it.
+
+  [![The Susy Grid Element](figures/susy_element.png)](figures/susy_element.png)
+
+* A **grid element** might also include a **prefix** and/or **suffix** added
+  as padding on either side. Any **prefix** or **suffix** will span the number
+  of **columns** given as argument, as well as all associated **gutters** (in
+  this case the same number of gutters as columns).
+
+* Any **grid elements** that span the first or last columns in any given
+  context will sometimes need to handle gutters in special ways. These will be
+  referred to as the **alpha** and **omega** elements. One element that spans
+  an entire context (a header or footer perhaps) may be both **alpha** and
+  **omega**.
+
+Customizing your Grid System 
+----------------------------
+
+So let's get started. We're going to build a website for Susy. [This
+website](http://www.oddbird.net/susy/). It's a simple site but it covers
+everything you need to get started on your own.
+
+Create yourself a Compass project using Susy:
+
+    compass -r susy -f susy susy_tutorial
+
+Inside the susy_tutorial directory, create an `index.html` file. You can [grab
+my source](01_target/index.html).
+
+Start in your `_base.sass` file (in the `src` directory). That's where you set
+all your defaults.
+
+To create a grid, set the `!grid_unit` (units that your grid is based in),
+`!total_cols` (total number of columns in your grid), `!col_width` (width of
+columns), and `!gutter_width` (width of gutters) variables.
+
+The default values are 16 columns, 4em column widths, 1em gutters and side
+gutters that match the internal ones. But we want a 10 column grid, with 5em
+columns, 2em gutters and 1em side-gutters.
+
+Take a look at our target site again, this time [with a grid
+overlay](01_target/).
+
+So we'll set our grid like this:
+
+    !grid_unit = "em" 
+    !total_cols = 10 
+    !col_width = 5 
+    !gutter_width = 2
+    !side_gutter_width = 1
+
+Of course, designing in em's, we'll want to get your font sizes set to make
+this all meaningful. Do that by assigning a pixel value (without the units) to
+`!base_font_size_px` and `!base_line_height_px`. Susy will convert those to a
+percentage of the common browser default (16px) and apply them to your grid.
+
+The default values here are 12px fonts with an 18px line-height. For us:
+
+    !base_font_size_px = 14 
+    !base_line_height_px = 21
+
+`_base.sass` also has everything you need for setting default font families,
+colors to reuse throughout, and default styles for all those elements that
+ought have a default (but don't because of the reset).
+
+We can leave most of that as it is for now, but let's fill in a few of the
+most important defaults. We want some colors to choose from, and defaults for
+links and paragraphs.
+
+So let's add some colors:
+
+    !text = #332016
+    !light = #CC8866
+    !links = #4CAAC0
+
+And style the links:
+    
+    a
+      &:link, &:visited
+        :color= !links
+        :text-decoration none
+      &:focus, &:hover, &:active
+        :color= !light
+        :border-bottom
+          :width .1429em
+          :style dashed
+
+(`.1429em` is just an approximation of `2px` in terms of our em units.)
+
+And we'll add a bit of margin to our paragraphs:
+    
+    p
+      :margin-bottom 1.5em
+
+That's it. You can look around at the other defaults and set what you like, or
+juse use [mine](../src/_base.sass).
+
+
+Making Semantic Grids 
+---------------------
+
+First the explanation:
+
+* Use the `+susy` mixin to get things ready, set your base font sizes and
+  center your grid in the browser window. Change the alignment of your grid in
+  the window with an optional `left | center | right` argument.
+
+* Use the `+container` mixin to declare your container element. Besides
+  building the grid shell, this sets your horizontal margins to auto (for
+  centered designs) and returns your text-alignment to "left". Change the
+  internal text alignment with an optional `left | center | right` argument.
+  
+* Use the `+columns` mixin to set the width (in columns) of a grid element.
+  The first argument is the number of columns to span, the second (optional)
+  argument is the width (in columns) of the containing element when
+  nesting. If the element is not nested (its parent is the grid container),
+  don't pass a second argument.
+
+* Use the `+alpha` and `+omega` mixins to declare the first and last elements
+  in a row, or inside a nested element. In the latter case, each of these
+  mixins takes one argument, which is the size (in columns) of the containing
+  element.
+
+* Use the `+prefix` and `+suffix` mixins with one argument to add that many
+  grid columns as padding before or after a grid element. These mixins also
+  take an optional second argument, the size in columns of the containing
+  element when nested.
+
+Then we do it. In `screen.sass`, we'll start by declaring our intent to use
+Susy, and our container:
+
+    body
+      +susy
+    
+    #page
+      +container
+
+That wasn't hard. You might ask why I didn't nest `#page` inside of `body`, as
+is so tempting and easy with Sass. It's part personal preference and part
+Natalie Downe's voice in my head. Don't nest when you don't need to. It keeps
+your output code much cleaner.
+
+While we're at it, why don't we get the fonts and text colors going right from
+the start?
+
+    #page
+      +container
+      +sans-family
+      :color= !text
+
+Perfect. Take a look at [the results](02_container/). So far we have:
+
+* Reset everything. This happens by default in the background.
+
+* Added a few of our own replacement default styles, like links, paragraphs,
+  fonts and colors.
+
+* Created an elastic container for our grid at 70em that goes fluid for small
+  windows (try it!).
+
+
+Laying Out The Components
+--------------------------
+
+It's time to lay out our grid components. We'll just work our way through the
+DOM, starting with our brand header (#brand). We can refer back to our [target
+site with a grid overlay](01_target/) to see what we need. Looks like our
+branding gets an entire row to itself, with the content starting one row
+in. For the sake of argument, let's say we want the header content contained
+within the middle 8 columns - one in from each end. That means it will be an 8
+column element, with 1 column prefixed and one suffixed, for a total of 10
+columns - the full width.
+
+    #brand
+      +columns(8)
+      +prefix(1)
+      +suffix(1)
+
+Since it spans both the first and last columns in the context we'll need to
+add:
+
+    +alpha
+    +omega
+
+Or we would have to, but there are several shortcuts available to us. To
+declare something as both alpha and omega we can just declare it as full:
+
+    +full
+
+There is also a shorcut for prefix and suffix additions (+pad), so we can
+simplify down to:
+
+    #brand
+      +columns(8)
+      +pad(1,1)
+      +full
+
+Since we don't have an image in there yet, let's move the text over to line up
+with the future placement of our main content area. By turning the `h1` link
+into a grid element and prefixing a padding of one column, we can move the
+text without any effect on the image that will replace it (using the Compass
+utility `+replace-text`, though I'll leave the implementation that as an
+exercise for you to figure out). To line it all up with the content below it,
+we'll assign it 5 columns in a context of 8, with the extra 3 split between a
+prefix of 1 and a suffix of 2 - giving it a full span.
+
+    h1 a
+      +columns(5,8)
+      +pad(1,2,8)
+      +full(8)
+
+There is one 'gotcha' in the way Susy handles context. Direct children of your
+container (such as #brand in this case) *must not declare a context*.  If you
+do, your side-gutters will be ignored. At every nested layer below that, even
+if the context hasn't changed, you *must declare a context* or it will try to
+add side-gutters again. That means even if you have one nested element
+wrapping the rest at full width and not changing the context, that wrapper
+does not get a context but its descendants do, even where that context is the
+same as the full page.
+
+For example, these *will not work*:
+
+    #page
+      +container
+      .inner
+        +columns(10,10)
+
+    #page
+      +container
+      .inner
+        +columns(10)
+        #brand
+          +columns(10)
+
+This *will work*:
+
+    #page
+      +container
+      .inner
+        +columns(10)
+        #brand
+          +columns(10,10)
+
+Remember that if your side gutters or columns ever seem the wrong size.
+
+We're only worried about structure for now, so the header is done. Let's move
+on to the navigation (#nav). The nav spans 2 columns, including the first
+column in it's context.
+
+    #nav
+      +columns(2)
+      +alpha
+
+Done. The content (#content, which includes both #description and #credit)
+spans the remaining 8 columns, including the last one.
+
+    #content
+      +columns(8)
+      +omega
+
+Done. #description spans 5, including the first; #credit spans 3 including
+the last. Both are in a nested context of 8, which we now need to pass on:
+
+    #description
+      +columns(5,8)
+      +alpha(8)
+    
+    #credit
+      +columns(3,8)
+      +omega(8)
+
+Done and done. All we have left is the footer (#site-info) spanning the full
+width, but only using the right 8 columns:
+
+    #site-info
+      +columns(8)
+      +prefix(2)
+      +full
+
+Nested in the footer are `.license` and `.styles`, so let's put them in
+place. I'm going to say that each should match the width of the element
+visually above it on the page. So .license will span 5 columns including the
+first in its context of 8, and .styles will span 3 including the last.
+
+    p.license
+      +columns(5,8)
+      +alpha(8)
+    p.styles
+      +columns(3,8)
+      +omega(8)
+
+And we're done. That's it. That's what Susy does. The details of making it
+pretty are left as an exercise for the reader, and have more to do with
+Compass than Susy.
+
+* [The resulting files](03_structure/src/) with [the site structure all in
+  place](03_structure/) (this should match what you have if you followed
+  along).
+
+* [My final styles](../src/) for [the site](http://www.oddbird.net/susyss/).
+

data/sass/susy/_grid.sass

@@ -51,7 +51,7 @@
   :padding-right= columns(!n, !context) + gutter(!context) + "%"
 
 //**  
-  set on the first column of a row to take side-gutters into account
+  set on the first element of a row to take side-gutters into account
   - must override `!nested` for nested columns
 =alpha(!nested = false)
   @if !nested
@@ -60,10 +60,42 @@
     :margin-left= side_gutter() + "%"
 
 //**  
-  set on the last column of a row to take side-gutters into account
+  set on the last element of a row to take side-gutters into account
   - must override `!nested` for nested columns
-=omega(!nested = false)
-  @if !nested
-    :margin-right 0
+=omega(!n = false)
+  @if !n    
+    :margin-right= 0
   @else
     :margin-right= side_gutter() + "%"
+
+//**  
+  use to override +omega in ie.sass for IE6-7 to handle sub-pixel rounding issues
+  - must override `!nested` for nested columns
+  - must override `!right` for right-floated omega elements
+=ie-omega(!nested = false, !right = false)
+  @if !right
+    @if !nested    
+      :margin-right 0
+    @else
+      :margin-right= side_gutter() + "%"
+    :margin-left -1%
+  @else
+    @if !nested    
+      :margin-right= -1%
+    @else
+      :margin-right= side_gutter() - 1 + "%"
+
+
+//**
+  set on an element that will span it's entire context
+=full(!n = false)
+  +alpha(!n)
+  +omega(!n)
+
+//**
+  set as shortcut for prefix and suffix
+=pad(!p = 0, !s = 0, !c = false)
+  @if !p != 0
+    +prefix(!p,!c)
+  @if !s != 0
+    +suffix(!s,!c)

data/sass/susy/_utils.sass

@@ -5,7 +5,7 @@
   then adds a grid image of your choosing
 =show-grid(!src)
   :background
-    :image= "url("!src")"
+    :image= image_url(!src)
     :repeat repeat 
     :position top left
   *
@@ -50,12 +50,25 @@
 // EXPERIMENTAL
 
 //**
-  transparency for everyone!
-=opacity(!o = 1)
-  :filter= "alpha(opacity=" + (!o*100) + ")"
-  :-moz-opacity= !o
-  :-khtml-opacity= !o
-  :opacity= !o
+  [Opacity rules based on those in Compass Core Edge as of 7.18.09]
+  - These will be removed from Susy once they enter a major Compass release.
+  Provides cross-browser css opacity.
+  @param !opacity
+    A number between 0 and 1, where 0 is transparent and 1 is opaque.
+=opacity(!opacity)
+  :opacity= !opacity
+  :-moz-opacity= !opacity
+  :-khtml-opacity= !opacity
+  :-ms-filter= "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + round(!opacity*100) + ")"
+  :filter= "alpha(opacity=" + round(!opacity*100) + ")"
+ 
+// Make an element completely transparent.
+=transparent
+  +opacity(0)
+ 
+// Make an element completely opaque.
+=opaque
+  +opacity(1)
 
 //**
   rounded corners for Mozilla, Webkit and the future
@@ -67,37 +80,25 @@
   /* CSS3
   border-radius = !r
 
-=border-top-left-radius(!tl)
+=border-corner-radius(!vert, !horz, !r)
   /* Mozilla (FireFox)
-  -moz-border-radius-topleft= !tl
+  -moz-border-radius-#{!vert}#{!horz}= !r
   /* Webkit (Safari, Chrome)
-  -webkit-border-top-left-radius= !tl
+  -webkit-border-#{!vert}-#{!horz}-radius= !r
   /* CSS3
-  border-top-left-radius= !tl
+  border-#{!vert}-#{!horz}-radius= !r
 
-=border-top-right-radius(!tr)
-  /* Mozilla (FireFox)
-  -moz-border-radius-topright= !tr
-  /* Webkit (Safari, Chrome)
-  -webkit-border-top-right-radius= !tr
-  /* CSS3
-  border-top-right-radius= !tr
+=border-top-left-radius(!r)
+  +border-corner-radius("top", "left", !r)
 
-=border-bottom-right-radius(!br)
-  /* Mozilla (FireFox)
-  -moz-border-radius-bottomright= !br
-  /* Webkit (Safari, Chrome)
-  -webkit-border-bottom-right-radius= !br  
-  /* CSS3
-  border-bottom-right-radius= !br
+=border-top-right-radius(!r)
+  +border-corner-radius("top", "right", !r)
 
-=border-bottom-left-radius(!bl)
-  /* Mozilla (FireFox)
-  -moz-border-radius-bottomleft= !bl
-  /* Webkit (Safari, Chrome)
-  -webkit-border-bottom-left-radius= !bl
-  /* CSS3
-  border-bottom-left-radius= !bl
+=border-bottom-right-radius(!r)
+  +border-corner-radius("bottom", "right", !r)
+
+=border-bottom-left-radius(!r)
+  +border-corner-radius("bottom", "left", !r)
 
 //**
   change the box model for Mozilla, Webkit, IE8 and the future

data/templates/project/_base.sass

@@ -4,11 +4,6 @@
 //  oddbird. 
 //**
 
-
-/* RESET STYLES
-@import compass/reset.sass
-
-
 //** 
   GRID
   un-comment and override these values as needed for your grid layout 
@@ -81,7 +76,6 @@ p
     :list-style disc
     :margin 0 1.5em 1.5em 1.5em
 
-
 ol
   +list-default("ol")
 

data/templates/project/ie.sass

@@ -5,4 +5,6 @@
     <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
   <![endif]-->
 
+/* @group defaults */
 @import base.sass
+/* @end */

data/templates/project/print.sass

@@ -2,5 +2,11 @@
   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" />
-  
-@import base.sass
+
+/* @group reset */
+@import compass/reset.sass
+/* @end */
+
+/* @group defaults */
+@import base.sass
+/* @end */

data/templates/project/screen.sass

@@ -3,23 +3,51 @@
   Import this file using the following HTML or equivalent:
   <link href="/stylesheets/screen.css" media="screen" rel="stylesheet" type="text/css" />
 
+/* @group reset */
+@import compass/reset.sass
+/* @end */
+
+/* @group defaults */
 @import base.sass
+/* @end */
+
+
+/* @group STRUCTURE */
+
+
 
-/* STRUCTURE
+/* @end */
 
   
-/* COMPONENTS BY TYPE
+/* @group COMPONENTS by type */
+
+
+
+/* @end */
+
 
+/* @group OVERRIDES by content */
 
-/* COMPONENTS BY CONTENT
+
+
+/* @end */
 
         
-/* COMPONENTS BY PAGE
+/* @group OVERRIDES by page */
+
+
 
+/* @end */
 
-/* DEBUG
-  uncomment, adjust and use for debugging
+
+/* @group DEBUG */
+
+/*   uncomment, adjust and use for debugging
   
-/** 
+/*
   #page
-    +show-grid("../images/grid.gif")
+    +show-grid("../images/grid.png")
+    div
+      :background rgba(0,0,0,.125)
+
+/* @end */

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification 
 name: ericam-compass-susy-plugin
 version: !ruby/object:Gem::Version 
-  version: 0.3.1
+  version: 0.4.0
 platform: ruby
 authors: 
 - Eric Meyer
@@ -61,6 +61,9 @@ files:
 - templates/project/manifest.rb
 - VERSION
 - LICENSE.txt
+- docs/tutorial/index.mkdn
+- docs/tutorial/figures/susy_element.png
+- docs/tutorial/figures/susy_grid.png
 - compass-susy-plugin.gemspec
 has_rdoc: false
 homepage: http://github.com/ericam/compass-susy-plugin