[Docs] Start documenting the compass helper functions. First up: elements-of-type()

doc-src/content/examples/compass/helpers/elements-of-type.haml

@@ -0,0 +1,7 @@
+---
+title: "Compass Helper: elements-of-type"
+description: How to use the elements-of-type() helper function.
+framework: compass
+example: true
+---
+= render "partials/example"

doc-src/content/examples/compass/helpers/elements-of-type/markup.haml

@@ -0,0 +1,10 @@
+.example
+  %div
+    This is a block element.
+    It has an
+    %span inline span
+    and an
+    %em inline em
+    and a
+    %blockquote
+      Nested blockquote element

doc-src/content/examples/compass/helpers/elements-of-type/stylesheet.sass

@@ -0,0 +1,7 @@
+.example
+  #{elements-of-type(block)}
+    border: 1px solid #777
+    margin: 1em 3em
+  #{elements-of-type(inline)}
+    color: #c00
+  

doc-src/content/reference/compass/helpers.haml

@@ -0,0 +1,16 @@
+--- 
+title: Compass Helpers
+crumb: Helpers
+framework: compass
+layout: core
+classnames:
+  - reference
+  - core
+  - helpers
+meta_description: Provides cross browser CSS3 mixins that take advantage of available pre-spec vendor prefixes. 
+layout: core
+---
+
+:markdown
+  The compass helpers are functions that augment the [functions provided
+  by Sass](http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html).

doc-src/content/reference/compass/helpers/display.haml

@@ -0,0 +1,37 @@
+--- 
+title: Compass Display Helpers
+crumb: Display Helpers
+framework: compass
+meta_description: Helper functions for working with the display property.
+layout: core
+classnames:
+  - reference
+  - core
+  - helpers
+---
+%h1 Compass Display Helpers
+
+%p Helper functions for working with the display property.
+
+#elements-of-type.helper
+  %h3
+    %a(href="#elements-of-type") elements-of-type(<span class="arg">$display</span>)
+  .details
+    %p
+      The following display values exist and will return
+      the elements listed to the right.
+    %dl
+      %dg.head
+        %dt Default Display
+        %dd Elements Returned
+      - display_map = Compass::SassExtensions::Functions::Display::DEFAULT_DISPLAY
+      - display_map.keys.each do |key|
+        %dg
+          %dt= key
+          %dd= display_map[key].sort.join(", ")
+  .examples
+    %h4 Examples
+    %ul
+      %li
+        %a(href="/docs/examples/compass/helpers/elements-of-type/") Example of elements-of-type
+

doc-src/content/stylesheets/_reference.scss

@@ -86,3 +86,20 @@ dl.examples {
     }
   }
 }
+
+dl.table {
+  display: table;
+  dg { display: table-row; }
+  dt, dd { display: table-cell; }
+  dt { white-space: nowrap; padding-right: 1em;}
+  dt, dg.head > dd {font-weight: bold; text-align: center;}
+}
+
+body.helpers {
+  .helper {
+    dl { @extend dl.table; }
+    dg:not(.head) {
+      dt, dd { @extend code; }
+    }
+  }
+}

doc-src/content/stylesheets/screen.sass

@@ -224,6 +224,7 @@ aside[role="sidebar"] + article
 +active-module(".core.misc", "/docs/reference/compass/misc/")
 +active-module(".core.reset", "/docs/reference/compass/reset/")
 +active-module(".core.utilities", "/docs/reference/compass/utilities/")
++active-module(".core.helpers", "/docs/reference/compass/helpers/")
 
 #local-nav
   +leader(1,14px)

lib/compass/sass_extensions/functions/display.rb

@@ -15,7 +15,8 @@ module Compass::SassExtensions::Functions::Display
     :"table-cell" => %w{th td}
   }
 
-  # returns a comma delimited string for all the elements according to their default css3 display value.
+  # returns a comma delimited string for all the
+  # elements according to their default css3 display value.
   def elements_of_type(display)
     Sass::Script::String.new(DEFAULT_DISPLAY.fetch(display.value.to_sym).join(", "))
   end