Adding Middleman with documentation site (to be pushed to github pages)

.gitignore

@@ -1,20 +1,22 @@
-build/*
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+#
+# If you find yourself ignoring temporary files generated by your text editor
+# or operating system, you probably want to add a global ignore instead:
+# git config --global core.excludesfile ~/.gitignore_global
 
-app/*
-vendor/*
+# Ignore bundler config
+/.bundle
 
-*.gem
-Gemfile.lock
-
-.grunt
-doc
+# Ignore the build directory
+/build
 
-_SpecRunner.html
+# Ignore Sass' cache
+/.sass-cache
 
+# Ignore .DS_store file
 .DS_Store
 
-.grunt
-
 /node_modules
-
-/doc
+*.gem
+/app
+/vendor

Gemfile

@@ -1,5 +1,20 @@
-# A sample Gemfile
-source "https://rubygems.org"
+# If you have OpenSSL installed, we recommend updating
+# the following line to use "https"
+source 'http://rubygems.org'
 
-# gem "rails"
-gem 'json', '1.8.0'
+gem "middleman", "~>3.1.4"
+
+# Live-reloading plugin
+gem "middleman-livereload", "~> 3.1.0"
+
+gem "middleman-gh-pages"
+
+gem "json", "1.8.0"
+
+# For faster file watcher updates on Windows:
+gem "wdm", "~> 0.1.0", :platforms => [:mswin, :mingw]
+
+# Cross-templating language block fix for Ruby 1.8
+platforms :mri_18 do
+  gem "ruby18_source_location"
+end

Gemfile.lock

@@ -1,10 +1,108 @@
 GEM
-  remote: https://rubygems.org/
+  remote: http://rubygems.org/
   specs:
+    activesupport (3.2.14)
+      i18n (~> 0.6, >= 0.6.4)
+      multi_json (~> 1.0)
+    chunky_png (1.2.8)
+    coffee-script (2.2.0)
+      coffee-script-source
+      execjs
+    coffee-script-source (1.6.3)
+    compass (0.12.2)
+      chunky_png (~> 1.2)
+      fssm (>= 0.2.7)
+      sass (~> 3.1)
+    em-websocket (0.5.0)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0.5.3)
+    eventmachine (1.0.3)
+    execjs (1.4.0)
+      multi_json (~> 1.0)
+    ffi (1.9.0)
+    fssm (0.2.10)
+    haml (4.0.3)
+      tilt
+    hike (1.2.3)
+    http_parser.rb (0.5.3)
+    i18n (0.6.4)
     json (1.8.0)
+    kramdown (1.1.0)
+    listen (1.2.2)
+      rb-fsevent (>= 0.9.3)
+      rb-inotify (>= 0.9)
+      rb-kqueue (>= 0.2)
+    middleman (3.1.4)
+      coffee-script (~> 2.2.0)
+      compass (>= 0.12.2)
+      execjs (~> 1.4.0)
+      haml (>= 3.1.6)
+      kramdown (~> 1.1.0)
+      middleman-core (= 3.1.4)
+      middleman-more (= 3.1.4)
+      middleman-sprockets (>= 3.1.2)
+      sass (>= 3.1.20)
+      uglifier (~> 2.1.0)
+    middleman-core (3.1.4)
+      activesupport (~> 3.2.6)
+      bundler (~> 1.1)
+      i18n (~> 0.6.1)
+      listen (~> 1.2.2)
+      rack (>= 1.4.5)
+      rack-test (~> 0.6.1)
+      thor (>= 0.15.2, < 2.0)
+      tilt (~> 1.3.6)
+    middleman-gh-pages (0.0.2)
+      rake (> 0.9.3)
+    middleman-livereload (3.1.0)
+      em-websocket (>= 0.2.0)
+      middleman-core (>= 3.0.2)
+      multi_json (~> 1.0)
+      rack-livereload
+    middleman-more (3.1.4)
+    middleman-sprockets (3.1.4)
+      middleman-core (>= 3.0.14)
+      middleman-more (>= 3.0.14)
+      sprockets (~> 2.1)
+      sprockets-helpers (~> 1.0.0)
+      sprockets-sass (~> 1.0.0)
+    multi_json (1.7.8)
+    rack (1.5.2)
+    rack-livereload (0.3.15)
+      rack
+    rack-test (0.6.2)
+      rack (>= 1.0)
+    rake (10.1.0)
+    rb-fsevent (0.9.3)
+    rb-inotify (0.9.0)
+      ffi (>= 0.5.0)
+    rb-kqueue (0.2.0)
+      ffi (>= 0.5.0)
+    ruby18_source_location (0.2)
+    sass (3.2.10)
+    sprockets (2.10.0)
+      hike (~> 1.2)
+      multi_json (~> 1.0)
+      rack (~> 1.0)
+      tilt (~> 1.1, != 1.3.0)
+    sprockets-helpers (1.0.1)
+      sprockets (~> 2.0)
+    sprockets-sass (1.0.1)
+      sprockets (~> 2.0)
+      tilt (~> 1.1)
+    thor (0.18.1)
+    tilt (1.3.7)
+    uglifier (2.1.2)
+      execjs (>= 0.3.0)
+      multi_json (~> 1.0, >= 1.0.2)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
   json (= 1.8.0)
+  middleman (~> 3.1.4)
+  middleman-gh-pages
+  middleman-livereload (~> 3.1.0)
+  ruby18_source_location
+  wdm (~> 0.1.0)

Rakefile

@@ -1 +1,2 @@
 require "bundler/gem_tasks"
+require "middleman-gh-pages"

config.rb

@@ -0,0 +1,82 @@
+###
+# Compass
+###
+
+# Change Compass configuration
+# compass_config do |config|
+#   config.output_style = :compact
+# end
+
+###
+# Page options, layouts, aliases and proxies
+###
+
+# Per-page layout changes:
+#
+# With no layout
+# page "/path/to/file.html", :layout => false
+#
+# With alternative layout
+# page "/path/to/file.html", :layout => :otherlayout
+#
+# A path which all have the same layout
+# with_layout :admin do
+#   page "/admin/*"
+# end
+
+# Proxy pages (http://middlemanapp.com/dynamic-pages/)
+# proxy "/this-page-has-no-template.html", "/template-file.html", :locals => {
+#  :which_fake_page => "Rendering a fake page with a local variable" }
+
+###
+# Helpers
+###
+
+# Automatic image dimensions on image_tag helper
+# activate :automatic_image_sizes
+
+# Reload the browser automatically whenever files change
+activate :livereload
+
+activate :directory_indexes
+
+# Methods defined in the helpers block are available in templates
+helpers do
+
+  def nav(items)
+    items.each do |item|
+
+    end
+  end
+
+  def nav_item(name, url)
+    content_tag :li do
+      link_to name, url
+    end
+  end
+
+end
+
+set :css_dir, 'stylesheets'
+
+set :js_dir, 'javascripts'
+
+set :images_dir, 'images'
+
+# Build-specific configuration
+configure :build do
+  # For example, change the Compass output style for deployment
+  # activate :minify_css
+
+  # Minify Javascript on build
+  # activate :minify_javascript
+
+  # Enable cache buster
+  # activate :asset_hash
+
+  # Use relative URLs
+  # activate :relative_assets
+
+  # Or use a different image path
+  # set :http_path, "/Content/images/"
+end

source/accessibility.html.erb

@@ -0,0 +1,60 @@
+<h1>Accessibility</h1>
+
+<p>There's no question about the merit of making websites accessible for all users, regardless of disability.  While many developers have a will, we don't always have a way.  For larger projects the prospect of making a complex interactive website fully accessible can be daunting, to the point where accessibility may be deprioritized.</p>
+
+<p>The truth is, making a website accessible does not have to be complicated, and Xooie can make it even easier.</p>
+
+<h2>How Xooie Makes Accessibility Easier</h2>
+
+<p>Let's take a look at a fairly common design pattern - the tab.</p>
+
+<p>The tab interface is not part of the HTML specification.  As a result, there are no real semantic tags that we can use to identify that a piece of markup is a tab.  Still, let's take a look at what makes up the common tab pattern:</p>
+
+<ul>
+    <li>A tab control that, when activated, makes content visible</li>
+    <li>A list to organize the tab controls</li>
+    <li>A panel that contains the content made visible by the tab control</li>
+</ul>
+
+<p>Semantically speaking, our actionable controls are buttons.  Lists are defined in HTML as ul or ol tags.  There are many ways to indicate sections of content, so let's call our panel a div.</p>
+
+<p style="margin-top: 50px;">Let's take a look at an accessible tab interface:</p>
+
+<pre><code>
+    &lt;div&gt;
+        &lt;ul role="tablist" aria-owns="tab-1 tab-2 tab-3"&gt;&lt;/ul&gt;
+
+        &lt;button id="tab-1" role="tab" aria-controls="tabpanel-1" aria-selected="true"&gt;Header 1&lt;/button&gt;
+        &lt;div id="tabpanel-1" role="tabpanel" aria-expanded="true"&gt;Content for header 1&lt;/div&gt;
+
+        &lt;button id="tab-2" role="tab" aria-controls="tabpanel-2" aria-selected="false"&gt;Header 2&lt;/button&gt;
+        &lt;div id="tabpanel-2" role="tabpanel" aria-expanded="false"&gt;Content for header 2&lt;/div&gt;
+
+        &lt;button id="tab-3" role="tab" aria-controls="tabpanel-3" aria-selected="false"&gt;Header 3&lt;/button&gt;
+        &lt;div id="tabpanel-3" role="tabpanel" aria-expanded="false"&gt;Content for header 3&lt;/div&gt;
+    &lt;/div&gt;
+</code></pre>
+
+<p style="margin-top: 100px;">There's a lot going on here.  First, we identify elements that have specific roles with the appropriate role attribute.  We need to have unique ids for elements that have semantic roles.  Ids are used to define contextual and semantic relationships between elements.  In this case, we are indicating that a tab controls a specific tabpanel.  We need to convey state; in this case, we indicate when a tab is selected and the associated panel is expanded.  This might be an accordion view, where we want to have our tabs inline with our panels.  We still need to group these tabs together as a list, however.  Since the buttons are not decenents of the tablist, we define that relationship by indicating that the tablist owns the tabs.</p>
+
+<p style="margin-top: 50px;">Now let's take a look at this same widget built with Xooie:</p>
+
+<pre><code>
+    &lt;div data-widget-type="tab"&gt;
+
+        &lt;div data-x-role="tabpanel"&gt;Content for header 1&lt;/div&gt;
+
+        &lt;div data-x-role="tabpanel"&gt;Content for header 2&lt;/div&gt;
+
+        &lt;div data-x-role="tabpanel"&gt;Content for header 3&lt;/div&gt;
+
+    &lt;/div&gt;
+</code></pre>
+
+<p style="margin-top: 100px;">Xooie will take care of adding all the appropriate attributes.  It will even render a tablist element if one was not specified, complete with tabs for each panel.  Of course, if you wish to render tabs the widget will use them instead.  It's that easy!</p>
+
+<h2>Some Simple Rules for Making Content Accessible</h2>
+
+<ul>
+    <li>Use the right tags.  Many assistive technologies will expect to see markup used according to W3C specifications.  Use semantically appropriate tags.  If it's a button, use the &lt;button&gt; tag.</li>
+</ul>