Use the default compass images directory in the spriting tutorial

update PIE.htc to Version 1.0beta4

.gitignore

@@ -25,3 +25,7 @@ doc-src/.bundle
 attic
 devbin
 .rvmrc
+*.rbc
+vendor/ruby
+vendor
+Gemfile.lock

.rspec

@@ -0,0 +1,2 @@
+--colour
+--format s

.travis.yml

@@ -0,0 +1,7 @@
+rvm:
+  - 1.8.7
+  - 1.9.2
+  - jruby
+  - rbx
+  - ree
+script: "bundle exec rake test features"

Gemfile

@@ -1,12 +1,29 @@
 source :rubygems
 
-gem "compass", :path => "."
-gem "cucumber"
-gem "rspec"
+gemspec
+
+gem "cucumber", "~> 0.9.2"
+gem "rspec", "~>2.0.0"
 gem "rails", "~>3.0.0.rc"
-gem "compass-validator", "3.0.0"
-gem "css_parser"
-gem "sass", "~> 3.1"
-gem "rcov"
+gem "compass-validator", "3.0.1"
+gem "css_parser", "~> 1.0.1"
+gem "sass", "~>3.1"
+gem "haml", "~> 3.1"
+gem "rcov", :platform => :mri
 gem "rubyzip"
 gem "livereload"
+gem "ruby-prof", :platform => :mri
+
+gem 'autotest'
+gem 'autotest-fsevent' if RUBY_PLATFORM =~ /darwin/
+gem 'fakefs', :git => 'git://github.com/johnbintz/fakefs.git'
+gem 'mocha'
+gem 'timecop'
+gem 'diff-lcs', '~> 1.1.2'
+
+gem 'rake', '0.8.7'
+
+group :mac do
+  gem "rb-fsevent"
+end
+

Rakefile

@@ -13,7 +13,7 @@ require 'cucumber'
 require 'cucumber/rake/task'
 
 Cucumber::Rake::Task.new(:features) do |t|
-  t.cucumber_opts = "features --format pretty"
+  t.cucumber_opts = "features --format progress"
 end
 
 Rake::TestTask.new :test do |t|
@@ -47,7 +47,7 @@ task :examples do
     puts "=" * "Compiling #{example}".length
     Dir.chdir example do
       load "bootstrap.rb" if File.exists?("bootstrap.rb")
-      Compass::Exec::SwitchUI.new(["--force"]).run!
+      Compass::Exec::SubCommandUI.new(%w(compile --force)).run!
     end
     # compile any haml templates to html
     FileList["#{example}/**/*.haml"].each do |haml_file|

VERSION.yml

@@ -1,5 +1,5 @@
 --- 
 :major: 0
 :minor: 11
-:state: alpha
-:build: 1
+:patch: 5
+:name: Antares

autotest/discover.rb

@@ -0,0 +1,5 @@
+Autotest.add_discovery { 'rspec2' }
+
+
+
+

bin/compass

@@ -21,6 +21,20 @@ fallback_load_path(File.join(File.dirname(__FILE__), '..', 'lib')) do
   require 'compass/exec'
 end
 
+runner = Proc.new do
+  Compass::Exec::SubCommandUI.new(ARGV).run!
+end
 
-command_line_class = Compass::Exec::Helpers.select_appropriate_command_line_ui(ARGV)
-exit command_line_class.new(ARGV).run!
+if ARGV.delete("--profile")
+  require 'ruby-prof'
+  RubyProf.start
+  exit_code = runner.call
+  result = RubyProf.stop
+
+  # Print a flat profile to text
+  printer = RubyProf::FlatPrinter.new(result)
+  printer.print(STDERR, 0)
+  exit exit_code
+else
+  exit runner.call
+end

compass.gemspec

@@ -4,18 +4,21 @@ require File.join(path, 'compass/version')
 Gem::Specification.new do |gemspec|
   gemspec.name = "compass"
   gemspec.version = Compass::VERSION # Update the VERSION.yml file to set this.
-  gemspec.date = "#{Time.now.year}-#{Time.now.month}-#{Time.now.day}" # Automatically update for each build
   gemspec.description = "Compass is a Sass-based Stylesheet Framework that streamlines the creation and maintainance of CSS."
   gemspec.homepage = "http://compass-style.org"
-  gemspec.authors = ["Chris Eppstein", "Eric A. Meyer", "Brandon Mathis"]
+  gemspec.authors = ["Chris Eppstein", "Eric A. Meyer", "Brandon Mathis", "Nico Hagenburger", "Scott Davis"]
   gemspec.email = "chris@eppsteins.net"
-  gemspec.default_executable = "compass"
+  #gemspec.default_executable = "compass" #deprecated
   gemspec.executables = %w(compass)
-  gemspec.has_rdoc = false
+  #gemspec.has_rdoc = false #deprecated
   gemspec.require_paths = %w(lib)
   gemspec.rubygems_version = "1.3.5"
   gemspec.summary = %q{A Real Stylesheet Framework}
-  gemspec.add_dependency('sass', '~> 3.1')
+
+  gemspec.add_dependency 'sass', '~> 3.1'
+  gemspec.add_dependency 'chunky_png', '~> 1.2'
+  gemspec.add_dependency 'fssm', '>= 0.2.7'
+
   gemspec.files = %w(README.markdown LICENSE.markdown VERSION.yml Rakefile)
   gemspec.files += Dir.glob("bin/*")
   gemspec.files += Dir.glob("examples/**/*.*")

doc-src/.gitignore

@@ -1,3 +1,4 @@
 bin
 vendor
 output
+vendor/ruby

doc-src/Gemfile

@@ -5,14 +5,19 @@ gem 'rdiscount'
 gem 'thor'
 gem 'rack'
 gem 'mime-types'
-gem 'fssm'
 gem 'serve', "1.0.0"
 gem 'nokogiri'
 gem 'coderay'
-gem 'haml', ">=3.0.23", :require => 'sass'
+gem 'sass', ">= 3.1"
+gem 'haml', ">= 3.1"
 gem 'rake'
 gem 'compass', :path => ".."
 gem 'compass-susy-plugin', ">=0.7.0.pre8"
 gem 'css-slideshow', "0.2.0"
 gem 'json'
+gem 'css_parser', "1.0.1"
+gem 'ruby-prof'
+gem 'rb-fsevent'
+gem 'builder'
+
 

doc-src/Gemfile.lock

@@ -1,60 +1,71 @@
 GIT
   remote: git://github.com/chriseppstein/nanoc.git
-  revision: 4ecb400489c83fd2068659de0c651733b8dad28f
+  revision: 4eee0e60c5121b90498caa88605d416521553378
   specs:
     nanoc3 (3.2.0a3)
       cri (>= 1.0.0)
 
 PATH
-  remote: /Users/bmathis/Documents/Workspace/compass-projects/compass
+  remote: ..
   specs:
-    compass (0.11.alpha.1.488fddf)
+    compass (0.11.1.93b89a2)
+      chunky_png (~> 1.1)
+      fssm (>= 0.2.7)
       sass (~> 3.1)
 
 GEM
   remote: http://rubygems.org/
   specs:
-    activesupport (3.0.1)
-    coderay (0.9.5)
-    compass-susy-plugin (0.8.1)
-      compass (>= 0.10.0)
+    activesupport (3.0.7)
+    builder (2.1.2)
+    chunky_png (1.2.0)
+    coderay (0.9.7)
+    compass-susy-plugin (0.9.beta.3)
+      compass (>= 0.11.beta.3)
     cri (1.0.1)
     css-slideshow (0.2.0)
       compass (>= 0.10.0.rc3)
-    fssm (0.2.0)
-    haml (3.0.23)
+    css_parser (1.0.1)
+    fssm (0.2.7)
+    haml (3.1.0)
     i18n (0.4.2)
-    json (1.4.6)
+    json (1.5.1)
     mime-types (1.16)
-    nokogiri (1.4.3.1)
-    rack (1.2.1)
+    nokogiri (1.4.4)
+    rack (1.2.2)
     rake (0.8.7)
-    rdiscount (1.6.5)
-    sass (3.1.0.alpha.28)
+    rb-fsevent (0.4.0)
+    rdiscount (1.6.8)
+    ruby-prof (0.9.2)
+    sass (3.1.0)
     serve (1.0.0)
       activesupport (~> 3.0.1)
       i18n (~> 0.4.1)
       rack (~> 1.2.1)
       tzinfo (~> 0.3.23)
-    thor (0.14.4)
-    tzinfo (0.3.23)
+    thor (0.14.6)
+    tzinfo (0.3.26)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
+  builder
   coderay
   compass!
   compass-susy-plugin (>= 0.7.0.pre8)
   css-slideshow (= 0.2.0)
-  fssm
-  haml (>= 3.0.23)
+  css_parser (= 1.0.1)
+  haml (>= 3.1)
   json
   mime-types
   nanoc3!
   nokogiri
   rack
   rake
+  rb-fsevent
   rdiscount
+  ruby-prof
+  sass (>= 3.1)
   serve (= 1.0.0)
   thor

doc-src/README.markdown

@@ -49,7 +49,7 @@ If you are adding an asset (E.g. image, css, javascript) place the file(s) in th
 
 Running the following command will generate a new example:
 
-    bundle exec thor generate:example blueprint/grid/simple/
+    ./bin/thor generate:example blueprint/grid/simple/
 
 An example consists of three files:
 
@@ -74,7 +74,7 @@ After adding the example and adjusting the metadata, go to the reference page an
 
 Generate a reference file for a stylesheet:
 
-    bundle exec thor generate:reference ../frameworks/compass/stylesheets/_compass.sass
+    ./bin/thor generate:reference ../frameworks/compass/stylesheets/_compass.sass
 
 The item metadata (at the top of the file) provides some details about what stylesheet is being documented. For instance, here is the metadata for the blueprint color module item:
 
@@ -143,15 +143,7 @@ Go to your fork of Compass on github. Your compass fork will be available on htt
 
     $ git clone git@github.com:**yourusername**/compass.git
 
-### 3. Switch to the docs branch
-
-To work on the docs, you need to do a checkout of the docs branch
-
-    $ git checkout docs
-
-(A list branches can be accessed through `git branch` with no arguments)
-
-### 4. Don't forget: bundler!
+### 3. Don't forget: bundler!
 
 If you haven't yet done so, install bundler:
 
@@ -160,30 +152,28 @@ If you haven't yet done so, install bundler:
 Bundle the gems for this application:
 
     $ cd doc-src
-    $ bundle install
+    $ bundle install --binstubs
 
-### 6. Compile the docs
+### 4. Compile the docs
 
-To compile (and auto recompile) and preview the site in your browser: (make sure you run nanoc3/aco from the doc-src directory)
+To compile (and auto recompile) and preview the site in your browser: (make sure you run nanoc3 aco from the doc-src directory)
 
     $ cd doc-src
-    $ export RUBYLIB="../lib"
-    $ bundle exec nanoc3 aco
+    $ ./bin/nanoc3 aco
 
-Then open `http://localhost:3000/docs/` in your web browser.
+Then open `http://localhost:3000/index.html` in your web browser.
 
 aco stands for autocompiler; the site will recompile every time you request a new page.
 
-If you find `bundle exec nanoc3 aco` to be sluggish, try this alternative workflow:
+If you find `./bin/nanoc3 aco` to be sluggish, try this alternative workflow:
 
     $ cd doc-src
-    $ export RUBYLIB="../lib"
-    $ bundle exec serve 3000 .. &
-    $ bundle exec rake watch
+    $ ./bin/serve 3000 output &
+    $ ./bin/rake watch
 
 It is recommended that you read the 5 minute [tutorial](http://nanoc.stoneship.org/tutorial/) on Nanoc.
 
-### 7. Commit your changes to your Fork
+### 5. Commit your changes to your Fork
 
     git commit -a
     git push
@@ -202,4 +192,4 @@ Then get the new changes with fetch:
 
 And merge them with your local docs branch:
 
-    git merge chris/docs
+    git merge chris

doc-src/Rakefile

@@ -25,7 +25,7 @@ task :watch do
 
   rebuild_site = lambda do |base, relative|
     if relative && relative =~ /\.s[ac]ss/
-      puts ">>> Change Detected to #{relative} : updating stylsheets <<<"
+      puts ">>> Change Detected to #{relative} : updating stylesheets <<<"
       system "bundle exec compass compile"
     else
       if !relative

doc-src/Rules

@@ -18,7 +18,7 @@ end
 
 compile '/' do
   filter :haml, :ugly => true
-  layout item[:redirect] ? "redirect" : (item[:layout] ? item[:layout] : "main")
+  layout item[:layout] ? item[:layout] : "main"
 end
 
 compile '/search-data/' do
@@ -28,7 +28,7 @@ end
 compile '/examples/*/' do
   filter :haml, :ugly => true
   filter :highlight
-  layout item[:redirect] ? "redirect" : (item[:layout] ? item[:layout] : "example")
+  layout item[:layout] ? item[:layout] : "example"
 end
 
 sass_options = Compass.sass_engine_options
@@ -44,7 +44,21 @@ end
 compile '/reference/*/' do
   filter :haml, :ugly => true
   filter :highlight
-  layout item[:redirect] ? "redirect" : (item[:layout] ? item[:layout] : "main")
+  layout item[:layout] ? item[:layout] : "main"
+end
+
+compile '/posts/*/' do
+  filter :erb
+  filter :rdiscount if item[:extension] == "markdown"
+  layout 'post'
+end
+
+compile "/blog/atom/" do
+  filter :haml, :attr_wrapper => '"'
+end
+
+compile 'sitemap' do
+  filter :erb
 end
 
 compile '*' do
@@ -53,7 +67,15 @@ compile '*' do
   elsif item[:extension] == "haml"
     filter :haml, :ugly => true
   end
-  layout item[:redirect] ? "redirect" : (item[:layout] ? item[:layout] : "main")
+  layout item[:layout] ? item[:layout] : "main"
+end
+
+route 'sitemap' do
+  item.identifier.chop + '.xml'
+end
+
+route "/blog/atom/" do
+  "/blog/atom.xml"
 end
 
 route '/search-data/' do
@@ -64,6 +86,10 @@ end
   route("/stylesheets/#{'*/' * i}_*/") {nil}
 end
 
+route '/assets/htaccess/' do
+  "#{SITE_ROOT}/.htaccess"
+end
+
 route '/assets/css/*/' do
   "#{SITE_ROOT}/stylesheets"+item.identifier.chop[11..-1]+"."+item[:extension]
 end
@@ -85,6 +111,15 @@ route '/stylesheets/*/' do
   SITE_ROOT+item.identifier.chop + '.css'
 end
 
+route '/posts/*/' do
+  if item.identifier =~ %r{^/posts/(\d{4})-(\d{2})-(\d{2})-(.*)/$}
+    "/blog/#{$1}/#{$2}/#{$3}/#{$4}/index.html"
+  else
+    puts "WARNING: malformed post name: #{item.identifier}"
+    nil
+  end
+end
+
 %w(markup stylesheet background).each do |ex_file|
   route "/examples/*/#{ex_file}/" do
     nil

doc-src/assets/htaccess

@@ -0,0 +1,4 @@
+RedirectMatch 301 /docs/$ /reference/compass/
+RedirectMatch 301 /docs/tutorials/(.*) /help/tutorials/$1
+RedirectMatch 301 /docs/(.*) /$1
+RedirectMatch 301 /reference/$ /reference/compass/

doc-src/assets/javascripts/fixups.js

@@ -9,14 +9,14 @@ $(function(){
   });
 });
 
