From cd6b9d659a64aeda6d33727f9b90bd13c899801b Mon Sep 17 00:00:00 2001 From: Chris Eppstein Date: Sun, 2 May 2010 13:25:43 -0700 Subject: [PATCH] [Docs] Start documenting the compass helper functions. First up: elements-of-type() --- .../compass/helpers/elements-of-type.haml | 7 ++++ .../helpers/elements-of-type/markup.haml | 10 +++++ .../helpers/elements-of-type/stylesheet.sass | 7 ++++ .../content/reference/compass/helpers.haml | 16 ++++++++ .../reference/compass/helpers/display.haml | 37 +++++++++++++++++++ doc-src/content/stylesheets/_reference.scss | 17 +++++++++ doc-src/content/stylesheets/screen.sass | 1 + .../sass_extensions/functions/display.rb | 3 +- 8 files changed, 97 insertions(+), 1 deletion(-) create mode 100644 doc-src/content/examples/compass/helpers/elements-of-type.haml create mode 100644 doc-src/content/examples/compass/helpers/elements-of-type/markup.haml create mode 100644 doc-src/content/examples/compass/helpers/elements-of-type/stylesheet.sass create mode 100644 doc-src/content/reference/compass/helpers.haml create mode 100644 doc-src/content/reference/compass/helpers/display.haml diff --git a/doc-src/content/examples/compass/helpers/elements-of-type.haml b/doc-src/content/examples/compass/helpers/elements-of-type.haml new file mode 100644 index 00000000..fc5d0096 --- /dev/null +++ b/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" diff --git a/doc-src/content/examples/compass/helpers/elements-of-type/markup.haml b/doc-src/content/examples/compass/helpers/elements-of-type/markup.haml new file mode 100644 index 00000000..e7ff540a --- /dev/null +++ b/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 diff --git a/doc-src/content/examples/compass/helpers/elements-of-type/stylesheet.sass b/doc-src/content/examples/compass/helpers/elements-of-type/stylesheet.sass new file mode 100644 index 00000000..507642a6 --- /dev/null +++ b/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 + \ No newline at end of file diff --git a/doc-src/content/reference/compass/helpers.haml b/doc-src/content/reference/compass/helpers.haml new file mode 100644 index 00000000..87bef527 --- /dev/null +++ b/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). diff --git a/doc-src/content/reference/compass/helpers/display.haml b/doc-src/content/reference/compass/helpers/display.haml new file mode 100644 index 00000000..0ca3c202 --- /dev/null +++ b/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($display) + .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 + diff --git a/doc-src/content/stylesheets/_reference.scss b/doc-src/content/stylesheets/_reference.scss index db6cad2d..69d8110f 100644 --- a/doc-src/content/stylesheets/_reference.scss +++ b/doc-src/content/stylesheets/_reference.scss @@ -85,4 +85,21 @@ dl.examples { content: " - "; } } +} + +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; } + } + } } \ No newline at end of file diff --git a/doc-src/content/stylesheets/screen.sass b/doc-src/content/stylesheets/screen.sass index 47ddec44..b557ea8f 100644 --- a/doc-src/content/stylesheets/screen.sass +++ b/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) diff --git a/lib/compass/sass_extensions/functions/display.rb b/lib/compass/sass_extensions/functions/display.rb index bea06200..0237f768 100644 --- a/lib/compass/sass_extensions/functions/display.rb +++ b/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