Rename Download to Install and spruce up the madlib a bit.

doc-src/Gemfile.lock

@@ -8,7 +8,7 @@ GIT
 PATH
   remote: ..
   specs:
-    compass (0.11.beta.2.0d29379)
+    compass (0.11.beta.3.5a2ea40)
       chunky_png (~> 0.12.0)
       sass (>= 3.1.0.alpha.249)
 

doc-src/assets/javascripts/install.js

@@ -45,7 +45,14 @@ function showInstallCommand() {
         create_command = create_command + " --syntax sass";
     }
     if ($("#options").val() == "customized") {
-        create_command = create_command + " --sass-dir <sassdir> --css-dir <cssdir> --javascripts-dir <jsdir> --images-dir <imgsdir>";
+        $("#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>";
@@ -69,6 +76,7 @@ function attachMadlibBehaviors() {
         }
     });
     $("#existence, #app-type, #framework, #syntax, #options").change(showInstallCommand);
+    $(".madlib input").keyup(function(){setTimeout(showInstallCommand, 0.1)});
 }
 
 function setupMadlib() {

doc-src/content/install.haml

@@ -1,10 +1,10 @@
 ---
-title: Download | Compass Documentation
+title: Install the Compass Stylesheet Authoring Framework
-crumb: Download
+crumb: Install
-body_id: download
+body_id: install
 ---
 - content_for :javascripts do
-  %script(src="/javascripts/download.js")
+  %script(src="/javascripts/install.js")
 %p
   Compass runs on any computer that has
   <a href="http://www.ruby-lang.org/en/downloads/">ruby installed</a>.
@@ -36,7 +36,18 @@ body_id: download
   %select#options
     %option{:value => "default"} use compass's recommended
     %option{:value => "customized"} customize my project's
-  directory structure</span>.
+  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

doc-src/content/stylesheets/partials/_install.scss

@@ -1,8 +1,10 @@
-body#download {
+body#install {
   #steps, p.madlib, p.note, h4 { margin-top: 1em;                        }
   p.note                       { font-size: smaller; font-style: italic; }
   p.warning                    { color: #c00;                            }
   .customization               { display: none;                          }
   .customizable .customization { display: inline;                        }
-  blockquote                   { border-left: 2px solid #ccc; text-indent: 0; padding-left: 0.5em; }
+  blockquote                   { border-left: 2px solid #ccc;
+                                 text-indent: 0; padding-left: 0.5em;    }
+  .customization input         { width: 8em;                             }
 }

doc-src/content/stylesheets/screen.scss

@@ -16,7 +16,7 @@
 @import "partials/main";
 @import "partials/code";
 @import "partials/example";
-@import "partials/download";
+@import "partials/install";
 
 @import "syntax/syntax-theme";
 

doc-src/layouts/partials/main-navigation.haml

@@ -13,4 +13,4 @@
       %li
         %a{:href => "/get-involved/", :rel=> "get-involved"} Get Involved
       %li
-        %a{:href => "/download/", :rel=> "download"} Download
+        %a{:href => "/install/", :rel=> "install"} Install