-;(function()
+/*;(function()
 {
 	typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;
 	function Brush(){};
 	Brush.prototype	= new SyntaxHighlighter.Highlighter();
-	Brush.aliases	= ['sass', 'scss'];
+	Brush.aliases	= ['sass', 'scss', 'css', 'html'];
 
 	SyntaxHighlighter.brushes.Sass = Brush;
 
 	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
-})();
+})();*/

doc-src/assets/javascripts/install.js

@@ -0,0 +1,87 @@
+function showInstallCommand() {
+    var cmd = $("#existence").val();
+    var commands = [];
+    var notes = [];
+    var project_name = "<myproject>";
+    var can_be_bare = true;
+    commands.push("$ gem install compass");
+    if (cmd == "init") {
+        commands.push("$ cd " + project_name);
+        project_name = ".";
+    }
+    if ($("#app-type").val() == "rails") {
+        if (cmd == "create") {
+            commands.push("$ rails new " + project_name);
+        }
+        cmd = "init rails";
+        can_be_bare = false;
+    } else if ($("#app-type").val() == "other") {
+        if (cmd == "init") {
+            cmd = "create";
+        }
+    } else if ($("#app-type").val() == "stand-alone") {
+        if (cmd == "init") {
+            cmd = "install";
+            can_be_bare = false;
+        }
+    }
+    var framework = $("#framework").val();
+    var create_command;
+    if (cmd == "install") {
+        create_command = "$ compass install " + framework + " " + project_name;
+    } else {
+        create_command = "$ compass " + cmd + " " + project_name;
+    }
+    if (framework != "compass" && framework != "bare" && cmd != "install") {
+        create_command = create_command + " --using " + framework;
+    } else if (framework == "bare") {
+        if (can_be_bare) {
+            create_command = create_command + " --bare";
+        } else {
+            notes.push("<p class='note warning'>You cannot create a bare project in this configuration. Feel free to remove any stylesheets that you don't want.</p>");
+        }
+    }
+    if ($("#syntax").val() == "sass") {
+        create_command = create_command + " --syntax sass";
+    }
+    if ($("#options").val() == "customized") {
+        $("#directories").show();
+        create_command = create_command +
+                         " --sass-dir \"" + $("#sassdir").val() + "\"" +
+                         " --css-dir \"" + $("#cssdir").val() + "\"" +
+                         " --javascripts-dir \"" + $("#jsdir").val() + "\"" +
+                         " --images-dir \"" + $("#imagesdir").val() + "\"";
+    } else {
+      $("#directories").hide();
+    }
+    commands.push(create_command);
+    var instructions = "<pre><code>" + commands.join("\n") + "</code></pre>";
+    if (instructions.match(/&lt;/)) {
+        notes.push("<p class='note'>Note: Values indicated by &lt;&gt; are placeholders. Change them to suit your needs.</em>");
+    }
+    $("#steps").html(instructions + notes.join(""));
+}
+
+function attachMadlibBehaviors() {
+    $("#app-type").change(function(event) {
+        var val = $(event.target).val();
+        if (val == "other") {
+            $("#options").val("customized");
+            $(".madlib").addClass("customizable");
+        } else if (val == "rails") {
+            $("#options").val("default");
+            $(".madlib").removeClass("customizable");
+        } else {
+            $(".madlib").addClass("customizable");
+        }
+    });
+    $("#existence, #app-type, #framework, #syntax, #options").change(showInstallCommand);
+    $(".madlib input").keyup(function(){setTimeout(showInstallCommand, 0.1)});
+}
+
+function setupMadlib() {
+    attachMadlibBehaviors();
+    showInstallCommand();
+}
+
+$(setupMadlib);

doc-src/assets/javascripts/placeholder.js

@@ -0,0 +1,47 @@
+(function($) {
+
+	$.fn.replaceholder = function(options) {
+
+		var $placeholder;
+
+		(this.length > 0) ? $this = $(this) : $this = $('input[placeholder]');
+		return $this.each(function() {
+
+			settings = jQuery.extend(options);
+
+			var $placeholder = $(this);
+
+			if ($placeholder.length > 0) {
+
+				var attrPh = $placeholder.attr('placeholder');
+
+				$placeholder.attr('value', attrPh);
+				$placeholder.bind('focus', function() {
+
+					var $this = $(this);
+
+					if($this.val() === attrPh)
+						$this.val('').removeClass('placeholder');
+
+				}).bind('blur', function() {
+
+					var $this = $(this);
+
+					if($this.val() === '')
+						$this.val(attrPh).addClass('placeholder');
+
+				});
+
+			}
+
+		});
+
+	};
+
+})(jQuery);
+
+jQuery(function($){
+  $(document).ready(function(){
+    if (!Modernizr.input.placeholder) { $("input[placeholder], textarea[placeholder]").replaceholder() }
+  })
+})

doc-src/assets/javascripts/shBrushPlain.js

@@ -0,0 +1,33 @@
+/**
+ * SyntaxHighlighter
+ * http://alexgorbatchev.com/SyntaxHighlighter
+ *
+ * SyntaxHighlighter is donationware. If you are using it, please donate.
+ * http://alexgorbatchev.com/SyntaxHighlighter/donate.html
+ *
+ * @version
+ * 3.0.83 (July 02 2010)
+ *
+ * @copyright
+ * Copyright (C) 2004-2010 Alex Gorbatchev.
+ *
+ * @license
+ * Dual licensed under the MIT and GPL licenses.
+ */
+;(function()
+{
+	// CommonJS
+	typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;
+
+	function Brush()
+	{
+	};
+
+	Brush.prototype	= new SyntaxHighlighter.Highlighter();
+	Brush.aliases	= ['text', 'plain', 'haml'];
+
+	SyntaxHighlighter.brushes.Plain = Brush;
+
+	// CommonJS
+	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
+})();

doc-src/assets/javascripts/shBrushSass.js

@@ -7,7 +7,7 @@
  *
  * @version
  * 3.0.83 (July 02 2010)
- * 
+ *
  * @copyright
  * Copyright (C) 2004-2010 Alex Gorbatchev.
  *
@@ -16,59 +16,59 @@
  */
 ;(function()
 {
-    // CommonJS
-    typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;
+	// CommonJS
+	typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;
 
-    function Brush()
-    {
-        function getKeywordsCSS(str)
-        {
-            return '\\b([a-z_]|)' + str.replace(/ /g, '(?=:)\\b|\\b([a-z_\\*]|\\*|)') + '(?=:)\\b';
-        };
-    
-        function getValuesCSS(str)
-        {
-            return '\\b' + str.replace(/ /g, '(?!-)(?!:)\\b|\\b()') + '\:\\b';
-        };
+	function Brush()
+	{
+		function getKeywordsCSS(str)
+		{
+			return '\\b([a-z_]|)' + str.replace(/ /g, '(?=:)\\b|\\b([a-z_\\*]|\\*|)') + '(?=:)\\b';
+		};
 
-        var keywords =  'ascent azimuth background-attachment background-color background-image background-position ' +
-                        'background-repeat background baseline bbox border-collapse border-color border-spacing border-style border-top ' +
-                        'border-right border-bottom border-left border-top-color border-right-color border-bottom-color border-left-color ' +
-                        'border-top-style border-right-style border-bottom-style border-left-style border-top-width border-right-width ' +
-                        'border-bottom-width border-left-width border-width border bottom cap-height caption-side centerline clear clip color ' +
-                        'content counter-increment counter-reset cue-after cue-before cue cursor definition-src descent direction display ' +
-                        'elevation empty-cells float font-size-adjust font-family font-size font-stretch font-style font-variant font-weight font ' +
-                        'height left letter-spacing line-height list-style-image list-style-position list-style-type list-style margin-top ' +
-                        'margin-right margin-bottom margin-left margin marker-offset marks mathline max-height max-width min-height min-width orphans ' +
-                        'outline-color outline-style outline-width outline overflow padding-top padding-right padding-bottom padding-left padding page ' +
-                        'page-break-after page-break-before page-break-inside pause pause-after pause-before pitch pitch-range play-during position ' +
-                        'quotes right richness size slope src speak-header speak-numeral speak-punctuation speak speech-rate stemh stemv stress ' +
-                        'table-layout text-align top text-decoration text-indent text-shadow text-transform unicode-bidi unicode-range units-per-em ' +
-                        'vertical-align visibility voice-family volume white-space widows width widths word-spacing x-height z-index zoom';
-        
-        var values =    'above absolute all always aqua armenian attr aural auto avoid baseline behind below bidi-override black blink block blue bold bolder '+
-                        'both bottom braille capitalize caption center center-left center-right circle close-quote code collapse compact condensed '+
-                        'continuous counter counters crop cross crosshair cursive dashed decimal decimal-leading-zero digits disc dotted double '+
-                        'embed embossed e-resize expanded extra-condensed extra-expanded fantasy far-left far-right fast faster fixed format fuchsia '+
-                        'gray green groove handheld hebrew help hidden hide high higher icon inline-table inline inset inside invert italic '+
-                        'justify landscape large larger left-side left leftwards level lighter lime line-through list-item local loud lower-alpha '+
-                        'lowercase lower-greek lower-latin lower-roman lower low ltr marker maroon medium message-box middle mix move narrower '+
-                        'navy ne-resize no-close-quote none no-open-quote no-repeat normal nowrap n-resize nw-resize oblique olive once open-quote outset '+
-                        'outside overline pointer portrait pre print projection purple red relative repeat repeat-x repeat-y rgb ridge right right-side '+
-                        'rightwards rtl run-in screen scroll semi-condensed semi-expanded separate se-resize show silent silver slower slow '+
-                        'small small-caps small-caption smaller soft solid speech spell-out square s-resize static status-bar sub super sw-resize '+
-                        'table-caption table-cell table-column table-column-group table-footer-group table-header-group table-row table-row-group teal '+
-                        'text-bottom text-top thick thin top transparent tty tv ultra-condensed ultra-expanded underline upper-alpha uppercase upper-latin '+
-                        'upper-roman url visible wait white wider w-resize x-fast x-high x-large x-loud x-low x-slow x-small x-soft xx-large xx-small yellow';
-        
-        var fonts =     '[mM]onospace [tT]ahoma [vV]erdana [aA]rial [hH]elvetica [sS]ans-serif [sS]erif [cC]ourier mono sans serif';
-        
-        var statements      = '!important !default';
-        var preprocessors   = 'import extend debug warn if for while mixin include';
-        
-        var r = SyntaxHighlighter.regexLib;
-        
-      var getKeywordsPrependedBy = function(keywords, by)
+		function getValuesCSS(str)
+		{
+			return '\\b' + str.replace(/ /g, '(?!-)(?!:)\\b|\\b()') + '\:\\b';
+		};
+
+		var keywords =	'ascent azimuth background-attachment background-color background-image background-position ' +
+						'background-repeat background baseline bbox border-collapse border-color border-spacing border-style border-top ' +
+						'border-right border-bottom border-left border-top-color border-right-color border-bottom-color border-left-color ' +
+						'border-top-style border-right-style border-bottom-style border-left-style border-top-width border-right-width ' +
+						'border-bottom-width border-left-width border-width border bottom cap-height caption-side centerline clear clip color ' +
+						'content counter-increment counter-reset cue-after cue-before cue cursor definition-src descent direction display ' +
+						'elevation empty-cells float font-size-adjust font-family font-size font-stretch font-style font-variant font-weight font ' +
+						'height left letter-spacing line-height list-style-image list-style-position list-style-type list-style margin-top ' +
+						'margin-right margin-bottom margin-left margin marker-offset marks mathline max-height max-width min-height min-width orphans ' +
+						'outline-color outline-style outline-width outline overflow padding-top padding-right padding-bottom padding-left padding page ' +
+						'page-break-after page-break-before page-break-inside pause pause-after pause-before pitch pitch-range play-during position ' +
+						'quotes right richness size slope src speak-header speak-numeral speak-punctuation speak speech-rate stemh stemv stress ' +
+						'table-layout text-align top text-decoration text-indent text-shadow text-transform unicode-bidi unicode-range units-per-em ' +
+						'vertical-align visibility voice-family volume white-space widows width widths word-spacing x-height z-index zoom';
+
+		var values =	'above absolute all always aqua armenian attr aural auto avoid baseline behind below bidi-override black blink block blue bold bolder '+
+						'both bottom braille capitalize caption center center-left center-right circle close-quote code collapse compact condensed '+
+						'continuous counter counters crop cross crosshair cursive dashed decimal decimal-leading-zero digits disc dotted double '+
+						'embed embossed e-resize expanded extra-condensed extra-expanded fantasy far-left far-right fast faster fixed format fuchsia '+
+						'gray green groove handheld hebrew help hidden hide high higher icon inline-table inline inset inside invert italic '+
+						'justify landscape large larger left-side left leftwards level lighter lime line-through list-item local loud lower-alpha '+
+						'lowercase lower-greek lower-latin lower-roman lower low ltr marker maroon medium message-box middle mix move narrower '+
+						'navy ne-resize no-close-quote none no-open-quote no-repeat normal nowrap n-resize nw-resize oblique olive once open-quote outset '+
+						'outside overline pointer portrait pre print projection purple red relative repeat repeat-x repeat-y rgb ridge right right-side '+
+						'rightwards rtl run-in screen scroll semi-condensed semi-expanded separate se-resize show silent silver slower slow '+
+						'small small-caps small-caption smaller soft solid speech spell-out square s-resize static status-bar sub super sw-resize '+
+						'table-caption table-cell table-column table-column-group table-footer-group table-header-group table-row table-row-group teal '+
+						'text-bottom text-top thick thin top transparent tty tv ultra-condensed ultra-expanded underline upper-alpha uppercase upper-latin '+
+						'upper-roman url visible wait white wider w-resize x-fast x-high x-large x-loud x-low x-slow x-small x-soft xx-large xx-small yellow';
+
+		var fonts =		'[mM]onospace [tT]ahoma [vV]erdana [aA]rial [hH]elvetica [sS]ans-serif [sS]erif [cC]ourier mono sans serif';
+
+		var statements		= '!important !default';
+		var preprocessors	= 'import extend debug warn if for while mixin include';
+
+		var r = SyntaxHighlighter.regexLib;
+
+	  var getKeywordsPrependedBy = function(keywords, by)
     {
       str = keywords
         .replace(/^\s+|\s+$/g, '')
@@ -79,34 +79,35 @@
       return '(?:' + str + ')\\b';
     }
 
-        this.regexList = [
-            { regex: r.multiLineCComments,                                                          css: 'comments' },      // multiline comments
-            { regex: r.singleLineCComments,                                                         css: 'comments' },      // singleline comments
-            { regex: r.doubleQuotedString,                                                          css: 'string' },          // double quoted strings
-            { regex: r.singleQuotedString,                                                          css: 'string' },          // single quoted strings
-            { regex: /\#[a-fA-F0-9]{3,6}/g,                                                         css: 'value' },           // html colors
-            { regex: /\b(-?\d+)(\.\d+)?(px|em|pt|\:|\%|)\b/g,                               css: 'value' },           // sizes
-            { regex: /(\$|!)\w+/g,                                                                          css: 'variable' },      // variables
-            { regex: new RegExp(this.getKeywords(statements), 'g'),                       css: 'color3' },        // statements
-            { regex: new RegExp(getKeywordsPrependedBy(preprocessors, '@'), 'g'),         css: 'preprocessor' },    // preprocessors
-      { regex: new RegExp('(^|\\n)\\s*=.*', 'g'),                                   css: 'functions' },     // short mixin declarations
-            { regex: new RegExp('(^|\\n)\\s*\\+.*', 'g'),                               css: 'functions' },     // short mixin call
-            { regex: new RegExp('&', 'g'),                                          css: 'keyword' },       // &
-            { regex: new RegExp('#(\\w|-|_)+', 'g'),                                      css: 'color2' },        // ids
-            { regex: new RegExp('(\\.(\\w|-|_)+)', 'g'),                                css: 'color4' },        // classes
-            { regex: new RegExp(getKeywordsCSS(keywords), 'gm'),                          css: 'keyword' },         // keywords
-            { regex: new RegExp(getKeywordsPrependedBy(keywords, ':'), 'g'),              css: 'keyword' },         // :keyword value
-            { regex: new RegExp(getValuesCSS(values), 'g'),                                   css: 'value' },           // values
-            { regex: new RegExp(this.getKeywords(fonts), 'g'),                              css: 'color1' }         // fonts
-            ];
-    };
+		this.regexList = [
+			{ regex: r.multiLineCComments,		                                					css: 'comments' },	    // multiline comments
+			{ regex: r.singleLineCComments,		                                					css: 'comments' },	    // singleline comments
+			{ regex: r.doubleQuotedString,		                                					css: 'string' },	      // double quoted strings
+			{ regex: r.singleQuotedString,		                                					css: 'string' },	      // single quoted strings
+			{ regex: /\#[a-fA-F0-9]{3,6}/g,		                                					css: 'value' },		      // html colors
+			{ regex: /\b(-?\d+)(\.\d+)?(px|em|pt|\:|\%|)\b/g,                     			css: 'value' },		      // sizes
+			{ regex: /(\$|!)\w+/g,											                                css: 'variable' },      // variables
+			{ regex: new RegExp(this.getKeywords(statements), 'g'),		                  css: 'color3' },	      // statements
+			{ regex: new RegExp(getKeywordsPrependedBy(preprocessors, '@'), 'g'),	      css: 'preprocessor' },	// preprocessors
+      { regex: new RegExp('(^|\\n)\\s*=.*', 'g'),	                                css: 'functions' },   	// short mixin declarations
+			{ regex: new RegExp('(^|\\n)\\s*\\+.*', 'g'),                              	css: 'functions' },   	// short mixin call
+			{ regex: new RegExp('&', 'g'),	                                        css: 'keyword' },     	// &
+			{ regex: new RegExp('#(\\w|-|_)+', 'g'),	                                  css: 'color2' },        // ids
+			{ regex: new RegExp('(\\.(\\w|-|_)+)', 'g'),                                css: 'color4' },        // classes
+			{ regex: new RegExp(getKeywordsCSS(keywords), 'gm'),	                      css: 'keyword' },   		// keywords
+			{ regex: new RegExp(getKeywordsPrependedBy(keywords, ':'), 'g'),	          css: 'keyword' },   		// :keyword value
+			{ regex: new RegExp(getValuesCSS(values), 'g'),				                      css: 'value' },	      	// values
+			{ regex: new RegExp(this.getKeywords(fonts), 'g'),			                    css: 'color1' }	      	// fonts
+			];
+	};
 
 
-    Brush.prototype = new SyntaxHighlighter.Highlighter();
-    Brush.aliases   = ['sass', 'scss'];
+	Brush.prototype	= new SyntaxHighlighter.Highlighter();
+	Brush.aliases	= ['sass', 'scss'];
 
-    SyntaxHighlighter.brushes.Sass = Brush;
+	SyntaxHighlighter.brushes.Sass = Brush;
 
-    // CommonJS
-    typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
+	// CommonJS
+	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
 })();
+

doc-src/assets/javascripts/shBrushXml.js

@@ -0,0 +1,69 @@
+/**
+ * SyntaxHighlighter
+ * http://alexgorbatchev.com/SyntaxHighlighter
+ *
+ * SyntaxHighlighter is donationware. If you are using it, please donate.
+ * http://alexgorbatchev.com/SyntaxHighlighter/donate.html
+ *
+ * @version
+ * 3.0.83 (July 02 2010)
+ * 
+ * @copyright
+ * Copyright (C) 2004-2010 Alex Gorbatchev.
+ *
+ * @license
+ * Dual licensed under the MIT and GPL licenses.
+ */
+;(function()
+{
+	// CommonJS
+	typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;
+
+	function Brush()
+	{
+		function process(match, regexInfo)
+		{
+			var constructor = SyntaxHighlighter.Match,
+				code = match[0],
+				tag = new XRegExp('(&lt;|<)[\\s\\/\\?]*(?<name>[:\\w-\\.]+)', 'xg').exec(code),
+				result = []
+				;
+		
+			if (match.attributes != null) 
+			{
+				var attributes,
+					regex = new XRegExp('(?<name> [\\w:\\-\\.]+)' +
+										'\\s*=\\s*' +
+										'(?<value> ".*?"|\'.*?\'|\\w+)',
+										'xg');
+
+				while ((attributes = regex.exec(code)) != null) 
+				{
+					result.push(new constructor(attributes.name, match.index + attributes.index, 'color1'));
+					result.push(new constructor(attributes.value, match.index + attributes.index + attributes[0].indexOf(attributes.value), 'string'));
+				}
+			}
+
+			if (tag != null)
+				result.push(
+					new constructor(tag.name, match.index + tag[0].indexOf(tag.name), 'keyword')
+				);
+
+			return result;
+		}
+	
+		this.regexList = [
+			{ regex: new XRegExp('(\\&lt;|<)\\!\\[[\\w\\s]*?\\[(.|\\s)*?\\]\\](\\&gt;|>)', 'gm'),			css: 'color2' },	// <![ ... [ ... ]]>
+			{ regex: SyntaxHighlighter.regexLib.xmlComments,												css: 'comments' },	// <!-- ... -->
+			{ regex: new XRegExp('(&lt;|<)[\\s\\/\\?]*(\\w+)(?<attributes>.*?)[\\s\\/\\?]*(&gt;|>)', 'sg'), func: process }
+		];
+	};
+
+	Brush.prototype	= new SyntaxHighlighter.Highlighter();
+	Brush.aliases	= ['xml', 'xhtml', 'xslt', 'html'];
+
+	SyntaxHighlighter.brushes.Xml = Brush;
+
+	// CommonJS
+	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
+})();

doc-src/assets/javascripts/site.js

@@ -1,4 +1,4 @@
-function changeTheme(theme) {
+function changeTheme(theme, setCookie) {
   el = $('html');
 
   if (!theme) theme = el.hasClass('dark') ? 'light': 'dark';
@@ -10,18 +10,25 @@ function changeTheme(theme) {
   setThemePreference(theme);
 }
 
-function changeSyntax(syntax) {
+function changeSyntax(style, setCookie){
   el = $('html');
+  el.removeClass('scss'); el.removeClass('sass');
+  el.addClass(style);
+  setStyleSyntaxPreference(style);
+}
 
-  if (!syntax) {
-    syntax = el.hasClass('scss') ? 'sass': 'scss';
-  } else if (el.hasClass(syntax)) {
-    return;
-  }
-  el.removeClass('scss');
-  el.removeClass('sass');
-  el.addClass(syntax);
-  setSyntaxPreference(syntax);
+function changeExampleStyleSyntax(style, setCookie){
+  el = $('html');
+  el.removeClass('scss'); el.removeClass('sass'); el.removeClass('css');
+  el.addClass(style);
+  setExampleStyleSyntaxPreference(style);
+}
+
+function changeExampleMarkupSyntax(markup){
+  el = $('html');
+  el.removeClass('haml'); el.removeClass('html');
+  el.addClass(markup);
+  setExampleMarkupSyntaxPreference(markup);
 }
 
 function setThemePreference(theme) {
@@ -31,46 +38,81 @@ function setThemePreference(theme) {
     path: '/'
   });
 }
+
 function getThemePreference(defaultTheme) {
   theme = $.cookie("compass-theme");
   if (theme) {
-    changeTheme(theme);
+    changeTheme(theme, false);
   } else {
-    changeTheme(defaultTheme);
+    changeTheme(defaultTheme, true);
   }
 }
-function setSyntaxPreference(syntax) {
+
+function setStyleSyntaxPreference (mainSyntax) {
   $.cookie("compass-syntax", null);
-  $.cookie("compass-syntax", syntax, {
-    expires: 60 * 60 * 24 * 365 * 10,
-    path: '/'
-  });
+  $.cookie("compass-syntax", mainSyntax, { expires: 60 * 60 * 24 * 365 * 10, path: '/' });
 }
-function getSyntaxPreference(defaultSyntax) {
-  syntax = $.cookie("compass-syntax");
-  if (syntax){
-    changeSyntax(syntax);
-  } else {
-    changeSyntax(defaultSyntax);
+
+function setExampleStyleSyntaxPreference (exampleStyle) {
+  $.cookie("compass-example-style", null);
+  $.cookie("compass-example-style", exampleStyle, { expires: 60 * 60 * 24 * 365 * 10, path: '/' });
+}
+
+function setExampleMarkupSyntaxPreference (exampleMarkup) {
+  $.cookie("compass-example-markup", null);
+  $.cookie("compass-example-markup", exampleMarkup, { expires: 60 * 60 * 24 * 365 * 10, path: '/' });
+}
+
+function getSyntaxPreference(defaultSyntax, defaultMarkup) {
+  mainSyntaxCookie = $.cookie("compass-syntax");
+  mainSyntax = (mainSyntaxCookie) ? mainSyntaxCookie : defaultSyntax;
+  changeSyntax(mainSyntax);
+
+  // add example styling preferences
+  if ($('body').hasClass('demo')){
+    markupCookie = $.cookie("compass-example-markup");
+    styleCookie = $.cookie("compass-example-style");
+
+    markup = (markupCookie) ? markupCookie : defaultMarkup;
+    style = (styleCookie) ? styleCookie : defaultSyntax;
+
+    changeExampleStyleSyntax(style)
+    changeExampleMarkupSyntax(markup);
   }
 }
 
 
 getThemePreference('dark');
-getSyntaxPreference('scss');
 
 $('document').ready(function(){
+  getSyntaxPreference('scss', 'html');
+
   $('#page').click(function(event){
     var target = $(event.target);
+
+    // Set Main Syntax Preference
     if (target.parent().is('#syntax_pref')) {
-      changeSyntax(target.attr("rel"));
+      changeSyntax(target.attr("rel"), true);
       event.preventDefault();
+
+    // Set Demo page syntax preferences
+    } else if (target.parent().is('.syntax_pref')) {
+      event.preventDefault();
+      if (target.parent().parent().is('#markup')) {
+        changeExampleMarkupSyntax(target.attr("rel"), true);
+      } else {
+        changeExampleStyleSyntax(target.attr("rel"), true);
+      }
+
+    // Set Theme preference
     } else if (target.is('#theme_pref') || target.parent().is('#theme_pref')) {
       changeTheme();
       event.preventDefault();
+
+    // View source for mixins & functions
     } else if (target.attr("rel") == "view source") {
       $(target.attr("href")).toggle();
       event.preventDefault();
     }
   });
-});
+});

doc-src/authors.yml

@@ -0,0 +1,12 @@
+chris:
+  fullname: Chris Eppstein
+  byline_link: http://chriseppstein.github.com/
+brandon:
+  fullname: Brandon Mathis
+eric:
+  fullname: Eric Meyer
+  byline_link: http://eric.oddbird.net/
+nico:
+  fullname: Nico Hagenburger
+scott:
+  fullname: Scott Davis

doc-src/config.yaml

@@ -6,5 +6,6 @@ data_sources:
 - items_root: /assets
   layouts_root: /assets
   type: filesystem_assets
-text_extensions: [ 'css', 'erb', 'haml', 'htm', 'html', 'js', 'less', 'markdown', 'md', 'php', 'rb', 'sass', 'scss', 'txt' ]
+text_extensions: [ 'css', 'erb', 'haml', 'htm', 'html', 'js', 'less', 'markdown', 'md', 'php', 'rb', 'sass', 'scss', 'txt', 'xml' ]
 output_dir: output
+base_url: http://compass-style.org

doc-src/content/CHANGELOG-v0-11-beta.markdown

@@ -0,0 +1,282 @@
+---
+title: Compass v0.11.0 Beta History
+crumb: CHANGELOG
+body_id: changelog
+layout: article
+---
+
+0.11.beta.8 (UNRELEASED)
+------------------------
+
+* Created an official API to add configuration options to compass.
+  [More information](/help/tutorials/extending/).
+
+0.11.beta.7 (04/16/2011)
+------------------------
+* Added support for the new webkit gradient syntax that matches the css3 specification.
+  Support for older webkit browsers remains enabled at this time.
+  To disable it, set `$support-for-original-webkit-gradients` to false.
+* There is a new mixin for creating
+  [pure-css grid backgrounds](/reference/compass/layout/grid_background/)
+  for verifying grid alignment for both fixed and fluid grids.
+* Add support for pixel-based gradients in the original webkit gradient syntax.
+* Added a vertical rhythm function for calculating rhythms without returning a property.
+
+0.11.beta.6 (04/10/2011)
+------------------------
+* Added support for degree-based linear and radial gradients (not yet supported for SVG gradients)
+* Added opera prefix support for linear and radial gradients.
+* The CSS3 `background` mixin's "simple" background that came
+  before the prefixed versions has been removed. If you
+  need to target css2 background it is recommended that you set a
+  the background property before calling the `background` mixin
+  or you can call the `background-with-css2-fallback` if you want
+  keep using compass's automatic simplification of the arguments.
+* Bug fixes
+* Fixed and issue with the compass gemspec in rubygems 1.7
+* Fixed a bug with sprite imports
+
+0.11.beta.5 (03/27/2011)
+------------------------
+
+### Compass Sprites
+
+[Magic Selectors](/help/tutorials/spriting/#magic-selectors) have been added
+
+Fixed a bug causing a stack level too deep in ruby 1.8.7
+
+0.11.beta.4 (03/25/2011)
+------------------------
+
+* Extensions that are installed into ~/.compass/extensions will be automatically available to all your compass projects.
+
+### Compass Internals
+
+* Fixed a small bug in callbacks that was causing them to register twice
+* The Sprite classes have been abstracted allowing for different engines
+* Bumped chunky_png version to 1.1.0
+* Total rewrite of the sprite generation classes - thanks to [@johnbintz](https://github.com/johnbintz) for the help
+* More Rspec tests
+
+0.11.beta.3 (03/15/2011)
+------------------------
+
+### Compass CSS3
+
+* A new CSS3 mixin for [appearance](/reference/compass/css3/appearance/) was added.
+* The font-face mixin has been updated again with the [syntax recommendations
+  from font-spring](http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax).
+  The API has not changed.
+
+### Compass Typography
+
+* Some text-based mixins have been moved from utilities to the new
+  typography module. The old imports are deprecated now.
+  Affected modules: utilities/links, utilities/lists, and utilities/text and
+  their sub-modules.
+* There is a new typography module: [Vertical Rhythm](/reference/compass/typography/vertical_rhythm/).
+  This makes it easier to align the typography of your page to a common rhythm.
+
+### Compass Utilities
+
+* A new mixin `reset-float` is available in the [float module](/reference/compass/utilities/general/float/#mixin-reset-float) that makes it easier to reset the floats introduced from that module.
+* A new mixin `reset-float` is available in the [float module](/reference/compass/utilities/general/float/#mixin-reset-float) that makes it easier to reset the floats introduced from that module.
+* A new module has been added to create readable text against an arbitrary background color based on the lightness of the background: [compass/utilities/color/contrast](/reference/compass/utilities/color/contrast/).
+* The comma-delimited-list has been renamed to delimited-list and
+  generalized to accept a delimiter which defaults to a comma.
+  The old function continues to exist, but is deprecated.
+
+### Compass Internals
+
+* You can now register callbacks for compilation events so that you can take
+  custom actions when they occur. For instance, you might want to notify
+  Growl when a stylesheet compilation error occurs.
+* Bug fixes & performance improvements.
+
+0.11.beta.2 (02/01/2011)
+------------------------
+* Updated the font-face mixin so it works in Android 2.2.
+  Credit: [Paul Irish](http://paulirish.com/).
+* The deprecated & unused arguments to the font-face mixin have been removed.
+
+0.11.beta.1 (01/17/2011)
+------------------------
+* Add an option `--skip-overrides` to the sprite
+  subcommand. When provided, the default variables for overriding the sprite
+  behavior are not created. Instead, you would change the call to
+  `sprite-map()` to customize your sprite map.
+* Rename the `sprite-position` mixin in the new `sprite/base` module to
+  `sprite-background-position` in order avoid a naming conflict with the old
+  sprite module.
+
+0.11.beta.0 (01/09/2011)
+------------------------
+
+Compass v0.11 is now feature complete. Future changes to this release will be doc improvements, bug fixes, performance tuning, and addressing user feedback.
+
+* Added optional support for IE8 with $legacy-support-for-ie8 which defaults to true.
+* Updated the opacity and filter-gradient mixins to make IE's hacky DirectX filters
+  optional based on Compass's legacy support settings.
+* Added the ability to piggy back on compass's watcher within your configuration file.
+  See the [configuration reference](/help/tutorials/configuration-reference/) for details.
+* The options passed to the CLI can now be inspected within the compass configuration file.
+  The CLI options will still override the values set within the config file, but they might
+  inform other values. For instance `compass compile -e production` will have the environment
+  parameter preset to `:production` so that you can set other values in the project accordingly.
+* New infrastructure for supporting experimental css3 functions that are prefixed but have the same
+  syntax across all browsers. It is now possible to configure which browsers support which
+  experimental functions outside of the compass release cycle. For details, see the
+  [cross browser helpers](/reference/compass/helpers/cross-browser/).
+* [Blueprint] Added a new sass function called span($n) to the grid module which replaces
+  the now **deprecated span mixin**. If you are using this mixin, please replace it with:
+  `width: span($n)`.
+* [Blueprint] Blueprint no longer adds `!important` to the widths of `input`, `textarea`,
+  and `select` form fields, so compass no longer defaults to using `!important` in those cases.
+  If you were relying on this behavior, you may need to adjust your stylesheets accordingly.
+
+0.11.alpha.4 (12/08/2010)
+-------------------------
+
+* Add a `--time` option to the compile and watch commands. This will print out
+  the time spent compiling each sass file and a total at the end.
+* Upgrade FSSM, the internal library that monitors the filesystem events for compass.
+* Removed the command line options that were deprecated in v0.10.
+
+0.11.alpha.3 (12/05/2010)
+-------------------------
+
+* Fix a bug in compass running under ruby 1.9.2 that was introduced in v0.11.alpha.2.
+
+0.11.alpha.2 (12/05/2010)
+-------------------------
+
+* Merge with Lemonade. Compass now provides a full featured spriting solution.
+  See the [spriting tutorial](/help/tutorials/spriting/) for more information.
+* Compass now depends on Sass 3.1. You can install the preview release:
+  `gem install sass --pre`. Note: you must also upgrade your haml gem if you
+  use both in the same application.
+* A third argument is now available on the `image-url()` helper. When `true` or
+  `false`, it will enable/disable the cache buster for a single image url. Or when
+  a string, it will be the cache buster used.
+* Upgrade CSS3 PIE to 1.0-beta3.
+* Bug fixes.
+
+0.11.alpha.1 (11/22/2010)
+-------------------------
+
+* Support for Sass 3.1 alpha version
+* CSS3 PIE module. [Docs](/reference/compass/css3/pie/).
+* The versioned modules in the last release have been removed. There is now
+  just a single module for each and the overloaded mixins will discern
+  deprecated usage and warn accordingly.
+* Allow erb processing of non all non-binary filetypes during extension installs.
+* Added a `background` mixin for css3 gradient support in the shorthand style.
+* Fix for gradients in opera with bordered elements.
+* The `multiple-text-shadows` and `multiple-box-shadows` mixins that were present in
+  v0.11.alpha.0 were removed because they were unnecessary. Just use the `text-shadow`
+  and `box-shadow` mixins.
+* The docs are [getting a make-over](http://beta.compass-style.org/) by Brandon :)
+
+0.11.alpha.0 (11/15/2010)
+-------------------------
+
+Note: Compass does not currently support Sass 3.1 alphas.
+
+### Deprecations
+
+* Deprecated imports and APIs from v0.10 have been removed.
+* Changed defaults for the box-shadow and text-shadow mixins.
+  Previously the horizontal and vertical offset were both 1, which
+  expected a top left light source. They are now set to 0 which assumes
+  a direct light source, a more generic default.
+* The linear-gradient and radial-gradient mixins have been deprecated.
+  Instead use the background-image mixin and pass it a gradient function.
+  The deprecation warning will print out the correct call for you to use.
+* Passing an argument to the `blueprint-scaffolding` mixin is not necessary
+  and has been deprecated.
+* Some blueprint color defaults now use color functions instead of color arithmetic.
+  This may result in different output for those who have color customizations.
+
+### Blueprint
+
+* Updated from blueprint 0.9 to blueprint 1.0
+  * Added .info and .alert classes to forms.css [CMM]
+  * Fixed numerous bugs in forms, including the fieldset padding bug in IE6-8 [CMM]
+  * Fixed specificity problems in typography.css and grid.css [CMM]
+  * See Lighthouse for more bug fixes
+  * Full [blueprint changelog][blueprint_10_change]
+  * If for some reason you'd like to stay on the older version of blueprint you can run
+    the following command in your project before you upgrade (or after temporarily downgrading):
+    `compass unpack blueprint`
+
+### CSS3 v2.0
+
+Our CSS3 module makes writing CSS3 today almost as easy as it will be when all
+the browsers officially support the new features. The second version of the
+compass CSS module brings the API up to date with developments over the past
+6 to 9 months of browser changes and more closely matching the most recent CSS
+specifications. [Upgrade guide](/help/tutorials/upgrading/antares/). Summary of changes.
+
+* Support for multiple box shadows and text shadows
+* Support for 2d and 3d transforms
+* Opt-in SVG support for gradients in opera and IE9.
+  Set `$experimental-support-for-svg : true` in your
+  stylesheet to enable it.
+* Fixed a radial gradient position bug.
+* To generate a simple linear gradient in IE6 & 7, you can now use
+  the `filter-gradient` mixin.
+* New `background-image` mixin with gradient support and allowing
+  up to 10 images.
+* Gradient support for the border-image property.
+* Gradient support for list-style-image property.
+* Gradient support for the content property.
+
+### Helpers
+
+* `linear-gradient()` & `radial-gradient()` helpers now intercept standard css
+  functions and parse them into Sass Literals. These work with new vendor helpers
+  (`-moz()`, `-webkit`, `-o`, `-ie`, and `-svg` (yes I know svg is not a vendor))
+  to return specific representations of the linear & radial gradients. The
+  `prefixed()` function will check a value to see if it has a certain
+  vendor-specific representation.
+* New color helpers: `adjust-lightness`, `adjust-saturation`, `scale-lightness`, and `scale-saturation`
+  make it easier to construct apis that manipulate these color attributes.
+* The `elements-of-type()` helper now returns html5 elements when the display is `block`
+  and also will return only html5 elements for `elements-of-type(html5)`
+* Compass now provides several helper functions related to trigonometry.
+  There's no practical use, but it's hoped that users will find fun things to
+  do with these for technology demonstrations:
+  * `sin($number)` - Takes the sine of the number.
+  * `cos($number)` - Takes the cosine of the number.
+  * `tan($number)` - Takes the tangent of the number.
+  * `pi()` - Returns the value of π.
+  If you provide a number with units of `deg` then it will return a unitless number
+  after converting to radians. Otherwise, it assumes the number is a radian length measure
+  and passes the units along to the result.
+* `ie-hex-str($color)` returns a #AARRGGBB formatted color suitable for
+  passing to IE filters.
+* A new function `if()` that allows you to switch on a value without using `@if`.
+  Usage: `if($truth-value, $value-if-true, $value-if-false)`.
+* Compass has added a number of new helper functions for lists that begin with
+  `-compass`, helpers that begin with `-compass` should be considered "private" and
+  are not to be used by compass users. Sass 3.1 will have proper list support,
+  these are a work around until that time.
+
+### Configuration
+
+* Added a new configuration property to disable sass warnings: `disable_warnings`
+
+### Core Framework
+
+* New layout mixins for absolute positioning: stretch, stretch-x, stretch-y
+
+### Rails
+
+* In rails 3, there's no need for an initializer. Instead we use a
+  Railstie.
+* We now default to app/stylesheets for sass files and public/stylesheets for
+  css files -- though they can still be changed after installation or on the
+  command line during project initialization.
+* Compass is now a gem plugin in a rails environment.
+* In a rails3 environment the compass configuration can now be
+  changed without restarting the rails server process.

doc-src/content/CHANGELOG.markdown

@@ -2,42 +2,98 @@
 title: Compass History
 crumb: CHANGELOG
 body_id: changelog
-layout: article
+layout: default
 ---
 COMPASS CHANGELOG
 =================
 
-Upgrading compass is really easy.
+Upgrading compass is pretty easy.
 Don't let all these details [scare you...](/help/tutorials/upgrading/im-scared/)
 
 The Documentation for the [latest stable release](http://compass-style.org/docs/):
 
 The Documentation for the [latest preview release](http://beta.compass-style.org/)
 
-0.11.alpha.1 (11/22/2010)
----------------------------
+0.11.6 (UNRELEASED)
+-------------------
 
-* Support for Sass 3.1 alpha version
-* CSS3 PIE module. [Docs](/reference/compass/css3/pie/).
-* The versioned modules in the last release have been removed. There is now
-  just a single module for each and the overloaded mixins will discern
-  deprecated usage and warn accordingly.
-* Allow erb processing of non all non-binary filetypes during extension installs.
-* Added a `background` mixin for css3 gradient support in the shorthand style.
-* Fix for gradients in opera with bordered elements.
-* The `multiple-text-shadows` and `multiple-box-shadows` mixins that were present in
-  v0.11.alpha.0 were removed because they were unnecessary. Just use the `text-shadow`
-  and `box-shadow` mixins.
-* The docs are [getting a make-over](http://beta.compass-style.org/) by Brandon :) 
+* Added `user-select` mixin to control the selection model and granularity of an element. It accepts one argument (`$select`) from the following options: `none` | `text` | `toggle` | `element` | `elements` | `all` | `inherit`.
 
-0.11.alpha.0   (11/15/2010)
----------------------------
+0.11.5 (07/10/2011)
+-------------------
 
-Note: Compass does not currently support Sass 3.1 alphas.
+* Updated the list of elements returned by the `elements-of-type()` helper.
+  It now understands `html5-block` and `html5-inline` and other types now
+  return html5 elements in them by default.
+* Fix warning logic in vertical-rhythms module.
+* Fix typo in the css3/transition module.
 
-### Deprecations
+0.11.4 (07/03/2011)
+-------------------
 
-* Deprecated imports and APIs from v0.10 have been removed.
+* Vertical rhythm now supports absolute units like pixels.
+  Set `$relative-font-sizing` to `false` to enable.
+* Vertical rhythm now has a minimum padding that defaults to 2px.
+  This makes some edge cases look better.
+* New mixin `force-wrap` prevents URLs and long lines of text from breaking layouts.
+* Fix absolute path detection on windows.
+* Fix the mime type returned for inline svg images.
+* Allow multiple transitions in the CSS3 `transition` mixin.
+* The Blueprint `:focus` styles no longer clobbers cascade-based overrides unnecessarily.
+* The Blueprint grid-background vertical rhythm is now based off of $blueprint-font-size,
+  rather than a static value of 20px
+
+0.11.3 (06/11/2011)
+-------------------
+
+**Note:** Due to some internal changes to compass you may have issue with your sass cache. Run `compass clean` to clear your cache.
+
+* The `pie-clearfix` mixin has been updated. If you have to
+  support Firefox < 3.5, please update your stylesheets
+  to use `legacy-pie-clearfix` instead.
+* Added a new command: `compass clean` which removes any generated
+  css files and clears the sass cache.
+* Enable IE 10 support for flexible box with the -ms prefix.
+* A small change to how generated sprites are named for better
+  rails 3.1 compatibility.
+* Fixes for the compass --quiet mode.
+* It is now possible to generate cache buster urls that manipulate
+  the path of the image instead of the query string. This makes
+  images work better with proxies, but will require some web server
+  configuration. [Docs](/help/tutorials/configuration-reference/#asset-cache-buster)
+* Numerous small bug fixes to sprites.
+* Sprite Engines are now classes see [Docs](/help/tutorials/extending) for more information
+* Sprite classes have bee re-factored into modules for readability
+* Sprites will no longer cause `undefined method 'find' for #<Compass::SpriteMap>` when adding or removing sprite files
+
+0.11.2 (06/10/2011)
+-------------------
+* Sprites will now by default remove any old versions of the sprite. A new configuration
+  variable has been created to override this.
+* Nested sprites are now supported using globs `@import 'nested/**/*.png';`.
+* Fixed a bug that was causing sprite variable options to not get passed to the image classes.
+* Sass Colors will no longer cause an error if you use them as sprite names.
+* Added support for -ms gradients in background-image and background properties
+* Give a better error if Sass::Script::Functions.declare does not exist.
+
+0.11.1 (04/25/2011)
+-------------------
+
+* This release fixed some Gem dependency issues with Sass.
+
+0.11.0 (04/24/2011)
+-------------------
+
+This changelog entry is aggregated across all the v0.11 beta releases.
+If you're upgrading from a previous beta v0.11 beta release, you can read
+[the 0.11 beta release notes here](/CHANGELOG-v0-11-beta/).
+
+### !important
+
+#### Breaking Changes & Deprecations:
+
+* Deprecated imports and APIs from v0.10 have been removed. If you are upgrading
+  from v0.8, please upgrade to v0.10 before installing v0.11.
 * Changed defaults for the box-shadow and text-shadow mixins.
   Previously the horizontal and vertical offset were both 1, which
   expected a top left light source. They are now set to 0 which assumes
@@ -49,6 +105,31 @@ Note: Compass does not currently support Sass 3.1 alphas.
   and has been deprecated.
 * Some blueprint color defaults now use color functions instead of color arithmetic.
   This may result in different output for those who have color customizations.
+* The deprecated & unused arguments to the `font-face` mixin have been removed.
+* Lemonade has been merged into compass. If you've been using Lemonade, you need to
+  upgrade your sprites to use the new [Compass Sprites](/help/tutorials/spriting/).
+
+#### Dependencies
+
+* Compass now depends on Sass 3.1 which is a new stand-alone gem that has been separated
+  from Haml. **If you have Haml installed, you must upgrade it to 3.1 as well.**
+* Compass now depends on ChunkyPNG, a pure-ruby library for generating PNG files.
+* The FSSM library that used to be vendored is now upgraded and a normal gem dependency.
+  If you don't know what this means, then you don't need to care :)
+
+### New Sass Features
+
+Sass 3.1 brings a ton of great new features that Compass now uses and you can too!
+
+* Proper List Support. Space and Comma separated lists used to cause values to become strings when passing them to mixins. Now the values in lists are preserved as their original types.
+* Sass-based Functions. Define your own value functions and use them anywhere.
+* Keyword Style Argument passing to Functions and Mixins. It can be hard to understand what
+  the values being passed to a mixin or function are for, use keyword style arguments to
+  make it easier to understand what's going on.
+* `@media` bubbling. Use a media declaration anywhere and it will be bubbled to the top level
+  for you.
+
+For more information about the new Sass features, see the [Sass CHANGELOG](http://sass-lang.com/docs/yardoc/file.SASS_CHANGELOG.html).
 
 ### Blueprint
 
@@ -61,8 +142,26 @@ Note: Compass does not currently support Sass 3.1 alphas.
   * If for some reason you'd like to stay on the older version of blueprint you can run
     the following command in your project before you upgrade (or after temporarily downgrading):
     `compass unpack blueprint`
+* [Blueprint] Blueprint no longer adds `!important` to the widths of `input`, `textarea`,
+  and `select` form fields, so compass no longer defaults to using `!important` in those cases.
+  If you were relying on this behavior, you may need to adjust your stylesheets accordingly.
+* [Blueprint] Added a new sass function called span($n) to the grid module which replaces
+  the now **deprecated span mixin**. If you are using this mixin, please replace it with:
+  `width: span($n)`.
 
-### CSS3 v2.0
+### Spriting Support
+
+* Compass now has a world-class spriting system after merging with [Lemonade][lemonade].
+  See the [spriting tutorial](/help/tutorials/spriting/) for more information.
+* The [old sprite module](/reference/compass/utilities/sprites/sprite_img/) is still available
+  for working with hand-generated sprite maps.
+* The Sprite internals are abstracted allowing for different engines. By default
+  compass uses ChunkyPNG which only supports PNG files, so some users might prefer
+  ImageMagic which is available via a [plugin](#XXXLINKME).
+* [Magic Selectors](/help/tutorials/spriting/#magic-selectors) make it simple to define
+  sprites that work with user interaction pseudo classes like `:hover`, `:active`, etc.
+
+### CSS3 Module v2.0
 
 Our CSS3 module makes writing CSS3 today almost as easy as it will be when all
 the browsers officially support the new features. The second version of the
@@ -70,30 +169,39 @@ compass CSS module brings the API up to date with developments over the past
 6 to 9 months of browser changes and more closely matching the most recent CSS
 specifications. [Upgrade guide](/help/tutorials/upgrading/antares/). Summary of changes.
 
-* Support for multiple box shadows and text shadows
-* Support for 2d and 3d transforms
-* Opt-in SVG support for gradients in opera and IE9.
-  Set `$experimental-support-for-svg : true` in your
+* Support for multiple [box shadows](/reference/compass/css3/box_shadow/)
+  and multiple [text shadows](/reference/compass/css3/text-shadow/)
+* Support for [2d and 3d transforms](/reference/compass/css3/transform/)
+* Opt-in [SVG support](/reference/compass/support/#const-experimental-support-for-svg)
+  for gradients in opera and IE9. Set `$experimental-support-for-svg : true` in your
   stylesheet to enable it.
-* Fixed a radial gradient position bug.
 * To generate a simple linear gradient in IE6 & 7, you can now use
-  the `filter-gradient` mixin.
-* New `background-image` mixin with gradient support and allowing
-  up to 10 images.
-* Gradient support for the border-image property.
-* Gradient support for list-style-image property.
-* Gradient support for the content property.
+  the [filter-gradient mixin](/reference/compass/css3/images/#mixin-filter-gradient).
+* New [images module](/reference/compass/css3/images/) makes gradients simple for
+  all properties that support them using the CSS3 standard syntax.
+* Compass now has opt-in support for the CSS3 PIE library. [Docs](/reference/compass/css3/pie/).
+* Added optional support for IE8 with `$legacy-support-for-ie8` which defaults to true.
+* Updated the `opacity` and `filter-gradient` mixins to make IE's hacky DirectX filters
+  optional based on Compass's legacy support settings.
+* A new CSS3 mixin for [appearance](/reference/compass/css3/appearance/) was added.
+* The font-face mixin has been updated again with the [syntax recommendations
+  from font-spring](http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax).
+  The API has not changed.
+* Added support for the new webkit gradient syntax that matches the css3 specification.
+  Support for older webkit browsers remains enabled at this time.
+  To disable it, set `$support-for-original-webkit-gradients` to false.
 
-### Helpers
+### Helper Functions
 
 * `linear-gradient()` & `radial-gradient()` helpers now intercept standard css
   functions and parse them into Sass Literals. These work with new vendor helpers
-  (`-moz()`, `-webkit`, `-o`, `-ie`, and `-svg` (yes I know svg is not a vendor))
+  (`-moz()`, `-webkit`, `-o`, `-ie`, and `-svg` (yes, we know svg is not a vendor))
   to return specific representations of the linear & radial gradients. The
   `prefixed()` function will check a value to see if it has a certain
   vendor-specific representation.
-* New color helpers: `adjust-lightness`, `adjust-saturation`, `scale-lightness`, and `scale-saturation`
-  make it easier to construct apis that manipulate these color attributes.
+* New color helpers: `adjust-lightness`, `adjust-saturation`, `scale-lightness`,
+  and `scale-saturation` make it easier to construct apis that manipulate these
+  color attributes.
 * The `elements-of-type()` helper now returns html5 elements when the display is `block`
   and also will return only html5 elements for `elements-of-type(html5)`
 * Compass now provides several helper functions related to trigonometry.
@@ -104,29 +212,68 @@ specifications. [Upgrade guide](/help/tutorials/upgrading/antares/). Summary of
   * `tan($number)` - Takes the tangent of the number.
   * `pi()` - Returns the value of π.
   If you provide a number with units of `deg` then it will return a unitless number
-  after converting to radians. Otherwise, it assumes the number is a radian length measure
-  and passes the units along to the result.
+  after converting to radians. Otherwise, it assumes the number is a radian length
+  measure and passes the units along to the result.
 * `ie-hex-str($color)` returns a #AARRGGBB formatted color suitable for
   passing to IE filters.
-* A new function `if()` that allows you to switch on a value without using `@if`.
-  Usage: `if($truth-value, $value-if-true, $value-if-false)`.
-* Compass has added a number of new helper functions for lists that begin with
-  `-compass`, helpers that begin with `-compass` should be considered "private" and
-  are not to be used by compass users. Sass 3.1 will have proper list support,
-  these are a work around until that time.
+* Compass has added a number of new helper functions that begin with
+  `-compass`, helpers that begin with `-compass` should be considered "private"
+  and are not to be used.
+* A third argument is now available on the `image-url()` helper. When `true` or
+  `false`, it will enable/disable the cache buster for a single image url. Or when
+  a string, will be the cache buster value that is used.
 
-### Configuration
+### Configuration Files
 
 * Added a new configuration property to disable sass warnings: `disable_warnings`
+* New infrastructure for supporting experimental css3 functions that are prefixed but have
+  the same syntax across all browsers. It is now possible to configure which browsers
+  support which experimental functions outside of the compass release cycle.
+  For details, see the [cross browser helpers](/reference/compass/helpers/cross-browser/).
+* The options passed to the CLI can now be inspected within the compass configuration file.
+  The CLI options will still override the values set within the config file, but they might
+  inform other values. For instance `compass compile -e production` will have the environment
+  parameter preset to `:production` so that you can set other values in the project accordingly.
+* Added the ability to piggy back on compass's watcher within your configuration file.
+  See the [configuration reference](/help/tutorials/configuration-reference/) for details.
+* You can now register callbacks for compilation events so that you can take
+  custom actions when they occur. For instance, you might want to notify
+  Growl when a stylesheet compilation error occurs.
 
-### Core Framework
+### New Compass Typography Module
+
+* Some text-based mixins have been moved from utilities to the new
+  typography module. The old imports are deprecated now.
+  Affected modules: `utilities/links`, `utilities/lists`, and `utilities/text` and
+  their sub-modules.
+* There is a new typography module:
+  [Vertical Rhythm](/reference/compass/typography/vertical_rhythm/).
+  This makes it easier to align the typography of your page to a common rhythm.
+
+### Compass Layout Module
 
 * New layout mixins for absolute positioning: stretch, stretch-x, stretch-y
+* There is a new mixin for creating
+  [pure-css grid backgrounds](/reference/compass/layout/grid_background/)
+  for verifying grid alignment for both fixed and fluid grids.
+
+### Compass Utilities
+
+* A new mixin `reset-float` is available in the [float module](/reference/compass/utilities/general/float/#mixin-reset-float) that makes it easier to reset the floats introduced from that module.
+* A new module has been added to create readable text against an arbitrary background color based on the lightness of the background: [compass/utilities/color/contrast](/reference/compass/utilities/color/contrast/).
+* The comma-delimited-list has been renamed to delimited-list and
+  generalized to accept a delimiter which defaults to a comma.
+  The old function continues to exist, but is deprecated.
+
+### Command Line
+
+* Add a `--time` option to the compile and watch commands. This will print out
+  the time spent compiling each sass file and a total at the end.
 
 ### Rails
 
 * In rails 3, there's no need for an initializer. Instead we use a
-  Railstie.
+  Railtie. If you have one, please remove it.
 * We now default to app/stylesheets for sass files and public/stylesheets for
   css files -- though they can still be changed after installation or on the
   command line during project initialization.
@@ -134,6 +281,20 @@ specifications. [Upgrade guide](/help/tutorials/upgrading/antares/). Summary of
 * In a rails3 environment the compass configuration can now be
   changed without restarting the rails server process.
 
+### Extensions
+
+* Compass now allows ERB processing of non all non-binary filetypes during
+  extension installs.
+* Extensions that are installed into `~/.compass/extensions` will be automatically
+  available to all your compass projects.
+* Created an official API to add configuration options to compass.
+  [More information](/help/tutorials/extending/).
+
+### Miscellaneous
+
+* We have a new website design from [Brandon Mathis][brandon]
+* Compass now officially supports the following ruby interpreters:
+  jruby, ruby 1.8.7, ruby 1.9.2, ree, and rubinius.
 
 0.10.7 (UNRELEASED)
 -------------------
@@ -211,7 +372,7 @@ This will update your compass initializer file.
 * New helper `opposite-position($position)` returns the opposite value of a position. [Documentation](http://compass-style.org/reference/compass/helpers/constants/)
 * Allow horizontal lists to be floated to the right.
 * Bugfix for inline-font-files helper.
-* `+font-face` mixin no longer uses `$postscript` name or `$style` type variables, in favor of the Paul Irish [smiley bulletproof technique](http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/). Older declarations will still work, but will not apply the variables and will display a deprecation warning. 
+* `+font-face` mixin no longer uses `$postscript` name or `$style` type variables, in favor of the Paul Irish [smiley bulletproof technique](http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/). Older declarations will still work, but will not apply the variables and will display a deprecation warning.
 * `+box-shadow` now supports `$spread` length and `$inset` declarations.
 * The gradient mixins output official w3c declarations along with the `-webkit` and `-moz` prefixed versions. The official code is based on the w3c spec and is nearly ideantical to the mozilla version, although it is currently not supported by any browser.
 * `+opacity` no longer uses any prefixed variations, as IE uses `filter` and
@@ -995,6 +1156,8 @@ Almost definitely. Please let me know if you encounter any problems and I'll get
 [der-rich]: http://github.com/der-rich
 [adamstac]: http://github.com/adamstac
 [ttilley]: http://github.com/ttilley
-[inline-block-list]: http://compass-style.org/reference/compass/utilities/lists/inline-block-list/
+[inline-block-list]: http://compass-style.org/reference/compass/typography/lists/inline-block-list/
 [html5-reset]: http://compass-style.org/reference/compass/reset/utilities/#mixin-reset-html5
-[blueprint_10_change]: https://github.com/chriseppstein/compass/compare/a05e1ee7c0a1e4c0f0595a8bb812daa47872e476...864780969d872a93b1fd3b4f39f29dd9f0c3fe75
+[blueprint_10_change]: https://github.com/chriseppstein/compass/compare/a05e1ee7c0a1e4c0f0595a8bb812daa47872e476...864780969d872a93b1fd3b4f39f29dd9f0c3fe75
+[brandon]: http://brandonmathis.com/
+[lemonade]: http://www.hagenburger.net/BLOG/Lemonade-CSS-Sprites-for-Sass-Compass.html

doc-src/content/blog.haml

@@ -0,0 +1,14 @@
+---
+layout: blog
+---
+%h1 Compass Blog
+
+- for post in blog_posts_in_order.reverse
+  .post-snippet
+    %h2
+      - time = blog_date(post)
+      %span.timestamp= time.strftime("%Y/%m/%d")
+      %a{:href => post.rep_named(:default).path}= post[:title]
+    %p= post[:intro] || post[:description]
+  
+    

doc-src/content/blog/archive.haml

@@ -0,0 +1,14 @@
+---
+layout: blog
+---
+%h1 Compass Blog Archive
+
+- for post in blog_posts_in_order.reverse
+  .post-snippet
+    %h2
+      - time = blog_date(post)
+      %span.timestamp= time.strftime("%Y/%m/%d")
+      %a{:href => post.rep_named(:default).path}= post[:title]
+    %p= post[:intro] || post[:description]
+  
+    

doc-src/content/blog/atom.haml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+%feed(xmlns="http://www.w3.org/2005/Atom")
+  %title Compass Blog
+  %link(href="http://compass-style.org/blog/atom.xml" rel="self")
+  %link(href="http://compass-style.org/blog/")
+  %updated= Time.now.xmlschema
+  %id http://compass-style.org/blog/
+  %author
+    %name Compass Core Team
+  - for post in blog_posts_in_order.reverse
+    - full_url = "http://compass-style.org#{post.rep_named(:default).path}"
+    %entry
+      %title&= post[:title]
+      %link{:href=> full_url}
+      %updated= blog_date(post).localtime.xmlschema
+      %id= full_url[0..-2]
+      %content(type="html")
+        = post[:intro] || post[:description]
+

doc-src/content/examples/compass/css3/background-clip/stylesheet.sass

@@ -5,7 +5,7 @@
     background-color: blue
     border: 10px solid rgba(255, 0, 0, 0.5)
     color: white
-    +text-shadow(darken(#00f, 50%), 2px, 2px)
+    +text-shadow(darken(#00f, 50%) 2px 2px)
     padding: 3px
     text-align: center
     margin-bottom: 2em

doc-src/content/examples/compass/css3/background-origin/stylesheet.sass

@@ -9,7 +9,7 @@
       position: top left
     border: 10px solid rgba(255, 0, 0, 0.5)
     color: white
-    +text-shadow(darken(#00f, 50%), 2px, 2px)
+    +text-shadow(darken(#00f, 50%) 2px 2px)
     padding: 1em
     text-align: center
     margin-bottom: 2em
@@ -18,4 +18,4 @@
   #border-box
     +background-origin(border-box)
   #content-box
-    +background-origin(content-box)
+    +background-origin(content-box)

doc-src/content/examples/compass/css3/background-size/stylesheet.sass

@@ -9,7 +9,7 @@
       position: top left
     border: 10px solid rgba(255, 0, 0, 0.5)
     color: black
-    +text-shadow(#fff, 1px, 1px, 4px)
+    +text-shadow(#fff 1px 1px 4px)
     padding: 1em
     text-align: center
     margin-bottom: 2em
@@ -22,4 +22,4 @@
   #percent
     +background-size(50% 50%)
   #absolute
-    +background-size(100px 25px)
+    +background-size(100px 25px)

doc-src/content/examples/compass/css3/box_shadow/markup.haml

@@ -1,3 +1,4 @@
-#box-shadow-default.box-shadow-example
-
-#box-shadow-custom.box-shadow-example
+.box-shadow-example
+  #box-shadow-default
+  #box-shadow-custom
+  #box-shadow-custom-multiple

doc-src/content/examples/compass/css3/box_shadow/stylesheet.sass

@@ -1,15 +1,19 @@
 @import compass/css3
 
-.box-shadow-example
+.box-shadow-example div
   width: 40px
   height: 40px
   background: #EEE
   margin: 20px
+  float: left
 
-// Default box shadow
+// Default single box shadow
 #box-shadow-default
-  +box-shadow
+  +single-box-shadow
 
 // Box shadow with custom settings
 #box-shadow-custom
-  +box-shadow(red, 2px, 2px, 10px)
+  +box-shadow(red 2px 2px 10px)
+
+#box-shadow-custom-multiple
+  +box-shadow(rgba(blue, .4) 0 0 25px, rgba(green, .2) 0 0 3px 1px inset)

doc-src/content/examples/compass/css3/font-face/markup.haml

@@ -1,3 +1,2 @@
 .example
-  %h1 The Quick Brown Fox
-  %p Jumped over the log.
+  %p The Quick Brown Fox jumped over the lazy dog.

doc-src/content/examples/compass/css3/font-face/stylesheet.sass

@@ -4,4 +4,4 @@
 
 .example
   font-family: "Blooming Grove"
-  padding: 1em
+  font-size: 1.5em

doc-src/content/examples/compass/css3/gradient.haml

@@ -1,8 +1,8 @@
 ---
-title: Gradient
+title: Background Gradients
 description: css3 mixin for css gradients
 framework: compass
-stylesheet: compass/css3/_gradient.scss
+stylesheet: compass/css3/_images.scss
 example: true
 ---
 = render "partials/example"

doc-src/content/examples/compass/css3/gradient/stylesheet.sass

@@ -14,30 +14,30 @@
 
 // This will yield a radial gradient with an apparent specular highlight  
 #radial-gradient
-  +radial-gradient(color-stops(#00FFFF 10px, #1E90FF 30px), 45 45)
+  +background-image(radial-gradient(45px 45px, #0ff 10px, #1e90ff 30px))
 
 // This yields a linear gradient spanning from the upper left corner to the lower right corner
 #linear-gradient
-  +linear-gradient(color-stops(#fff, #ddd), left top)
+  +background-image(linear-gradient(left top, #fff, #ddd))
 
 // This yields a gradient starting at the top with #fff, ending in #aaa  
 #v-gradient
-  +linear-gradient(color-stops(#fff, #aaa))
+  +background-image(linear-gradient(#fff, #aaa))
 
 // Same as above but with a #ccc at the halfway point  
 #v-gradient-2
-  +linear-gradient(color-stops(#fff, #ccc, #aaa))
+  +background-image(linear-gradient(#fff, #ccc, #aaa))
 
 // Same as the first example but with #ccc at the 30% from the top, and #bbb at 70% from the top  
 #v-gradient-3
-  +linear-gradient(color-stops(#fff, #ccc 30%, #bbb 70%, #aaa))
+  +background-image(linear-gradient(#fff, #ccc 30%, #bbb 70%, #aaa))
 
 // This yields a horizontal linear gradient spanning from left to right.
 #h-gradient
-  +linear-gradient(color-stops(#fff, #ddd), left)
+  +background-image(linear-gradient(left, #fff, #ddd))
 
 #svg-gradient
   $experimental-support-for-svg: true
-  +linear-gradient(color-stops(#2AC363, #CD8C14, #9C4CC2), left)
+  +background-image(linear-gradient(left, #2ac363, #cd8c14, #9c4cc2))
   width: 80px
   height: 80px

doc-src/content/examples/compass/css3/inline_block/markup.haml

@@ -1,3 +1,3 @@
 %p
-    this is an
-    %span(id="inline-block") inline block
+  this is an
+  %span(id="inline-block") inline block

doc-src/content/examples/compass/css3/opacity/markup.haml

@@ -1,9 +1,5 @@
 #opacity-10.opacity-example
-
 #opacity-20.opacity-example
-
 #opacity-50.opacity-example
-
 #opaque.opacity-example
-
-#transparent.opacity-example
+#transparent.opacity-example

doc-src/content/examples/compass/css3/text_shadow/markup.haml

@@ -1,8 +1,3 @@
-#p
-    this text has no shadow
-
-#p
-    %span(class="has-shadow") this text has a shadow
-
-#p
-    %span(class="has-custom-shadow") this text has a custom shadow
+%div this text has no shadow
+.has-single-shadow this text has a shadow
+.has-custom-shadow this text has a custom shadow

doc-src/content/examples/compass/css3/text_shadow/stylesheet.sass

@@ -1,7 +1,13 @@
+$default-text-shadow-color: rgba(red, .6)
+$default-text-shadow-blur: 3px
+$default-text-shadow-v-offset: 1px
+
 @import compass/css3
 
-.has-shadow
-  +text-shadow
+// Uses defaults set before the import above
+.has-single-shadow
+  +single-text-shadow
 
+// Can output up to ten text shadows
 .has-custom-shadow
-  +text-shadow(red, 3px, 3px, 0)
+  +text-shadow(rgba(blue, .2) 1px 1px 0, rgba(blue, .2) 2px 2px 0, rgba(blue, .2) 3px 3px 0)

doc-src/content/examples/compass/layout/stretching/markup.haml

@@ -1,17 +1,30 @@
 .example
-  Click on the the following links to make them stretch.
-  Click <a href="#">here</a> to dismiss it.
-  #stretch-container
-    %ul
-      %li
-        %a#stretch-full(href="#stretch-full")
-          This element is fully stretched.
-      %li
-        %a#stretch-offset(href="#stretch-offset")
-          This element is stretched with a 1em offset on each side.
-      %li
-        %a#stretch-x(href="#stretch-x")
-          This element is stretched horizontally.
-      %li
-        %a#stretch-y(href="#stretch-y")
-          This element is stretched vertically.
+  %ul
+    %li.stretch-container
+      #stretch-full
+        This element is fully stretched.
+    %li.stretch-container
+      #stretch-offset
+        This element is stretched with a 1em offset on each side.
+    %li.stretch-container
+      #stretch-x
+        This
+        %br
+        element
+        %br
+        is
+        %br
+        stretched
+        %br
+        horizontally.
+    %li.stretch-container
+      #stretch-y
+        This
+        %br
+        element
+        %br
+        is
+        %br
+        stretched
+        %br
+        vertically.

doc-src/content/examples/compass/layout/stretching/stylesheet.sass

@@ -1,29 +1,32 @@
 @import "compass/layout/stretching"
+@import "compass/utilities"
 @import "compass/css3"
 
-#stretch-container
+.stretch-container
   border: 1px solid #999
-  min-width: 200px
-  min-height: 200px
+  width: 200px
+  height: 200px
   position: relative
+  +inline-block
 .stretched
   $stretch-color: #4C6B99
   border: 3px solid $stretch-color
   +border-radius(8px)
   display: block
   background-color: darken($stretch-color, 30%)
+  color: white
   text-align: center
   vertical-align: middle
-  padding: 2em 0
-#stretch-full:target
+  padding: 0.5em
+#stretch-full
   @extend .stretched
   +stretch
-#stretch-offset:target
+#stretch-offset
   @extend .stretched
   +stretch(1em, 1em, 1em, 1em)
-#stretch-x:target
+#stretch-x
   @extend .stretched
   +stretch-x
-#stretch-y:target
+#stretch-y
   @extend .stretched
   +stretch-y

doc-src/content/examples/compass/utilities/contrast.haml

@@ -0,0 +1,8 @@
+---
+title: Compass Contrast Color Example
+description: Make text readable
+framework: compass
+stylesheet: compass/utilities/color/_contrast.scss
+example: true
+---
+= render "partials/example"

doc-src/content/examples/compass/utilities/contrast/markup.haml

@@ -0,0 +1,3 @@
+.example
+  %p.dark This is a paragraph with a <em>dark</em> background and <em>light</em> text.
+  %p.light This is a paragraph with a <em>light</em> background and <em>dark</em> text.

doc-src/content/examples/compass/utilities/contrast/stylesheet.sass

@@ -0,0 +1,11 @@
+$contrasted-dark-default:  #333
+$contrasted-light-default: #e7e7e7
+
+@import "compass/utilities/color/contrast"
+
+.example
+  p.dark
+    +contrasted(#5F1210)
+  p.light
+    +contrasted(#C82523)
+

doc-src/content/frameworks.haml

@@ -152,7 +152,7 @@ crumb: Plugins and frameworks
   Sass Libraries
 %p
   Libraries are simply Sass stylesheets or
-  %a{ :href => "http://sass-lang.com/yardoc/file.SASS_REFERENCE.html#partials" }
+  %a{ :href => "http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#partials" }
     partials
   \.
 %ul

doc-src/content/get-involved/index.haml

@@ -0,0 +1,33 @@
+---
+title: Get involved with the Compass community
+crumb: Get Involved
+classnames:
+  - get-involved
+layout: default
+---
+
+%h1 Get Involved With Compass
+
+:markdown
+
+  Many [wonderful people](https://github.com/chriseppstein/compass/contributors) have helped to make Compass awesome.
+  Here are some ways you can get involved with the Compass community.
+
+  ## Share Sweet Stylesheets
+
+  So you've written some smashing Sass and you want to share them with others. Here are some ways you can.
+
+  1. [**Contribute to Compass**](/help/tutorials/contributing).
+  2. [**Develop a Compass Extension**](/help/tutorials/extensions).
+  3. [**Contribute to Sass Recipies**](http://chriseppstein.github.com/sass-recipes/).
+  4. Publish your code somewhere and email a link to the [mailing list](http://groups.google.com/group/compass-users).
+
+  ## Help Others
+
+  Join the [mailing list](http://groups.google.com/group/compass-users) and help answer questions and share from your experience. If you're
+  writing a blog post about Sass or Compass send a link to the mailing list and we'll help you spread the word.
+
+  ## Give Financially
+
+  Compass is charityware. You can use it as much as you like, but we encourage you to make a donation to help the [UMDF](http://umdf.org/)
+  find a cure for mitochondrial disease. If you can, please [donate here](http://umdf.org/compass/). Thanks!

doc-src/content/help/index.haml

@@ -3,65 +3,59 @@ title: Compass Help
 crumb: Help
 classnames:
   - help
-layout: main
+  - getting-started
+layout: site
 ---
 %article
-  %h1#logo Compass
+  %h1 Getting started with Compass
 
   :markdown
-    Compass is a stylesheet authoring tool that uses the Sass stylesheet
-    language to make your stylesheets smaller and your web site easier to
-    maintain. Compass provides ports of the best of breed css frameworks
-    that you can use without forcing you to use their presentational class
-    names. It’s a new way of thinking about stylesheets that must be seen
-    in action!
-    
-    <object width="700" height="438"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=11671458&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=11671458&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="700" height="438"></embed></object><p><a href="http://vimeo.com/11671458">An introduction to Compass</a> from <a href="http://vimeo.com/ltackett">Lorin Tackett</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
-    
-    ## Installing
-    
-    Compass is a tool that runs on the command line.
-    
-    On any system with ruby installed, open your terminal and type:
-    
+    Compass is an open-source CSS authoring framework which uses the [Sass stylesheet
+    language](http://sass-lang.com) to make writing stylesheets powerful and easy. If you're
+    not familiar with Sass, you can take a look at [these simple tutorials](http://sass-lang.com/tutorial.html)
+    to get caught up.
+
+  <object width="700" height="438"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=11671458&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=11671458&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="700" height="438"></embed></object><p><a href="http://vimeo.com/11671458">An introduction to Compass</a> from <a href="http://vimeo.com/ltackett">Lorin Tackett</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
+
+  :markdown
+    ## Installing Compass
+
+    Compass is a tool that runs on the command line. On any system with ruby installed, open your terminal and type:
+
         gem install compass
-    
-    This will install Compass and Sass too. Verify that compass is installed:
-    
+
+    This will install Compass and Sass too. If you want to verify that compass is installed:
+
         compass version
-    
-    ## Creating a stand-alone project
-    
-        compass create myproject
-        mate myproject
-        compass watch myproject
-    
-    If you don't have TextMate, substitute the `mate myproject` part with the text
-    editor of your choice. Edit the `*.scss` files in the `sass` directory.
-    These files are yours and you can change them as you see fit, delete them,
-    make new ones, etc. Compass will automatically compile them into css in the
-    `stylesheets` directory whenever they change.
-    
-    ## Rails Support
-    
-        compass init rails /path/to/myrailsproject
-    
-    ## Installing a framework
-    
-    When creating a new project:
-    
-        compass create myproject --using blueprint/basic
-    
+
+    ## Manual Setup
+
+        compass create /path/to/project
+        cd /path/to/project
+        compass watch
+
+    Now you can edit the `*.scss` files in the `sass` directory with the text editor of your choice.
+    the `compass watch` process will automatically compile your them into css in the stylesheets directory whenever they change.
+    The files in the `sass` directory are yours and you can change them, delete them, add new ones, etc.
+
+    ## Manual setup using the Blueprint Framework
+
+    When starting a project from scratch:
+
+        compass create /path/to/project --using blueprint
+
     When installing into an existing project:
-    
-        cd myproject
-        compass install blueprint/semantic
-    
-    With Rails:
-    
-        compass init rails /path/to/myrailsproject --using blueprint/semantic
-    
-    ## Bugs Reports, Discussions, Support
-    
-    Send a note to the [mailing list](http://groups.google.com/group/compass-users)
-    and/or [File a bug](http://github.com/chriseppstein/compass/issues).
+
+        cd /path/to/project
+        compass install blueprint
+
+    To read more about using the Blueprint framework with Compass, [see the docs](/reference/blueprint/)
+
+    ## Rails Setup
+
+        compass init rails /path/to/myrailsproject
+
+    Using Blueprint with Rails:
+
+        compass init rails /path/to/myrailsproject --using blueprint
+

doc-src/content/help/tutorials.haml

@@ -7,6 +7,15 @@ layout: tutorial
 ---
 %h1 Compass Tutorials
 
-%p
-  The compass tutorials are still a Work-in-progress, but
-  what we have is available for you to peruse.
+:markdown
+  These tutorials are still a work-in-progress, if you have questions that aren't covered here let us know on the [Compass users mailing list](http://groups.google.com/group/compass-users) where there are lots of
+  friendly Compass users standing by to help you out.
+
+  ## New to Compass?
+
+  If you're new to Compass, you might be interested in [best practices](/help/tutorials/best_practices/), the [configuration reference](/help/tutorials/configuration-reference/), [configurable variables](/help/tutorials/configurable-variables/),
+  or the [command line documentation](/help/tutorials/command-line/).
+
+  ## Want to contribute?
+
+  If you've been using Compass for a while and you'd like to give back, check out the tutorials on [contributing](/help/tutorials/contributing/) and [creating extensions](/help/tutorials/extensions/).

doc-src/content/help/tutorials/best_practices.markdown

@@ -5,22 +5,28 @@ layout: tutorial
 classnames:
   - tutorial
 ---
-### Use a Base stylesheet file
+
+# Best Practices
+
+Here are some best practices for making your projects easier to build and
+simpler to maintain.
+
+## Use a Base stylesheet file
 
 Create a `_base.scss` [partial][1] to initialize your stylesheets with common
 variables and ([often][2]) the framework utilities you plan to use:
 
-#### _base.scss
+### _base.scss
 
     $blueprint-grid-columns : 24;
     $blueprint-grid-width   : 30px;
     $blueprint-grid-margin  : 10px;
     $font-color             : #333;
-     
+
     @import "compass/reset";
     @import "compass/utilities";
     @import "blueprint";
-     
+
     // etc.
 
 The `_base.scss` file is also a great place to keep your own custom mixins, so
@@ -28,14 +34,14 @@ they’re available to any stylesheet that includes it.
 
 Then you can include this file in all other stylesheets:
 
-#### application.scss
+### application.scss
 
     @import "base";
-     
+
     #wrapper {
       @include container;
     }
-    
+
     // etc.
 
 It is important to define any compass/framework constants that you want to override
@@ -44,7 +50,7 @@ Constants][3] , for an example of where the number of grid columns for blueprint
 is overridden/set to 32.  Note that you can refer to `_base.scss` without the
 leading underscore and without the extension, since it is a [partial][1].
 
-### Write your own Custom Mixins
+## Write your own Custom Mixins
 
 Mixins let you insert any number of style rules into a selector (and its
 descendants!) with a single line. This is a great way to [DRY][4] up your
@@ -53,7 +59,7 @@ also make your stylesheet look like self-documented source code -- It’s much
 more obvious to read something like `@include round-corners(6px, #f00)` than the whole
 list of rules which define that appearance.
 
-#### Presentation-free Markup
+## Presentation-free Markup
 
 CSS was created to extract the presentational concerns of a website from the
 webpage content. Following this best practice theoretically results in a website
@@ -87,7 +93,7 @@ Instead, ask yourself "what non-presentational quality do these pages share in
 common?" In this case, they are all pages of content, so it's better to apply a
 body class of "content" to these pages and then style against that class.
 
-#### Nest selectors, but not too much.
+## Nest selectors, but not too much.
 
 It's easier to style a webpage from scratch or starting from some common base
 point for your application than it is to contend with unwanted styles bleeding

doc-src/content/help/tutorials/blueprint.haml

@@ -22,8 +22,8 @@ classnames:
   Once you get Compass installed, you are ready to create a new
   blueprint project. In your terminal enter the following commands:
 
-  %code.shell
-    %pre
+  %pre.shell
+    %code
       %span.prompt<> $&nbsp;
       compass create my_project --using blueprint/semantic
       %br>
@@ -46,16 +46,16 @@ classnames:
   If you want to get started with the Basic Template because it feels
   more familiar to you, that's fine. It's very easy to transition to
   <a href="#semantic-blueprint">semantic selectors</a> when you're ready.
-  
+
 
 %h2 Getting Started with Basic Blueprint
 
 %p
   Once you get Compass installed, you are ready to create a new
   blueprint project. In your terminal enter the following commands:
-  
-  %code.shell
-    %pre
+
+  %pre.shell
+    %code
       %span.prompt<> $&nbsp;
       compass create my_project --using blueprint/basic
 

doc-src/content/help/tutorials/configuration-reference.markdown

@@ -9,7 +9,7 @@ classnames:
 The compass configuration file is a ruby file, which means that we can do some
 clever things if we want to. But don’t let it frighten you; it’s really quite
 easy to set up your project.
-
+<a name="basic-format"></a>
 ## Basic format
 
 Most configuration properties are a simple assignment to a configuration property.
@@ -35,11 +35,12 @@ There are two kinds of composite values:
   It is a comma delimited list of associations surrounded by curly brackets.
   An association is two values separated by `=>`. E.g. `{:foo => "aaa", :bar => "zzz"}`
 
+<a name="comments"></a>
 ## Comments
 
 Use the hash sign `#` to comment out everything from the hash sign to the end
 of the line.
-
+<a name="import-note-windows-users"></a>
 ## Import Note for Windows Users
 
 The backslash character (`\`) is a special character in a string delimited by
@@ -47,6 +48,7 @@ double quotes (`"`). If you are working with folders in your paths, you should
 either use **single quotes** to delimit your strings or escape your backslash
 by doubling it like `"some\\path"`.
 
+<a name="loading-compass-plugins"></a>
 ## Loading Compass Plugins
 
 Compass relies on the ruby `require` mechanism to load other libraries of code.
@@ -59,11 +61,28 @@ Example:
     require 'ninesixty'
     require 'susy'
 
+<a name="overriding-configuration-settings"></a>
 ## Overriding Configuration Settings
 
 When using the compass command line, configuration options that you set on the
 command line will override the corresponding settings in your configuration file.
 
+<a name="inspecting-configuration-settings-passed-via-the-command-line"></a>
+## Inspecting Configuration Settings passed via the Command Line
+
+When using the compass command line, configuration options that you set on the
+command line can be inspected within the configuration file. For instance,
+if you set the environment:
+
+    $ compass compile -e production --force
+
+Then you can inspect the value like so:
+
+    output_style = (environment == :production) ? :compressed : :expanded
+
+Values that are not set on the CLI will be `nil` even though they will have a default value
+later on.
+<a name="configuration-properties"></a>
 ## Configuration Properties
 
 <table>
@@ -202,13 +221,13 @@ command line will override the corresponding settings in your configuration file
       approach.
     </td>
   </tr>
-  <tr> 
-    <td style="vertical-align:top;"><code>disable_warnings</code> </td> 
-    <td style="vertical-align:top;">Boolean </td> 
+  <tr>
+    <td style="vertical-align:top;"><code>disable_warnings</code> </td>
+    <td style="vertical-align:top;">Boolean </td>
     <td style="vertical-align:top;">
       Set this to true to silence deprecation warnings.
-    </td> 
-  </tr> 
+    </td>
+  </tr>
   <tr>
     <td style="vertical-align:top;"><code>sass_options</code> </td>
     <td style="vertical-align:top;">Hash </td>
@@ -256,8 +275,21 @@ command line will override the corresponding settings in your configuration file
     <td style="vertical-align:top;">String </td>
     <td style="vertical-align:top;">The relative http path to font files on the web server.</td>
   </tr>
+  <tr>
+    <td style="vertical-align:top;"><code>sprite_engine</code> </td>
+    <td style="vertical-align:top;">Symbol </td>
+    <td style="vertical-align:top;">Defaults to <code>:chunky_png</code></td>
+  </tr>
+  <tr>
+    <td style="vertical-align:top;"><code>chunky_png_options</code></td>
+    <td style="vertical-align:top;">Hash </td>
+    <td style="vertical-align:top;">
+      Defaults to <code>{:compression => Zlib::BEST_COMPRESSION}</code>. See the chunky_png <a href='https://github.com/wvanbergen/chunky_png/wiki/Constraints' _target='blank'>wiki</a> for more information
+    </td>
+  </tr>
 </table>
 
+<a name="configuration-functions"></a>
 ## Configuration Functions
 
 **`add_import_path`** – Call this function to add a path to the list of sass import
@@ -282,10 +314,14 @@ the asset host configuration is ignored.
 
 ---
 
+<a name="asset-cache-buster"></a>
 **`asset_cache_buster`** – Pass this function a block of code that defines the
-cache buster strategy to be used. The block must return nil or a string that can
-be appended to a url as a query parameter. The returned string must not include
-the starting `?`. The block will be passed the root-relative url of the asset.
+cache buster strategy to be used. The block must return nil, a string or a hash.
+If the returned value is a hash the values of :path and/or :query is used to generate
+a cache busted path to the asset. If a string value is returned, it is added as a query string.
+The returned values for query strings must not include the starting `?`.
+
+The block will be passed the root-relative url of the asset.
 If the block accepts two arguments, it will also be passed a path
 that points to the asset on disk — which may or may not exist.
 
@@ -299,6 +335,65 @@ that points to the asset on disk — which may or may not exist.
       end
     end
 
+Busting the cache via path:
+
+    asset_cache_buster do |path, real_path|
+      if File.exists?(real_path)
+        pathname = Pathname.new(path)
+        modified_time = File.mtime(real_path).strftime("%s")
+        new_path = "%s/%s-%s%s" % [pathname.dirname, pathname.basename(pathname.extname), modified_time, pathname.extname]
+
+        {:path => new_path, :query => nil}
+      end
+    end
+
 To disable the asset cache buster:
 
     asset_cache_buster :none
+
+---
+
+**`watch`** -- React to changes to arbitrary files within your project. Can be invoked
+more than once. Example:
+
+    watch "images/**/*" do |project_dir, relative_path|
+      if File.exists?(File.join(project_dir, relative_path))
+        puts "File size of #{relative_path} is: #{File.size(File.join(project_dir, relative_path))}"
+      end
+    end
+
+This code will be called if the file is added, updated, or removed. Be sure to check for existence
+to avoid crashing the watcher in the case where the file has been removed.
+<a name="callbacks"></a>
+## Callbacks
+
+**`on_sprite_saved`** -- Pass this function a block of code that gets executed after a sprite is saved to disk. The block will be passed the filename. Can be invoked more then once. Example:
+
+    on_sprite_saved do |filename|
+      post_process(filename) if File.exists?(filename)
+    end
+
+**`on_sprite_generated`** -- Pass this function a block of code that gets executed after a sprite is generated but before its saved to disk. The block will be passed an instance of `ChunkyPNG::Image`. Can be invoked more then once. Example:
+
+    on_sprite_generated do |sprite_data|
+      sprite_data.metadata['Caption'] = "This Image is &copy; My Company 2011"
+    end
+
+**`on_stylesheet_saved`** -- Pass this function a block of code that gets executed after a stylesheet is processed. The block will be passed the filename. Can be invoked more then once. Example:
+
+    on_stylesheet_saved do |filename|
+      Growl.notify {
+         self.message "#{File.basename(filename)} updated!"
+         self.icon = '/path/to/success.jpg'
+       }
+    end
+
+**`on_stylesheet_error`** -- Pass this function a block of code that gets executed if a stylesheet has an error while processing. The block will be passed the filename and the error message. Can be invoked more then once. Example:
+
+    on_stylesheet_error do |filename, message|
+      Growl.notify {
+        self.message = "#{File.basename(filename)}: #{message}"
+        self.icon = '/path/to/fail.jpg'
+        sticky!
+      }
+    end

doc-src/content/help/tutorials/contributing.markdown

@@ -34,10 +34,10 @@ Here's some general information about the project you might find useful along th
 
 * [Submitting Patches](#patches)
 * [Project Structure](#project-structure)
-* [Project Architecture](#project-architecture)
-  * [Command Line](#cli-architecture)
-  * [Extensions](#extensions-architecture)
-  * [Configuration](#configuration-architecture)
+<!-- * Project Architecture
+  * [Command Line](/help/tutorials/command-line)
+  * [Extensions](/help/tutorials/extensions)
+  * [Configuration](help/tutorials/configuration-reference) -->
 * [General Philosophy](#project-philosophy)
 * [Stylesheet Conventions](#stylesheet-conventions)
 * [Miscellaneous Stuff](#faq)
@@ -78,7 +78,7 @@ This helps us better understand the patch.
 id in your commit message like so:
 
     Fixed the display of the fizzlebuzz in IE6.
-    
+
     Closes GH-123.
 
 **Step 6**: Verify the fix in as many browsers as you can as well as against your own
@@ -255,7 +255,7 @@ Getting recent changes from the main repo:
    to your `$PATH`, or refer to it directly.
 2. Build and install a gem:
    1. Edit VERSION.yml and add a build indicator like so (**Do not commit this change**):
-      
+
           ---
           :major: 0
           :minor: 10
@@ -267,30 +267,30 @@ Getting recent changes from the main repo:
       what that means, you probably need to add `sudo` to the front.
 3. In a [bundled][bundler] environment, you can configure your gem to use compass
    while you work on it like so:
-   
+
        gem 'compass', :path => "/Users/myusername/some/path/to/compass"
-   
+
    Bundler will perform some sort of charm on ruby to make it work.
 4. Configuring ruby directly. If you're a ruby pro, you probably don't need to be
    told that you can set compass on the load path like so:
-   
+
        export RUBYLIB=/Users/myusername/some/path/to/compass/lib
 
 <h3 id="running-tests">Running Tests</h3>
 
 1. Install development dependencies:
-   
+
        bundle install --binstubs devbin
-   
+
 2. Running core library and stylesheet tests:
-   
+
        rake run_tests
 
 3. Running behavior tests
-   
+
        ./devbin/cucumber
 
-If stylesheet tests fail, the output of the test project is captured in 
+If stylesheet tests fail, the output of the test project is captured in
 `test/fixtures/stylesheets/<project>/saved/` and the error message will report where
 the error was. Here's an example:
 
@@ -333,4 +333,4 @@ a couple of ways you can react:
 [issues]: http://github.com/chriseppstein/compass/issues
 [documentation]: http://github.com/chriseppstein/compass/blob/stable/doc-src/README.markdown
 [bundler]: http://gembundler.com/
-[extensions]: /help/tutorials/extensions/
+[extensions]: /help/tutorials/extensions/

doc-src/content/help/tutorials/extending.markdown

@@ -0,0 +1,74 @@
+---
+title: Extending Compass
+layout: tutorial
+crumb: Extending Compass
+classnames:
+  - tutorial
+---
+
+# Extending Compass
+
+## Sprite engine
+
+The sprite engine is the work horse of sprite generation it's the interface for assembling and writing the image file to disk.
+
+### Requirements
+
+A sprite engine requires two methods `construct_sprite`, and `save(filename)`
+
+Once inside the class you have access to `images` which is a collection of [Compass::SassExtensions::Sprites::Image](http://rdoc.info/github/chriseppstein/compass/dda7c9/Compass/SassExtensions/Sprites/Image)
+
+### Configuration 
+
+To enable your sprite engine from the config file set
+    
+    sprite_engine = :<engine name>
+
+The example below will load `Compass::SassExtension::Sprites::ChunkyPngEngine.new(width, height, images)`
+
+    sprite_engine = :chunky_png
+
+### Class Definition
+
+    module Compass
+      module SassExtensions
+        module Sprites
+          class ChunkyPngEngine < Compass::SassExtensions::Sprites::Engine
+
+            def construct_sprite
+              #do something
+            end    
+        
+            def save(filename)
+              #save file
+            end
+        
+          end
+        end
+      end
+    end
+
+<a name="adding-configuration-properties"></a>
+## Adding Configuration Properties to Compass
+
+To add a new configuration property to Compass:
+
+    Compass::Configuration.add_configuration_property(:foobar, "this is a foobar") do
+      if environment == :production
+        "foo"
+      else
+        "bar"
+      end
+    end
+
+This will do several things:
+
+1. make it possible for users to set the `foobar` configuration property in their
+   configuration file.
+2. Ruby code can read and write the `foobar` attribute from any configuration object.
+3. It will add the comment `# this is a foobar` above the property in the configuration file.
+   A comment is not required, you can simply omit this argument if you like.
+4. The block of code provided allows you to assign a sensible default value according to other
+   settings in the configuration or by using arbitrary code to determine what the value should
+   be. For instance it could read from another configuration file or it could change based on
+   the user's operating system.

doc-src/content/help/tutorials/extensions.markdown

@@ -71,6 +71,10 @@ you can use compass to generate an extension with the following command:
 
 This will create a few basic files and folders to get you started.
 
+If you prefer to use the scss syntax for your extension run the following command instead:
+
+    compass create my_extension --using compass/extension -x scss
+
 Advanced Layout Options
 -----------------------
 
@@ -88,6 +92,7 @@ The compass_init.rb file takes priority, so that extensions that want to work
 differently as compass extensions than they do as normal ruby libraries,
 have a way of targeting compass.
 
+<a name="registration"></a>
 ### Stylesheet and Template Locations
 
 If you'd like to store your stylesheets and/or templates in a non-standard location within your extension,
@@ -105,6 +110,10 @@ template directories are not at the top level, you can just do this instead:
     base_directory  = File.join(File.dirname(__FILE__), '..', 'compass')
     Compass::Frameworks.register('my_extension', :path => base_directory)
 
+### Adding Configuration Options to Compass
+
+For details on how to add new configuration options to compass [read this](/help/tutorials/extending/#adding-configuration-properties).
+
 Conventions to Follow
 ---------------------
 
@@ -241,9 +250,13 @@ design and to get the user started off with working product.
 Distributing Extensions as Ruby Gems
 ------------------------------------
 
-How to build and distribute ruby gems is outside the scope of this document.
-But delivering an extension as a ruby gem makes it easier to manage software
-dependencies, install, and uninstall.
+Rubygems is a flexible, easy-to-use system for distributing ruby software.
+If you have any questions about rubygems, I suggest that you start looking
+for help [here](http://help.rubygems.org/).
+
+The big advantages of using rubygems to distribute your extension is that
+it allows your extension to be a dependency for other projects and that each
+install is versioned, which makes supporting your extension easier.
 
 Tips for Developing Extensions
 ------------------------------
@@ -271,9 +284,17 @@ Before you begin, please ensure you have gem version `1.3.6` or greater. `gem -v
 1. Define your gemspec file at the top of your extension. Here's [an example of
    one](http://github.com/ericam/compass-css-lightbox/blob/master/css-lightbox.gemspec).
    The gemspec should have the same name as your gem.
-2. Build a gem: `gem build my_extension.gemspec`. This will build your gem file and
+2. Register your framework by adding `lib/my_extension.rb` and registering it:
+   
+       require 'compass'
+       extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+       Compass::Frameworks.register('my_extension', :path => extension_path)
+   
+   This is how compass knows where to find your extension's files when a user requires it.
+   For more options, go back up and read about [Stylesheet and Template Locations](#registration).
+3. Build a gem: `gem build my_extension.gemspec`. This will build your gem file and
    add the current version to the name. E.g. `my_extension-0.0.1.gem`
-3. Test your gem by installing it locally: `gem install my_extension-0.0.1.gem`
+4. Test your gem by installing it locally: `gem install my_extension-0.0.1.gem`
 
 ### Releasing a Gem
 

doc-src/content/help/tutorials/integration.markdown

@@ -0,0 +1,83 @@
+---
+title: Application Integration
+layout: tutorial
+crumb: Application Integration
+classnames:
+  - tutorial
+---
+# Application Integration
+
+## Ruby on Rails
+
+### Rails 3
+    compass init rails /path/to/myrailsproject
+### Rails 2.3
+    rake rails:template LOCATION=http://compass-style.org/rails/installer
+    
+## Sinatra
+
+    require 'sinatra'
+    require 'haml'
+    require 'sass'
+    require 'compass'
+
+    configure do
+      Compass.configuration do |config|
+        config.project_path = File.dirname(__FILE__)
+        config.sass_dir = 'views'
+      end
+
+      set :haml, { :format => :html5 }
+      set :sass, Compass.sass_engine_options
+    end
+
+    get '/screen.css' do
+      content_type 'text/css', :charset => 'utf-8'
+      sass :screen
+    end
+
+If you keep your stylesheets in “views/stylesheets/” directory instead of just “views/”, remember to update sass_dir configuration accordingly.
+Check out this [sample compass-sinatra project](http://github.com/chriseppstein/compass-sinatra) to get up and running in no time!
+
+[Sinatra Bootstrap](http://github.com/adamstac/sinatra-bootstrap) - a base Sinatra project with support for Haml, Sass, Compass, jQuery and more.
+
+## Nanoc3
+
+### Minimal integration: just drop it in
+
+One simple route for lightweight integration is to simply install compass inside nanoc. Then edit config.rb to point to the stylesheets you want to use. This means you have to have the Compass watch command running in a separate window from the Nanoc compilation process. 
+
+Example project that works this way: http://github.com/unthinkingly/unthinkingly-blog
+
+### More formal integration
+
+At the top of the Nanoc Rules file, load the Compass configuration, like this:
+
+    require 'compass'
+
+    Compass.add_project_configuration 'compass/config.rb' # when using Compass 0.10
+    Compass.configuration.parse 'compass/config.rb'       # when using Compass < 0.10
+
+Your Compass configuration file (in compass/config.rb) could look like this (you may need to change the path to some directories depending on your directory structure):
+
+    http_path    = "/" 
+    project_path = "." 
+    css_dir      = "output/assets/style" 
+    sass_dir     = "content/assets/style" 
+    images_dir   = "output/assets/images"
+
+    # when using SCSS:
+    sass_options = {
+      :syntax => :scss
+    }
+
+
+To filter the stylesheets using Sass and Compass, call the sass filter with Sass engine options taken from Compass, like this:
+
+    filter :sass, Compass.sass_engine_options
+
+
+### Nanoc Projects using the formal approach
+
+* [nanoc Bootstrap](http://github.com/adamstac/nanoc-bootstrap) - a base nanoc project with support for Haml, Sass, Compass, jQuery and more.
+* [nanoc & Compass Example Project](http://github.com/ddfreyne/nanoc-bootstrap-compass)

doc-src/content/help/tutorials/spriting.markdown

@@ -0,0 +1,228 @@
+---
+title: Spriting with Compass
+layout: tutorial
+crumb: Spriting
+classnames:
+  - tutorial
+---
+# Spriting with Compass
+
+Spriting has never been easier with Compass. You place the sprite images in a folder,
+import them into your stylesheet, and then you can use the sprite in your selectors in one
+of several convenient ways.
+
+## Setup
+
+For this tutorial, let's imagine that in your project's image folder there are four icons:
+
+* `images/icon/new.png`
+* `images/icon/edit.png`
+* `images/icon/save.png`
+* `images/icon/delete.png`
+
+Each is an icon that is 32px square.
+
+## Basic Usage
+The simplest way to use these icon sprites is to let compass give you a class for each sprite:
+    
+    @import "icon/*.png";
+    @include all-icon-sprites;
+
+And you'll get the following CSS output:
+
+    .icon-sprite,
+    .icon-delete,
+    .icon-edit,
+    .icon-new,
+    .icon-save   { background: url('/images/icon-s34fe0604ab.png') no-repeat; }
+    
+    .icon-delete { background-position: 0 0; }
+    .icon-edit   { background-position: 0 -32px; }
+    .icon-new    { background-position: 0 -64px; }
+    .icon-save   { background-position: 0 -96px; }
+
+You can now apply the `icon-XXX` classes to your markup as needed.
+
+Let's go over what happened there. The import statement told compass to [generate a
+stylesheet that is customized for your sprites](https://gist.github.com/729507). This
+stylesheet is [magic](#magic-imports), it is not written to disk, and it can be customized
+by setting configuration variables before you import it. See the section below on
+[Customization Options](#customization-options). The goal of this stylesheet is to provide a
+simple naming convention for your sprites so that you they are easy to remember and use. You
+should never have to care what the is name of the generated sprite map, nor where a sprite
+is located within it.
+
+<a name="selector-control"></a>
+## Selector Control
+
+If you want control over what selectors are generated, it is easy to do. In this example,
+this is done by using the magic `icon-sprite` mixin. Note that the mixin's name is dependent
+on the name of the folder in which you've placed your icons.
+
+    @import "icon/*.png";
+    
+    .actions {
+      .new    { @include icon-sprite(new);    }
+      .edit   { @include icon-sprite(edit);   }
+      .save   { @include icon-sprite(save);   }
+      .delete { @include icon-sprite(delete); }
+    }
+
+And your stylesheet will compile to:
+
+    .icon-sprite,
+    .actions .new,
+    .actions .edit,
+    .actions .save,
+    .actions .delete { background: url('/images/icon-s34fe0604ab.png') no-repeat; }
+    
+    .actions .new    { background-position: 0 -64px; }
+    .actions .edit   { background-position: 0 -32px; }
+    .actions .save   { background-position: 0 -96px; }
+    .actions .delete { background-position: 0 0;     }
+
+<a name="magic-imports"></a>
+## Magic Imports
+
+As noted above, compass will magically create sprite stylesheets for you. Some people like
+magic, some people are scared by it, and others are curious about how the magic works. If
+you would like to avoid the magic, you can use compass to generate an import for you. On the
+command line:
+
+    compass sprite "images/icon/*.png"
+
+This will create file using your project's preferred syntax, or you can specify the
+output filename using the `-f` option and the syntax will be inferred from the extension.
+If you do this, you'll need to remember to regenerate the import whenever you rename, add,
+or remove sprites.
+
+Using the magic imports is recommended for most situations. But there are times when you
+might want to avoid it. For instance, if your sprite map has more than about 20 to 30
+sprites, you may find that hand crafting the import will speed up compilation times. See
+the section on [performance considerations](#performance) for more details.
+
+<a name="magic-selectors"></a>
+## Magic Selectors
+
+If you want to add selectors for your sprites, it's easy todo by adding `_active` `_target` or `_hover` to the file name, In the example below we have a sprite directory that looks like:
+
+* `selectors/ten-by-ten.png`
+* `selectors/ten-by-ten_hover.png`
+* `selectors/ten-by-ten_active.png`
+* `selectors/ten-by-ten_target.png`
+    
+Now in our sass file we add:
+
+    @import "selectors/*.png";
+    
+    a {
+      @include selectors-sprite(ten-by-ten)
+    }
+    
+And your stylesheet will compile to:
+
+    .selectors-sprite, a {
+      background: url('/selectors-sedfef809e2.png') no-repeat;
+    }
+
+    a {
+      background-position: 0 0;
+    }
+    a:hover, a.ten-by-ten_hover, a.ten-by-ten-hover {
+      background-position: 0 -20px;
+    }
+    a:target, a.ten-by-ten_target, a.ten-by-ten-target {
+      background-position: 0 -30px;
+    }
+    a:active, a.ten-by-ten_active, a.ten-by-ten-active {
+      background-position: 0 -10px;
+    }
+
+Alternatively you can use the `@include all-selectors-sprites;` after the import and get the following output:
+
+    .selectors-sprite, .selectors-ten-by-ten {
+      background: url('/selectors-sedfef809e2.png') no-repeat;
+    }
+
+    .selectors-ten-by-ten {
+      background-position: 0 0;
+    }
+    .selectors-ten-by-ten:hover, .selectors-ten-by-ten.ten-by-ten_hover, .selectors-ten-by-ten.ten-by-ten-hover {
+      background-position: 0 -20px;
+    }
+    .selectors-ten-by-ten:target, .selectors-ten-by-ten.ten-by-ten_target, .selectors-ten-by-ten.ten-by-ten-target {
+      background-position: 0 -30px;
+    }
+    .selectors-ten-by-ten:active, .selectors-ten-by-ten.ten-by-ten_active, .selectors-ten-by-ten.ten-by-ten-active {
+      background-position: 0 -10px;
+    }
+
+
+
+<a name="customization-options"></a>
+## Customization Options
+
+### Options per Sprite Map
+
+When constructing the sprite map, the entire sprite map and it's associated stylesheet
+can be configured in the following ways. Each option is specified by setting a [configuration
+variable](/help/tutorials/configurable-variables/) before importing the sprite. The variables
+are named according to the name of the folder containing the sprites. In the examples below
+the sprites were contained within a folder called `icon`.
+
+* `$<map>-spacing` -- The amount of transparent space, in pixels, around each sprite.
+  Defaults to `0px`. E.g. `$icon-spacing: 20px`.
+* `$<map>-repeat` -- Wether or not each sprite should repeat along the x axis. Defaults
+  to `no-repeat`. E.g. `$icon-repeat: repeat-x`.
+* `$<map>-position` -- The position of the sprite in the sprite map along the x-axis. Can
+  be specified in pixels or percentage of the sprite map's width. `100%` would cause the
+  sprite to be on the right-hand side of the sprite map. Defaults to `0px`.
+  E.g. `$icon-position: 100%`.
+* `$<map>-sprite-dimensions` -- Whether or not the dimensions of the sprite should be
+  included in each sprite's CSS output. Can be `true` or `false`. Defaults to `false`.
+* `$<map>-sprite-base-class` -- The base class for these sprites. Defaults to `.<map>-sprite`.
+  E.g. `$icon-sprite-base-class: ".action-icon"`
+* `$<map>-clean-up` -- Whether or not to removed the old sprite file when a new one is created. Defaults to true
+
+### Options per Sprite
+
+When constructing the sprite map, each sprite can be configured in the following ways:
+
+* `$<map>-<sprite>-spacing` -- The amount of transparent space, in pixels, around the sprite. Defaults
+  to the sprite map's spacing which defaults to `0px`. E.g. `$icon-new-spacing: 20px`.
+* `$<map>-<sprite>-repeat` -- Wether or not the sprite should repeat along the x axis. Defaults
+  to the sprite map's repeat which defaults to `no-repeat`. E.g. `$icon-new-repeat: repeat-x`.
+* `$<map>-<sprite>-position` -- The position of the sprite in the sprite map along the x-axis. Can
+  be specified in pixels or percentage of the sprite map's width. `100%` would cause the
+  sprite to be on the right-hand side of the sprite map. Defaults to the sprite map's
+  position value which defaults to `0px`. E.g. `$icon-new-position: 100%`.
+
+<a name="performance"></a>
+## Performance Considerations
+
+Reading PNG files and assembling new images and saving them to disk might have a non-trivial
+impact to your stylesheet compilation times. Especially for the first compile. Please keep
+this in mind.
+
+## Large numbers of sprites
+The magic stylesheet can get very large when there are large numbers of sprites. 50 sprites
+will cause there to be over 150 variables created and then passed into the
+`sprite-map` [function](/reference/compass/helpers/sprites/#sprite-map).
+You may find that customizing the sprite function call to only pass those values that you
+are overriding will provide a small performance boost.
+See a [concrete example](https://gist.github.com/747970).
+
+## Oily PNG
+
+Compass generates PNG files using a pure-ruby library called
+[`chunky_png`](https://github.com/wvanbergen/chunky_png). This library can be made faster by
+installing a simple C extension called [`oily_png`](https://github.com/wvanbergen/oily_png).
+Add it to your `Gemfile` if you have one in your project:
+
+    gem 'oily_png'
+
+Or install the Rubygem:
+
+    gem install oily_png
+
+Compass will automatically detect its presence.

doc-src/content/help/tutorials/upgrading/antares.markdown

@@ -76,6 +76,22 @@ Or for sass files:
     =linear-gradient($color-stops, $start: top, $image: false)
       +background-image($image, linear-gradient($start, $color-stops))
 
+<a name="typography"></a>
+## Typography Module
+
+With the addition of vertical-rhythms to the compass core, we have created a new
+[typography module][typography_module], and moved several items that were formerly
+listed as "utilities" into it. The moved modules are "links", "lists" and "text".
+These will all remain part of the basic compass include, but if you were including 
+them individually in your stylesheets, you will need to adjust the include paths
+as follows:
+
+* "compass/utilities/links" becomes "compass/typography/links"
+* "compass/utilities/lists" becomes "compass/typography/lists"
+* "compass/utilities/text" becomes "compass/typography/text"
+
+
 [new_transform]: /reference/compass/css3/transform/
 [old_transform]: /reference/compass/css3/transform-legacy/
-[image_stylesheet]: /reference/compass/css3/images/
+[image_stylesheet]: /reference/compass/css3/images/
+[typography_module]: /reference/compass/typography/

doc-src/content/help/tutorials/upgrading/im-scared.markdown

@@ -22,7 +22,7 @@ what changed to your stylesheets:
 1. $ cd my_compass_project
 2. $ compass compile --force
 3. $ cp -r stylesheets stylesheets.backup
-4. $ gem install compass --pre # you might need to type sudo first if you're on mac or linux.
+4. $ gem install compass # you might need to type sudo first if you're on mac or linux.
 5. $ compass compile --force
 6. Take note of any deprecation warnings printed in red during the compile.
 7. If you have textmate and installed the `mate` command line tool:<br>

doc-src/content/help/tutorials/upgrading/lemonade_upgrade_guide.markdown

@@ -0,0 +1,50 @@
+---
+title: Lemonade Upgrade Guide
+layout: tutorial
+crumb: Lemonade Upgrade
+classnames:
+  - tutorial
+---
+# Lemonade Upgrade Guide
+## Example 1
+
+### Lemonade
+
+    .logo {
+      background: sprite-image("lemonade/lemonade-logo.png");
+    }
+    .lime {
+      background: sprite-image("lemonade/lime.png");
+    }
+    .coffee {
+      background: sprite-image("other-drinks/coffee.png") no-repeat;
+    }
+    
+### Compass
+
+
+    @import "lemonade/*.png";
+    @import "other-drinks/*.png"
+    @include all-lemonade-sprites;
+    @include all-other-drinks-sprites;
+
+Compass will return class names `.lemonade-logo`, `.lemonade-lime`, `.other-drinks-coffee`
+    
+    
+# Example 2
+
+### Lemonade
+
+    .lemonade-example-1 {
+      background: sprite-image("lemonade/example-1/blue-10x10.png", 10px, 2px);
+    }
+
+### Compass
+  With compass you need to flatten the image directory to be `images/lemonade` instead of `images/lemonade/example-1`
+  
+    @import "lemonade/*.png"
+  
+    .lemonade-example-1 {
+      @include lemonade-sprite(blue-10x10, true, 10px, 2px);
+      background-color: yellow;
+    }

doc-src/content/index.haml

@@ -10,13 +10,18 @@ layout: homepage
   .compass
     %h4 Why designers love Compass.
     %ol
-      %li Get cleaner markup with no presentational classes.
+      %li Experience cleaner markup without presentational classes.
       %li It’s chock full of the web’s best reusable patterns.
       %li Developing a personal framework is simple. 
       %li Compass mixins make CSS3 easy.
+      %li Download and create extensions with ease.
   .sass
     %h4 Compass uses Sass.
-    %p <a href="http://sass-lang.com/">Sass</a> is an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and more. Sass generates well formatted CSS.
+    %p
+      <a href="http://sass-lang.com/">Sass</a> is an extension of CSS3 which
+      adds nested rules, variables, mixins, selector inheritance, and more.
+      Sass generates well formatted CSS and makes your stylesheets
+      easier to organize and maintain.
 %h3 Brilliant people use Compass, including these <em>wildly talented</em> folks:
 %ul#featured_sites
   %li
@@ -57,10 +62,34 @@ layout: homepage
   %li
     %a(href="http://green.cals.cornell.edu/")
       %img(src="/images/sites/cornell.jpg")
-      %span.title Corenell University - CALS
+      %span.title Cornell University - CALS
       %span.url http://green.cals.cornell.edu
   %li
     %a(href="http://busyconf.com/")
       %img(src="/images/sites/busyconf.jpg")
       %span.title BusyConf
-      %span.url http://busyconf.com
+      %span.url http://busyconf.com
+
+%section.book
+  %h3 Save <em>37%</em> on the Book: (Currently In Beta)
+
+  %p
+    %a(href="http://www.manning.com/netherland/")
+      %img(src="http://www.manning.com/netherland/netherland_cover150.jpg" alt="Sass & Compass in Action")
+    Compliments of Manning.com is a standing 37% discount on
+    <a href="http://www.manning.com/netherland/">Sass and Compass in Action</a>.
+    Use promo code <code>sasscomp37</code> at manning.com on the MEAP, eBook and pBook of Sass and
+    Compass in Action.  All pBook purchases include free eFormats (PDF, ePub, and Kindle)
+    as soon as available.
+
+%section.gui
+  %h3 <em>Hate</em> the Command Line?
+
+  %a(href="http://compass.handlino.com/")
+    %img(src="/images/compass.app.png")
+  %p
+    Buy <a href="http://compass.handlino.com/">Compass.app</a>
+    for Windows and Mac for just $7.
+  %p.note
+    Note: Compass.app is a product of Handlino, Inc but
+    30% of all proceeds go to Compass's charity of choice: <a href="http://umdf.org/compass">UMDF.org</a>.

doc-src/content/index/functions.haml

@@ -0,0 +1,24 @@
+---
+title: Compass Documentation | All Functions
+crumb: Docs
+body_id: home
+---
+%article
+  %h1#logo Sass Based Functions
+  
+  - all_functions.sorted_and_grouped_by_name{|f| f.last.name }.each do |(group, functions)|
+    %h3= group
+    %ul
+      - functions.each do |(i, f)|
+        %li
+          %a{:href=>"#{i.path}#function-#{f.name}"}= f.sass_signature(:html)
+
+  %h1#logo All Ruby Based Functions
+  %ul
+    - Sass::Script::Functions.public_instance_methods.sort_by{|m| m.to_s}.each do |m|
+      %li
+        - name = m.to_s.gsub("_","-")
+        - if i = item_for_function_name(name)
+          %a{:href=>"#{i.path}##{name}"}= name
+        - else
+          = name

doc-src/content/index/mixins.haml

@@ -6,9 +6,9 @@ body_id: home
 %article
   %h1#logo Compass Mixins
   
-  - all_mixins.sort_by{|i| i.first.identifier}.each do |item, mixins|
-    %h3= link_to item[:title], item
+  - all_mixins.sorted_and_grouped_by_name{|m| m.last.name }.each do |(group, mixins)|
+    %h3= group
     %ul
-      - mixins.sort_by{|m| m.name}.each do |m|
-        %li= mixin_signature(m)
-
+      - mixins.each do |(i, m)|
+        %li
+          %a{:href=>"#{i.path}#mixin-#{m.name}"}= m.sass_signature(:none, :html)

doc-src/content/index/variables.haml

@@ -6,10 +6,10 @@ body_id: home
 %article
   %h1#logo Compass Variables
   
-  - all_constants.sort_by{|i| i.first.identifier}.each do |item, constants|
-    %h3= link_to item[:title], item
+  - all_constants.sorted_and_grouped_by_name{|v| v.last.name }.each do |(group, variables)|
+    %h3= group
     %ul
-      - constants.sort_by{|c| c.name}.each do |c|
-        %li $#{c.name}
-
+      - variables.each do |(i, v)|
+        %li
+          %a{:href=>"#{i.path}#const-#{v.name}"}= "$" + v.name
   

doc-src/content/install.haml

@@ -0,0 +1,81 @@
+---
+title: Install the Compass Stylesheet Authoring Framework
+crumb: Install
+body_id: install
+---
+- content_for :javascripts do
+  %script(src="/javascripts/install.js")
+  
+%h2 Installing Ruby  
+%p
+  Compass runs on any computer that has
+  <a href="http://www.ruby-lang.org/en/downloads/">ruby installed</a>.
+%p
+  For more advanced users you may want to install
+  <a href="http://rvm.beginrescueend.com/rvm/install/">rvm</a>.
+
+%h2 Setting up the ruby environment
+%ol
+  %li <code>$ gem update --system</code>
+  %li <code>$ gem install compass</code>
+
+%h2 Tell us about your project and we'll help you get it set up:
+%blockquote.madlib.customizable<
+  I would like to set up my
+  %select#existence
+    %option{:value => "create"} new
+    %option{:value => "init"} existing
+  %select#app-type
+    %option{:value => "stand-alone"} compass
+    %option{:value => "rails"} rails
+    %option{:value => "other"} other
+  project
+  with
+  %select#framework
+    %option{:value => "compass"} compass's
+    %option{:value => "blueprint"} blueprint's
+    %option{:value => "bare"} no
+  starter stylesheets.
+  %br
+  I prefer the
+  %select#syntax
+    %option{:value => "scss"} CSS based (SCSS)
+    %option{:value => "sass"} Indent based (Sass)
+  syntax<span class="customization">
+  and would like to
+  %select#options
+    %option{:value => "default"} use compass's recommended
+    %option{:value => "customized"} customize my project's
+  directory structure<span id="directories" style="display:none;">
+  using
+  %input#sassdir(value="sass")
+  for the sass source directory,
+  %input#cssdir(value="css")
+  for the css output directory,
+  %input#jsdir(value="javascripts")
+  for the javascripts directory,
+  and
+  %input#imagesdir(value="images")
+  for the images directory</span></span>.
+
+%h4 Thanks. Now run the following steps in your terminal:
+
+%p.note
+  Terminal newbies, read <a href="http://wiseheartdesign.com/articles/2010/11/12/the-designers-guide-to-the-osx-command-prompt/">the Designer’s Guide to the OSX Command Prompt</a> first!
+
+#steps
+  Loading...
+%p.note Note: <code>$</code> is a placeholder for your terminal's prompt. You don't type it.
+%h4 Then follow the instructions that compass provides in the output.
+
+%h4 Or you can buy a <a href="http://compass.handlino.com/">GUI for Compass</a> from Handlino.
+
+%h2 Next Steps
+%ul
+  %li
+    %a(href="http://sass-lang.com" target="_blank") Learn about Sass
+  %li
+    %a(href="/help/tutorials/") Read our tutorials
+  %li
+    %a(href="/reference/compass/") Study the reference documentation
+

doc-src/content/posts/2011-04-24-v011-release.markdown

@@ -0,0 +1,141 @@
+---
+title: "Compass v0.11 is Released!"
+description: "Months in the making, Compass v0.11 continues to revolutionize CSS Frameworks."
+author: chris
+---
+
+The Compass team is proud to announce that v0.11 is released. With this release, Compass & Sass continue to revolutionize the world of CSS Frameworks bringing never-before-seen features and unmatched simplicity, quality, and flexibility to your stylesheets.
+
+In this post, we summarize the new features. For all the nitty gritty details, see the [CHANGELOG](/CHANGELOG/).
+
+Compass is Charityware. If you love this release, [please donate to the UMDF](http://umdf.org/compass) on our behalf and help find a cure for thousands of children suffering from mitochondrial disease.
+
+## Sass 3.1
+
+This release required you to upgrade to Sass 3.1. This release brings a ton of great new features that Compass now uses and you can too!
+
+* Proper List Support: Space and Comma separated lists used to cause values to become strings
+  when passing them to mixins. Now the values in lists are preserved as their original types.
+* Sass-based Functions. Define your own value functions and use them anywhere.
+* Keyword Style Argument passing to Functions and Mixins. It can be hard to understand what
+  the values being passed to a mixin or function are for, use keyword style arguments to
+  make it easier to understand remember and read mixin includes.
+* `@media` bubbling. Responsive design meets nested selectors! Use a media declaration anywhere and it
+  will be bubbled to the top level for you.
+
+For more information about the new Sass features, see the [Sass CHANGELOG](http://sass-lang.com/docs/yardoc/file.SASS_CHANGELOG.html).
+
+
+## Embracing CSS3
+
+The power and flexibility of CSS3 is well known and web developers and designers are finding many new and interesting ways to take advantage of it. In Compass v0.11 we have revisited each CSS3 feature to ensure the greatest ease of use and similarity to CSS3 syntax. The compass internals for managing cross-browser compatibility have been rewritten to provide a powerful platform for moving as fast as the browser implementors are. Going forward, <span style="text-decoration: underline;">expect small point releases to adapt to new browser support and changes much more rapidly</span>. By default, Compass provides out-of-the-box support for **all** modern and legacy browsers as far back as IE6 and Firefox 2. But if you want slimmer stylesheets, it is [simple to configure](/reference/compass/support/) which browser support we provide.
+
+In this release, we embraced the CSS3 syntax as much as possible. It might seem obvious, but the Compass convention is now that all CSS3 mixin arguments should match the CSS3 syntax for their corresponding properties so that you never have to *learn* a compass CSS3 mixin. If you ever find a case where this is not true, it is a bug and we would appreciate it if you would [provide the details in a bug report](http://github.com/chriseppstein/compass/issues). After upgrading, you will encounter a number of deprecation warnings guiding you through the syntax changes.
+
+### Gradients Evolved
+
+The best example of the changes in the CSS3 module are related to gradients. In Compass v0.10 we provided two simple mixins: `linear-gradient` and `radial-gradient` for setting the `background-image` property:
+
+    .linear {
+      @include linear-gradient(#FFF, #000, color-stops(#C00 25%, #0C0 75%))
+    }
+
+This syntax was inspired by the original webkit gradient syntax but tried to simplify it to some extent. But the gradient specification has evolved and because gradients can be used anywhere an image can, so we now provide a mixin for each property that can accept gradients and the arguments
+can be any legal CSS3 value for the that property:
+
+    .linear {
+      @include background-image(linear-gradient(#FFF, #C00 25%, #0C0 75%, #000))
+    }
+
+Which produces:
+
+    .linear {
+      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(25%, #cc0000), color-stop(75%, #00cc00), color-stop(100%, #000000));
+      background-image: -webkit-linear-gradient(#ffffff, #cc0000 25%, #00cc00 75%, #000000);
+      background-image: -moz-linear-gradient(#ffffff, #cc0000 25%, #00cc00 75%, #000000);
+      background-image: -o-linear-gradient(#ffffff, #cc0000 25%, #00cc00 75%, #000000);
+      background-image: linear-gradient(#ffffff, #cc0000 25%, #00cc00 75%, #000000);
+    }
+
+## Dead Simple Sprites
+
+Spriting has never been easier with Compass. Nico Hagenburger joined the Compass team and we have built on his popular Lemonade plugin to make Compass sprites. Existing Lemonade users will need to upgrade.
+
+The way they work is you place the sprite images in a folder,
+import them into your stylesheet, and then you can use the sprite in your selectors in one
+of several convenient ways.
+
+For example, let's imagine that in your project's image folder there are four icons:
+
+* `<images_dir>/icon/new.png`
+* `<images_dir>/icon/edit.png`
+* `<images_dir>/icon/save.png`
+* `<images_dir>/icon/delete.png`
+
+The simplest way to use these icon sprites is to let compass give you a class for each sprite:
+    
+    @import "icon/*.png";
+    @include all-icon-sprites;
+
+And you'll get the following CSS output:
+
+    .icon-sprite,
+    .icon-delete,
+    .icon-edit,
+    .icon-new,
+    .icon-save   { background: url('/images/icon-34fe0604ab.png') no-repeat; }
+    
+    .icon-delete { background-position: 0 0; }
+    .icon-edit   { background-position: 0 -32px; }
+    .icon-new    { background-position: 0 -64px; }
+    .icon-save   { background-position: 0 -96px; }
+
+You can now apply the `icon-XXX` classes to your markup as needed.
+
+Of course, this is Compass which means that underneath this simple veneer is a powerful system that you can use to customize your selectors and all kinds of other scenarios involving unicorns and rainbows. Get all the details in our [Spriting Tutorial](/help/tutorials/spriting/).
+
+## New Typography Module
+
+New in this release is a typography module. Many of our utility mixins related to typography have been moved here, but the really exciting development is the addition of the [vertical rhythm module](/reference/compass/typography/vertical_rhythm/). Based on [this excellent tutorial](http://24ways.org/2006/compose-to-a-vertical-rhythm) from 24ways, it is now simpler than ever to compose to a vertical rhythm.
+
+## Blueprint 1.0
+
+Blueprint is 1.0 now and the Compass port is updated to match the changes there. Some of the changes that blueprint made might affect your design, so if you don't want to take this upgrade, you should unpack blueprint before you upgrade:
+
+    compass unpack blueprint
+
+## New Website
+
+As you can see, we have a spiffy new website design from Compass Core team member [Brandon](http://brandonmathis.com/). A testament to the separation of content and presentation, most of this redesign was done by throwing out our old stylesheets and building new ones. If you don't like the light text on dark background theme, you can turn on the lights by clicking the power button in the upper right hand corner of every page.
+
+## Much, Much More
+
+There's more features in this release than would fit into this post. Here's some other things you'll find in this release:
+
+* Custom directory and file watching (E.g. for pngcrush support)
+* Compilation Callback support
+* Trigonometric functions
+
+Read the [CHANGELOG](/CHANGELOG/) for all the details.
+
+Additionally, expect a point release to follow shortly with support for:
+
+* Rails 3.1
+
+Lastly, Compass v0.11 will have point releases as needed to adapt to changes in browser support for the CSS3 module.
+
+## Many Thanks
+
+Compass wouldn't be possible without Nathan Weizenbaum and his hard work on Sass. The latest Sass release
+provides a ton of great features that have made this Compass release possible.
+
+Compass is far to big for one person to manage it now. I'd like to thank the hard work of the Compass core team members:
+
+* [Eric Meyer](http://eric.oddbird.net/)
+* [Brandon Mathis](http://brandonmathis.com/)
+* [Scott Davis](https://github.com/jetviper21)
+* [Nico Hagenburger](http://www.hagenburger.net/)
+
+Additionally, there were commits from 10 other great folks in this release and there's been [contributions from 68 people](https://github.com/chriseppstein/compass/contributors) in total so far.
+
+Lastly thanks to the hundreds, if not thousands, of users who have helped test this release and provided valuable feedback, bug reports, and documentation suggestions. Together, we are making a real stylesheet framework and simplifying the lives of web developers across the world.

doc-src/content/posts/2011-04-26-compass-release-strategy.markdown

@@ -0,0 +1,93 @@
+---
+title: "Compass Release Strategy"
+description: "An overview of how Compass will be managing ongoing releases."
+author: chris
+---
+
+Most of this is probably obvious, but it doesn't hurt to be explicit about such things.
+
+If you're interested in contributing to Compass, please read the
+[Contribution Guide](http://compass-style.org/help/tutorials/contributing/).
+
+Versioning
+----------
+
+Most stable releases will be released as release candidates first
+(e.g `0.11.1.rc.0`) and then made into official releases after a day
+or so if they don't cause any problems.
+
+Sass Dependency
+---------------
+
+We will decouple major Compass releases from the Sass release schedule
+going forward. When Sass releases happen, we will issue patches to both
+stable and master branches to adjust to any deprecations and new
+features after they are fully released (which means we might have the
+changes waiting in a topic branch). Because Sass is very careful to not
+break existing stylesheets without deprecating first, this shouldn't be
+hard to pull off.
+
+Stylesheet Progress
+-------------------
+
+I do not want to see the compass stylesheets get frozen again 
+like they did in v0.10 while waiting for the next major release.
+Compass users expect us to keep up with browser developments and we will.
+If this means that we need to make v0.12 become v0.13 because
+the stylesheets need to make some major change, then we will do that.
+
+Communicating Change
+--------------------
+
+All new features should have tests, docs, and CHANGELOG entries
+as appropriate as part of the commit.
+
+Additionally, we now have a compass team blog that we can use to communicate
+about new features, best practices, or other Compass related stuff.
+It's easy to add a post, you just drop a markdown file into
+[this directory](https://github.com/chriseppstein/compass/tree/stable/doc-src/content/posts).
+Guest posts are totally welcome via pull requests.
+
+Stable
+------
+
+The stable release is were code lives for the next v0.11 point release.
+Commits should only go here if they are ready for release, until that
+point the code should live in your compass fork or in a topic branch.
+
+Core team members, please use pull requests to manage the code review
+process for any change of significance and get sign-off from one other
+team member before committing to stable.
+
+Changes that can go on stable:
+
+* Browser support updates
+* Non-breaking stylesheet changes and minor features
+  like new mixins or modules.
+* Bug fixes
+
+Changes that can't go on stable:
+
+* New deprecations
+* Major features
+* Big refactors
+
+If you're not sure where to put something, just ask.
+
+Rails 3.1 support is the exception to this rule, given the timeline
+assocated with that release, I will make a topic branch and we'll
+merge that to stable when it's ready.
+
+Core team members will, after committing/merging code to stable, then merge those changes to master so it is up to date.
+
+Master
+------
+
+Master is where code goes to be ready for v0.12. This focus of this
+next release is making extensions easy to make, share, discover, install,
+remove, and use. Any and all ideas that you have related to this are
+welcome. At a minimum, I would like to have an extension directory
+app hosted on compass-style.org and make sure that compass knows about
+it and can install extensions by name from there.
+
+

doc-src/content/posts/2011-05-09-compass-django.markdown

@@ -0,0 +1,34 @@
+---
+title: "How to use Compass/Sass with Django."
+description: "All the documentation is for Ruby/Rails development, so how does it work for the rest of us?"
+author: eric
+---
+
+It's easy! Follow these two simple steps:
+
+1. Use Compass/Sass.
+2. Use Django. 
+
+That's it. Compass works great as a stand-alone tool. Run "compass --watch" on the command line or use [compass.app](http://compass.handlino.com/) to compile your stylesheets, and then commit the CSS to your Django project, just like you always have. Done.
+
+## What about integration?
+
+Compass and Sass are built in Ruby. When the rest of your project is also built in Ruby, it makes sense to squeeze every last ounce of convenient automatic integration, like having your project automatically compile Sass to CSS for you at runtime. But that integration is not actually necessary, and when the rest of your project is not Ruby, you pay a lot more for that little bit of convenience.
+
+A Rails/Ruby project already has a full Ruby stack and deployment infrastructure to make sure all the right Ruby gems are available on the server. Adding a few Compass gems makes very little difference in the complexity of your production deployment.
+
+For a Django project, integrating run-time Compass compilation (via something like [django-css](https://github.com/dziegler/django-css)) means requiring a full Ruby stack on your production servers, plus new deployment infrastructure for getting all the right gem versions in place. This is a significant chunk of additional moving parts on your production servers.
+
+Keeping your production servers simpler is A Very Good Thing. (And, as a bonus, it allows you to deploy your project to pure-Python managed hosting environments).
+
+## In development.
+
+The disadvantage to our approach is that you are committing generated code to the repo. That's generally frowned upon. But we haven't seen any actual problems as a result of this. Nobody on the team is tempted to edit the generated CSS directly; we all know that we use Compass for that. There are no mysterious display inconsistencies between one developer and another, or between development and production, because of minor differences in something like a Compass plugin gem version. Everyone sees the same CSS. Differences between developers' Compass environments are caught quickly, because they show up right away as unexpected changes in the pre-commit diff of the generated CSS.
+
+And I, as the designer/front-end developer, keep full control of the css-generation process without needing to touch the server. If I want to update the gems and make some changes, I can do that. I make the change, I commit the change, and it just works. For everyone. That's important to me. It removes all the pretense of dark magic that can come with Sass/Compass. I'm writing CSS. I'm committing CSS. Compass, Sass and all their plugins are just tools towards that end.
+
+Of course, you'll want to commit the Sass as well, especially if you have multiple front-end developers on the team. That way the source is available for anyone who needs to update it, even though it's not needed by the server. You might also want a way of documenting the latest gems that should be used to compile it. That's easy enough to add in a comment or doc of it's own. 
+
+## Just Tools.
+
+I want to say that again because I think it is the most important and most often forgotten rule of using a css pre-processor. **Compass and Sass are simply tools for writing CSS. They are not a new styling language. They are not magic. They make writing css easier - and that is all. The css output is the only thing that matters.**

doc-src/content/reference/blueprint/reset.haml

@@ -3,6 +3,7 @@ title: Blueprint Reset
 crumb: Reset
 framework: blueprint
 stylesheet: blueprint/_reset.scss
+sidebar: true
 layout: blueprint
 classnames:
   - reference

doc-src/content/reference/compass.haml

@@ -1,4 +1,4 @@
---- 
+---
 title: Compass Core Framework
 crumb: Compass Core
 framework: compass
@@ -16,10 +16,8 @@ layout: core
     other frameworks and extensions.
 
 %h2 Non Imported Modules
-
-%p
-  You can import these yourself if you want to use them.
-%ul
-  = render "partials/reference/import", :import => "compass/_layout.scss"
-  = render "partials/reference/import", :import => "compass/_reset.scss"
+%em You can import these yourself if you want to use them.
+%ol
+  %li= render "partials/reference/import", :import => "compass/_layout.scss"
+  %li= render "partials/reference/import", :import => "compass/_reset.scss"
 

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

@@ -3,6 +3,7 @@ title: Compass CSS3
 crumb: CSS3
 framework: compass
 stylesheet: compass/_css3.scss
+sidebar: true
 layout: core
 classnames:
   - reference

doc-src/content/reference/compass/css3/appearance.haml

@@ -0,0 +1,16 @@
+--- 
+title: Compass Appearance
+crumb: Appearance
+framework: compass
+stylesheet: compass/css3/_appearance.scss
+meta_description: Specify the CSS3 appearance property.
+layout: core
+classnames:
+  - reference
+  - core
+  - css3
+---
+- render 'reference' do
+  :markdown
+    Provides a mixin for `appearance`.
+    See the CSS3 specification: [appearance](http://www.w3.org/TR/css3-ui/#appearance).

doc-src/content/reference/compass/css3/gradient.haml

@@ -12,13 +12,8 @@ classnames:
   - css3
 ---
 - render 'reference' do
-  %p
+  :markdown
+    **<span class="warning">IMPORTANT:</span>** This module has been deprecated. See the new
+    [images module](../images/) for the new, more flexible approach to gradients.
+    
     Provides mixins to create cross-browser CSS3 gradients.
-  %p
-    To enable SVG gradient support in Opera and IE9, set
-    <code>$experimental-support-for-svg: true</code> in your stylesheet.
-  %p
-    NOTE: At this time, Opera renders incorrectly an SVG background on a element
-    with a border, repeating the gradient towards the end. You can set
-    <code>background-repeat: no-repeat</code> to avoid this, but the gradient
-    will not fill the area completely.

doc-src/content/reference/compass/css3/images.haml

@@ -12,6 +12,33 @@ classnames:
   - css3
 ---
 - render 'reference' do
-  %p
+  :markdown
     Provides mixins that work across many modern browsers with the latest
     CSS3 image rendering primitives.
+    
+    These mixins provide intelligent cross-browser access to properties that accept
+    images or image-like values (e.g. gradients). The syntax is very straightforward,
+    it is exactly like the css syntax that you would use for the corresponding CSS3
+    properties: Values are comma and space delimited, just as they would be for a property.
+    Vendor prefixes are used only when necessary.
+    
+    Example (more examples are available by following the links below):
+    
+    <pre><code class="source-code scss">.in-css3 {
+      background: url(foo.png),
+                  linear-gradient(top left, #333, #0c0),
+                  radial-gradient(#c00, #fff 100px);
+    }
+    .with-compass {
+      @include background(image-url("foo.png"),
+                          linear-gradient(top left, #333, #0c0),
+                          radial-gradient(#c00, #fff 100px));
+    }</code></pre>
+        
+    To enable SVG gradient support in Opera and IE9, set
+    <code>$experimental-support-for-svg: true</code> in your stylesheet.
+    
+    NOTE: At this time, Opera renders incorrectly an SVG background on a element
+    with a border, repeating the gradient towards the end. You can set
+    <code>background-repeat: no-repeat</code> to avoid this, but the gradient
+    will not fill the area completely.

doc-src/content/reference/compass/css3/pie.haml

@@ -74,6 +74,6 @@ classnames:
     
     * For more information see the [css3pie website](http://css3pie.com/).
     * CSS PIE is written by and copyright to: [Jason Johnston](http://twitter.com/lojjic)
-    * Compass is using css3pie version 1.0-beta2. It can be upgraded by downloading
+    * Compass is using css3pie version 1.0-beta3. It can be upgraded by downloading
       a new behavior file and replacing the one that comes with compass.
     

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

@@ -2,6 +2,7 @@
 title: Compass Helpers
 crumb: Helpers
 framework: compass
+sidebar: true
 layout: core
 classnames:
   - reference
@@ -14,7 +15,7 @@ layout: core
 
 :markdown
   The compass helpers are functions that augment the [functions provided
-  by Sass](http://sass-lang.com/yardoc/Sass/Script/Functions.html).
+  by Sass](http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html).
   
   All Helpers:
   
@@ -23,6 +24,7 @@ layout: core
   * [append-selector()](/reference/compass/helpers/selectors/#append-selector)
   * [color-stops()](/reference/compass/helpers/color-stops/)
   * [cos()](/reference/compass/helpers/trig/#cos)
+  * [css2-fallback()](/reference/compass/helpers/cross-browser/#css2-fallback)
   * [elements-of-type()](/reference/compass/helpers/display/)
   * [enumerate()](/reference/compass/helpers/selectors/#enumerate)
   * [font-files()](/reference/compass/helpers/font-files/)
@@ -34,9 +36,18 @@ layout: core
   * [inline-font-files()](/reference/compass/helpers/inline-data/#inline-font-files)
   * [inline-image()](/reference/compass/helpers/inline-data/#inline-image)
   * [nest()](/reference/compass/helpers/selectors/#nest)
+  * [prefix()](/reference/compass/helpers/cross-browser/#prefix)
+  * [prefixed()](/reference/compass/helpers/cross-browser/#prefixed)
   * [pi()](/reference/compass/helpers/trig/#pi)
   * [sin()](/reference/compass/helpers/trig/#sin)
   * [stylesheet-url()](/reference/compass/helpers/urls/#stylesheet-url)
   * [scale-lightness()](/reference/compass/helpers/colors/#scale-lightness)
   * [tan()](/reference/compass/helpers/trig/#tan)
+  * [-css2()](/reference/compass/helpers/cross-browser/#-css2)
+  * [-moz()](/reference/compass/helpers/cross-browser/#-moz)
+  * [-ms()](/reference/compass/helpers/cross-browser/#-ms)
+  * [-o()](/reference/compass/helpers/cross-browser/#-o)
+  * [-pie()](/reference/compass/helpers/cross-browser/#-pie)
+  * [-svg()](/reference/compass/helpers/cross-browser/#-svg)
+  * [-webkit()](/reference/compass/helpers/cross-browser/#-webkit)
 

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

@@ -8,6 +8,8 @@ classnames:
   - reference
   - core
   - helpers
+documented_functions:
+  - "color-stops"
 ---
 %h1 Compass Color Stops Helper
 

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

@@ -8,6 +8,11 @@ classnames:
   - reference
   - core
   - helpers
+documented_functions:
+  - "adjust-lightness"
+  - "adjust-saturation"
+  - "scale-lightness"
+  - "scale-saturation"
 ---
 %h1 Compass Color Helpers
 %p

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

@@ -8,6 +8,8 @@ classnames:
   - reference
   - core
   - helpers
+documented_functions:
+  - "opposite-position"
 ---
 %h1 Compass Constant Helpers
 

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

@@ -0,0 +1,125 @@
+--- 
+title: Compass Cross Browser Helpers
+crumb: Cross Browser
+framework: compass
+meta_description: Helper functions for working with vendor prefixed functions.
+layout: core
+classnames:
+  - reference
+  - core
+  - helpers
+documented_functions:
+  - "prefixed"
+  - "prefix"
+  - "-webkit"
+  - "-moz"
+  - "-o"
+  - "-ms"
+  - "-svg"
+  - "-pie"
+  - "-css2"
+---
+%h1 Compass Cross Browser Helpers
+
+:markdown
+  These helpers are used by compass to create mixins that can insulate
+  the user from cross browser syntax and vendor prefix complexities.
+  
+  If you need to support a new experimental (prefixed) function in your
+  project using these helpers, you can add support for it adding the following
+  to your compass configuration file:
+  
+      Compass::BrowserSupport.add_support("function-name", "webkit", "moz")
+
+  For an example of how to use these functions see the
+  [compass images module](https://github.com/chriseppstein/compass/blob/master/frameworks/compass/stylesheets/compass/css3/_images.scss).
+
+#prefixed.helper
+  %h3
+    %a(href="#prefixed")
+      prefixed(<span class="arg">$prefix<span>, <span class="arg">$arg</span>, ...)
+  .details
+    %p
+      Returns true if any of the arguments require the given prefix.
+
+#prefix.helper
+  %h3
+    %a(href="#prefix")
+      prefix(<span class="arg">$prefix<span>, <span class="arg">$arg</span>, ...)
+  .details
+    %p
+      Transforms the argument(s) into a representation for the rendering engine
+      indicated by <code>$prefix</code>. Usually this means just adding a prefix,
+      but in some cases, this may result in entirely different representations for
+      the given rendering engine (E.g. linear-gradient).
+    %p
+      Values that do not have a specific representation are passed through without
+      being transformed.
+
+#-webkit.helper
+  %h3
+    %a(href="#-webkit")
+      \-webkit(<span class="arg">$arg</span>, ...)
+  .details
+    %p
+      This is a shortcut for calling <code>prefix(-webkit, $arg, ...)</code>.
+#-moz.helper
+  %h3
+    %a(href="#-moz")
+      \-moz(<span class="arg">$arg</span>, ...)
+  .details
+    %p
+      This is a shortcut for calling <code>prefix(-moz, $arg, ...)</code>.
+#-o.helper
+  %h3
+    %a(href="#-o")
+      \-o(<span class="arg">$arg</span>, ...)
+  .details
+    %p
+      This is a shortcut for calling <code>prefix(-o, $arg, ...)</code>.
+#-ms.helper
+  %h3
+    %a(href="#-ms")
+      \-ms(<span class="arg">$arg</span>, ...)
+  .details
+    %p
+      This is a shortcut for calling <code>prefix(-ms, $arg, ...)</code>.
+#-svg.helper
+  %h3
+    %a(href="#-svg")
+      \-svg(<span class="arg">$arg</span>, ...)
+  .details
+    %p
+      This is a shortcut for calling <code>prefix(-svg, $arg, ...)</code>.
+      Instead of adding a prefix, it returns a representation of the
+      arguments using SVG to render them where it can.
+#-pie.helper
+  %h3
+    %a(href="#-pie")
+      \-pie(<span class="arg">$arg</span>, ...)
+  .details
+    %p
+      This is a shortcut for calling <code>prefix(-pie, $arg, ...)</code>.
+      It it used to get <a href="/reference/compass/css3/pie/">CSS3 PIE</a>
+      support where necessary.
+#-css2.helper
+  %h3
+    %a(href="#-css2")
+      \-css2(<span class="arg">$arg</span>, ...)
+  .details
+    %p
+      This is a shortcut for calling <code>prefix(-css2, $arg, ...)</code>.
+      It is a kind of hack to sanitize the output of experimental code
+      into a form that can be parsed by a css2.1 compliant parser.
+      Usually this results in causing some functions to be omitted.
+#css2-fallback.helper
+  %h3
+    %a(href="#css2-fallback")
+      css2-fallback(<span class="arg">$value</span>, <span class="arg">$css2-value</span>)
+  .details
+    %p
+      This function returns a value that is normally <code>$value<code>,
+      but is <code>$css2-value</code> when passed through the <code>-css2()</code>
+      helper function. Many of the compass css3 mixins will create a css2 fallback
+      value if the arguments have a css2 representation (gradients have a null css2
+      representation).

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

@@ -8,6 +8,8 @@ classnames:
   - reference
   - core
   - helpers
+documented_functions:
+  - "elements-of-type"
 ---
 %h1 Compass Display Helpers
 
@@ -19,7 +21,7 @@ classnames:
   .details
     %p
       The following display values exist and will return
-      the elements listed to the right.
+      the elements listed below the display value.
     %dl
       %dg.head
         %dt Display Value

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

@@ -8,6 +8,8 @@ classnames:
   - reference
   - core
   - helpers
+documented_functions:
+  - "font-files"
 ---
 %h1 Compass Font Files Helper
 

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

@@ -8,6 +8,9 @@ classnames:
   - reference
   - core
   - helpers
+documented_functions:
+  - "image-width"
+  - "image-height"
 ---
 %h1 Compass Image Dimension Helpers
 

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

@@ -8,6 +8,9 @@ classnames:
   - reference
   - core
   - helpers
+documented_functions:
+  - "inline-image"
+  - "inline-font-files"
 ---
 %h1 Compass Inline Data Helpers
 

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

@@ -8,6 +8,12 @@ classnames:
   - reference
   - core
   - helpers
+documented_functions:
+  - "nest"
+  - "append-selector"
+  - "enumerate"
+  - "headings"
+  - "headers"
 ---
 %h1 Compass Selector Helpers
 
@@ -67,6 +73,7 @@ classnames:
       %li
         %a(href="/examples/compass/helpers/using-extend-in-place-of-enumerate/") Example of using <code>@extend</code> in place of enumerate
 
+%a(name="headers")
 #headings.helper
   %h3
     %a(href="#append-selector")

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

@@ -0,0 +1,139 @@
+--- 
+title: Compass Sprite Helpers
+crumb: Sprites
+framework: compass
+meta_description: Helper functions for working with Sprite images.
+layout: core
+classnames:
+  - reference
+  - core
+  - helpers
+documented_functions:
+  - "sprite-map"
+  - "sprite"
+  - "sprite-map-name"
+  - "sprite-file"
+  - "sprite-url"
+  - "sprite-position"
+---
+%h1 Compass Sprite Helpers
+
+:markdown
+  These helpers make it easier to build and to work with sprites.
+  
+  While it is allowed to use these directly, to do so is considered "advanced usage".
+  It is recommended that you instead use the sprite mixins that are designed to work
+  with these functions.
+  
+  See the [Spriting Tutorial](/help/tutorials/spriting/) for more information.
+
+#sprite-map.helper
+  %h3
+    %a(href="#sprite-map")
+      sprite-map(<span class="arg">$glob</span>, <span class="arg">...</span>)
+  .details
+    :markdown
+      Generates a sprite map from the files matching the glob pattern. Uses the
+      keyword-style arguments passed in to control the placement.
+      
+      Only PNG files can be made into sprites at this time.
+      
+      The `$glob` should be glob pattern relative to the images directory that specifies
+      what files will be in the sprite. For example:
+      
+          $icons: sprite-map("icons/*.png");
+          background: $icons;
+      
+      This will generate a sprite map and return a reference to it. It's important to
+      capture this to a variable, because you will need to use it later when creating
+      sprites. In the above example you might end up with a new file named
+      `images/sprites/icons-a2ef041.png` and your css stylesheet will have:
+      
+          background: url('/images/sprites/icons-a2ef041.png?1234678') no-repeat;
+      
+      The exact image name is not something you should depend on as it may change based on the
+      arguments you pass in. Instead, you can use the `sprite-url()` function to create a
+      reference to the sprite map without generating the image again. Alternatively, simply
+      using the sprite map variable in an property will have the same effect as calling
+      `sprite-url()`.
+      
+      For each sprite in the sprite map you can control the position, spacing, and whether or
+      not it repeats. You do this by passing arguments to this function that tell each sprite
+      how to behave. For instance if there is a icons/new.png then you can control it like so:
+      
+          $icon-sprite: sprite-map("icons/*.png",
+                          $new-position: 100%, $new-spacing: 15px, $new-repeat: no-repeat);
+      
+      If you don't specify these options they will default to `0%` for `position`,
+      `0px` for spacing, and `no-repeat` for `repeat`.
+      
+      Default values for all sprites can be specified by passing values for `$position`,
+      `$spacing`, and `$repeat`.
+
+#sprite.helper
+  %h3
+    %a(href="#sprite")
+      sprite(<span class="arg">$map</span>, <span class="arg">$sprite</span>, <span class="arg" data-default-value="0">$offset-x</span>, <span class="arg" data-default-value="0">$offset-y</span>)
+  .details
+    :markdown
+      Returns the image and background position for use in a single shorthand property:
+      
+          $icons: sprite-map("icons/*.png"); // contains icons/new.png among others.
+          background: sprite($icons, new) no-repeat;
+      
+      Becomes:
+      
+          background: url('/images/icons.png?12345678') 0 -24px no-repeat;
+
+#sprite-map-name.helper
+  %h3
+    %a(href="#sprite-map-name")
+      sprite-map-name(<span class="arg">$map</span>)
+  .details
+    :markdown
+      Returns the name of a sprite map
+      The name is derived from the folder than contains the sprites.
+
+#sprite-file.helper
+  %h3
+    %a(href="#sprite-file")
+      sprite-file(<span class="arg">$map</span>, <span class="arg">$sprite</span>)
+  .details
+    :markdown
+      Returns the relative path (from the images directory) to the original file
+      used when construction the sprite. This is suitable for passing to the
+      `image-width` and `image-height` helpers.
+
+#sprite-url.helper
+  %h3
+    %a(href="#sprite-url")
+      sprite-url(<span class="arg">$map</span>)
+  .details
+    :markdown
+      Returns a url to the sprite image.
+
+#sprite-position.helper
+  %h3
+    %a(href="#sprite-position")
+      sprite-position(<span class="arg">$map</span>, <span class="arg">$sprite</span>, <span class="arg" data-default-value="0">$offset-x</span>, <span class="arg" data-default-value="0">$offset-y</span>)
+  .details
+    :markdown
+      Returns the position for the original image in the sprite.
+      This is suitable for use as a value to background-position:
+      
+          $icons: sprite-map("icons/*.png");
+          background-position: sprite-position($icons, new);
+      
+      Might generate something like:
+      
+          background-position: 0 -34px;
+      
+      You can adjust the background relative to this position by passing values for
+      `$offset-x` and `$offset-y`:
+      
+          $icons: sprite-map("icons/*.png");
+          background-position: sprite-position($icons, new, 3px, -2px);
+      
+      Would change the above output to:
+      
+          background-position: 3px -36px;

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

@@ -8,6 +8,11 @@ classnames:
   - reference
   - core
   - helpers
+documented_functions:
+  - "pi"
+  - "sin"
+  - "cos"
+  - "tan"
 ---
 %h1 Compass Trig Helpers
 

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

@@ -8,6 +8,10 @@ classnames:
   - reference
   - core
   - helpers
+documented_functions:
+  - "stylesheet-url"
+  - "font-url"
+  - "image-url"
 ---
 %h1 Compass URL Helpers
 
@@ -43,11 +47,15 @@ classnames:
 #image-url.helper
   %h3
     %a(href="#image-url")
-      image-url($path, $only-path: false)
+      image-url($path, $only-path: false, $cache-buster: true)
   .details
     %p
       Generates a path to an asset found relative to the project's images directory.
-      %br
+    %p
       Passing a true value as the second argument will cause the only the path to be returned
       instead of a `url()` function
+    %p
+      The third argument is used to control the cache buster on a per-use basis.
+      When set to `false` no cache buster will be used. When a string, that
+      value will be used as the cache buster.
 

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

@@ -1,9 +1,10 @@
---- 
+---
 title: Compass Layout
 crumb: Layout
 framework: compass
+sidebar: true
 stylesheet: compass/_layout.scss
-meta_description: Page layout module. So far, this is just the sticky-footer mixin.
+meta_description: Page layout module.
 layout: core
 classnames:
   - reference
@@ -13,4 +14,3 @@ classnames:
 - render 'reference' do
   %p
     This module provides tools to help you with page layout.
-    So far, it's just the <code><a href="/reference/compass/layout/sticky_footer/#mixin-sticky-footer">sticky-footer</a></code> mixin.

doc-src/content/reference/compass/layout/grid_background.haml

@@ -0,0 +1,16 @@
+---
+title: Compass Grid Backgrounds
+crumb: Grid Background
+framework: compass
+stylesheet: compass/layout/_grid-background.scss
+layout: core
+classnames:
+  - reference
+  - core
+  - layout
+---
+- render 'reference' do
+  %p
+    The grid-background mixins allow you to generate fixed, fluid and elastic
+    grid-images on-the-fly using css3 gradients. These can be used for testing
+    both horizontal and vertical grids.

doc-src/content/reference/compass/reset-legacy.haml

@@ -0,0 +1,27 @@
+--- 
+title: Compass Reset (legacy)
+crumb: Reset (legacy)
+framework: compass
+stylesheet: compass/_reset-legacy.scss
+layout: core
+sidebar: true
+deprecated: true
+classnames:
+  - reference
+  - core
+  - reset
+meta_description: Adds a CSS Reset into your stylesheet.
+---
+- render 'reference' do
+  %p.warning
+    This import is deprecated. Please import
+    <a href="/reference/compass/reset/" class="better">reset</a> instead.
+  
+  :markdown
+    This module applies the [global reset](/reference/compass/reset/utilities-legacy/#mixin-global-reset)
+    to your stylesheet by simply importing it.
+    
+    **Note:** This module will place styles into your stylesheet by importing it. This
+    is not the standard behavior of a compass module but it optimizes the common use case.
+    If you want to control the reset, please use the mixins defined in the [reset
+    utilities module](/reference/compass/reset/utilities-legacy/)

doc-src/content/reference/compass/reset-legacy/utilities-legacy.haml

@@ -0,0 +1,22 @@
+--- 
+title: Compass Reset Utilities (legacy)
+crumb: Reset Utilities (legacy)
+framework: compass
+stylesheet: compass/reset/_utilities-legacy.scss
+layout: core
+deprecated: true
+meta_description: Mixins for resetting elements.
+classnames:
+  - reference
+  - core
+  - utilities
+---
+- render 'reference' do
+  %p.warning
+    This import is deprecated. Please import
+    <a href="/reference/compass/reset/utilities/" class="better">reset utilities</a> instead.
+
+  :markdown
+    These utilities are used to reset your document. The easiest way to use them
+    is to simply `@import "compass/reset"` which will import this module and apply
+    the appropriate mixins for you.

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

@@ -4,6 +4,7 @@ crumb: Reset
 framework: compass
 stylesheet: compass/_reset.scss
 layout: core
+sidebar: true
 classnames:
   - reference
   - core
@@ -18,4 +19,4 @@ meta_description: Adds a CSS Reset into your stylesheet.
     **Note:** This module will place styles into your stylesheet by importing it. This
     is not the standard behavior of a compass module but it optimizes the common use case.
     If you want to control the reset, please use the mixins defined in the [reset
-    utilities module](/reference/compass/reset/utilities/)
+    utilities module](/reference/compass/reset/utilities/) 

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

@@ -0,0 +1,18 @@
+--- 
+title: Compass Typography
+crumb: Typography
+framework: compass
+sidebar: true
+stylesheet: compass/_typography.scss
+classnames:
+  - reference
+  - core
+  - typography
+meta_description: Provides basic mixins for common typography patterns.
+layout: core
+nav_stylesheet: compass/_typography.scss
+---
+- render 'reference' do
+  %p
+    The Compass Typography module provides some basic mixins
+    for common text styling patterns.