docs up to date with changes

README.mkdn

@@ -68,9 +68,8 @@ Grid Basics
 * Set defaults for all the important HTML tags in `_defaults.sass`. It's
   better than using the browser defaults. And better than using ours.
 
-* 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.
+* Create your grid in `screen.sass`: apply the `+susy` mixin at the top level
+  and the `+container` mixin to the element that contains the page grid.
 
 * Use the `+columns` mixin to declare the width in columns of an element,
   or `+full` for any element spanning the full width of its context.
@@ -89,8 +88,7 @@ Grid Basics
 
 That's it for the basics! Here's a sample Susy grid layout:
 
-    body
-      +susy
+    +susy
      
     #page
       +container
@@ -128,34 +126,32 @@ Extra utilities are included in Susy's `utils.sass` file, with additional list
 options, experimental (CSS3/proprietary) CSS, and more.
 
 * `+show-grid(!src)` - Repeat the specified grid image on an element. Good for
-  testing your baseline grid.
+  testing your baseline and grid.
 
 * `+inline-block-list([!horizontalpadding])` - Make list items inline-block
   when floating just won't do the trick (if you need them centered or right).
 
 * `+hide` - Hide content from visual browsers while keeping accessability
   intact.
 
-* `+skip-link([!top = 0, !right, !bottom, !left])` - Hide a link, and then show
+* `+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 `_CSS3.sass`:
+And then the fun stuff in `_vertical_rhythm.sass`, written by Chris Eppstein
+and probably moving to the compass core before too long:
 
-* `+opacity(!opacity)` - add cross-browser opacity settings (takes a range of
-  0 to 1). `+transprent` and `+opaque` are available as shortcuts.
+* `+adjust-font-size-to(!font_size, [!lines])` - adjust the font size and number
+  of baseline (line) units to occupy.
 
-* `+border-radius(!radius)` - Rounded corners in supporting browsers.
-  `+border-bottom-left-radius` etc. all work.
+* `+leader([!lines, !font_size])` and `+trailer([!lines, !font_size])` - add
+  leading or trailing whitespace to an element. These are added as top and
+  bottom margins that keep your vertical rhythm intact.
 
-* `+box-sizing(!model)` - Set the box sizing model in supporting browsers.
+* `+top-border([!width, !lines, !font_size])` and `+bottom-border([!width,
+  !lines, !font_size])` will combine border and padding to create borders that
+  also keep the vertical rhythm going.
 
-* `+box-shadow(!verticaloffset, !horizontaloffset, !blur, !color)` -
-  Box-shadow in supporting browsers.
-
-* `+column-count(!number)`, `+column-gap(!length)`, `+column-width(!length)`,
-  and `+column-rule(!width, !style, !color)` - CSS columns in supporting
-  browsers.
 
 Advanced Options
 ================
@@ -224,12 +220,13 @@ advanced options hidden inside. Here's a few:
 * `side_gutter()` is also available and takes no arguments since it is always
   used at the top nesting level.
 
-* `px2em()` takes one numeric argument representing the number of pixels you
-  want to mimic. The return is an em value (with no units declared) that
-  approximates that number of pixels. Useful for keeping your entire design
-  fluid.
-
+* `!px2em` is a variable that represents the height of one pixel as a fraction
+  of your base em-height. Multiply it with your target pixel value to
+  represent that value in ems.
+
     Example:
 
         #nav
-          border-bottom= px2em(2) + "em"
+          border-bottom:
+            style: solid
+            width= !px2em*2

docs/tutorial/code/01_target/src/_defaults.sass

@@ -13,17 +13,18 @@
 
 /* @group links */
 
-\:focus
-  outline: 1px dotted
+a, input, textarea, button
+  :focus
+    outline: 1px dotted
 
 a
   &:link, &:visited
-    color= !links
+    color= !alt
     text-decoration: none
   &:focus, &:hover, &:active
     color= !light
     border-bottom:
-      width= px2em(2) + "em"
+      width= !px2em*2
       style: dashed
 
 /* @end */
@@ -37,7 +38,7 @@ h1
   font-size: 3em
   line-height: 1
   font-weight: bold
-  color= !links
+  color= !alt
 
 h2
   font-weight: bold
@@ -56,12 +57,12 @@ pre
   padding: 1.5em
 
 =list-default(!ol = false)
+  +leader
+  +trailer
   @if !ol
     list-style: decimal
-    margin: 0 1.5em 1.5em 1.5em
   @else
     list-style: disc
-    margin: 0 1.5em 1.5em 1.5em
 
 ol
   +list-default("ol")

docs/tutorial/code/01_target/src/screen.sass

@@ -9,13 +9,12 @@
 
 /* @group STRUCTURE */
 
-body
-  +susy
++susy
 
 #page
   +container
   +sans-family
-  color= !text
+  color= !base
 
 #brand
   +full

docs/tutorial/code/02_container/src/_defaults.sass

@@ -12,18 +12,19 @@
 
 body
   +sans-family
-  color= !text
+  color= !base
 
 /* @group links */
 
-\:focus
-  outline= 1px "dotted" !links
+a, input, textarea, button
+  &:focus
+    outline= 1px "dotted" !alt
 
 a
   &:link, &:visited
-    color= !links
+    color= !alt
   &:focus, &:hover, &:active
-    color= !links - #222
+    color= !alt - #222
     text-decoration: none
 
 /* @end */
@@ -37,66 +38,43 @@ h1, h2, h3, h4, h5, h6
 /* @end */
 
 
-/* @group forms */
-
-form *:focus
-  outline: none
-
-fieldset
-  margin= !base_line_height 0
-
-legend
-  font-weight: bold
-  font-variant: small-caps
-
-label
-  display: block
-  margin-top= !base_line_height
-
-legend + label
-  margin-top: 0
-
-textarea, input[type="text"]
-  +box-sizing("border-box")
-  width: 100%
-
-/* @end */
-
-
 /* @group tables */
 
 /* tables still need 'cellspacing="0"' in the markup */
 
 table
-  :width 100%
-  :border= 1/16 + "em solid" !text + #333
-    :left none
-    :right none
-  :padding= 7/16 + "em 0"
-  :margin= 8/16 + "em 0"
+  width: 100%
+  border:
+    width: 0
+    style: solid 
+    color= !base
+  +top-border(1px, 0.5)
+  +bottom-border(1px, 0.5)
 
 th
-  :font-weight bold
+  font-weight: bold
 
 /* @end */
 
 
 /* @group block tags */
 
 p
-  :margin= !base_line_height 0
+  +leader
+  +trailer
 
 =list-default(!ol = false)
-  :margin= !base_line_height
+  +leader
+  +trailer
   @if !ol
-    :list-style decimal
+    list-style: decimal
   @else
-    :list-style disc
+    list-style: disc
 
 =no-style-list
   +no-bullets
-  :margin 0
-  :padding 0
+  margin: 0
+  padding: 0
 
 ol
   +list-default("ol")
@@ -105,7 +83,7 @@ ul
   +list-default
 
 blockquote
-  :margin= !base_line_height
+  margin= !base_rhythm_unit
   +serif-family
 
 /* @end */
@@ -114,32 +92,58 @@ blockquote
 /* @group inline tags */
 
 cite
-  :font-style italic
+  font-style: italic
 
 em
-  :font-style italic
+  font-style: italic
 
 strong
-  :font-weight bold
+  font-weight: bold
 
 ins
-  :text-decoration underline
+  text-decoration: underline
 
 del
-  :text-decoration line-through
+  text-decoration: line-through
 
 q
-  :font-style italic
+  font-style: italic
   em
-    :font-style normal
+    font-style: normal
 
 /* @end */
 
 
 /* @group replaced tags */
 
 img
-  :vertical-align bottom
+  vertical-align: bottom
+
+/* @end */
+
+
+/* @group forms */
+
+form *:focus
+  outline: none
+
+fieldset
+  +trailer
+
+legend
+  font-weight: bold
+  font-variant: small-caps
+
+label
+  display: block
+  +leader
+
+legend + label
+  margin-top: 0
+
+textarea, input:not([type="radio"])
+  +box-sizing("border-box")
+  width: 100%
 
 /* @end */
 

docs/tutorial/code/02_container/src/screen.sass

@@ -9,8 +9,7 @@
 
 /* @group STRUCTURE */
 
-body
-  +susy
++susy
 
 #page
   +container