More docs on the compass utilities.

doc-src/content/reference/compass/utilities/general/min.haml

@@ -13,4 +13,4 @@ classnames:
 ---
 - render 'reference' do
   %p
-    Lorem ipsum dolor sit amet.
+    Cross browser implementation of min-height and min-width.

doc-src/content/reference/compass/utilities/general/tag_cloud.haml

@@ -1,5 +1,5 @@
 --- 
-title: Compass Tag_cloud
+title: Compass Tag Cloud
 crumb: Tag Cloud
 framework: compass
 stylesheet: compass/utilities/general/_tag-cloud.scss
@@ -11,6 +11,4 @@ classnames:
   - core
   - utilities
 ---
-- render 'reference' do
+= render 'reference'
-  %p
-    Lorem ipsum dolor sit amet.

doc-src/content/reference/compass/utilities/links.haml

@@ -5,6 +5,7 @@ framework: compass
 stylesheet: compass/utilities/_links.scss
 layout: core
 nav_stylesheet: compass/_utilities.scss
+meta_description: Tools for styling anchor links.
 classnames:
   - reference
   - core
@@ -12,4 +13,4 @@ classnames:
 ---
 - render 'reference' do
   %p
-    Lorem ipsum dolor sit amet.
+    Tools for styling anchor links.

doc-src/content/reference/compass/utilities/links/hover_link.haml

@@ -4,12 +4,11 @@ crumb: Hover Link
 framework: compass
 stylesheet: compass/utilities/links/_hover-link.scss
 layout: core
+meta_description: Underline a link when you hover over it.
 nav_stylesheet: compass/_utilities.scss
 classnames:
   - reference
   - core
   - utilities
 ---
-- render 'reference' do
+= render 'reference'
-  %p
-    Lorem ipsum dolor sit amet.

doc-src/content/reference/compass/utilities/links/link_colors.haml

@@ -4,12 +4,11 @@ crumb: Link Colors
 framework: compass
 stylesheet: compass/utilities/links/_link-colors.scss
 layout: core
+meta_description: Easy assignment of colors to link states.
 nav_stylesheet: compass/_utilities.scss
 classnames:
   - reference
   - core
   - utilities
 ---
-- render 'reference' do
+= render 'reference'
-  %p
-    Lorem ipsum dolor sit amet.

doc-src/content/reference/compass/utilities/links/unstyled_link.haml

@@ -4,6 +4,7 @@ crumb: Unstyled Link
 framework: compass
 stylesheet: compass/utilities/links/_unstyled-link.scss
 layout: core
+meta_description: Make a link appear like regular text.
 nav_stylesheet: compass/_utilities.scss
 classnames:
   - reference
@@ -12,4 +13,4 @@ classnames:
 ---
 - render 'reference' do
   %p
-    Lorem ipsum dolor sit amet.
+    Makes a link appear like regular text.

doc-src/content/reference/compass/utilities/print.haml

@@ -4,6 +4,7 @@ crumb: Print
 framework: compass
 stylesheet: compass/utilities/_print.scss
 layout: core
+meta_description: Control what elements gets printed.
 nav_stylesheet: compass/_utilities.scss
 classnames:
   - reference
@@ -11,5 +12,13 @@ classnames:
   - utilities
 ---
 - render 'reference' do
-  %p
+  :markdown
-    Lorem ipsum dolor sit amet.
+    Control what gets printed. Apply the `no-print` (or `noprint`) class to any
+    elements that should be hidden when printing. Apply the `print-only` class
+    to those elements which should only appear in your printed pages.
+    
+    The tricky part about `print-only` is getting the display right when you turn
+    an element back on in the case where both styles are applied. This mixin
+    uses the `elements-of-type` function to make sure that elements have the correct
+    display value according to the element type.
+

doc-src/content/reference/compass/utilities/sprites.haml

@@ -10,6 +10,5 @@ classnames:
   - core
   - utilities
 ---
-- render 'reference' do
+= render 'reference'
-  %p
+    
-    Lorem ipsum dolor sit amet.

doc-src/content/reference/compass/utilities/sprites/sprite_img.haml

@@ -11,5 +11,20 @@ classnames:
   - utilities
 ---
 - render 'reference' do
-  %p
+  :markdown
-    Lorem ipsum dolor sit amet.
+    **Example 1** Simple mixins:
+    
+        a.twitter
+          +sprite-img("icons-32.png", 1)
+        a.facebook
+          +sprite-img("icons-32png", 2)
+    
+    **Example 2** Sharing a common base:
+    
+        a
+          +sprite-background("icons-32.png")
+          a.twitter
+            +sprite-column(1)
+          a.facebook
+            +sprite-row(2)
+  

frameworks/compass/stylesheets/compass/utilities/_print.scss

@@ -1,18 +1,17 @@
 // Classes that are useful for controlling what gets printed.
-// You must mix +print-utilities into your print stylesheet
+// You must mix `+print-utilities` into your print stylesheet
-// and +print-utilities("screen") into your screen stylesheet.
+// and `+print-utilities(screen)` into your screen stylesheet.
 // Note: these aren't semantic.
 @mixin print-utilities($media: print) {
-  @if $media == "print" {
+  @if $media == print {
-    .noprint,
+    .noprint, .no-print { display: none; }
-    .no-print {
+    #{elements-of-type(block)} {
-      display: none; }
+      &.print-only { display: block; }
-    #{elements-of-type("block")} {
+    }
-      &.print-only {
+    #{elements-of-type(inline)} {
-        display: block; } }
+      &.print-only {  display: inline; }
-    #{elements-of-type("inline")} {
+    }
-      &.print-only {
+  } @else {
-        display: inline; } } }
+    .print-only { display: none; }
-  @else {
+  }
-    .print-only {
+}
-      display: none; } } }

frameworks/compass/stylesheets/compass/utilities/links/_link-colors.scss

@@ -1,10 +1,16 @@
-// Set all the colors for a link with one mixin call
+// Set all the colors for a link with one mixin call.
 // Order of arguments is:
-// normal, hover, active, visited, focus
+//
-// states not specified will inherit.
+// 1. normal
-// Mixin like so:
+// 2. hover
-// a
+// 3. active
-//   +link-colors(#00c, #0cc, #c0c, #ccc, #cc0)
+// 4. visited
+// 5. focus
+//
+// Those states not specified will inherit.
+// Mixin to an anchor link like so:
+//     a
+//       +link-colors(#00c, #0cc, #c0c, #ccc, #cc0)
 
 @mixin link-colors($normal, $hover: false, $active: false, $visited: false, $focus: false) {
   color: $normal;

frameworks/compass/stylesheets/compass/utilities/sprites/_sprite-img.scss

@@ -1,18 +1,20 @@
-//**
+// @doc off
 // Example 1:
-// a.twitter
+//
-//   +sprite-img("icons-32.png", 1)
+//     a.twitter
-// a.facebook
+//       +sprite-img("icons-32.png", 1)
-//   +sprite-img("icons-32png", 2)
+//     a.facebook
-// ...
+//       +sprite-img("icons-32png", 2)
+//
 // Example 2:
-// a
+//
-//   +sprite-background("icons-32.png")
+//     a
-//   a.twitter
+//       +sprite-background("icons-32.png")
-//     +sprite-column(1)
+//       a.twitter
-//   a.facebook
+//         +sprite-column(1)
-//     +sprite-row(2)
+//       a.facebook
-//   ...
+//         +sprite-row(2)
+// @doc on
 
 $sprite-default-size: 32px !default;