Update everything for v0.5.1

We should be doing this in the stable branch to ensure fuzzy
dependencies are met identically on subsequent releases.

In this case, browserify had a change in 2.34.3 which resulted in
JSXTransformer to be a different size. While it was a change for the
better, it was unexpected and not a change we were calling out in the
release.

This shrinkwraps to the same versions of packages we had when we shipped
0.5.0.

.editorconfig

@@ -0,0 +1,12 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,25 @@
+.DS_STORE
+node_modules
+*~
+*.pyc
+static
+.grunt
+_SpecRunner.html
+__benchmarks__
+build/
+.module-cache
+*.gem
+docs/code
+docs/_site
+docs/.sass-cache
+docs/css/react.css
+docs/js/.module-cache
+docs/js/JSXTransformer.js
+docs/js/react.min.js
+docs/js/docs.js
+docs/js/jsx-compiler.js
+docs/js/live_editor.js
+docs/js/examples
+docs/downloads
+examples/shared/*.js
+

.jshintrc

@@ -0,0 +1,20 @@
+{
+  "node": true,
+
+  "boss": true,
+  "curly": true,
+  "devel": true,
+  "eqnull": true,
+  "expr": true,
+  "funcscope": true,
+  "globalstrict": true,
+  "loopfunc": true,
+  "newcap": false,
+  "noempty": true,
+  "nonstandard": true,
+  "onecase": true,
+  "regexdash": true,
+  "trailing": true,
+  "undef": true,
+  "unused": "vars"
+}

.mailmap

@@ -0,0 +1,21 @@
+Ben Newman <bn@cs.stanford.edu> <benjamn@fb.com>
+Dan Schafer <dschafer@fb.com>
+Harry Hull <harry.hull1@gmail.com>
+Jeff Morrison <jeff@anafx.com> <Jeff@anafx.com>
+Jeff Morrison <jeff@anafx.com> JeffMo <jeffmo@fb.com>
+Jeffrey Lin <lin.jeffrey@gmail.com> <jeffreylin@fb.com>
+Jordan Walke <jordojw@gmail.com>
+Jordan Walke <jordojw@gmail.com> <jordanjcw@fb.com>
+Laurence Rowe <l@lrowe.co.uk> <laurence@lrowe.co.uk>
+Nick Gavalas <njg57@cornell.edu>
+Paul O’Shannessy <paul@oshannessy.com> <poshannessy@fb.com>
+Paul Shen <paul@mnml0.com> <paulshen@fb.com>
+Pete Hunt <floydophone@gmail.com>
+Pete Hunt <floydophone@gmail.com> <pete.hunt@fb.com>
+Pete Hunt <floydophone@gmail.com> <pete@instagram.com>
+Sander Spies <sandermail@gmail.com>
+Sebastian Markbåge <sebastian@calyptus.eu> <sema@fb.com>
+Stoyan Stefanov <ssttoo@ymail.com>
+Timothy Yung <yungsters@gmail.com> <yungsters@fb.com>
+Vjeux <vjeuxx@gmail.com>
+Vjeux <vjeuxx@gmail.com> <vjeux@fb.com>

.travis.yml

@@ -0,0 +1,15 @@
+---
+language: node_js
+node_js:
+- '0.10'
+after_script:
+- curl -F "react=@build/react.js" -F "react.min=@build/react.min.js" -F "transformer=@build/JSXTransformer.js"
+  -F "react-with-addons=@build/react-with-addons.js" -F "react-with-addons.min=@build/react-with-addons.min.js"
+  -F "commit=$TRAVIS_COMMIT" -F "date=`git log --format='%ct' -1`" -F "pull_request=$TRAVIS_PULL_REQUEST"
+  -F "token=$SECRET_TOKEN" -F "branch=$TRAVIS_BRANCH" $SERVER
+env:
+  global:
+  # SERVER
+  - secure: qPvsJ46XzGrdIuPA70b55xQNGF8jcK7N1LN5CCQYYocXLa+fBrl+fTE77QvehOPhqwJXcj6kOxI+sY0KrVwV7gmq2XY2HZGWUSCxTN0SZlNIzqPA80Y7G/yOjA4PUt8LKgP+8tptyhTAY56qf+hgW8BoLiKOdztYF2p+3zXOLuA=
+  # SECRET_TOKEN
+  - secure: dkpPW+VnoqC/okhRdV90m36NcyBFhcwEKL3bNFExAwi0dXnFao8RoFlvnwiPlA23h2faROkMIetXlti6Aju08BgUFV+f9aL6vLyU7gUent4Nd3413zf2fwDtXIWIETg6uLnOpSykGKgCAT/hY3Q2oPLqOoY0OxfgnbqwxkxljrE=

AUTHORS

@@ -0,0 +1,50 @@
+Alexander Solovyov <alexander@solovyov.net>
+Andrew Zich <azich@fb.com>
+Andrey Popp <8mayday@gmail.com>
+Ben Alpert <spicyjalapeno@gmail.com>
+Ben Newman <bn@cs.stanford.edu>
+Brian Rue <brian@rollbar.com>
+Cam Spiers <camspiers@gmail.com>
+Cat Chen <catchen@fb.com>
+Cheng Lou <chenglou92@gmail.com>
+Christian Roman <chroman16@gmail.com>
+Clay Allsopp <clay.allsopp@gmail.com>
+Connor McSheffrey <connor.mcsheffrey@gmail.com>
+Dan Schafer <dschafer@fb.com>
+Daniel Gasienica <dgasienica@zynga.com>
+Daniel Miladinov <dmiladinov@wingspan.com>
+Danny Ben-David <dannybd@fb.com>
+David Hu <davidhu91@gmail.com>
+Eric Clemmons <eric@smarterspam.com>
+Greg Roodt <groodt@gmail.com>
+Harry Hull <harry.hull1@gmail.com>
+Hugo Jobling <me@thisishugo.com>
+Ian Obermiller <iano@fb.com>
+Isaac Salier-Hellendag <isaac@fb.com>
+Jakub Malinowski <jakubmal@gmail.com>
+James Ide <ide@fb.com>
+Jamie Wong <jamie.lf.wong@gmail.com>
+Jan Kassens <jkassens@fb.com>
+Jeff Morrison <jeff@anafx.com>
+Jeffrey Lin <lin.jeffrey@gmail.com>
+Jordan Walke <jordojw@gmail.com>
+Josh Duck <josh@fb.com>
+Keito Uchiyama <keito@fb.com>
+Kunal Mehta <k.mehta@berkeley.edu>
+Laurence Rowe <l@lrowe.co.uk>
+Marshall Roch <mroch@fb.com>
+Martin Konicek <mkonicek@fb.com>
+Mathieu M-Gosselin <mathieumg@gmail.com>
+Nick Gavalas <njg57@cornell.edu>
+Owen Coutts <owenc@fb.com>
+Paul O’Shannessy <paul@oshannessy.com>
+Paul Seiffert <paul.seiffert@gmail.com>
+Paul Shen <paul@mnml0.com>
+Pete Hunt <floydophone@gmail.com>
+Peter Cottle <pcottle@fb.com>
+Sander Spies <sandermail@gmail.com>
+Sebastian Markbåge <sebastian@calyptus.eu>
+Stoyan Stefanov <ssttoo@ymail.com>
+Timothy Yung <yungsters@gmail.com>
+Vjeux <vjeuxx@gmail.com>
+Zach Bruggeman <zbruggeman@me.com>

CHANGELOG.md

@@ -0,0 +1,131 @@
+## 0.5.1 (October 29, 2013)
+
+### React
+
+* Fixed bug with `<input type="range">` and selection events.
+* Fixed bug with selection and focus.
+* Made it possible to unmount components from the document root.
+* Fixed bug for `disabled` attribute handling on non-`<input>` elements.
+
+### React with Addons
+
+* Fixed bug with transition and animation event detection.
+
+
+## 0.5.0 (October 16, 2013)
+
+### React
+
+* Memory usage improvements - reduced allocations in core which will help with GC pauses
+* Performance improvements - in addition to speeding things up, we made some tweaks to stay out of slow path code in V8 and Nitro.
+* Standardized prop -> DOM attribute process. This previously resulting in additional type checking and overhead as well as confusing cases for users. Now we will always convert your value to a string before inserting it into the DOM.
+* Support for Selection events.
+* Support for [Composition events](https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent).
+* Support for additional DOM properties (`charSet`, `content`, `form`, `httpEquiv`, `rowSpan`, `autoCapitalize`).
+* Support for additional SVG properties (`rx`, `ry`).
+* Support for using `getInitialState` and `getDefaultProps` in mixins.
+* Support mounting into iframes.
+* Bug fixes for controlled form components.
+* Bug fixes for SVG element creation.
+* Added `React.version`.
+* Added `React.isValidClass` - Used to determine if a value is a valid component constructor.
+* Removed `React.autoBind` - This was deprecated in v0.4 and now properly removed.
+* Renamed  `React.unmountAndReleaseReactRootNode` to `React.unmountComponentAtNode`.
+* Began laying down work for refined performance analysis.
+* Better support for server-side rendering - [react-page](https://github.com/facebook/react-page) has helped improve the stability for server-side rendering.
+* Made it possible to use React in environments enforcing a strict [Content Security Policy](https://developer.mozilla.org/en-US/docs/Security/CSP/Introducing_Content_Security_Policy). This also makes it possible to use React to build Chrome extensions.
+
+### React with Addons (New!)
+
+* Introduced a separate build with several "addons" which we think can help improve the React experience. We plan to deprecate this in the long-term, instead shipping each as standalone pieces. [Read more in the docs](http://facebook.github.io/react/docs/addons.html).
+
+### JSX
+
+* No longer transform `class` to `className` as part of the transform! This is a breaking change - if you were using `class`, you *must* change this to `className` or your components will be visually broken.
+* Added warnings to the in-browser transformer to make it clear it is not intended for production use.
+* Improved compatibility for Windows
+* Improved support for maintaining line numbers when transforming.
+
+
+## 0.4.1 (July 26, 2013)
+
+### React
+
+* `setState` callbacks are now executed in the scope of your component.
+* `click` events now work on Mobile Safari.
+* Prevent a potential error in event handling if `Object.prototype` is extended.
+* Don't set DOM attributes to the string `"undefined"` on update when previously defined.
+* Improved support for `<iframe>` attributes.
+* Added checksums to detect and correct cases where server-side rendering markup mismatches what React expects client-side.
+
+### JSXTransformer
+
+* Improved environment detection so it can be run in a non-browser environment.
+
+
+## 0.4.0 (July 17, 2013)
+
+### React
+
+* Switch from using `id` attribute to `data-reactid` to track DOM nodes. This allows you to integrate with other JS and CSS libraries more easily.
+* Support for more DOM elements and attributes (e.g., `<canvas>`)
+* Improved server-side rendering APIs. `React.renderComponentToString(<component>, callback)` allows you to use React on the server and generate markup which can be sent down to the browser.
+* `prop` improvements: validation and default values. [Read our blog post for details...](http://facebook.github.io/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html)
+* Support for the `key` prop, which allows for finer control over reconciliation. [Read the docs for details...](http://facebook.github.io/react/docs/multiple-components.html)
+* Removed `React.autoBind`. [Read our blog post for details...](http://facebook.github.io/react/blog/2013/07/02/react-v0-4-autobind-by-default.html)
+* Improvements to forms. We've written wrappers around `<input>`, `<textarea>`, `<option>`, and `<select>` in order to standardize many inconsistencies in browser implementations. This includes support for `defaultValue`, and improved implementation of the `onChange` event, and circuit completion. [Read the docs for details...](http://facebook.github.io/react/docs/forms.html)
+* We've implemented an improved synthetic event system that conforms to the W3C spec.
+* Updates to your component are batched now, which may result in a significantly faster re-render of components. `this.setState` now takes an optional callback as it's second parameter. If you were using `onClick={this.setState.bind(this, state)}` previously, you'll want to make sure you add a third parameter so that the event is not treated as the callback.
+
+### JSX
+
+* Support for comment nodes `<div>{/* this is a comment and won't be rendered */}</div>`
+* Children are now transformed directly into arguments instead of being wrapped in an array
+  E.g. `<div><Component1/><Component2/></div>` is transformed into `React.DOM.div(null, Component1(null), Component2(null))`.
+  Previously this would be transformed into `React.DOM.div(null, [Component1(null), Component2(null)])`.
+  If you were using React without JSX previously, your code should still work.
+
+### react-tools
+
+* Fixed a number of bugs when transforming directories
+* No longer re-write `require()`s to be relative unless specified
+
+
+## 0.3.3 (June 20, 2013)
+
+### React
+
+* Allow reusing the same DOM node to render different components. e.g. `React.renderComponent(<div/>, domNode); React.renderComponent(<span/>, domNode);` will work now.
+
+### JSX
+
+* Improved the in-browser transformer so that transformed scripts will execute in the expected scope. The allows components to be defined and used from separate files.
+
+### react-tools
+
+* Upgrade Commoner so `require` statements are no longer relativized when passing through the transformer. This was a feature needed when building React, but doesn't translate well for other consumers of `bin/jsx`.
+* Upgraded our dependencies on Commoner and Recast so they use a different directory for their cache.
+* Freeze our esprima dependency.
+
+
+## 0.3.2 (May 31, 2013)
+
+### JSX
+
+* Improved compatability with other coding styles (specifically, multiple assignments with a single `var`).
+
+### react-tools
+
+* Switch from using the browserified build to shipping individual modules. This allows react-tools to be used with [browserify](https://github.com/substack/node-browserify).
+
+
+## 0.3.1 (May 30, 2013)
+
+### react-tools
+
+* Fix bug in packaging resulting in broken module.
+
+
+## 0.3.0 (May 29, 2013)
+
+* Initial public release

CNAME

@@ -1 +0,0 @@
-legacy.reactjs.org

CONTRIBUTING.md

@@ -0,0 +1,63 @@
+# Contributing to React
+
+React is one of Facebook's first open source projects that is both under very active development and is also being used to ship code to everybody on facebook.com. We're still working out the kinks to make contributing to this project as easy and transparent as possible, but we're not quite there yet. Hopefully this document makes the process for contributing clear and preempts some questions you may have.
+
+## Our Development Process
+
+Some of the core team will be working directly on GitHub. These changes will be public from the beginning. Other changesets will come via a bridge with Facebook's internal source control. This is a necessity as it allows engineers at Facebook outside of the core team to move fast and contribute from an environment they are comfortable in.
+
+### `master` is unsafe
+
+We will do our best to keep `master` in good shape, with tests passing at all times. But in order to move fast, we will make API changes that your application might not be compatible with. We will do our best to communicate these changes and always version appropriately so you can lock into a specific version if need be.
+
+### Pull Requests
+
+The core team will be monitoring for pull requests. When we get one, we'll run some Facebook-specific integration tests on it first. From here, we'll need to get another person to sign off on the changes and then merge the pull request. For API changes we may need to fix internal uses, which could cause some delay. We'll do our best to provide updates and feedback throughout the process.
+
+*Before* submitting a pull request, please make sure the following is done…
+
+1. Fork the repo and create your branch from `master`.
+2. If you've added code that should be tested, add tests!
+3. If you've changed APIs, update the documentation.
+4. Ensure the test suite passes (`grunt test`).
+5. Make sure your code lints (`grunt lint`) - we've done our best to make sure these rules match our internal linting guidelines.
+6. If you haven't already, complete the CLA.
+
+### Contributor License Agreement ("CLA")
+
+In order to accept your pull request, we need you to submit a CLA. You only need to do this once, so if you've done this for another Facebook open source project, you're good to go. If you are submitting a pull request for the first time, just let us know that you have completed the CLA and we can cross-check with your GitHub username.
+
+Complete your CLA here: <https://developers.facebook.com/opensource/cla>
+
+## Bugs
+
+### Where to Find Known Issues
+
+We will be using GitHub Issues for our public bugs. We will keep a close eye on this and try to make it clear when we have an internal fix in progress. Before filing a new task, try to make sure your problem doesn't already exist.
+
+### Reporting New Issues
+
+The best way to get your bug fixed is to provide a reduced test case. jsFiddle, jsBin, and other sites provide a way to give live examples. Those are especially helpful though may not work for `JSX`-based code.
+
+### Security Bugs
+
+Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe disclosure of security bugs. With that in mind, please do not file public issues and go through the process outlined on that page.
+
+## How to Get in Touch
+
+* IRC - [#reactjs on freenode](http://webchat.freenode.net/?channels=reactjs)
+* Mailing list - [reactjs on Google Groups](http://groups.google.com/group/reactjs)
+
+## Coding Style
+
+* Use semicolons;
+* Commas last,
+* 2 spaces for indentation (no tabs)
+* Prefer `'` over `"`
+* `"use strict";`
+* 80 character line length
+* "Attractive"
+
+## License
+
+By contributing to React, you agree that your contributions will be licensed under the [Apache License Version 2.0 (APLv2)](LICENSE).

Gruntfile.js

@@ -0,0 +1,130 @@
+'use strict';
+
+var exec = require('child_process').exec;
+var jsxTask = require('./grunt/tasks/jsx');
+var browserifyTask = require('./grunt/tasks/browserify');
+var wrapupTask = require('./grunt/tasks/wrapup');
+var populistTask = require('./grunt/tasks/populist');
+var phantomTask = require('./grunt/tasks/phantom');
+var npmTask = require('./grunt/tasks/npm');
+var releaseTasks = require('./grunt/tasks/release');
+
+module.exports = function(grunt) {
+
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
+    copy: require('./grunt/config/copy'),
+    jsx: require('./grunt/config/jsx/jsx'),
+    browserify: require('./grunt/config/browserify'),
+    wrapup: require('./grunt/config/wrapup'),
+    populist: require('./grunt/config/populist'),
+    phantom: require('./grunt/config/phantom'),
+    npm: require('./grunt/config/npm'),
+    clean: ['./build', './*.gem', './docs/_site', './examples/shared/*.js'],
+    jshint: require('./grunt/config/jshint'),
+    compare_size: require('./grunt/config/compare_size')
+  });
+
+  grunt.config.set('compress', require('./grunt/config/compress'));
+
+  grunt.loadNpmTasks('grunt-contrib-jshint');
+  grunt.loadNpmTasks('grunt-contrib-copy');
+  grunt.loadNpmTasks('grunt-contrib-clean');
+  grunt.loadNpmTasks('grunt-compare-size');
+  grunt.loadNpmTasks('grunt-contrib-compress');
+
+  // Alias 'jshint' to 'lint' to better match the workflow we know
+  grunt.registerTask('lint', ['jshint']);
+
+  // Register jsx:debug and :release tasks.
+  grunt.registerMultiTask('jsx', jsxTask);
+
+  // Our own browserify-based tasks to build a single JS file build
+  grunt.registerMultiTask('browserify', browserifyTask);
+
+  // Similar to Browserify, use WrapUp to generate single JS file that
+  // defines global variables instead of using require.
+  grunt.registerMultiTask('wrapup', wrapupTask);
+
+  grunt.registerMultiTask('populist', populistTask);
+
+  grunt.registerMultiTask('phantom', phantomTask);
+
+  grunt.registerMultiTask('npm', npmTask);
+
+  // Check that the version we're exporting is the same one we expect in the
+  // package. This is not an ideal way to do this, but makes sure that we keep
+  // them in sync.
+  var reactVersionExp = /\bReact\.version\s*=\s*['"]([^'"]+)['"];/;
+  grunt.registerTask('version-check', function() {
+    var version = reactVersionExp.exec(
+      grunt.file.read('./build/modules/React.js')
+    )[1];
+    var expectedVersion = grunt.config.data.pkg.version;
+    if (version !== expectedVersion) {
+      grunt.log.error('Versions do not match. Expected %s, saw %s', expectedVersion, version);
+      return false;
+    }
+  });
+
+  grunt.registerTask('build:basic', ['jsx:debug', 'version-check', 'browserify:basic']);
+  grunt.registerTask('build:addons', ['jsx:debug', 'browserify:addons']);
+  grunt.registerTask('build:transformer', ['jsx:debug', 'browserify:transformer']);
+  grunt.registerTask('build:min', ['jsx:release', 'version-check', 'browserify:min']);
+  grunt.registerTask('build:addons-min', ['jsx:debug', 'browserify:addonsMin']);
+  grunt.registerTask('build:test', [
+    'jsx:jasmine',
+    'jsx:test',
+    'version-check',
+    'populist:jasmine',
+    'populist:test'
+  ]);
+
+  grunt.registerTask('test', ['build:test', 'build:basic', 'phantom:run']);
+  grunt.registerTask('npm:test', ['build', 'npm:pack']);
+
+  // Optimized build task that does all of our builds. The subtasks will be run
+  // in order so we can take advantage of that and only run jsx:debug once.
+  grunt.registerTask('build', [
+    'jsx:debug',
+    'version-check',
+    'browserify:basic',
+    'browserify:transformer',
+    'browserify:addons',
+    'jsx:release',
+    'browserify:min',
+    'browserify:addonsMin',
+    'copy:react_docs',
+    'compare_size'
+  ]);
+
+  // Automate the release!
+  grunt.registerTask('release:setup', releaseTasks.setup);
+  grunt.registerTask('release:bower', releaseTasks.bower);
+  grunt.registerTask('release:docs', releaseTasks.docs);
+  grunt.registerTask('release:msg', releaseTasks.msg);
+  grunt.registerTask('release:starter', releaseTasks.starter);
+
+  grunt.registerTask('release', [
+    'release:setup',
+    'clean',
+    'build',
+    'gem:only',
+    'release:bower',
+    'release:starter',
+    'compress',
+    'release:docs',
+    'release:msg'
+  ]);
+
+  // `gem` task to build the react-source gem
+  grunt.registerTask('gem', ['build', 'gem:only']);
+
+  grunt.registerTask('gem:only', function() {
+    var done = this.async();
+    exec('gem build react-source.gemspec', done);
+  });
+
+  // The default task - build - to keep setup easy
+  grunt.registerTask('default', ['build']);
+};

LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

README.md

@@ -0,0 +1,96 @@
+# [React](http://facebook.github.io/react) [![Build Status](https://travis-ci.org/facebook/react.png?branch=master)](https://travis-ci.org/facebook/react)
+
+React is a JavaScript library for building user interfaces.
+
+* **Declarative:** React uses a declarative paradigm that makes it easier to reason about your application.
+* **Efficient:** React computes the minimal set of changes necessary to keep your DOM up-to-date.
+* **Flexible:** React works with the libraries and frameworks that you already know.
+
+[Learn how to use React in your own project.](http://facebook.github.io/react/docs/getting-started.html)
+
+## Examples
+
+We have several examples [on the website](http://facebook.github.io/react). Here is the first one to get you started:
+
+```js
+/** @jsx React.DOM */
+var HelloMessage = React.createClass({
+  render: function() {
+    return <div>{'Hello ' + this.props.name}</div>;
+  }
+});
+
+React.renderComponent(
+  <HelloMessage name="John" />,
+  document.getElementById('container')
+);
+```
+
+This example will render "Hello John" into a container on the page.
+
+You'll notice that we used an XML-like syntax; [we call it JSX](http://facebook.github.io/react/docs/jsx-in-depth.html). JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML. A simple transform is included with React that allows converting JSX into native JavaScript for browsers to digest.
+
+## Installation
+
+The fastest way to get started is to serve JavaScript from the CDN (also available on [CDNJS](http://cdnjs.com/#react)):
+
+```html
+<!-- The core React library -->
+<script src="http://fb.me/react-0.5.1.js"></script>
+<!-- In-browser JSX transformer, remove when pre-compiling JSX. -->
+<script src="http://fb.me/JSXTransformer-0.5.1.js"></script>
+```
+
+We've also built a [starter kit](http://facebook.github.io/react/downloads/react-0.5.1.zip) which might be useful if this is your first time using React. It includes a webpage with an example of using React with live code.
+
+If you'd like to use [bower](http://bower.io), it's as easy as:
+
+```sh
+bower install --save react
+```
+
+## Contribute
+
+The main purpose of this repository is to continue to evolve React core, making it faster and easier to use. If you're interested in helping with that, then keep reading. If you're not interested in helping right now that's ok too :) Any feedback you have about using React would be greatly appreciated.
+
+### Building Your Copy of React
+
+The process to build `react.js` is built entirely on top of node.js, using many libraries you may already be familiar with.
+
+#### Prerequisites
+
+* You have `node` installed at v0.10.0+ (it might work at lower versions, we just haven't tested).
+* You are familiar with `npm` and know whether or not you need to use `sudo` when installing packages globally.
+* You are familiar with `git`.
+
+#### Build
+
+Once you have the repository cloned, building a copy of `react.js` is really easy.
+
+```sh
+# grunt-cli is needed by grunt; you might have this installed already
+npm install -g grunt-cli
+npm install
+grunt build
+```
+
+At this point, you should now have a `build/` directory populated with everything you need to use React. The examples should all work.
+
+### Grunt
+
+We use grunt to automate many tasks. Run `grunt -h` to see a mostly complete listing. The important ones to know:
+
+```sh
+# Create test build & run tests with PhantomJS
+grunt test
+# Lint the core library code with JSHint
+grunt lint
+# Lint package code
+grunt lint:package
+# Wipe out build directory
+grunt clean
+```
+
+### More…
+
+There's only so much we can cram in here. To read more about the community and guidelines for submitting pull requests, please read the [Contributing document](CONTRIBUTING.md).

bin/jsx

@@ -0,0 +1,12 @@
+#!/usr/bin/env node
+"use strict";
+
+var visitors = require('../vendor/fbtransform/visitors').transformVisitors;
+var transform = require('jstransform').transform;
+
+require("commoner").resolve(function(id) {
+  return this.readModuleP(id);
+}).process(function(id, source) {
+  // This is where JSX, ES6, etc. desugaring happens.
+  return transform(visitors.react, source).code;
+});

bin/jsx-internal

@@ -0,0 +1,55 @@
+#!/usr/bin/env node
+"use strict";
+
+var visitors = require('../vendor/fbtransform/visitors').transformVisitors;
+var transform = require('jstransform').transform;
+var propagate = require("../vendor/constants").propagate;
+
+require("commoner").resolve(function(id) {
+  var context = this;
+
+  // Note that the result of context.getProvidedP() is cached for the
+  // duration of the build, so it is both consistent and cheap to
+  // evaluate multiple times.
+  return context.getProvidedP().then(function(idToPath) {
+    // If a module declares its own identifier using @providesModule
+    // then that identifier will be a key in the idToPath object.
+    if (idToPath.hasOwnProperty(id)) {
+      return context.readFileP(idToPath[id]);
+    }
+
+    // Otherwise assume the identifier maps directly to a path in the
+    // filesystem.
+    return context.readModuleP(id);
+  });
+
+}).process(function(id, source) {
+  var context = this;
+  var constants = context.config.constants || {};
+
+  // This is where JSX, ES6, etc. desugaring happens.
+  source = transform(visitors.react, source).code;
+
+  // Constant propagation means removing any obviously dead code after
+  // replacing constant expressions with literal (boolean) values.
+  source = propagate(constants, source);
+
+  if (context.config.mocking) {
+    // Make sure there is exactly one newline at the end of the module.
+    source = source.replace(/\s+$/m, "\n");
+
+    return context.getProvidedP().then(function(idToPath) {
+      if (id !== "mock-modules" &&
+          id !== "mocks" &&
+          id !== "test/all" &&
+          idToPath.hasOwnProperty("mock-modules")) {
+        return source + '\nrequire("mock-modules").register(' +
+          JSON.stringify(id) + ', module);\n';
+      }
+
+      return source;
+    });
+  }
+
+  return source;
+});

docs/Gemfile

@@ -0,0 +1,21 @@
+source 'https://rubygems.org'
+
+gem 'rake'
+
+# jekyll, which builds it all
+gem 'jekyll', '~>1.0'
+
+# JSON
+gem 'json'
+
+# SASS for CSS
+gem 'sass'
+
+# For `rake watch`
+gem 'rb-fsevent'
+
+# Redcarpet for Markdown
+gem 'redcarpet'
+
+# For markdown header cleanup
+gem 'sanitize'

docs/Gemfile.lock

@@ -0,0 +1,54 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    classifier (1.3.3)
+      fast-stemmer (>= 1.0.0)
+    colorator (0.1)
+    commander (4.1.3)
+      highline (~> 1.6.11)
+    directory_watcher (1.4.1)
+    fast-stemmer (1.0.2)
+    highline (1.6.19)
+    jekyll (1.0.2)
+      classifier (~> 1.3)
+      colorator (~> 0.1)
+      commander (~> 4.1.3)
+      directory_watcher (~> 1.4.1)
+      kramdown (~> 1.0.2)
+      liquid (~> 2.3)
+      maruku (~> 0.5)
+      pygments.rb (~> 0.5.0)
+      safe_yaml (~> 0.7.0)
+    json (1.8.0)
+    kramdown (1.0.2)
+    liquid (2.5.0)
+    maruku (0.6.1)
+      syntax (>= 1.0.0)
+    mini_portile (0.5.1)
+    nokogiri (1.6.0)
+      mini_portile (~> 0.5.0)
+    posix-spawn (0.3.6)
+    pygments.rb (0.5.0)
+      posix-spawn (~> 0.3.6)
+      yajl-ruby (~> 1.1.0)
+    rake (10.0.4)
+    rb-fsevent (0.9.3)
+    redcarpet (2.2.2)
+    safe_yaml (0.7.1)
+    sanitize (2.0.6)
+      nokogiri (>= 1.4.4)
+    sass (3.2.9)
+    syntax (1.0.0)
+    yajl-ruby (1.1.0)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  jekyll (~> 1.0)
+  json
+  rake
+  rb-fsevent
+  redcarpet
+  sanitize
+  sass

docs/README.md

@@ -0,0 +1,61 @@
+# React Documentation & Website
+
+We use [Jekyll](http://jekyllrb.com/) to build the site using ([mostly](http://zpao.com/posts/adding-line-highlights-to-markdown-code-fences/)) Markdown, and we host it by pushing HTML to [GitHub Pages](http://pages.github.com/).
+
+## Installation
+
+If you are working on the site, you will want to install and run a local copy of it.
+
+### Dependencies
+
+In order to use Jekyll, you will need to have Ruby installed.
+
+ - [Ruby](http://www.ruby-lang.org/) (version >= 1.8.7)
+ - [RubyGems](http://rubygems.org/) (version >= 1.3.7)
+ - [Bundler](http://gembundler.com/)
+
+Mac OS X comes pre-installed with Ruby, but you may need to update RubyGems (via `gem update --system`).
+Otherwise, [RVM](https://rvm.io/) and [rbenv](https://github.com/sstephenson/rbenv) are popular ways to install Ruby.
+Once you have RubyGems and installed Bundler (via `gem install bundler`), use it to install the dependencies:
+
+```sh
+$ cd react/docs
+$ bundle install # Might need sudo.
+```
+
+### Instructions
+
+The site requires React, so first make sure you've built the project (via `grunt`).
+
+Use Jekyll to serve the website locally (by default, at `http://localhost:4000`):
+
+```sh
+$ cd react/docs
+$ rake
+$ jekyll serve -w
+$ open http://localhost:4000/react/
+```
+
+We use [SASS](http://sass-lang.com/) (with [Bourbon](http://bourbon.io/)) for our CSS, and we use JSX to transform some of our JS.
+If you only want to modify the HTML or Markdown, you do not have to do anything because we package pre-compiled copies of the CSS and JS.
+If you want to modify the CSS or JS, use [Rake](http://rake.rubyforge.org/) to compile them:
+
+```sh
+$ cd react/docs
+$ rake watch # Automatically compiles as needed.
+# rake         Manually compile CSS and JS.
+# rake css     Manually compile CSS, only.
+# rake js      Manually compile JS, only.
+```
+
+## Afterthoughts
+
+### Updating `facebook.github.io/react`
+
+The easiest way to do this is to have a separate clone of this repository, checked out to the `gh-pages` branch. We have a build step that expects this to be in a directory named `react-gh-pages` at the same depth as `react`. Then it's just a matter of running `grunt docs`, which will compile the site and copy it out to this repository. From there you can check it in.
+
+**Note:** This should only be done for new releases. You should create a tag corresponding to the relase tag in the main repository.
+
+### Removing the Jekyll / Ruby Dependency
+
+In an ideal world, we would not be adding a Ruby dependency on part of our project. We would like to move towards a point where we are using React to render the website.

docs/Rakefile

@@ -0,0 +1,37 @@
+require('rubygems')
+require('json')
+require('yaml')
+
+desc "generate css from sass"
+task :css do
+  system "sass --style=compressed _css/react.scss css/react.css"
+end
+
+desc "generate js from jsx"
+task :js do
+  system "../bin/jsx _js js"
+end
+
+desc "watch css & js"
+task :watch do
+  Process.spawn "sass --style=compressed --watch _css/react.scss:css/react.css"
+  Process.spawn "../bin/jsx --watch _js js"
+  Process.waitall
+end
+
+desc "update version to match ../package.json"
+task :update_version do
+  react_version = JSON.parse(File.read('../package.json'))['version']
+  site_config = YAML.load_file('_config.yml')
+  if site_config['react_version'] != react_version
+    site_config['react_version'] = react_version
+    File.open('_config.yml', 'w+') { |f| f.write(site_config.to_yaml) }
+  end
+end
+
+desc "build into ../../react-gh-pages"
+task :release => [:update_version, :default] do
+  system "jekyll build -d ../../react-gh-pages"
+end
+
+task :default => [:css, :js]

docs/_config.yml

@@ -0,0 +1,71 @@
+---
+baseurl: /react
+url: http://facebook.github.io
+permalink: /blog/:year/:month/:day/:title.html
+exclude:
+- Gemfile
+- Gemfile.lock
+- README.md
+- Rakefile
+redcarpet:
+  extensions:
+  - fenced_code_blocks
+pygments: true
+name: React
+markdown: redcarpet
+react_version: 0.5.1
+description: A JavaScript library for building user interfaces
+relative_permalinks: true
+paginate: 5
+paginate_path: /blog/page:num
+nav_docs_sections:
+- title: Quick Start
+  items:
+  - id: getting-started
+    title: Getting Started
+  - id: tutorial
+    title: Tutorial
+- title: Guides
+  items:
+  - id: why-react
+    title: Why React?
+  - id: displaying-data
+    title: Displaying Data
+    subitems:
+    - id: jsx-in-depth
+      title: JSX in Depth
+    - id: jsx-gotchas
+      title: JSX Gotchas
+  - id: interactivity-and-dynamic-uis
+    title: Interactivity and Dynamic UIs
+  - id: multiple-components
+    title: Multiple Components
+  - id: reusable-components
+    title: Reusable Components
+  - id: forms
+    title: Forms
+  - id: working-with-the-browser
+    title: Working With the Browser
+    subitems:
+    - id: more-about-refs
+      title: More About Refs
+  - id: tooling-integration
+    title: Tooling Integration
+  - id: addons
+    title: Add-ons
+  - id: examples
+    title: Examples
+- title: Reference
+  items:
+  - id: top-level-api
+    title: Top-Level API
+  - id: component-api
+    title: Component API
+  - id: component-specs
+    title: Component Specs and Lifecycle
+  - id: tags-and-attributes
+    title: Supported Tags and Attributes
+  - id: events
+    title: Event System
+  - id: dom-differences
+    title: DOM Differences

docs/_css/_solarized.scss

@@ -0,0 +1,173 @@
+html * {
+  color-profile: sRGB;
+  rendering-intent: auto;
+}
+  .cm-s-solarized-light {
+    background-color: #f8f5ec;
+    color: #637c84;
+  }
+  .cm-s-solarized-light .emphasis {
+    font-weight: bold;
+  }
+  .cm-s-solarized-light .dotted {
+    border-bottom: 1px dotted #cb4b16;
+  }
+  .cm-s-solarized-light .CodeMirror-gutter {
+    background-color: #eee8d5;
+    border-right: 3px solid #eee8d5;
+  }
+  .cm-s-solarized-light .CodeMirror-gutter .CodeMirror-gutter-text {
+    color: #93a1a1;
+  }
+  .cm-s-solarized-light .CodeMirror-cursor {
+    border-left-color: #002b36 !important;
+  }
+  .cm-s-solarized-light .CodeMirror-matchingbracket {
+    color: #002b36;
+    background-color: #eee8d5;
+    box-shadow: 0 0 10px #eee8d5;
+    font-weight: bold;
+  }
+  .cm-s-solarized-light .CodeMirror-nonmatchingbracket {
+    color: #002b36;
+    background-color: #eee8d5;
+    box-shadow: 0 0 10px #eee8d5;
+    font-weight: bold;
+    color: #dc322f;
+    border-bottom: 1px dotted #cb4b16;
+  }
+  .cm-s-solarized-light span.cm-keyword {
+    color: #268bd2;
+  }
+  .cm-s-solarized-light span.cm-atom {
+    color: #2aa198;
+  }
+  .cm-s-solarized-light span.cm-number {
+    color: #586e75;
+  }
+  .cm-s-solarized-light span.cm-def {
+    color: #637c84;
+  }
+  .cm-s-solarized-light span.cm-variable {
+    color: #637c84;
+  }
+  .cm-s-solarized-light span.cm-variable-2 {
+    color: #b58900;
+  }
+  .cm-s-solarized-light span.cm-variable-3 {
+    color: #cb4b16;
+  }
+  .cm-s-solarized-light span.cm-comment {
+    color: #93a1a1;
+  }
+  .cm-s-solarized-light span.cm-property {
+    color: #637c84;
+  }
+  .cm-s-solarized-light span.cm-operator {
+    color: #657b83;
+  }
+  .cm-s-solarized-light span.cm-string {
+    color: #36958e;
+  }
+  .cm-s-solarized-light span.cm-error {
+    font-weight: bold;
+    border-bottom: 1px dotted #cb4b16;
+  }
+  .cm-s-solarized-light span.cm-bracket {
+    color: #cb4b16;
+  }
+  .cm-s-solarized-light span.cm-tag {
+    color: #657b83;
+  }
+  .cm-s-solarized-light span.cm-attribute {
+    color: #586e75;
+    font-weight: bold;
+  }
+  .cm-s-solarized-light span.cm-meta {
+    color: #268bd2;
+  }
+  .cm-s-solarized-dark {
+    background-color: #002b36;
+    color: #839496;
+  }
+  .cm-s-solarized-dark .emphasis {
+    font-weight: bold;
+  }
+  .cm-s-solarized-dark .dotted {
+    border-bottom: 1px dotted #cb4b16;
+  }
+  .cm-s-solarized-dark .CodeMirror-gutter {
+    background-color: #073642;
+    border-right: 3px solid #073642;
+  }
+  .cm-s-solarized-dark .CodeMirror-gutter .CodeMirror-gutter-text {
+    color: #586e75;
+  }
+  .cm-s-solarized-dark .CodeMirror-cursor {
+    border-left-color: #fdf6e3 !important;
+  }
+  .cm-s-solarized-dark .CodeMirror-matchingbracket {
+    color: #fdf6e3;
+    background-color: #073642;
+    box-shadow: 0 0 10px #073642;
+    font-weight: bold;
+  }
+  .cm-s-solarized-dark .CodeMirror-nonmatchingbracket {
+    color: #fdf6e3;
+    background-color: #073642;
+    box-shadow: 0 0 10px #073642;
+    font-weight: bold;
+    color: #dc322f;
+    border-bottom: 1px dotted #cb4b16;
+  }
+  .cm-s-solarized-dark span.cm-keyword {
+    color: #839496;
+    font-weight: bold;
+  }
+  .cm-s-solarized-dark span.cm-atom {
+    color: #2aa198;
+  }
+  .cm-s-solarized-dark span.cm-number {
+    color: #93a1a1;
+  }
+  .cm-s-solarized-dark span.cm-def {
+    color: #268bd2;
+  }
+  .cm-s-solarized-dark span.cm-variable {
+    color: #cb4b16;
+  }
+  .cm-s-solarized-dark span.cm-variable-2 {
+    color: #cb4b16;
+  }
+  .cm-s-solarized-dark span.cm-variable-3 {
+    color: #cb4b16;
+  }
+  .cm-s-solarized-dark span.cm-comment {
+    color: #586e75;
+  }
+  .cm-s-solarized-dark span.cm-property {
+    color: #b58900;
+  }
+  .cm-s-solarized-dark span.cm-operator {
+    color: #839496;
+  }
+  .cm-s-solarized-dark span.cm-string {
+    color: #6c71c4;
+  }
+  .cm-s-solarized-dark span.cm-error {
+    font-weight: bold;
+    border-bottom: 1px dotted #cb4b16;
+  }
+  .cm-s-solarized-dark span.cm-bracket {
+    color: #cb4b16;
+  }
+  .cm-s-solarized-dark span.cm-tag {
+    color: #839496;
+  }
+  .cm-s-solarized-dark span.cm-attribute {
+    color: #93a1a1;
+    font-weight: bold;
+  }
+  .cm-s-solarized-dark span.cm-meta {
+    color: #268bd2;
+  }

docs/_css/_typography.scss

@@ -0,0 +1,136 @@
+@import 'variables.scss';
+
+$textColor: $mediumColor;
+$textColorLight: lighten($textColor, 20%);
+
+html {
+  font-family: $helvetica;
+  font-family: proxima-nova, $helvetica;
+  font-weight: 300;
+  color: $textColor;
+  line-height: 1.28;
+}
+
+p {
+  margin: 0 0 10px;
+}
+
+.subHeader {
+  font-size: 21px;
+  font-weight: 200;
+  line-height: 30px;
+  margin-bottom: 10px;
+}
+
+em {
+  font-style: italic;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 10px 0;
+  font-family: inherit;
+  font-weight: bold;
+  line-height: 20px;
+  color: inherit;
+  text-rendering: optimizelegibility;
+}
+
+h1 small,
+h2 small,
+h3 small,
+h4 small,
+h5 small,
+h6 small {
+  font-weight: normal;
+  color: $textColorLight
+}
+
+h1,
+h2,
+h3 {
+  line-height: 40px;
+}
+
+h1 {
+  font-size: 39px;
+}
+
+h2 {
+  font-size: 31px;
+}
+
+h3 {
+  font-size: 23px;
+}
+
+h4 {
+  font-size: 17px;
+}
+
+h5 {
+  font-size: 14px;
+}
+
+h6 {
+  font-size: 11px;
+}
+
+h1 small {
+  font-size: 24px;
+}
+
+h2 small {
+  font-size: 18px;
+}
+
+h3 small {
+  font-size: 16px;
+}
+
+h4 small {
+  font-size: 14px;
+}
+
+ul,
+ol {
+  margin: 0 0 10px 25px;
+  padding: 0;
+}
+
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+  margin-bottom: 0;
+}
+
+li {
+  line-height: 20px;
+}
+
+
+
+a {
+  color: $linkColor;
+  text-decoration: none;
+  &:hover,
+  &:focus {
+    color: $linkInteract;
+    text-decoration: underline;
+  }
+  &:focus {
+    outline: thin dotted #333;
+    outline: 5px auto -webkit-focus-ring-color;
+    outline-offset: -2px;
+  }
+}
+.center {
+  text-align: center;
+}
+
+

docs/_css/_variables.scss

@@ -0,0 +1,22 @@
+$primary: #cc7a6f;
+$linkColor: darken($primary, 9%);
+$linkInteract: darken($linkColor, 9%);
+$pageBg: #f9f9f9;
+
+$lightColor: #e9e9e9;
+$mediumestColor: #666;
+$mediumColor: #484848;
+$darkColor: #2d2d2d;
+$darkestColor: #222222;
+$blueColor: #61dafb;
+$orangeColor: complement($blueColor);
+
+$lightTextColor: #fafafa;
+$mediumTextColor: #aaa;
+$darkTextColor: $mediumColor;
+
+$buttonBlueTop: #77a3d2;
+$buttonBlueBottom: #4783c2;
+$buttonGreyTop: #9a9a9a;
+$buttonGreyBottom: #646464;
+

docs/_css/bourbon/_bourbon-deprecated-upcoming.scss

@@ -0,0 +1,13 @@
+//************************************************************************//
+// These mixins/functions are deprecated
+// They will be removed in the next MAJOR version release
+//************************************************************************//
+@mixin box-shadow ($shadows...) {
+  @include prefixer(box-shadow, $shadows, spec);
+  @warn "box-shadow is deprecated and will be removed in the next major version release";
+}
+
+@mixin background-size ($lengths...) {
+  @include prefixer(background-size, $lengths, spec);
+  @warn "background-size is deprecated and will be removed in the next major version release";
+}

docs/_css/bourbon/_bourbon.scss

@@ -0,0 +1,59 @@
+// Custom Helpers
+@import "helpers/deprecated-webkit-gradient";
+@import "helpers/gradient-positions-parser";
+@import "helpers/linear-positions-parser";
+@import "helpers/radial-arg-parser";
+@import "helpers/radial-positions-parser";
+@import "helpers/render-gradients";
+@import "helpers/shape-size-stripper";
+
+// Custom Functions
+@import "functions/compact";
+@import "functions/flex-grid";
+@import "functions/grid-width";
+@import "functions/linear-gradient";
+@import "functions/modular-scale";
+@import "functions/px-to-em";
+@import "functions/radial-gradient";
+@import "functions/tint-shade";
+@import "functions/transition-property-name";
+
+// CSS3 Mixins
+@import "css3/animation";
+@import "css3/appearance";
+@import "css3/backface-visibility";
+@import "css3/background";
+@import "css3/background-image";
+@import "css3/border-image";
+@import "css3/border-radius";
+@import "css3/box-sizing";
+@import "css3/columns";
+@import "css3/flex-box";
+@import "css3/font-face";
+@import "css3/hidpi-media-query";
+@import "css3/image-rendering";
+@import "css3/inline-block";
+@import "css3/keyframes";
+@import "css3/linear-gradient";
+@import "css3/perspective";
+@import "css3/radial-gradient";
+@import "css3/transform";
+@import "css3/transition";
+@import "css3/user-select";
+@import "css3/placeholder";
+
+// Addons & other mixins
+@import "addons/button";
+@import "addons/clearfix";
+@import "addons/font-family";
+@import "addons/hide-text";
+@import "addons/html5-input-types";
+@import "addons/position";
+@import "addons/prefixer";
+@import "addons/retina-image";
+@import "addons/size";
+@import "addons/timing-functions";
+@import "addons/triangle";
+
+// Soon to be deprecated Mixins
+@import "bourbon-deprecated-upcoming";

docs/_css/bourbon/addons/_button.scss

@@ -0,0 +1,273 @@
+@mixin button ($style: simple, $base-color: #4294f0) {
+
+  @if type-of($style) == color {
+    $base-color: $style;
+    $style: simple;
+  }
+
+  // Grayscale button
+  @if $base-color == grayscale($base-color) {
+    @if $style == simple {
+      @include simple($base-color, $grayscale: true);
+    }
+
+    @else if $style == shiny {
+      @include shiny($base-color, $grayscale: true);
+    }
+
+    @else if $style == pill {
+      @include pill($base-color, $grayscale: true);
+    }
+  }
+
+  // Colored button
+  @else {
+    @if $style == simple {
+      @include simple($base-color);
+    }
+
+    @else if $style == shiny {
+      @include shiny($base-color);
+    }
+
+    @else if $style == pill {
+      @include pill($base-color);
+    }
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+
+// Simple Button
+//************************************************************************//
+@mixin simple($base-color, $grayscale: false) {
+  $color:         hsl(0, 0, 100%);
+  $border:        adjust-color($base-color, $saturation:  9%,  $lightness: -14%);
+  $inset-shadow:  adjust-color($base-color, $saturation: -8%,  $lightness:  15%);
+  $stop-gradient: adjust-color($base-color, $saturation:  9%,  $lightness: -11%);
+  $text-shadow:   adjust-color($base-color, $saturation:  15%, $lightness: -18%);
+
+  @if lightness($base-color) > 70% {
+    $color:       hsl(0, 0, 20%);
+    $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+  }
+
+  @if $grayscale == true {
+    $border:        grayscale($border);
+    $inset-shadow:  grayscale($inset-shadow);
+    $stop-gradient: grayscale($stop-gradient);
+    $text-shadow:   grayscale($text-shadow);
+  }
+
+  border: 1px solid $border;
+  border-radius: 3px;
+  box-shadow: inset 0 1px 0 0 $inset-shadow;
+  color: $color;
+  display: inline-block;
+  font-size: 11px;
+  font-weight: bold;
+  @include linear-gradient ($base-color, $stop-gradient);
+  padding: 7px 18px;
+  text-decoration: none;
+  text-shadow: 0 1px 0 $text-shadow;
+  background-clip: padding-box;
+
+  &:hover:not(:disabled) {
+    $base-color-hover:    adjust-color($base-color, $saturation: -4%, $lightness: -5%);
+    $inset-shadow-hover:  adjust-color($base-color, $saturation: -7%, $lightness:  5%);
+    $stop-gradient-hover: adjust-color($base-color, $saturation:  8%, $lightness: -14%);
+
+    @if $grayscale == true {
+      $base-color-hover:    grayscale($base-color-hover);
+      $inset-shadow-hover:  grayscale($inset-shadow-hover);
+      $stop-gradient-hover: grayscale($stop-gradient-hover);
+    }
+
+    box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
+    cursor: pointer;
+    @include linear-gradient ($base-color-hover, $stop-gradient-hover);
+  }
+
+  &:active:not(:disabled) {
+    $border-active:       adjust-color($base-color, $saturation: 9%, $lightness: -14%);
+    $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
+
+    @if $grayscale == true {
+      $border-active:       grayscale($border-active);
+      $inset-shadow-active: grayscale($inset-shadow-active);
+    }
+
+    border: 1px solid $border-active;
+    box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee;
+  }
+}
+
+
+// Shiny Button
+//************************************************************************//
+@mixin shiny($base-color, $grayscale: false) {
+  $color:         hsl(0, 0, 100%);
+  $border:        adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
+  $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
+  $fourth-stop:   adjust-color($base-color, $red: -79,  $green: -70,  $blue: -46);
+  $inset-shadow:  adjust-color($base-color, $red:  37,  $green:  29,  $blue:  12);
+  $second-stop:   adjust-color($base-color, $red: -56,  $green: -50,  $blue: -33);
+  $text-shadow:   adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
+  $third-stop:    adjust-color($base-color, $red: -86,  $green: -75,  $blue: -48);
+
+  @if lightness($base-color) > 70% {
+    $color:       hsl(0, 0, 20%);
+    $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+  }
+
+  @if $grayscale == true {
+    $border:        grayscale($border);
+    $border-bottom: grayscale($border-bottom);
+    $fourth-stop:   grayscale($fourth-stop);
+    $inset-shadow:  grayscale($inset-shadow);
+    $second-stop:   grayscale($second-stop);
+    $text-shadow:   grayscale($text-shadow);
+    $third-stop:    grayscale($third-stop);
+  }
+
+  border: 1px solid $border;
+  border-bottom: 1px solid $border-bottom;
+  border-radius: 5px;
+  box-shadow: inset 0 1px 0 0 $inset-shadow;
+  color: $color;
+  display: inline-block;
+  font-size: 14px;
+  font-weight: bold;
+  @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
+  padding: 8px 20px;
+  text-align: center;
+  text-decoration: none;
+  text-shadow: 0 -1px 1px $text-shadow;
+
+  &:hover:not(:disabled) {
+    $first-stop-hover:  adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
+    $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
+    $third-stop-hover:  adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
+    $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
+
+    @if $grayscale == true {
+      $first-stop-hover:  grayscale($first-stop-hover);
+      $second-stop-hover: grayscale($second-stop-hover);
+      $third-stop-hover:  grayscale($third-stop-hover);
+      $fourth-stop-hover: grayscale($fourth-stop-hover);
+    }
+
+    cursor: pointer;
+    @include linear-gradient(top, $first-stop-hover  0%,
+                                  $second-stop-hover 50%,
+                                  $third-stop-hover  50%,
+                                  $fourth-stop-hover 100%);
+  }
+
+  &:active:not(:disabled) {
+    $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
+
+    @if $grayscale == true {
+      $inset-shadow-active: grayscale($inset-shadow-active);
+    }
+
+    box-shadow: inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff;
+  }
+}
+
+
+// Pill Button
+//************************************************************************//
+@mixin pill($base-color, $grayscale: false) {
+  $color:         hsl(0, 0, 100%);
+  $border-bottom: adjust-color($base-color, $hue:  8, $saturation: -11%, $lightness: -26%);
+  $border-sides:  adjust-color($base-color, $hue:  4, $saturation: -21%, $lightness: -21%);
+  $border-top:    adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
+  $inset-shadow:  adjust-color($base-color, $hue: -1, $saturation: -1%,  $lightness:  7%);
+  $stop-gradient: adjust-color($base-color, $hue:  8, $saturation:  14%, $lightness: -10%);
+  $text-shadow:   adjust-color($base-color, $hue:  5, $saturation: -19%, $lightness: -15%);
+
+  @if lightness($base-color) > 70% {
+    $color:       hsl(0, 0, 20%);
+    $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+  }
+
+  @if $grayscale == true {
+    $border-bottom: grayscale($border-bottom);
+    $border-sides:  grayscale($border-sides);
+    $border-top:    grayscale($border-top);
+    $inset-shadow:  grayscale($inset-shadow);
+    $stop-gradient: grayscale($stop-gradient);
+    $text-shadow:   grayscale($text-shadow);
+  }
+
+  border: 1px solid $border-top;
+  border-color: $border-top $border-sides $border-bottom;
+  border-radius: 16px;
+  box-shadow: inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3;
+  color: $color;
+  display: inline-block;
+  font-size: 11px;
+  font-weight: normal;
+  line-height: 1;
+  @include linear-gradient ($base-color, $stop-gradient);
+  padding: 5px 16px;
+  text-align: center;
+  text-decoration: none;
+  text-shadow: 0 -1px 1px $text-shadow;
+  background-clip: padding-box;
+
+  &:hover:not(:disabled) {
+    $base-color-hover:    adjust-color($base-color,                                $lightness: -4.5%);
+    $border-bottom:       adjust-color($base-color, $hue:  8, $saturation:  13.5%, $lightness: -32%);
+    $border-sides:        adjust-color($base-color, $hue:  4, $saturation: -2%,    $lightness: -27%);
+    $border-top:          adjust-color($base-color, $hue: -1, $saturation: -17%,   $lightness: -21%);
+    $inset-shadow-hover:  adjust-color($base-color,           $saturation: -1%,    $lightness:  3%);
+    $stop-gradient-hover: adjust-color($base-color, $hue:  8, $saturation: -4%,    $lightness: -15.5%);
+    $text-shadow-hover:   adjust-color($base-color, $hue:  5, $saturation: -5%,    $lightness: -22%);
+
+    @if $grayscale == true {
+      $base-color-hover:    grayscale($base-color-hover);
+      $border-bottom:       grayscale($border-bottom);
+      $border-sides:        grayscale($border-sides);
+      $border-top:          grayscale($border-top);
+      $inset-shadow-hover:  grayscale($inset-shadow-hover);
+      $stop-gradient-hover: grayscale($stop-gradient-hover);
+      $text-shadow-hover:   grayscale($text-shadow-hover);
+    }
+
+    border: 1px solid $border-top;
+    border-color: $border-top $border-sides $border-bottom;
+    box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
+    cursor: pointer;
+    @include linear-gradient ($base-color-hover, $stop-gradient-hover);
+    text-shadow: 0 -1px 1px $text-shadow-hover;
+    background-clip: padding-box;
+  }
+
+  &:active:not(:disabled) {
+    $active-color:         adjust-color($base-color, $hue: 4,  $saturation: -12%,  $lightness: -10%);
+    $border-active:        adjust-color($base-color, $hue: 6,  $saturation: -2.5%, $lightness: -30%);
+    $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation:  6%,   $lightness: -31%);
+    $inset-shadow-active:  adjust-color($base-color, $hue: 9,  $saturation:  2%,   $lightness: -21.5%);
+    $text-shadow-active:   adjust-color($base-color, $hue: 5,  $saturation: -12%,  $lightness: -21.5%);
+
+    @if $grayscale == true {
+      $active-color:         grayscale($active-color);
+      $border-active:        grayscale($border-active);
+      $border-bottom-active: grayscale($border-bottom-active);
+      $inset-shadow-active:  grayscale($inset-shadow-active);
+      $text-shadow-active:   grayscale($text-shadow-active);
+    }
+
+    background: $active-color;
+    border: 1px solid $border-active;
+    border-bottom: 1px solid $border-bottom-active;
+    box-shadow: inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff;
+    text-shadow: 0 -1px 1px $text-shadow-active;
+  }
+}

docs/_css/bourbon/addons/_clearfix.scss

@@ -0,0 +1,29 @@
+// Micro clearfix provides an easy way to contain floats without adding additional markup
+//
+// Example usage:
+//
+//    // Contain all floats within .wrapper
+//    .wrapper {
+//      @include clearfix;
+//      .content,
+//      .sidebar {
+//        float : left;
+//      }
+//    }
+
+@mixin clearfix {
+  *zoom: 1;
+
+  &:before,
+  &:after {
+    content: " ";
+    display: table;
+  }
+
+  &:after {
+    clear: both;
+  }
+}
+
+// Acknowledgements
+// Micro clearfix: [Nicolas Gallagher](http://nicolasgallagher.com/micro-clearfix-hack/)

docs/_css/bourbon/addons/_font-family.scss

@@ -0,0 +1,5 @@
+$georgia: Georgia, Cambria, "Times New Roman", Times, serif;
+$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
+$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
+$monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
+$verdana: Verdana, Geneva, sans-serif;

docs/_css/bourbon/addons/_hide-text.scss

@@ -0,0 +1,5 @@
+@mixin hide-text {
+  color:            transparent;
+  font:             0/0 a;
+  text-shadow:      none;
+}

docs/_css/bourbon/addons/_html5-input-types.scss

@@ -0,0 +1,56 @@
+//************************************************************************//
+// Generate a variable ($all-text-inputs) with a list of all html5
+// input types that have a text-based input, excluding textarea.
+// http://diveintohtml5.org/forms.html
+//************************************************************************//
+$inputs-list: 'input[type="email"]',
+              'input[type="number"]',
+              'input[type="password"]',
+              'input[type="search"]',
+              'input[type="tel"]',
+              'input[type="text"]',
+              'input[type="url"]',
+
+              // Webkit & Gecko may change the display of these in the future
+              'input[type="color"]',
+              'input[type="date"]',
+              'input[type="datetime"]',
+              'input[type="datetime-local"]',
+              'input[type="month"]',
+              'input[type="time"]',
+              'input[type="week"]';
+
+$unquoted-inputs-list: ();
+@each $input-type in $inputs-list {
+  $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma);
+}
+
+$all-text-inputs: $unquoted-inputs-list;
+
+
+// Hover Pseudo-class
+//************************************************************************//
+$all-text-inputs-hover: ();
+@each $input-type in $unquoted-inputs-list {
+      $input-type-hover: $input-type + ":hover";
+      $all-text-inputs-hover: append($all-text-inputs-hover, $input-type-hover, comma);
+}
+
+// Focus Pseudo-class
+//************************************************************************//
+$all-text-inputs-focus: ();
+@each $input-type in $unquoted-inputs-list {
+      $input-type-focus: $input-type + ":focus";
+      $all-text-inputs-focus: append($all-text-inputs-focus, $input-type-focus, comma);
+}
+
+// You must use interpolation on the variable:
+// #{$all-text-inputs}
+// #{$all-text-inputs-hover}
+// #{$all-text-inputs-focus}
+
+// Example
+//************************************************************************//
+//   #{$all-text-inputs}, textarea {
+//     border: 1px solid red;
+//   }

docs/_css/bourbon/addons/_position.scss

@@ -0,0 +1,42 @@
+@mixin position ($position: relative, $coordinates: 0 0 0 0) {
+
+  @if type-of($position) == list {
+    $coordinates: $position;
+    $position: relative;
+  }
+
+  $top: nth($coordinates, 1);
+  $right: nth($coordinates, 2);
+  $bottom: nth($coordinates, 3);
+  $left: nth($coordinates, 4);
+
+  position: $position;
+
+  @if $top == auto {
+    top: $top;
+  }
+  @else if not(unitless($top)) {
+    top: $top;
+  }
+
+  @if $right == auto {
+    right: $right;
+  }
+  @else if not(unitless($right)) {
+    right: $right;
+  }
+
+  @if $bottom == auto {
+    bottom: $bottom;
+  }
+  @else if not(unitless($bottom)) {
+    bottom: $bottom;
+  }
+
+  @if $left == auto {
+    left: $left;
+  }
+  @else if not(unitless($left)) {
+    left: $left;
+  }
+}

docs/_css/bourbon/addons/_prefixer.scss

@@ -0,0 +1,49 @@
+//************************************************************************//
+// Example: @include prefixer(border-radius, $radii, webkit ms spec);
+//************************************************************************//
+$prefix-for-webkit:    true !default;
+$prefix-for-mozilla:   true !default;
+$prefix-for-microsoft: true !default;
+$prefix-for-opera:     true !default;
+$prefix-for-spec:      true !default; // required for keyframe mixin
+
+@mixin prefixer ($property, $value, $prefixes) {
+  @each $prefix in $prefixes {
+    @if $prefix == webkit {
+      @if $prefix-for-webkit {
+        -webkit-#{$property}: $value;
+      }
+    }
+    @else if $prefix == moz {
+      @if $prefix-for-mozilla {
+        -moz-#{$property}: $value;
+      }
+    }
+    @else if $prefix == ms {
+      @if $prefix-for-microsoft {
+        -ms-#{$property}: $value;
+      }
+    }
+    @else if $prefix == o {
+      @if $prefix-for-opera {
+        -o-#{$property}: $value;
+      }
+    }
+    @else if $prefix == spec {
+      @if $prefix-for-spec {
+        #{$property}: $value;
+      }
+    }
+    @else  {
+      @warn "Unrecognized prefix: #{$prefix}";
+    }
+  }
+}
+
+@mixin disable-prefix-for-all() {
+  $prefix-for-webkit:    false;
+  $prefix-for-mozilla:   false;
+  $prefix-for-microsoft: false;
+  $prefix-for-opera:     false;
+  $prefix-for-spec:      false;
+}

docs/_css/bourbon/addons/_retina-image.scss

@@ -0,0 +1,32 @@
+@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $asset-pipeline: false) {
+  @if $asset-pipeline {
+    background-image: image_url($filename + "." + $extension);
+  }
+  @else {
+    background-image: url($filename + "." + $extension);
+  }
+
+  @include hidpi {
+
+    @if $asset-pipeline {
+      @if $retina-filename {
+        background-image: image_url($retina-filename + "." + $extension);
+      }
+      @else {
+        background-image: image_url($filename + "@2x" + "." + $extension);
+      }
+    }
+
+    @else {
+      @if $retina-filename {
+        background-image: url($retina-filename + "." + $extension);
+      }
+      @else {
+        background-image: url($filename + "@2x" + "." + $extension);
+      }
+    }
+
+    background-size: $background-size;
+
+  }
+}

docs/_css/bourbon/addons/_size.scss

@@ -0,0 +1,44 @@
+@mixin size($size) {
+  @if length($size) == 1 {
+    @if $size == auto {
+      width:  $size;
+      height: $size;
+    }
+
+    @else if unitless($size) {
+      width:  $size + px;
+      height: $size + px;
+    }
+
+    @else if not(unitless($size)) {
+      width:  $size;
+      height: $size;
+    }
+  }
+
+  // Width x Height
+  @if length($size) == 2 {
+    $width:  nth($size, 1);
+    $height: nth($size, 2);
+
+    @if $width == auto {
+      width: $width;
+    }
+    @else if not(unitless($width)) {
+      width: $width;
+    }
+    @else if unitless($width) {
+      width: $width + px;
+    }
+
+    @if $height == auto {
+      height: $height;
+    }
+    @else if not(unitless($height)) {
+      height: $height;
+    }
+    @else if unitless($height) {
+      height: $height + px;
+    }
+  }
+}

docs/_css/bourbon/addons/_timing-functions.scss

@@ -0,0 +1,32 @@
+// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
+// Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html
+
+// EASE IN
+$ease-in-quad:      cubic-bezier(0.550,  0.085, 0.680, 0.530);
+$ease-in-cubic:     cubic-bezier(0.550,  0.055, 0.675, 0.190);
+$ease-in-quart:     cubic-bezier(0.895,  0.030, 0.685, 0.220);
+$ease-in-quint:     cubic-bezier(0.755,  0.050, 0.855, 0.060);
+$ease-in-sine:      cubic-bezier(0.470,  0.000, 0.745, 0.715);
+$ease-in-expo:      cubic-bezier(0.950,  0.050, 0.795, 0.035);
+$ease-in-circ:      cubic-bezier(0.600,  0.040, 0.980, 0.335);
+$ease-in-back:      cubic-bezier(0.600, -0.280, 0.735, 0.045);
+
+// EASE OUT
+$ease-out-quad:     cubic-bezier(0.250,  0.460, 0.450, 0.940);
+$ease-out-cubic:    cubic-bezier(0.215,  0.610, 0.355, 1.000);
+$ease-out-quart:    cubic-bezier(0.165,  0.840, 0.440, 1.000);
+$ease-out-quint:    cubic-bezier(0.230,  1.000, 0.320, 1.000);
+$ease-out-sine:     cubic-bezier(0.390,  0.575, 0.565, 1.000);
+$ease-out-expo:     cubic-bezier(0.190,  1.000, 0.220, 1.000);
+$ease-out-circ:     cubic-bezier(0.075,  0.820, 0.165, 1.000);
+$ease-out-back:     cubic-bezier(0.175,  0.885, 0.320, 1.275);
+
+// EASE IN OUT
+$ease-in-out-quad:  cubic-bezier(0.455,  0.030, 0.515, 0.955);
+$ease-in-out-cubic: cubic-bezier(0.645,  0.045, 0.355, 1.000);
+$ease-in-out-quart: cubic-bezier(0.770,  0.000, 0.175, 1.000);
+$ease-in-out-quint: cubic-bezier(0.860,  0.000, 0.070, 1.000);
+$ease-in-out-sine:  cubic-bezier(0.445,  0.050, 0.550, 0.950);
+$ease-in-out-expo:  cubic-bezier(1.000,  0.000, 0.000, 1.000);
+$ease-in-out-circ:  cubic-bezier(0.785,  0.135, 0.150, 0.860);
+$ease-in-out-back:  cubic-bezier(0.680, -0.550, 0.265, 1.550);

docs/_css/bourbon/addons/_triangle.scss

@@ -0,0 +1,45 @@
+@mixin triangle ($size, $color, $direction) {
+  height: 0;
+  width: 0;
+
+  @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
+    border-color: transparent;
+    border-style: solid;
+    border-width: $size / 2;
+
+    @if $direction == up {
+      border-bottom-color: $color;
+
+    } @else if $direction == right {
+      border-left-color:   $color;
+
+    } @else if $direction == down {
+      border-top-color:    $color;
+
+    } @else if $direction == left {
+      border-right-color:  $color;
+    }
+  }
+
+  @else if ($direction == up-right) or ($direction == up-left) {
+    border-top: $size solid $color;
+
+    @if $direction == up-right {
+      border-left:  $size solid transparent;
+
+    } @else if $direction == up-left {
+      border-right: $size solid transparent;
+    }
+  }
+
+  @else if ($direction == down-right) or ($direction == down-left) {
+    border-bottom: $size solid $color;
+
+    @if $direction == down-right {
+      border-left:  $size solid transparent;
+
+    } @else if $direction == down-left {
+      border-right: $size solid transparent;
+    }
+  }
+}

docs/_css/bourbon/css3/_animation.scss

@@ -0,0 +1,52 @@
+// http://www.w3.org/TR/css3-animations/#the-animation-name-property-
+// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
+
+// Official animation shorthand property.
+@mixin animation ($animations...) {
+  @include prefixer(animation, $animations, webkit moz spec);
+}
+
+// Individual Animation Properties
+@mixin animation-name ($names...) {
+  @include prefixer(animation-name, $names, webkit moz spec);
+}
+
+
+@mixin animation-duration ($times...) {
+  @include prefixer(animation-duration, $times, webkit moz spec);
+}
+
+
+@mixin animation-timing-function ($motions...) {
+// ease | linear | ease-in | ease-out | ease-in-out
+  @include prefixer(animation-timing-function, $motions, webkit moz spec);
+}
+
+
+@mixin animation-iteration-count ($values...) {
+// infinite | <number>
+  @include prefixer(animation-iteration-count, $values, webkit moz spec);
+}
+
+
+@mixin animation-direction ($directions...) {
+// normal | alternate
+  @include prefixer(animation-direction, $directions, webkit moz spec);
+}
+
+
+@mixin animation-play-state ($states...) {
+// running | paused
+  @include prefixer(animation-play-state, $states, webkit moz spec);
+}
+
+
+@mixin animation-delay ($times...) {
+  @include prefixer(animation-delay, $times, webkit moz spec);
+}
+
+
+@mixin animation-fill-mode ($modes...) {
+// none | forwards | backwards | both
+  @include prefixer(animation-fill-mode, $modes, webkit moz spec);
+}

docs/_css/bourbon/css3/_appearance.scss

@@ -0,0 +1,3 @@
+@mixin appearance ($value) {
+  @include prefixer(appearance, $value, webkit moz ms o spec);
+}

docs/_css/bourbon/css3/_backface-visibility.scss

@@ -0,0 +1,6 @@
+//************************************************************************//
+// Backface-visibility mixin
+//************************************************************************//
+@mixin backface-visibility($visibility) {
+  @include prefixer(backface-visibility, $visibility, webkit spec);
+}

docs/_css/bourbon/css3/_background-image.scss

@@ -0,0 +1,48 @@
+//************************************************************************//
+// Background-image property for adding multiple background images with
+// gradients, or for stringing multiple gradients together.
+//************************************************************************//
+
+@mixin background-image($images...) {
+  background-image: _add-prefix($images, webkit);
+  background-image: _add-prefix($images);
+}
+
+@function _add-prefix($images, $vendor: false) {
+  $images-prefixed: ();
+  $gradient-positions: false;
+  @for $i from 1 through length($images) {
+    $type: type-of(nth($images, $i)); // Get type of variable - List or String
+
+    // If variable is a list - Gradient
+    @if $type == list {
+      $gradient-type: nth(nth($images, $i), 1); // linear or radial
+      $gradient-pos: null;
+      $gradient-args: null;
+
+      @if ($gradient-type == linear) or ($gradient-type == radial) {
+        $gradient-pos:  nth(nth($images, $i), 2); // Get gradient position
+        $gradient-args: nth(nth($images, $i), 3); // Get actual gradient (red, blue)
+      }
+      @else {
+        $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
+      }
+
+      $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
+      $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
+      $images-prefixed: append($images-prefixed, $gradient, comma);
+    }
+    // If variable is a string - Image
+    @else if $type == string {
+      $images-prefixed: join($images-prefixed, nth($images, $i), comma);
+    }
+  }
+  @return $images-prefixed;
+}
+
+//Examples:
+  //@include background-image(linear-gradient(top, orange, red));
+  //@include background-image(radial-gradient(50% 50%, cover circle, orange, red));
+  //@include background-image(url("/images/a.png"), linear-gradient(orange, red));
+  //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png"));
+  //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red));

docs/_css/bourbon/css3/_background.scss

@@ -0,0 +1,103 @@
+//************************************************************************//
+// Background property for adding multiple backgrounds using shorthand
+// notation.
+//************************************************************************//
+
+@mixin background(
+  $background-1       , $background-2: false,
+  $background-3: false, $background-4: false,
+  $background-5: false, $background-6: false,
+  $background-7: false, $background-8: false,
+  $background-9: false, $background-10: false,
+  $fallback: false
+) {
+  $backgrounds: compact($background-1, $background-2,
+                $background-3, $background-4,
+                $background-5, $background-6,
+                $background-7, $background-8,
+                $background-9, $background-10);
+
+  $fallback-color: false;
+  @if (type-of($fallback) == color) or ($fallback == "transparent") {
+    $fallback-color: $fallback;
+  }
+  @else {
+    $fallback-color: _extract-background-color($backgrounds);
+  }
+
+  @if $fallback-color {
+    background-color: $fallback-color;
+  }
+  background: _background-add-prefix($backgrounds, webkit);
+  background: _background-add-prefix($backgrounds);
+}
+
+@function _extract-background-color($backgrounds) {
+  $final-bg-layer: nth($backgrounds, length($backgrounds));
+  @if type-of($final-bg-layer) == list {
+    @for $i from 1 through length($final-bg-layer) {
+      $value: nth($final-bg-layer, $i);
+      @if type-of($value) == color {
+        @return $value;
+      }
+    }
+  }
+  @return false;
+}
+
+@function _background-add-prefix($backgrounds, $vendor: false) {
+  $backgrounds-prefixed: ();
+
+  @for $i from 1 through length($backgrounds) {
+    $shorthand: nth($backgrounds, $i); // Get member for current index
+    $type: type-of($shorthand); // Get type of variable - List (gradient) or String (image)
+
+    // If shorthand is a list (gradient)
+    @if $type == list {
+      $first-member: nth($shorthand, 1); // Get first member of shorthand
+
+      // Linear Gradient
+      @if index(linear radial, nth($first-member, 1)) {
+        $gradient-type: nth($first-member, 1); // linear || radial
+        $gradient-args:      false;
+        $gradient-positions: false;
+        $shorthand-start:    false;
+        @if type-of($first-member) == list { // Linear gradient plus additional shorthand values - lg(red,orange)repeat,...
+          $gradient-positions: nth($first-member, 2);
+          $gradient-args:      nth($first-member, 3);
+          $shorthand-start: 2;
+        }
+        @else { // Linear gradient only - lg(red,orange),...
+          $gradient-positions: nth($shorthand, 2);
+          $gradient-args:      nth($shorthand, 3); // Get gradient (red, blue)
+        }
+
+        $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-positions);
+        $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
+
+        // Append any additional shorthand args to gradient
+        @if $shorthand-start {
+          @for $j from $shorthand-start through length($shorthand) {
+            $gradient: join($gradient, nth($shorthand, $j), space);
+          }
+        }
+        $backgrounds-prefixed: append($backgrounds-prefixed, $gradient, comma);
+      }
+      // Image with additional properties
+      @else {
+        $backgrounds-prefixed: append($backgrounds-prefixed, $shorthand, comma);
+      }
+    }
+    // If shorthand is a simple string (color or image)
+    @else if $type == string {
+      $backgrounds-prefixed: join($backgrounds-prefixed, $shorthand, comma);
+    }
+  }
+  @return $backgrounds-prefixed;
+}
+
+//Examples:
+  //@include background(linear-gradient(top, orange, red));
+  //@include background(radial-gradient(circle at 40% 40%, orange, red));
+  //@include background(url("/images/a.png") no-repeat, linear-gradient(orange, red));
+  //@include background(url("image.png") center center, linear-gradient(orange, red), url("image.png"));

docs/_css/bourbon/css3/_border-image.scss

@@ -0,0 +1,55 @@
+@mixin border-image($images) {
+  -webkit-border-image: _border-add-prefix($images, webkit);
+     -moz-border-image: _border-add-prefix($images, moz);
+       -o-border-image: _border-add-prefix($images, o);
+          border-image: _border-add-prefix($images);
+}
+
+@function _border-add-prefix($images, $vendor: false) {
+  $border-image: null;
+  $images-type:  type-of(nth($images, 1));
+  $first-var:    nth(nth($images, 1), 1);          // Get type of Gradient (Linear || radial)
+
+  // If input is a gradient
+  @if $images-type == string {
+    @if ($first-var == "linear") or ($first-var == "radial") {
+      $gradient-type: nth($images, 1);           // Get type of gradient (linear || radial)
+      $gradient-pos:  nth($images, 2);           // Get gradient position
+      $gradient-args: nth($images, 3);           // Get actual gradient (red, blue)
+      $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
+      $border-image:  _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
+    }
+    // If input is a URL
+    @else {
+      $border-image: $images;
+    }
+  }
+  // If input is gradient or url + additional args
+  @else if $images-type == list {
+    $type: type-of(nth($images, 1));           // Get type of variable - List or String
+
+    // If variable is a list - Gradient
+    @if $type == list {
+      $gradient: nth($images, 1);
+      $gradient-type: nth($gradient, 1);           // Get type of gradient (linear || radial)
+      $gradient-pos:  nth($gradient, 2);           // Get gradient position
+      $gradient-args: nth($gradient, 3);           // Get actual gradient (red, blue)
+      $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
+      $border-image:  _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
+
+      @for $i from 2 through length($images) {
+        $border-image: append($border-image, nth($images, $i));
+      }
+    }
+  }
+  @return $border-image;
+}
+
+//Examples:
+// @include border-image(url("image.png"));
+// @include border-image(url("image.png") 20 stretch);
+// @include border-image(linear-gradient(45deg, orange, yellow));
+// @include border-image(linear-gradient(45deg, orange, yellow) stretch);
+// @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round);
+// @include border-image(radial-gradient(top, cover, orange, yellow, orange));
+

docs/_css/bourbon/css3/_border-radius.scss

@@ -0,0 +1,22 @@
+//************************************************************************//
+// Shorthand Border-radius mixins
+//************************************************************************//
+@mixin border-top-radius($radii) {
+  @include prefixer(border-top-left-radius, $radii, spec);
+  @include prefixer(border-top-right-radius, $radii, spec);
+}
+
+@mixin border-bottom-radius($radii) {
+  @include prefixer(border-bottom-left-radius, $radii, spec);
+  @include prefixer(border-bottom-right-radius, $radii, spec);
+}
+
+@mixin border-left-radius($radii) {
+  @include prefixer(border-top-left-radius, $radii, spec);
+  @include prefixer(border-bottom-left-radius, $radii, spec);
+}
+
+@mixin border-right-radius($radii) {
+  @include prefixer(border-top-right-radius, $radii, spec);
+  @include prefixer(border-bottom-right-radius, $radii, spec);
+}

docs/_css/bourbon/css3/_box-sizing.scss

@@ -0,0 +1,4 @@
+@mixin box-sizing ($box) {
+//  content-box | border-box | inherit
+  @include prefixer(box-sizing, $box, webkit moz spec);
+}

docs/_css/bourbon/css3/_columns.scss

@@ -0,0 +1,47 @@
+@mixin columns($arg: auto) {
+// <column-count> || <column-width>
+  @include prefixer(columns, $arg, webkit moz spec);
+}
+
+@mixin column-count($int: auto) {
+// auto || integer
+  @include prefixer(column-count, $int, webkit moz spec);
+}
+
+@mixin column-gap($length: normal) {
+// normal || length
+  @include prefixer(column-gap, $length, webkit moz spec);
+}
+
+@mixin column-fill($arg: auto) {
+// auto || length
+  @include prefixer(columns-fill, $arg, webkit moz spec);
+}
+
+@mixin column-rule($arg) {
+// <border-width> || <border-style> || <color>
+  @include prefixer(column-rule, $arg, webkit moz spec);
+}
+
+@mixin column-rule-color($color) {
+  @include prefixer(column-rule-color, $color, webkit moz spec);
+}
+
+@mixin column-rule-style($style: none) {
+// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
+  @include prefixer(column-rule-style, $style, webkit moz spec);
+}
+
+@mixin column-rule-width ($width: none) {
+  @include prefixer(column-rule-width, $width, webkit moz spec);
+}
+
+@mixin column-span($arg: none) {
+// none || all
+  @include prefixer(column-span, $arg, webkit moz spec);
+}
+
+@mixin column-width($length: auto) {
+// auto || length
+  @include prefixer(column-width, $length, webkit moz spec);
+}

docs/_css/bourbon/css3/_flex-box.scss

@@ -0,0 +1,52 @@
+// CSS3 Flexible Box Model and property defaults
+
+// Custom shorthand notation for flexbox
+@mixin box($orient: inline-axis, $pack: start, $align: stretch) {
+  @include display-box;
+  @include box-orient($orient);
+  @include box-pack($pack);
+  @include box-align($align);
+}
+
+@mixin display-box {
+  display: -webkit-box;
+  display: -moz-box;
+  display: box;
+}
+
+@mixin box-orient($orient: inline-axis) {
+// horizontal|vertical|inline-axis|block-axis|inherit
+  @include prefixer(box-orient, $orient, webkit moz spec);
+}
+
+@mixin box-pack($pack: start) {
+// start|end|center|justify
+  @include prefixer(box-pack, $pack, webkit moz spec);
+}
+
+@mixin box-align($align: stretch) {
+// start|end|center|baseline|stretch
+  @include prefixer(box-align, $align, webkit moz spec);
+}
+
+@mixin box-direction($direction: normal) {
+// normal|reverse|inherit
+  @include prefixer(box-direction, $direction, webkit moz spec);
+}
+
+@mixin box-lines($lines: single) {
+// single|multiple
+  @include prefixer(box-lines, $lines, webkit moz spec);
+}
+
+@mixin box-ordinal-group($int: 1) {
+  @include prefixer(box-ordinal-group, $int, webkit moz spec);
+}
+
+@mixin box-flex($value: 0.0) {
+  @include prefixer(box-flex, $value, webkit moz spec);
+}
+
+@mixin box-flex-group($int: 1) {
+  @include prefixer(box-flex-group, $int, webkit moz spec);
+}

docs/_css/bourbon/css3/_font-face.scss

@@ -0,0 +1,23 @@
+// Order of the includes matters, and it is: normal, bold, italic, bold+italic.
+
+@mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false ) {
+  @font-face {
+    font-family: $font-family;
+    font-weight: $weight;
+    font-style: $style;
+
+    @if $asset-pipeline == true {
+      src: font-url('#{$file-path}.eot');
+      src: font-url('#{$file-path}.eot?#iefix')          format('embedded-opentype'),
+           font-url('#{$file-path}.woff')                format('woff'),
+           font-url('#{$file-path}.ttf')                 format('truetype'),
+           font-url('#{$file-path}.svg##{$font-family}') format('svg');
+    } @else {
+      src: url('#{$file-path}.eot');
+      src: url('#{$file-path}.eot?#iefix')               format('embedded-opentype'),
+           url('#{$file-path}.woff')                     format('woff'),
+           url('#{$file-path}.ttf')                      format('truetype'),
+           url('#{$file-path}.svg##{$font-family}')      format('svg');
+    }
+  }
+}

docs/_css/bourbon/css3/_hidpi-media-query.scss

@@ -0,0 +1,10 @@
+// HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
+@mixin hidpi($ratio: 1.3) {
+  @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
+  only screen and (min--moz-device-pixel-ratio: $ratio),
+  only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
+  only screen and (min-resolution: #{round($ratio*96)}dpi),
+  only screen and (min-resolution: #{$ratio}dppx) {
+    @content;
+  }
+}

docs/_css/bourbon/css3/_image-rendering.scss

@@ -0,0 +1,13 @@
+@mixin image-rendering ($mode:optimizeQuality) {
+
+  @if ($mode == optimize-contrast) {
+      image-rendering: -moz-crisp-edges;
+      image-rendering: -o-crisp-edges;
+      image-rendering: -webkit-optimize-contrast;
+      image-rendering: optimize-contrast;
+  }
+
+  @else {
+      image-rendering: $mode;
+  }
+}

docs/_css/bourbon/css3/_inline-block.scss

@@ -0,0 +1,8 @@
+// Legacy support for inline-block in IE7 (maybe IE6)
+@mixin inline-block {
+  display: inline-block;
+  vertical-align: baseline;
+  zoom: 1;
+  *display: inline;
+  *vertical-align: auto;
+}

docs/_css/bourbon/css3/_keyframes.scss

@@ -0,0 +1,43 @@
+// Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block's content
+@mixin keyframes($name) {
+  $original-prefix-for-webkit:    $prefix-for-webkit;
+  $original-prefix-for-mozilla:   $prefix-for-mozilla;
+  $original-prefix-for-microsoft: $prefix-for-microsoft;
+  $original-prefix-for-opera:     $prefix-for-opera;
+  $original-prefix-for-spec:      $prefix-for-spec;
+
+  @if $original-prefix-for-webkit {
+    @include disable-prefix-for-all();
+    $prefix-for-webkit: true;
+    @-webkit-keyframes #{$name} {
+      @content;
+    }
+  }
+  @if $original-prefix-for-mozilla {
+    @include disable-prefix-for-all();
+    $prefix-for-mozilla: true;
+    @-moz-keyframes #{$name} {
+      @content;
+    }
+  }
+  @if $original-prefix-for-opera {
+    @include disable-prefix-for-all();
+    $prefix-for-opera: true;
+    @-o-keyframes #{$name} {
+      @content;
+    }
+  }
+  @if $original-prefix-for-spec {
+    @include disable-prefix-for-all();
+    $prefix-for-spec: true;
+    @keyframes #{$name} {
+      @content;
+    }
+  }
+
+  $prefix-for-webkit:    $original-prefix-for-webkit;
+  $prefix-for-mozilla:   $original-prefix-for-mozilla;
+  $prefix-for-microsoft: $original-prefix-for-microsoft;
+  $prefix-for-opera:     $original-prefix-for-opera;
+  $prefix-for-spec:      $original-prefix-for-spec;
+}

docs/_css/bourbon/css3/_linear-gradient.scss

@@ -0,0 +1,41 @@
+@mixin linear-gradient($pos, $G1, $G2: false,
+                       $G3: false, $G4: false,
+                       $G5: false, $G6: false,
+                       $G7: false, $G8: false,
+                       $G9: false, $G10: false,
+                       $deprecated-pos1: left top,
+                       $deprecated-pos2: left bottom,
+                       $fallback: false) {
+  // Detect what type of value exists in $pos
+  $pos-type: type-of(nth($pos, 1));
+  $pos-spec: null;
+  $pos-degree: null;
+
+  // If $pos is missing from mixin, reassign vars and add default position
+  @if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
+    $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
+     $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
+     $pos: null;
+  }
+
+  @if $pos {
+    $positions: _linear-positions-parser($pos);
+    $pos-degree: nth($positions, 1);
+    $pos-spec:   nth($positions, 2);
+  }
+
+  $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+
+  // Set $G1 as the default fallback color
+  $fallback-color: nth($G1, 1);
+
+  // If $fallback is a color use that color as the fallback color
+  @if (type-of($fallback) == color) or ($fallback == "transparent") {
+    $fallback-color: $fallback;
+  }
+
+  background-color: $fallback-color;
+  background-image: _deprecated-webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $full); // Safari <= 5.0
+  background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome
+  background-image: unquote("linear-gradient(#{$pos-spec}#{$full})");
+}

docs/_css/bourbon/css3/_perspective.scss

@@ -0,0 +1,8 @@
+@mixin perspective($depth: none) {
+  // none | <length>
+  @include prefixer(perspective, $depth, webkit moz spec);
+}
+
+@mixin perspective-origin($value: 50% 50%) {
+  @include prefixer(perspective-origin, $value, webkit moz spec);
+}

docs/_css/bourbon/css3/_placeholder.scss

@@ -0,0 +1,29 @@
+$placeholders: '-webkit-input-placeholder',
+               '-moz-placeholder',
+               '-ms-input-placeholder';
+
+@mixin placeholder {
+  @each $placeholder in $placeholders {
+    @if $placeholder == "-webkit-input-placeholder" {
+      &::#{$placeholder} {
+        @content;
+      }
+    }
+    @else if $placeholder == "-moz-placeholder" {
+      // FF 18-
+      &:#{$placeholder} {
+        @content;
+      }
+
+      // FF 19+
+      &::#{$placeholder} {
+        @content;
+      }
+    }
+    @else {
+      &:#{$placeholder} {
+        @content;
+      }
+    }
+  }
+}

docs/_css/bourbon/css3/_radial-gradient.scss

@@ -0,0 +1,44 @@
+// Requires Sass 3.1+
+@mixin radial-gradient($G1,        $G2,
+                       $G3: false, $G4: false,
+                       $G5: false, $G6: false,
+                       $G7: false, $G8: false,
+                       $G9: false, $G10: false,
+                       $pos: null,
+                       $shape-size: null,
+                       $deprecated-pos1: center center,
+                       $deprecated-pos2: center center,
+                       $deprecated-radius1: 0,
+                       $deprecated-radius2: 460,
+                       $fallback: false) {
+
+  $data: _radial-arg-parser($G1, $G2, $pos, $shape-size);
+  $G1:  nth($data, 1);
+  $G2:  nth($data, 2);
+  $pos: nth($data, 3);
+  $shape-size: nth($data, 4);
+
+  $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+
+  // Strip deprecated cover/contain for spec
+  $shape-size-spec: _shape-size-stripper($shape-size);
+
+  // Set $G1 as the default fallback color
+  $first-color: nth($full, 1);
+  $fallback-color: nth($first-color, 1);
+
+  @if (type-of($fallback) == color) or ($fallback == "transparent") {
+    $fallback-color: $fallback;
+  }
+
+  // Add Commas and spaces
+  $shape-size: if($shape-size, '#{$shape-size}, ', null);
+  $pos:        if($pos, '#{$pos}, ', null);
+  $pos-spec:   if($pos, 'at #{$pos}', null);
+  $shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} ');
+
+  background-color:  $fallback-color;
+  background-image: _deprecated-webkit-gradient(radial, $deprecated-pos1, $deprecated-pos2, $full, $deprecated-radius1, $deprecated-radius2); // Safari <= 5.0 && IOS 4
+  background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full}));
+  background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})");
+}

docs/_css/bourbon/css3/_transform.scss

@@ -0,0 +1,15 @@
+@mixin transform($property: none) {
+//  none | <transform-function>
+  @include prefixer(transform, $property, webkit moz ms o spec);
+}
+
+@mixin transform-origin($axes: 50%) {
+// x-axis - left | center | right  | length | %
+// y-axis - top  | center | bottom | length | %
+// z-axis -                          length
+  @include prefixer(transform-origin, $axes, webkit moz ms o spec);
+}
+
+@mixin transform-style ($style: flat) {
+  @include prefixer(transform-style, $style, webkit moz ms o spec);
+}

docs/_css/bourbon/css3/_transition.scss

@@ -0,0 +1,34 @@
+// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
+// Example: @include transition (all, 2.0s, ease-in-out);
+//          @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
+//          @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));
+
+@mixin transition ($properties...) {
+  @if length($properties) >= 1 {
+    @include prefixer(transition, $properties, webkit moz spec);
+  }
+
+  @else {
+    $properties: all 0.15s ease-out 0;
+    @include prefixer(transition, $properties, webkit moz spec);
+  }
+}
+
+@mixin transition-property ($properties...) {
+   -webkit-transition-property: transition-property-names($properties, 'webkit');
+      -moz-transition-property: transition-property-names($properties, 'moz');
+           transition-property: transition-property-names($properties, false);
+}
+
+@mixin transition-duration ($times...) {
+  @include prefixer(transition-duration, $times, webkit moz spec);
+}
+
+@mixin transition-timing-function ($motions...) {
+// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
+  @include prefixer(transition-timing-function, $motions, webkit moz spec);
+}
+
+@mixin transition-delay ($times...) {
+  @include prefixer(transition-delay, $times, webkit moz spec);
+}

docs/_css/bourbon/css3/_user-select.scss

@@ -0,0 +1,3 @@
+@mixin user-select($arg: none) {
+  @include prefixer(user-select, $arg, webkit moz ms spec);
+}

docs/_css/bourbon/functions/_compact.scss

@@ -0,0 +1,11 @@
+// Remove `false` values from a list
+
+@function compact($vars...) {
+  $list: ();
+  @each $var in $vars {
+    @if $var {
+      $list: append($list, $var, comma);
+    }
+  }
+  @return $list;
+}

docs/_css/bourbon/functions/_flex-grid.scss

@@ -0,0 +1,39 @@
+// Flexible grid
+@function flex-grid($columns, $container-columns: $fg-max-columns) {
+  $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
+  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+  @return percentage($width / $container-width);
+}
+
+// Flexible gutter
+@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
+  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+  @return percentage($gutter / $container-width);
+}
+
+// The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function.
+// This function takes the fluid grid equation (target / context = result) and uses columns to help define each.
+//
+// The calculation presumes that your column structure will be missing the last gutter:
+//
+//   -- column -- gutter -- column -- gutter -- column
+//
+//  $fg-column: 60px;             // Column Width
+//  $fg-gutter: 25px;             // Gutter Width
+//  $fg-max-columns: 12;          // Total Columns For Main Container
+//
+//  div {
+//    width: flex-grid(4);        // returns (315px / 995px) = 31.65829%;
+//    margin-left: flex-gutter(); // returns (25px / 995px) = 2.51256%;
+//
+//    p {
+//      width: flex-grid(2, 4);  // returns (145px / 315px) = 46.031746%;
+//      float: left;
+//      margin: flex-gutter(4);  // returns (25px / 315px) = 7.936508%;
+//    }
+//
+//    blockquote {
+//      float: left;
+//      width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
+//    }
+//  }

docs/_css/bourbon/functions/_grid-width.scss

@@ -0,0 +1,13 @@
+@function grid-width($n) {
+  @return $n * $gw-column + ($n - 1) * $gw-gutter;
+}
+
+// The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function.
+//
+//  $gw-column: 100px;         // Column Width
+//  $gw-gutter: 40px;          // Gutter Width
+//
+//  div {
+//    width: grid-width(4);    // returns 520px;
+//    margin-left: $gw-gutter; // returns 40px;
+//  }

docs/_css/bourbon/functions/_linear-gradient.scss

@@ -0,0 +1,13 @@
+@function linear-gradient($pos, $gradients...) {
+  $type: linear;
+  $pos-type: type-of(nth($pos, 1));
+
+  // if $pos doesn't exist, fix $gradient
+  @if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
+    $gradients: zip($pos $gradients);
+    $pos: false;
+  }
+
+  $type-gradient: $type, $pos, $gradients;
+  @return $type-gradient;
+}

docs/_css/bourbon/functions/_modular-scale.scss

@@ -0,0 +1,40 @@
+@function modular-scale($value, $increment, $ratio) {
+  @if $increment > 0 {
+    @for $i from 1 through $increment {
+      $value: ($value * $ratio);
+    }
+  }
+
+  @if $increment < 0 {
+    $increment: abs($increment);
+    @for $i from 1 through $increment {
+      $value: ($value / $ratio);
+    }
+  }
+
+  @return $value;
+}
+
+//  div {
+//                     Increment Up GR with positive value
+//   font-size:        modular-scale(14px,   1, 1.618); // returns: 22.652px
+//
+//                     Increment Down GR with negative value
+//   font-size:        modular-scale(14px,  -1, 1.618); // returns: 8.653px
+//
+//                     Can be used with ceil(round up) or floor(round down)
+//   font-size: floor( modular-scale(14px, 1, 1.618) ); // returns: 22px
+//   font-size:  ceil( modular-scale(14px, 1, 1.618) ); // returns: 23px
+//  }
+//
+// modularscale.com
+
+@function golden-ratio($value, $increment) {
+  @return modular-scale($value, $increment, 1.618)
+}
+
+//  div {
+//    font-size: golden-ratio(14px, 1); // returns: 22.652px
+//  }
+//
+// goldenratiocalculator.com

docs/_css/bourbon/functions/_px-to-em.scss

@@ -0,0 +1,8 @@
+// Convert pixels to ems
+// eg. for a relational value of 12px write em(12) when the parent is 16px
+// if the parent is another value say 24px write em(12, 24)
+
+@function em($pxval, $base: 16) {
+  @return ($pxval / $base) * 1em;
+}
+

docs/_css/bourbon/functions/_radial-gradient.scss

@@ -0,0 +1,23 @@
+// This function is required and used by the background-image mixin.
+@function radial-gradient($G1,        $G2,
+                       $G3: false, $G4: false,
+                       $G5: false, $G6: false,
+                       $G7: false, $G8: false,
+                       $G9: false, $G10: false,
+                       $pos: null,
+                       $shape-size: null) {
+
+  $data: _radial-arg-parser($G1, $G2, $pos, $shape-size);
+  $G1:  nth($data, 1);
+  $G2:  nth($data, 2);
+  $pos: nth($data, 3);
+  $shape-size: nth($data, 4);
+
+  $type: radial;
+  $gradient: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+
+  $type-gradient: $type, $shape-size $pos, $gradient;
+  @return $type-gradient;
+}
+
+

docs/_css/bourbon/functions/_tint-shade.scss

@@ -0,0 +1,9 @@
+// Add percentage of white to a color
+@function tint($color, $percent){
+  @return mix(white, $color, $percent);
+}
+
+// Add percentage of black to a color
+@function shade($color, $percent){
+  @return mix(black, $color, $percent);
+}

docs/_css/bourbon/functions/_transition-property-name.scss

@@ -0,0 +1,22 @@
+// Return vendor-prefixed property names if appropriate
+// Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background
+//************************************************************************//
+@function transition-property-names($props, $vendor: false) {
+	$new-props: ();
+	
+	@each $prop in $props {
+		$new-props: append($new-props, transition-property-name($prop, $vendor), comma);
+	}
+
+	@return $new-props;
+}
+
+@function transition-property-name($prop, $vendor: false) {
+	// put other properties that need to be prefixed here aswell
+	@if $vendor and $prop == transform {
+		@return unquote('-'+$vendor+'-'+$prop);
+	}
+	@else {
+		@return $prop;
+	}
+}

docs/_css/bourbon/helpers/_deprecated-webkit-gradient.scss

@@ -0,0 +1,39 @@
+// Render Deprecated Webkit Gradient - Linear || Radial
+//************************************************************************//
+@function _deprecated-webkit-gradient($type,
+                                     $deprecated-pos1, $deprecated-pos2,
+                                     $full,
+                                     $deprecated-radius1: false, $deprecated-radius2: false) {
+  $gradient-list: ();
+  $gradient: false;
+  $full-length: length($full);
+  $percentage: false;
+  $gradient-type: $type;
+
+  @for $i from 1 through $full-length {
+    $gradient: nth($full, $i);
+
+    @if length($gradient) == 2 {
+      $color-stop: color-stop(nth($gradient, 2), nth($gradient, 1));
+      $gradient-list: join($gradient-list, $color-stop, comma);
+    }
+    @else if $gradient != null {
+      @if $i == $full-length {
+        $percentage: 100%;
+      }
+      @else {
+        $percentage: ($i - 1) * (100 / ($full-length - 1)) + "%";
+      }
+      $color-stop: color-stop(unquote($percentage), $gradient);
+      $gradient-list: join($gradient-list, $color-stop, comma);
+    }
+  }
+
+  @if $type == radial {
+    $gradient: -webkit-gradient(radial, $deprecated-pos1, $deprecated-radius1, $deprecated-pos2, $deprecated-radius2, $gradient-list);
+  }
+  @else if $type == linear {
+    $gradient: -webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $gradient-list);
+  }
+  @return $gradient;
+}

docs/_css/bourbon/helpers/_gradient-positions-parser.scss

@@ -0,0 +1,13 @@
+@function _gradient-positions-parser($gradient-type, $gradient-positions) {
+  @if $gradient-positions
+  and ($gradient-type == linear)
+  and (type-of($gradient-positions) != color) {
+    $gradient-positions: _linear-positions-parser($gradient-positions);
+  }
+  @else if $gradient-positions
+  and ($gradient-type == radial)
+  and (type-of($gradient-positions) != color) {
+    $gradient-positions: _radial-positions-parser($gradient-positions);
+  }
+  @return $gradient-positions;
+}

docs/_css/bourbon/helpers/_linear-positions-parser.scss

@@ -0,0 +1,61 @@
+@function _linear-positions-parser($pos) {
+  $type: type-of(nth($pos, 1));
+  $spec: null;
+  $degree: null;
+  $side: null;
+  $corner: null;
+  $length: length($pos);
+  // Parse Side and corner positions
+  @if ($length > 1) {
+    @if nth($pos, 1) == "to" { // Newer syntax
+      $side: nth($pos, 2);
+
+      @if $length == 2 { // eg. to top
+        // Swap for backwards compatability
+        $degree: _position-flipper(nth($pos, 2));
+      }
+      @else if $length == 3 { // eg. to top left
+        $corner: nth($pos, 3);
+      }
+    }
+    @else if $length == 2 { // Older syntax ("top left")
+      $side: _position-flipper(nth($pos, 1));
+      $corner: _position-flipper(nth($pos, 2));
+    }
+
+    @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") {
+      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
+    }
+    @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") {
+      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
+    }
+    @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") {
+      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
+    }
+    @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") {
+      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
+    }
+    $spec: to $side $corner;
+  }
+  @else if $length == 1 {
+    // Swap for backwards compatability
+    @if $type == string {
+      $degree: $pos;
+      $spec: to _position-flipper($pos);
+    }
+    @else {
+      $degree: -270 - $pos; //rotate the gradient opposite from spec
+      $spec: $pos;
+    }
+  }
+  $degree: unquote($degree + ",");
+  $spec:   unquote($spec + ",");
+  @return $degree $spec;
+}
+
+@function _position-flipper($pos) {
+ @return if($pos == left, right, null)
+         if($pos == right, left, null)
+         if($pos == top, bottom, null)
+         if($pos == bottom, top, null);
+}

docs/_css/bourbon/helpers/_radial-arg-parser.scss

@@ -0,0 +1,69 @@
+@function _radial-arg-parser($G1, $G2, $pos, $shape-size) {
+  @each $value in $G1, $G2 {
+    $first-val: nth($value, 1);
+    $pos-type:  type-of($first-val);
+    $spec-at-index: null;
+
+    // Determine if spec was passed to mixin
+    @if type-of($value) == list {
+      $spec-at-index: if(index($value, at), index($value, at), false);
+    }
+    @if $spec-at-index {
+      @if $spec-at-index > 1 {
+        @for $i from 1 through ($spec-at-index - 1) {
+          $shape-size: $shape-size nth($value, $i);
+        }
+        @for $i from ($spec-at-index + 1) through length($value) {
+          $pos: $pos nth($value, $i);
+        }
+      }
+      @else if $spec-at-index == 1 {
+        @for $i from ($spec-at-index + 1) through length($value) {
+          $pos: $pos nth($value, $i);
+        }
+      }
+      $G1: false;
+    }
+
+    // If not spec calculate correct values
+    @else {
+      @if ($pos-type != color) or ($first-val != "transparent") {
+        @if ($pos-type == number)
+        or ($first-val == "center")
+        or ($first-val == "top")
+        or ($first-val == "right")
+        or ($first-val == "bottom")
+        or ($first-val == "left") {
+
+          $pos: $value;
+
+          @if $pos == $G1 {
+            $G1: false;
+          }
+        }
+
+        @else if
+           ($first-val == "ellipse")
+        or ($first-val == "circle")
+        or ($first-val == "closest-side")
+        or ($first-val == "closest-corner")
+        or ($first-val == "farthest-side")
+        or ($first-val == "farthest-corner")
+        or ($first-val == "contain")
+        or ($first-val == "cover") {
+
+          $shape-size: $value;
+
+          @if $value == $G1 {
+            $G1: false;
+          }
+
+          @else if $value == $G2 {
+            $G2: false;
+          }
+        }
+      }
+    }
+  }
+  @return $G1, $G2, $pos, $shape-size;
+}

docs/_css/bourbon/helpers/_radial-positions-parser.scss

@@ -0,0 +1,18 @@
+@function _radial-positions-parser($gradient-pos) {
+  $shape-size: nth($gradient-pos, 1);
+  $pos:        nth($gradient-pos, 2);
+  $shape-size-spec: _shape-size-stripper($shape-size);
+
+  $pre-spec: unquote(if($pos, "#{$pos}, ", null))
+             unquote(if($shape-size, "#{$shape-size},", null));
+  $pos-spec: if($pos, "at #{$pos}", null);
+
+  $spec: "#{$shape-size-spec} #{$pos-spec}";
+
+  // Add comma
+  @if ($spec != '  ') {
+    $spec: "#{$spec},"
+  }
+
+  @return $pre-spec $spec;
+}

docs/_css/bourbon/helpers/_render-gradients.scss

@@ -0,0 +1,26 @@
+// User for linear and radial gradients within background-image or border-image properties
+
+@function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) {
+  $pre-spec: null;
+  $spec: null;
+  $vendor-gradients: null;
+  @if $gradient-type == linear {
+    @if $gradient-positions {
+      $pre-spec: nth($gradient-positions, 1);
+      $spec:     nth($gradient-positions, 2);
+    }
+  }
+  @else if $gradient-type == radial {
+    $pre-spec: nth($gradient-positions, 1);
+    $spec:     nth($gradient-positions, 2);
+  }
+
+  @if $vendor {
+    $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients);
+  }
+  @else if $vendor == false {
+    $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})";
+    $vendor-gradients: unquote($vendor-gradients);
+  }
+  @return $vendor-gradients;
+}

docs/_css/bourbon/helpers/_shape-size-stripper.scss

@@ -0,0 +1,10 @@
+@function _shape-size-stripper($shape-size) {
+  $shape-size-spec: null;
+  @each $value in $shape-size {
+    @if ($value == "cover") or ($value == "contain") {
+      $value: null;
+    }
+    $shape-size-spec: "#{$shape-size-spec} #{$value}";
+  }
+  @return $shape-size-spec;
+}

docs/_css/react.scss

@@ -0,0 +1,714 @@
+@import 'bourbon/bourbon';
+@import '_variables';
+@import '_typography';
+@import '_solarized';
+
+@mixin code-typography {
+  font-family: 'source-code-pro', Menlo, 'Courier New', Consolas, monospace;
+  font-size: 13px;
+  line-height: 20px;
+}
+
+$skinnyContentWidth: 650px;
+$contentWidth: 920px;
+$contentPadding: 20px;
+$columnWidth: 280px;
+$columnGutter: 40px;
+$twoColumnWidth: 2 * $columnWidth + $columnGutter;
+
+
+
+// basic reset
+* {
+  @include box-sizing(border-box);
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  background: $pageBg;
+}
+
+
+
+.left {
+  float: left;
+}
+
+.right {
+  float: right;
+}
+
+
+.container {
+  padding-top: 50px;
+  min-width: $contentWidth + (2 * $contentPadding);
+}
+
+.wrap {
+  width: $contentWidth + (2 * $contentPadding);
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.skinnyWrap {
+  width: $skinnyContentWidth + (2 * $contentPadding);
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+hr {
+  height: 0;
+  border-top: 1px solid #ccc;
+  border-bottom: 1px solid #eee;
+}
+
+ul,
+li {
+  margin-left: 20px;
+}
+
+// Main Nav
+
+.nav-main {
+  @include clearfix;
+  background: $darkestColor;
+  color: $lightTextColor;
+  position: fixed;
+  top: 0;
+  height: 50px;
+  box-shadow: 0 0 5px rgba(0, 0, 0, .5);
+  width: 100%;
+  z-index: 100;
+
+  a {
+    color: $lightColor;
+    text-decoration: none;
+  }
+
+  .nav-site {
+    float: right;
+    margin: 0;
+
+    li {
+      margin: 0;
+    }
+
+    a {
+      padding: 0 8px;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      line-height: 50px;
+      display: inline-block;
+      height: 50px;
+      color: $mediumTextColor;
+
+      &:hover {
+        color: $lightTextColor;
+      }
+
+      &.active {
+        color: $lightTextColor;
+        border-bottom: 3px solid $primary;
+        background: #333;
+      }
+    }
+  }
+
+  .nav-home {
+    color: #00d8ff;
+    font-size: 24px;
+    line-height: 50px;
+  }
+
+  .nav-logo {
+    @include retina-image('../img/logo_small', 38px 38px);
+    vertical-align: middle;
+  }
+
+  ul {
+    display: inline;
+  }
+
+  li {
+    display: inline;
+  }
+}
+
+// Hero!
+
+.hero {
+  height: 300px;
+  // background: $darkColor url(../img/header.png) no-repeat center;
+  background: $darkColor;
+  padding-top: 50px;
+  color: $lightColor;
+  font-weight: 300;
+
+  .text {
+    font-size: 64px;
+    text-align: center;
+  }
+
+  .minitext {
+    font-size: 16px;
+    text-align: center;
+    text-transform: uppercase;
+  }
+
+  strong {
+    color: $blueColor;
+    font-weight: 400;
+  }
+}
+
+.buttons-unit {
+  margin-top: 60px;
+  text-align: center;
+
+  a {
+    color: $blueColor;
+  }
+
+  .button {
+    font-size: 24px;
+    background: $primary;
+    color: $lightTextColor;
+
+    &:active {
+      background: darken($primary, 5%);
+    }
+  }
+}
+
+// Downloads
+
+.buttons-unit.downloads {
+  margin: 30px 0;
+}
+
+// Docs Nav
+
+.nav-docs {
+  color: $darkColor;
+  font-size: 14px;
+  // position: fixed;
+  float: left;
+  width: 210px;
+
+  ul {
+    list-style: none;
+    margin: 0;
+  }
+  ul ul {
+    margin-left: 20px;
+  }
+  li {
+    margin: 0;
+  }
+  h3 {
+    text-transform: uppercase;
+    font-size: 14px;
+  }
+  a {
+    color: $mediumestColor;
+    display: block;
+
+    &:hover {
+      text-decoration: none;
+      color: $primary;
+    }
+
+    &.active {
+      color: $primary;
+    }
+  }
+
+  .nav-docs-section {
+    border-bottom: 1px solid #ccc;
+    border-top: 1px solid #eee;
+    padding: 12px 0;
+
+    &:first-child {
+       padding-top: 0;
+       border-top: 0;
+    }
+
+    &:last-child {
+      padding-bottom: 0;
+      border-bottom: 0;
+    }
+  }
+
+}
+
+.nav-blog {
+  li {
+    margin-bottom: 5px;
+  }
+}
+
+// Home Page specifics
+
+.home-section {
+  margin: 50px 0;
+}
+
+.home-divider {
+  border-top-color: #bbb;
+  margin: 0 auto;
+  width: 400px;
+}
+
+.marketing-row {
+  @include clearfix;
+  margin: 50px 0;
+}
+
+.marketing-col {
+  float: left;
+  margin-right: 40px;
+  width: $columnWidth;
+
+  h3 {
+    color: $darkColor;
+    font-size: 24px;
+    font-weight: normal;
+    text-transform: uppercase;
+  }
+  p {
+    font-size: 16px;
+  }
+}
+
+.marketing-col:last-child {
+  margin-right: 0;
+}
+
+#examples h3, .home-presentation h3 {
+  color: $darkColor;
+  font-size: 24px;
+  font-weight: normal;
+  margin-bottom: 5px;
+}
+
+#examples {
+  p {
+    margin: 0 0 25px 0;
+    max-width: $twoColumnWidth;
+  }
+
+  .example {
+    margin-top: 60px;
+  }
+
+  #todoExample {
+    font-size: 14px;
+    ul {
+      list-style-type: square;
+      margin: 0 0 10px 0;
+    }
+    input {
+      border: 1px solid #ccc;
+      font: 14px proxima-nova, $helvetica;
+      padding: 3px;
+      width: 150px;
+    }
+    button {
+      font: 14px proxima-nova, $helvetica;
+      margin-left: 5px;
+      padding: 4px 10px;
+    }
+  }
+
+  #markdownExample {
+    textarea {
+      border: 1px solid #ccc;
+      font: 14px proxima-nova, $helvetica;
+      margin-bottom: 10px;
+      padding: 5px;
+    }
+  }
+}
+
+.home-bottom-section {
+  margin-bottom: 100px;
+}
+
+.docs-nextprev {
+  @include clearfix;
+}
+
+.docs-prev {
+  float: left;
+}
+
+.docs-next {
+  float: right;
+}
+
+footer {
+  font-size: 13px;
+  font-weight: 600;
+  margin-top: 36px;
+  margin-bottom: 18px;
+  overflow: auto;
+}
+
+section.black content {
+  padding-bottom: 18px;
+}
+
+/**
+ * Blog
+ */
+
+.blogContent {
+  padding-top: 20px;
+
+  blockquote {
+    padding: 5px 15px;
+    margin: 20px 0;
+    background-color: #f8f5ec;
+    border-left: 5px solid #f7ebc6;
+  }
+
+}
+
+/**
+ * Docs
+ */
+
+.documentationContent {
+  @include clearfix;
+
+  .subHeader {
+    font-size: 24px;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    a {
+      color: $darkTextColor;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  // H2s form documentation topic dividers. Extra space helps.
+  h2 {
+    margin-top: 30px;
+  }
+
+  padding-top: 20px;
+
+  // Make a notice box out of blockquotes in the documetation:
+  blockquote {
+      padding: 15px 30px 15px 15px;
+      margin: 20px 0;
+      background-color: rgba(204, 122, 111, 0.09999999999999998);
+      border-left: 5px solid rgba(191, 87, 73, 0.19999999999999996);
+    h4 {
+      margin-top: 0;
+    }
+    p:last-child {
+      margin-bottom: 0;
+    }
+    // Treat first child as the title - promote to H4.
+    p:first-child {
+      font-weight: bold;
+      font-size: 17.5px;
+      line-height: 20px;
+      margin-top: 0;
+      text-rendering: optimizelegibility;
+    }
+  }
+}
+
+.docs-prevnext {
+  padding-top: 40px;
+  padding-bottom: 40px;
+}
+
+/* JSX Compiler */
+
+.jsxCompiler {
+  margin: 0 auto;
+  padding-top: 20px;
+  width: 1220px;
+
+  #jsxCompiler {
+    margin-top: 20px;
+  }
+
+  .playgroundPreview {
+    padding: 14px;
+    width: 600px;
+
+    pre {
+      @include code-typography;
+    }
+  }
+}
+
+/* Button */
+
+.button {
+  @include background(linear-gradient($buttonGreyTop, $buttonGreyBottom));
+  // border: 1px solid $darkestColor;
+  border-radius: 4px;
+  padding: 8px 16px;
+  font-size: 18px;
+  font-weight: 400;
+  margin: 0 12px;
+  // word-spacing: -2px;
+  // letter-spacing: 1px;
+  display: inline-block;
+  color: $lightTextColor;
+  text-decoration: none;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:active {
+    box-shadow: none;
+  }
+}
+
+.hero {
+  .button {
+    box-shadow: 1px 3px 3px rgba(0, 0, 0, .3);
+  }
+}
+
+.button.blue {
+  @include background(linear-gradient($buttonBlueTop, $buttonBlueBottom));
+}
+
+
+/* Row */
+
+.row {
+  padding-bottom: 4px;
+}
+
+.row .span4 {
+  width: 33.33%;
+  display: table-cell;
+}
+
+.row .span8 {
+  width: 66.66%;
+  display: table-cell;
+}
+
+.row .span6 {
+  width: 50%;
+  display: table-cell;
+}
+
+
+/* Content */
+
+p {
+  margin: 10px 0;
+}
+
+.highlight {
+  padding: 10px;
+  margin-bottom: 20px;
+}
+
+figure {
+  text-align: center;
+}
+
+.inner-content {
+  float: right;
+  width: $skinnyContentWidth;
+}
+
+.nosidebar .inner-content {
+  float: none;
+  margin: 0 auto;
+}
+
+/* Blog */
+
+.post-list-item + .post-list-item {
+  margin-top: 60px;
+}
+
+/* Code Mirror */
+
+div.CodeMirror pre, div.CodeMirror-linenumber, code {
+  @include code-typography;
+}
+
+div.CodeMirror-linenumber:after {
+  content: '.';
+}
+
+.CodeMirror, div.CodeMirror-gutters, div.highlight {
+  border: none;
+}
+
+small code,
+li code,
+p code {
+  color: #555;
+  background-color: rgba(0, 0, 0, .04);
+  padding: 1px 3px;
+}
+
+.cm-s-default span.cm-string-2 {
+  color: inherit;
+}
+
+.playground {
+  @include clearfix;
+}
+
+.playground::before {
+  border-bottom: none !important;
+  border-radius: 3px 3px 0 0;
+  padding: 3px 7px;
+  font-size: 12px;
+  font-weight: bold;
+  color: #c2c0bc;
+  background-color: #f1ede4;
+  content: 'Live editor';
+}
+
+.playground::before,
+.playgroundCode,
+.playgroundPreview {
+  border: 1px solid rgba(16,16,16,0.1);
+}
+
+.playgroundCode {
+  border-radius: 0 3px 3px 3px;
+  float: left;
+  overflow: hidden;
+  width: $twoColumnWidth;
+}
+
+.playgroundPreview {
+  background-color: white;
+  border-radius: 3px;
+  float: right;
+  padding: 15px 20px;
+  width: $columnWidth;
+}
+
+.MarkdownEditor textarea {
+  width: 100%;
+  height: 100px
+}
+
+.hll {
+  background-color: #f7ebc6;
+  border-left: 5px solid #f7d87c;
+  display: block;
+  margin-left: -14px;
+  margin-right: -14px;
+  padding-left: 9px;
+}
+
+/* Codemirror doesn't support <jsx> syntax. Instead of highlighting it
+   as error, just ignore it */
+.highlight .javascript .err {
+  background-color: transparent;
+  color: inherit;
+}
+
+.highlight {
+  position: relative;
+  margin-bottom: 14px;
+  padding: 30px 14px 14px;
+  border: none;
+  border-radius: 0;
+  overflow: auto;
+}
+
+
+.highlight pre {
+  padding: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  background-color: transparent;
+  border: 0;
+}
+
+.highlight pre code {
+  font-size: inherit;
+}
+
+.highlight pre .lineno {
+  display: inline-block;
+  width: 22px;
+  padding-right: 5px;
+  margin-right: 10px;
+  color: #bebec5;
+  text-align: right;
+}
+
+/* Echo out a label for the example */
+
+.highlight:after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  padding: 3px 7px;
+  font-size: 12px;
+  font-weight: bold;
+  color: #c2c0bc;
+  background-color: #f1ede4;
+  content: "Code";
+}
+
+.downloadCenter {
+  text-align: center;
+  margin-top: 20px;
+  margin-bottom: 25px;
+}
+
+.downloadSection:hover {
+  text-decoration: none !important;
+}
+
+@media screen and (max-width: 960px) {
+  .nav-main {
+    position: static;
+  }
+  .container {
+    padding-top: 0;
+  }
+}
+
+.post {
+  margin-bottom: 30px;
+}
+
+.pagination {
+  margin-bottom: 30px;
+
+  /* Trick to get the wrapper to expand to fit floating elements */
+  width: 100%;
+  overflow: hidden;
+
+  .next {
+    float: right;
+  }
+}

docs/_includes/blog_post.html

@@ -0,0 +1,10 @@
+<h1><a href="/react{{ page.url }}">{{ page.title }}</a></h1>
+<p class="meta">{{ page.date | date_to_string }} by {{ page.author }}</p>
+
+<div id="post">
+{% if content != '' %}
+  {{ page.excerpt }}
+{% else %}
+  {{ page.content }}
+{% endif %}
+</div>

docs/_includes/nav_blog.html

@@ -0,0 +1,11 @@
+<div class="nav-docs nav-blog">
+  <div class="nav-docs-section">
+    <h3>Recent posts</h3>
+    <ul>
+      {% for post in site.posts limit:10 %}
+        <li><a href="/react{{ post.url }}"{% if page.title == post.title %} class="active"{% endif %}>{{ post.title }}</a></li>
+      {% endfor %}
+      <li><a href="/react/blog/all.html">All posts ...</a></li>
+    </ul>
+  </div>
+</div>

docs/_includes/nav_docs.html

@@ -0,0 +1,27 @@
+<div class="nav-docs">
+  {% for section in site.nav_docs_sections %}
+    <div class="nav-docs-section">
+      <h3>{{ section.title }}</h3>
+      <ul>
+        {% for item in section.items %}
+          <li>
+            <a href="/react/docs/{{ item.id }}.html"{% if page.id == item.id %} class="active"{% endif %}>
+              {{ item.title }}
+            </a>
+            {% if item.subitems %}
+              <ul>
+                {% for subitem in item.subitems %}
+                  <li>
+                    <a href="/react/docs/{{ subitem.id }}.html"{% if page.id == subitem.id %} class="active"{% endif %}>
+                      {{ subitem.title }}
+                    </a>
+                  </li>
+                {% endfor %}
+              </ul>
+            {% endif %}
+          </li>
+        {% endfor %}
+      </ul>
+    </div>
+  {% endfor %}
+</div>

docs/_js/examples/hello.js

@@ -0,0 +1,19 @@
+/**
+ * @jsx React.DOM
+ */
+
+var HELLO_COMPONENT = "\
+/** @jsx React.DOM */\n\
+var HelloMessage = React.createClass({\n\
+  render: function() {\n\
+    return <div>{'Hello ' + this.props.name}</div>;\n\
+  }\n\
+});\n\
+\n\
+React.renderComponent(<HelloMessage name=\"John\" />, mountNode);\
+";
+
+React.renderComponent(
+  <ReactPlayground codeText={HELLO_COMPONENT} />,
+  document.getElementById('helloExample')
+);

docs/_js/examples/markdown.js

@@ -0,0 +1,43 @@
+/**
+ * @jsx React.DOM
+ */
+
+var MARKDOWN_COMPONENT = "\
+/** @jsx React.DOM */\n\
+\n\
+var converter = new Showdown.converter();\n\
+\n\
+var MarkdownEditor = React.createClass({\n\
+  getInitialState: function() {\n\
+    return {value: 'Type some *markdown* here!'};\n\
+  },\n\
+  handleChange: function() {\n\
+    this.setState({value: this.refs.textarea.getDOMNode().value});\n\
+  },\n\
+  render: function() {\n\
+    return (\n\
+      <div className=\"MarkdownEditor\">\n\
+        <h3>Input</h3>\n\
+        <textarea\n\
+          onChange={this.handleChange}\n\
+          ref=\"textarea\"\n\
+          defaultValue={this.state.value} />\n\
+        <h3>Output</h3>\n\
+        <div\n\
+          className=\"content\"\n\
+          dangerouslySetInnerHTML={{\n\
+            __html: converter.makeHtml(this.state.value)\n\
+          }}\n\
+        />\n\
+      </div>\n\
+    );\n\
+  }\n\
+});\n\
+\n\
+React.renderComponent(<MarkdownEditor />, mountNode);\
+";
+
+React.renderComponent(
+  <ReactPlayground codeText={MARKDOWN_COMPONENT} />,
+  document.getElementById('markdownExample')
+);

docs/_js/examples/timer.js

@@ -0,0 +1,32 @@
+/**
+ * @jsx React.DOM
+ */
+
+var TIMER_COMPONENT = "\
+var Timer = React.createClass({\n\
+  getInitialState: function() {\n\
+    return {secondsElapsed: 0};\n\
+  },\n\
+  tick: function() {\n\
+    this.setState({secondsElapsed: this.state.secondsElapsed + 1});\n\
+  },\n\
+  componentDidMount: function() {\n\
+    this.interval = setInterval(this.tick, 1000);\n\
+  },\n\
+  componentWillUnmount: function() {\n\
+    clearInterval(this.interval);\n\
+  },\n\
+  render: function() {\n\
+    return React.DOM.div({},\n\
+      'Seconds Elapsed: ' + this.state.secondsElapsed\n\
+    );\n\
+  }\n\
+});\n\
+\n\
+React.renderComponent(Timer({}), mountNode);\
+";
+
+React.renderComponent(
+  <ReactPlayground codeText={TIMER_COMPONENT} />,
+  document.getElementById('timerExample')
+);

docs/_js/examples/todo.js

@@ -0,0 +1,47 @@
+/**
+ * @jsx React.DOM
+ */
+
+var TODO_COMPONENT = "\
+/** @jsx React.DOM */\n\
+var TodoList = React.createClass({\n\
+  render: function() {\n\
+    var createItem = function(itemText) {\n\
+      return <li>{itemText}</li>;\n\
+    };\n\
+    return <ul>{this.props.items.map(createItem)}</ul>;\n\
+  }\n\
+});\n\
+var TodoApp = React.createClass({\n\
+  getInitialState: function() {\n\
+    return {items: [], text: ''};\n\
+  },\n\
+  onChange: function(e) {\n\
+    this.setState({text: e.target.value});\n\
+  },\n\
+  handleSubmit: function(e) {\n\
+    e.preventDefault();\n\
+    var nextItems = this.state.items.concat([this.state.text]);\n\
+    var nextText = '';\n\
+    this.setState({items: nextItems, text: nextText});\n\
+  },\n\
+  render: function() {\n\
+    return (\n\
+      <div>\n\
+        <h3>TODO</h3>\n\
+        <TodoList items={this.state.items} />\n\
+        <form onSubmit={this.handleSubmit}>\n\
+          <input onChange={this.onChange} value={this.state.text} />\n\
+          <button>{'Add #' + (this.state.items.length + 1)}</button>\n\
+        </form>\n\
+      </div>\n\
+    );\n\
+  }\n\
+});\n\
+React.renderComponent(<TodoApp />, mountNode);\
+";
+
+React.renderComponent(
+  <ReactPlayground codeText={TODO_COMPONENT} />,
+  document.getElementById('todoExample')
+);

docs/_js/jsx-compiler.js

@@ -0,0 +1,19 @@
+/**
+ * @jsx React.DOM
+ */
+
+var HELLO_COMPONENT = "\
+/** @jsx React.DOM */\n\
+var HelloMessage = React.createClass({\n\
+  render: function() {\n\
+    return <div>{'Hello ' + this.props.name}</div>;\n\
+  }\n\
+});\n\
+\n\
+React.renderComponent(<HelloMessage name=\"John\" />, mountNode);\
+";
+
+React.renderComponent(
+  <ReactPlayground codeText={HELLO_COMPONENT} renderCode={true} />,
+  document.getElementById('jsxCompiler')
+);

docs/_js/live_editor.js

@@ -0,0 +1,130 @@
+/**
+ * @jsx React.DOM
+ */
+
+
+var IS_MOBILE = (
+  navigator.userAgent.match(/Android/i)
+    || navigator.userAgent.match(/webOS/i)
+    || navigator.userAgent.match(/iPhone/i)
+    || navigator.userAgent.match(/iPad/i)
+    || navigator.userAgent.match(/iPod/i)
+    || navigator.userAgent.match(/BlackBerry/i)
+    || navigator.userAgent.match(/Windows Phone/i)
+);
+
+var CodeMirrorEditor = React.createClass({
+  componentDidMount: function(root) {
+    if (IS_MOBILE) {
+      return;
+    }
+    this.editor = CodeMirror.fromTextArea(this.refs.editor.getDOMNode(), {
+      mode: 'javascript',
+      lineNumbers: false,
+      matchBrackets: true,
+      theme: 'solarized-light'
+    });
+    this.editor.on('change', this.onChange);
+    this.onChange();
+  },
+  onChange: function() {
+    if (this.props.onChange) {
+      var content = this.editor.getValue();
+      this.props.onChange(content);
+    }
+  },
+  render: function() {
+    // wrap in a div to fully contain CodeMirror
+    var editor;
+
+    if (IS_MOBILE) {
+      editor = <pre style={{overflow: 'scroll'}}>{this.props.codeText}</pre>;
+    } else {
+      editor = <textarea ref="editor" defaultValue={this.props.codeText} />;
+    }
+
+    return (
+      <div className={this.props.className}>
+        {editor}
+      </div>
+    );
+  }
+});
+
+var ReactPlayground = React.createClass({
+  MODES: {XJS: 'XJS', JS: 'JS'}, //keyMirror({XJS: true, JS: true}),
+
+  getInitialState: function() {
+    return {mode: this.MODES.XJS, code: this.props.codeText};
+  },
+
+  bindState: function(name) {
+    return function(value) {
+      var newState = {};
+      newState[name] = value;
+      this.setState(newState);
+    }.bind(this);
+  },
+
+  getDesugaredCode: function() {
+    return JSXTransformer.transform(this.state.code).code;
+  },
+
+  render: function() {
+    var content;
+    if (this.state.mode === this.MODES.XJS) {
+      content =
+        <CodeMirrorEditor
+          onChange={this.bindState('code')}
+          className="playgroundStage"
+          codeText={this.state.code}
+        />;
+    } else if (this.state.mode === this.MODES.JS) {
+      content =
+        <div className="playgroundJS playgroundStage">
+            {this.getDesugaredCode()}
+        </div>;
+    }
+
+    return (
+      <div className="playground">
+        <div className="playgroundCode">
+          {content}
+        </div>
+        <div className="playgroundPreview">
+          <div ref="mount" />
+        </div>
+      </div>
+    );
+  },
+  componentDidMount: function() {
+    this.executeCode();
+  },
+  componentDidUpdate: function() {
+    this.executeCode();
+  },
+  executeCode: function() {
+    var mountNode = this.refs.mount.getDOMNode();
+
+    try {
+      React.unmountAndReleaseReactRootNode(mountNode);
+    } catch (e) { }
+
+    try {
+      if (this.props.renderCode) {
+        React.renderComponent(
+          <pre>{this.getDesugaredCode()}</pre>,
+          mountNode
+        );
+      } else {
+        eval(this.getDesugaredCode());
+      }
+    } catch (e) {
+      React.renderComponent(
+        <div content={e.toString()} className="playgroundError" />,
+        mountNode
+      );
+    }
+  }
+});
+

docs/_layouts/default.html

@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <title>React | {{ page.title }}</title>
+  <meta name="viewport" content="width=device-width">
+  <meta property="og:title" content="React | {{ page.title }}" />
+  <meta property="og:type" content="website" />
+  <meta property="og:url" content="http://facebook.github.io/react{{ page.url }}" />
+  <meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
+  <meta property="og:description" content="A JavaScript library for building user interfaces" />
+  <meta property="fb:app_id" content="623268441017527" />
+
+  <link rel="shortcut icon" href="/react/favicon.ico">
+  <link rel="alternate" type="application/rss+xml" title="{{ site.name }}" href="{{ site.url }}{{ site.baseurl }}/feed.xml">
+
+  <link rel="stylesheet" href="/react/css/react.css">
+  <link rel="stylesheet" href="/react/css/syntax.css">
+  <link rel="stylesheet" href="/react/css/codemirror.css">
+
+  <script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
+  <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
+
+  <script type="text/javascript" src="/react/js/codemirror.js"></script>
+  <script type="text/javascript" src="/react/js/javascript.js"></script>
+  <script type="text/javascript" src="/react/js/react.min.js"></script>
+  <script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
+  <script type="text/javascript" src="/react/js/live_editor.js"></script>
+  <script type="text/javascript" src="/react/js/showdown.js"></script>
+</head>
+<body>
+
+  <div class="container">
+
+    <div class="nav-main">
+      <div class="wrap">
+        <a class="nav-home" href="/react/index.html">
+          <img class="nav-logo" alt="" src="/react/img/logo_small.png" width="38" height="38">
+          React
+        </a>
+        <ul class="nav-site">
+          <li><a href="/react/docs/getting-started.html"{% if page.sectionid == 'docs' %} class="active"{% endif %}>docs</a></li>
+          <li><a href="/react/support.html"{% if page.id == 'support' %} class="active"{% endif %}>support</a></li>
+          <li><a href="/react/downloads.html"{% if page.id == 'downloads' %} class="active"{% endif %}>download</a></li>
+          <li><a href="/react/blog/"{% if page.sectionid == 'blog' %} class="active"{% endif %}>blog</a></li>
+          <li><a href="http://github.com/facebook/react">github</a>
+        </ul>
+        <!-- <iframe src="http://ghbtns.com/github&#45;btn.html?user=facebook&#38;repo=react.js&#38;type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
+      </div>
+    </div>
+
+    {% if page.id == 'home' %}
+    <div class="hero">
+      <div class="wrap">
+        <div class="text"><strong>React</strong></div>
+        <div class="minitext">
+          A JavaScript library for building user interfaces
+        </div>
+
+        <div class="buttons-unit">
+          <a href="/react/docs/getting-started.html" class="button">Get Started</a>
+          <a href="/react/downloads.html" class="button">Download React v{{site.react_version}}</a>
+        </div>
+      </div>
+    </div>
+    {% endif %}
+
+    {{ content }}
+
+    <footer class="wrap">
+      <div class="left">A Facebook &amp; Instagram collaboration.</div>
+      <div class="right">&copy; 2013 Facebook Inc.</div>
+    </footer>
+  </div>
+  <div id="fb-root"></div>
+  <script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+    ga('create', 'UA-41298772-1', 'facebook.github.io');
+    ga('send', 'pageview');
+
+    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
+
+    (function(d, s, id) {
+      var js, fjs = d.getElementsByTagName(s)[0];
+      if (d.getElementById(id)) return;
+      js = d.createElement(s); js.id = id;
+      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=623268441017527";
+      fjs.parentNode.insertBefore(js, fjs);
+    }(document, 'script', 'facebook-jssdk'));
+  </script>
+</body>
+</html>

docs/_layouts/docs.html

@@ -0,0 +1,25 @@
+---
+layout: default
+sectionid: docs
+---
+
+<section class="content wrap documentationContent">
+  {% include nav_docs.html %}
+
+  <div class="inner-content">
+    <h1>{{ page.title }}</h1>
+    <div class="subHeader">{{ page.description }}</div>
+    {{ content }}
+
+    <div class="docs-prevnext">
+      {% if page.prev %}
+        <a class="docs-prev" href="/react/docs/{{ page.prev }}">&larr; Prev</a>
+      {% endif %}
+      {% if page.next %}
+        <a class="docs-next" href="/react/docs/{{ page.next }}">Next &rarr;</a>
+      {% endif %}
+    </div>
+
+    <div class="fb-comments" data-width="650" data-num-posts="10" data-href="{{ site.url }}{{ site.baseurl }}{{ page.url }}"></div>
+  </div>
+</section>

docs/_layouts/page.html

@@ -0,0 +1,7 @@
+---
+layout: default
+---
+
+<section class="content wrap">
+  {{ content }}
+</section>

docs/_layouts/post.html

@@ -0,0 +1,21 @@
+---
+layout: default
+sectionid: blog
+---
+
+<section class="content wrap blogContent">
+  {% include nav_blog.html %}
+  <div class="inner-content">
+    <h1>{{ page.title }}</h1>
+    <p class="meta">{{ page.date | date: "%B %e, %Y" }} by {{ page.author }}</p>
+
+    <hr>
+
+    <div class="post">
+      {{ content }}
+    </div>
+
+    <div class="fb-like" data-send="true" data-width="650" data-show-faces="false"></div>
+    <div class="fb-comments" data-width="650" data-num-posts="10" data-href="{{ site.url }}{{ site.baseurl }}{{ page.url }}"></div>
+  </div>
+</section>

docs/_layouts/redirect.html

@@ -0,0 +1,6 @@
+<html>
+<head>
+  <meta http-equiv="refresh" content="0; {{ page.destination }}">
+</head>
+<body></body>
+</html>

docs/_layouts/single.html

@@ -0,0 +1,20 @@
+---
+layout: default
+---
+
+<section class="content wrap documentationContent nosidebar">
+  <div class="inner-content">
+    <h1>{{ page.title }}</h1>
+    <div class="subHeader">{{ page.description }}</div>
+    {{ content }}
+
+    <div class="docs-prevnext">
+      {% if page.prev %}
+        <a class="docs-prev" href="/react/docs/{{ page.prev }}">&larr; Prev</a>
+      {% endif %}
+      {% if page.next %}
+        <a class="docs-next" href="/react/docs/{{ page.next }}">Next &rarr;</a>
+      {% endif %}
+    </div>
+  </div>
+</section>

docs/_plugins/header_links.rb

@@ -0,0 +1,17 @@
+require 'redcarpet'
+require 'sanitize'
+
+# Simple converter that is probably better than RedCarpet's built in TOC id
+# generator (which ends up with things lik id="toc_1"... terrible).
+
+class Redcarpet::Render::HTML
+  def header(title, level)
+    clean_title = Sanitize.clean(title)
+      .downcase
+      .gsub(/\s+/, "-")
+      .gsub(/[^A-Za-z0-9\-_.]/, "")
+
+    return "<h#{level} id=\"#{clean_title}\"><a href=\"##{clean_title}\">#{title}</a></h#{level}>"
+  end
+end
+

docs/_plugins/highlight_lines.rb

@@ -0,0 +1,39 @@
+# Replace Jekyll's handling of the Redcarpet code_block (which already adds
+# support for highlighting, but needs support for the very non-standard
+# "code fences with line highlights" extension).
+# Since this is currently depending on Redcarpet to cooperate, we are going to
+# be naive, and only allow line highlighting when a language is specified. If
+# you don't want any syntax highlighting but want to highlight lines, then you
+# need to specify text as your language, like:
+# ```text{4}
+
+
+module Jekyll
+  module Converters
+    class Markdown
+      class RedcarpetParser
+        module WithPygments
+          def block_code(code, lang)
+            require 'pygments'
+            lang_parts = lang && lang.split('{')
+            lang = lang_parts && !lang_parts[0].empty? && lang_parts[0] || 'text'
+            hl_lines = ''
+            if lang_parts && lang_parts.size >= 2
+              hl_lines = lang_parts[1].gsub(/[{}]/, '').split(',').map do |ln|
+                if matches = /(\d+)-(\d+)/.match(ln)
+                  ln = Range.new(matches[1], matches[2]).to_a.join(' ')
+                end
+                ln
+              end.join(' ')
+            end
+            output = add_code_tags(
+              Pygments.highlight(code, :lexer => lang,
+                                 :options => { :encoding => 'utf-8', :hl_lines => hl_lines }),
+              lang
+            )
+          end
+        end
+      end
+    end
+  end
+end

docs/_posts/2013-06-02-jsfiddle-integration.md

@@ -0,0 +1,11 @@
+---
+title: JSFiddle Integration
+layout: post
+author: Christopher Chedeau
+---
+
+[JSFiddle](http://jsfiddle.net) just announced support for React. This is an exciting news as it makes collaboration on snippets of code a lot easier. You can play around this **[base React JSFiddle](http://jsfiddle.net/vjeux/kb3gN/)**, fork it and share it! A [fiddle without JSX](http://jsfiddle.net/vjeux/VkebS/) is also available.
+
+
+<blockquote class="twitter-tweet" align="center"><p>React (by Facebook) is now available on JSFiddle. <a href="http://t.co/wNQf9JPv5u" title="http://facebook.github.io/react/">facebook.github.io/react/</a></p>&mdash; JSFiddle (@jsfiddle) <a href="https://twitter.com/jsfiddle/status/341114115781177344">June 2, 2013</a></blockquote>
+<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

docs/_posts/2013-06-05-why-react.md

@@ -0,0 +1,91 @@
+---
+title: Why did we build React?
+layout: post
+author: Pete Hunt
+---
+
+There are a lot of JavaScript MVC frameworks out there. Why did we build React
+and why would you want to use it?
+
+## React isn't an MVC framework.
+
+React is a library for building composable user interfaces. It encourages
+the creation of reusable UI components which present data that changes over
+time.
+
+## React doesn't use templates.
+
+Traditionally, web application UIs are built using templates or HTML directives.
+These templates dictate the full set of abstractions that you are allowed to use
+to build your UI.
+
+React approaches building user interfaces differently by breaking them into
+**components**. This means React uses a real, full featured programming language
+to render views, which we see as an advantage over templates for a few reasons:
+
+- **JavaScript is a flexible, powerful programming language** with the ability
+  to build abstractions. This is incredibly important in large applications.
+- By unifying your markup with its corresponding view logic, React can actually
+  make views **easier to extend and maintain**.
+- By baking an understanding of markup and content into JavaScript, there's
+  **no manual string concatenation** and therefore less surface area for XSS
+  vulnerabilities.
+
+We've also created [JSX](http://facebook.github.io/react/docs/syntax.html), an optional
+syntax extension, in case you prefer the readability of HTML to raw JavaScript.
+
+## Reactive updates are dead simple.
+
+React really shines when your data changes over time.
+
+In a traditional JavaScript application, you need to look at what data changed
+and imperatively make changes to the DOM to keep it up-to-date. Even AngularJS,
+which provides a declarative interface via directives and data binding [requires
+a linking function to manually update DOM nodes](http://docs.angularjs.org/guide/directive#reasonsbehindthecompilelinkseparation).
+
+React takes a different approach.
+
+When your component is first initialized, the `render` method is called,
+generating a lightweight representation of your view. From that representation,
+a string of markup is produced, and injected into the document. When your data
+changes, the `render` method is called again. In order to perform updates as
+efficiently as possible, we diff the return value from the previous call to
+`render` with the new one, and generate a minimal set of changes to be applied
+to the DOM.
+
+> The data returned from `render` is neither a string nor a DOM node -- it's a
+> lightweight description of what the DOM should look like.
+
+We call this process **reconciliation**. Check out
+[this jsFiddle](http://jsfiddle.net/fv6RD/3/) to see an example of
+reconciliation in action.
+
+Because this re-render is so fast (around 1ms for TodoMVC), the developer
+doesn't need to explicitly specify data bindings. We've found this approach
+makes it easier to build apps.
+
+## HTML is just the beginning.
+
+Because React has its own lightweight representation of the document, we can do
+some pretty cool things with it:
+
+- Facebook has dynamic charts that render to `<canvas>` instead of HTML.
+- Instagram is a "single page" web app built entirely with React and
+  `Backbone.Router`. Designers regularly contribute React code with JSX.
+- We've built internal prototypes that run React apps in a web worker and use
+  React to drive **native iOS views** via an Objective-C bridge.
+- You can run React
+  [on the server](http://github.com/petehunt/react-server-rendering)
+  for SEO, performance, code sharing and overall flexibility.
+- Events behave in a consistent, standards-compliant way in all browsers
+  (including IE8) and automatically use
+  [event delegation](http://davidwalsh.name/event-delegate).
+
+Head on over to
+[facebook.github.io/react](http://facebook.github.io/react) to check
+out what we have built. Our documentation is geared towards building
+apps with the framework, but if you are interested in the
+nuts and bolts
+[get in touch](http://facebook.github.io/react/support.html) with us!
+
+Thanks for reading!

docs/_posts/2013-06-12-community-roundup.md

@@ -0,0 +1,48 @@
+---
+title: "Community Round-up #1"
+layout: post
+author: Vjeux
+---
+
+React was open sourced two weeks ago and it's time for a little round-up of what has been going on.
+
+## Khan Academy Question Editor
+
+It looks like [Ben Alpert](http://benalpert.com/) is the first person outside of Facebook and Instagram to push React code to production. We are very grateful for his contributions in form of pull requests, bug reports and presence on IRC ([#reactjs on Freenode](irc://chat.freenode.net/reactjs)). Ben wrote about his experience using React:
+
+> I just rewrote a 2000-line project in React and have now made a handful of pull requests to React. Everything about React I've seen so far seems really well thought-out and I'm proud to be the first non-FB/IG production user of React.
+>
+> The project that I rewrote in React (and am continuing to improve) is the Khan Academy question editor which content creators can use to enter questions and hints that will be presented to students:
+> <figure>[![](/react/img/blog/khan-academy-editor.png)](http://benalpert.com/2013/06/09/using-react-to-speed-up-khan-academy.html)</figure>
+>
+> [Read the full post...](http://benalpert.com/2013/06/09/using-react-to-speed-up-khan-academy.html)
+
+## Pimp my Backbone.View (by replacing it with React)
+
+[Paul Seiffert](https://blog.mayflower.de/) wrote a blog post that explains how to integrate React into Backbone applications.
+
+> React has some interesting concepts for JavaScript view objects that can be used to eliminate this one big problem I have with Backbone.js.
+>
+> As in most MVC implementations (although React is probably just a VC implementation), a view is one portion of the screen that is managed by a controlling object. This object is responsible for deciding when to re-render the view and how to react to user input. With React, these view-controllers objects are called components. A component knows how to render its view and how to handle to the user's interaction with it.
+>
+> The interesting thing is that React is figuring out by itself when to re-render a view and how to do this in the most efficient way.
+>
+> [Read the full post...](https://blog.mayflower.de/3937-Backbone-React.html)
+
+## Using facebook's React with require.js
+
+[Mario Mueller](http://blog.xenji.com/) wrote a menu component in React and was able to easily integrate it with require.js, EventEmitter2 and bower.
+
+> I recently stumbled upon facebook's React library, which is a Javascript library for building reusable frontend components. Even if this lib is only at version 0.3.x it behaves very stable, it is fast and is fun to code. I'm a big fan of require.js, so I tried to use React within the require.js eco system. It was not as hard as expected and here are some examples and some thoughts about it.
+>
+> [Read the full post...](http://blog.xenji.com/2013/06/facebooks-react-require-js.html)
+
+## Origins of React
+
+[Pete Hunt](http://www.petehunt.net/blog/) explained what differentiates React from other JavaScript libraries in [a previous blog post](http://facebook.github.io/react/blog/2013/06/05/why-react.html). [Lee Byron](http://leebyron.com/) gives another perspective on Quora:
+
+> React isn't quite like any other popular Javascript libraries, and it solves a very specific problem: complex UI rendering. It's also intended to be used along side many other popular libraries. For example, React works well with Backbone.js, amongst many others.
+>
+> React was born out of frustrations with the common pattern of writing two-way data bindings in complex MVC apps. React is an implementation of one-way data bindings.
+>
+> [Read the full post...](http://www.quora.com/React-JS-Library/How-is-Facebooks-React-JavaScript-library/answer/Lee-Byron?srid=3DcX)

docs/_posts/2013-06-19-community-roundup-2.md

@@ -0,0 +1,71 @@
+---
+title: "Community Round-up #2"
+layout: post
+author: Vjeux
+---
+
+Since the launch we have received a lot of feedback and are actively working on React 0.4. In the meantime, here are the highlights of this week.
+
+## Some quick thoughts on React
+
+[Andrew Greig](http://www.andrewgreig.com/) made a blog post that gives a high level description of what React is.
+
+> I have been using Facebooks recently released Javascript framework called React.js for the last few days and have managed to obtain a rather high level understanding of how it works and formed a good perspective on how it fits in to the entire javascript framework ecosystem.
+>
+> Basically, React is not an MVC framework. It is not a replacement for Backbone or Knockout or Angular, instead it is designed to work with existing frameworks and help extend their functionality.
+>
+> It is designed for building big UIs. The type where you have lots of reusable components that are handling events and presenting and changing some backend data. In a traditional MVC app, React fulfils the role of the View. So you would still need to handle the Model and Controller on your own.
+>
+> I found the best way to utilise React was to pair it with Backbone, with React replacing the Backbone View, or to write your own Model/Data object and have React communicate with that.
+>
+> [Read the full post...](http://www.andrewgreig.com/637/)
+
+## React and Socket.IO Chat Application
+
+[Danial Khosravi](http://danialk.github.io/) made a real-time chat application that interacts with the back-end using Socket.IO.
+
+> A week ago I was playing with AngularJS and [this little chat application](https://github.com/btford/angular-socket-io-im) which uses socket.io and nodejs for realtime communication. Yesterday I saw a post about ReactJS in [EchoJS](http://www.echojs.com/) and started playing with this UI library. After playing a bit with React, I decided to write and chat application using React and I used Bran Ford's Backend for server side of this little app.
+> <figure>[![](/react/img/blog/chatapp.png)](http://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/)</figure>
+>
+> [Read the full post...](http://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/)
+
+## React and Other Frameworks
+
+[Pete Hunt](http://www.petehunt.net/blog/) wrote an answer on Quora comparing React and Angular directives. At the end, he explains how you can make an Angular directive that is in fact being rendered with React.
+
+> To set the record straight: React components are far more powerful than Angular templates; they should be compared with Angular's directives instead. So I took the first Google hit for "AngularJS directive tutorial" (AngularJS Directives Tutorial - Fundoo Solutions), rewrote it in React and compared them. [...]
+>
+> We've designed React from the beginning to work well with other libraries. Angular is no exception. Let's take the original Angular example and use React to implement the fundoo-rating directive.
+>
+> [Read the full post...](http://www.quora.com/Pete-Hunt/Posts/Facebooks-React-vs-AngularJS-A-Closer-Look)
+
+In the same vein, [Markov Twain](https://twitter.com/markov_twain/status/345702941845499906) re-implemented the examples on the front-page [with Ember](http://jsbin.com/azihiw/2/edit) and [Vlad Yazhbin](https://twitter.com/vla) re-implemented the tutorial [with Angular](http://jsfiddle.net/vla/Cdrse/).
+
+## Web Components: React & x-tags
+
+Mozilla and Google are actively working on Web Components. [Vjeux](http://blog.vjeux.com/) wrote a proof of concept that shows how to implement them using React.
+
+> Using [x-tags](http://www.x-tags.org/) from Mozilla, we can write custom tags within the DOM. This is a great opportunity to be able to write reusable components without being tied to a particular library. I wrote [x-react](https://github.com/vjeux/react-xtags/) to have them being rendered in React.
+> <figure>[![](/react/img/blog/xreact.png)](http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html)</figure>
+>
+> [Read the full post...](http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html)
+
+## React TodoMVC Example
+
+[TodoMVC.com](http://todomvc.com/) is a website that collects various implementations of the same basic Todo app. [Pete Hunt](http://www.petehunt.net/blog/) wrote an idiomatic React version.
+
+> Developers these days are spoiled with choice when it comes to selecting an MV* framework for structuring and organizing their JavaScript web apps.
+>
+> To help solve this problem, we created TodoMVC - a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today.
+> <figure>[![](/react/img/blog/todomvc.png)](http://todomvc.com/labs/architecture-examples/react/)</figure>
+>
+> [Read the source code...](https://github.com/tastejs/todomvc/tree/gh-pages/labs/architecture-examples/react)
+
+## JSX is not HTML
+
+Many of you pointed out differences between JSX and HTML. In order to clear up some confusion, we have added some documentation that covers the four main differences:
+
+  - [Whitespace removal](http://facebook.github.io/react/docs/jsx-is-not-html.html)
+  - [HTML Entities](http://facebook.github.io/react/docs/jsx-is-not-html.html)
+  - [Comments](http://facebook.github.io/react/docs/jsx-is-not-html.html)
+  - [Custom HTML Attributes](http://facebook.github.io/react/docs/jsx-is-not-html.html)

docs/_posts/2013-06-21-react-v0-3-3.md

@@ -0,0 +1,24 @@
+---
+title: "React v0.3.3"
+layout: post
+author: Paul O'Shannessy
+---
+
+We have a ton of great stuff coming in v0.4, but in the meantime we're releasing v0.3.3. This release addresses some small issues people were having and simplifies our tools to make them easier to use.
+
+
+## react-tools
+
+* Upgrade Commoner so `require` statements are no longer relativized when passing through the transformer. This was a feature needed when building React, but doesn't translate well for other consumers of `bin/jsx`.
+* Upgraded our dependencies on Commoner and Recast so they use a different directory for their cache.
+* Freeze our esprima dependency.
+
+
+## React
+
+* Allow reusing the same DOM node to render different components. e.g. `React.renderComponent(<div/>, domNode); React.renderComponent(<span/>, domNode);` will work now.
+
+
+## JSXTransformer
+
+* Improved the in-browser transformer so that transformed scripts will execute in the expected scope. The allows components to be defined and used from separate files.

docs/_posts/2013-06-27-community-roundup-3.md

@@ -0,0 +1,91 @@
+---
+title: "Community Round-up #3"
+layout: post
+author: Vjeux
+---
+
+The highlight of this week is that an interaction-heavy app has been ported to React. React components are solving issues they had with nested views.
+
+## Moving From Backbone To React
+
+[Clay Allsopp](http://twitter.com/clayallsopp) successfully ported [Propeller](http://usepropeller.com/blog/posts/from-backbone-to-react/), a fairly big, interaction-heavy JavaScript app, to React.
+
+> [<img style="float: right; margin: 0 0 10px 10px;" src="/react/img/blog/propeller-logo.png" />](http://usepropeller.com/blog/posts/from-backbone-to-react/)Subviews involve a lot of easy-to-forget boilerplate that Backbone (by design) doesn't automate. Libraries like Backbone.Marionette offer more abstractions to make view nesting easier, but they're all limited by the fact that Backbone delegates how and went view-document attachment occurs to the application code.
+>
+> React, on the other hand, manages the DOM and only exposes real nodes at select points in its API. The "elements" you code in React are actually objects which wrap DOM nodes, not the actual objects which get inserted into the DOM. Internally, React converts those abstractions into actual DOMElements and fills out the document accordingly. [...]
+>
+> We moved about 20 different Backbone view classes to React over the past few weeks, including the live-preview pane that you see in our little iOS demo. Most importantly, it's allowed us to put energy into making each component work great on its own, instead of spending extra cycles to ensure they function in unison. For that reason, we think React is a more scalable way to build view-intensive apps than Backbone alone, and it doesn't require you to drop-everything-and-refactor like a move to Ember or Angular would demand.
+>
+> [Read the full post...](http://usepropeller.com/blog/posts/from-backbone-to-react/)
+
+## Grunt Task for JSX
+
+[Eric Clemmons](http://ericclemmons.github.io/) wrote a task for [Grunt](http://gruntjs.com/) that applies the JSX transformation to your Javascript files. It also works with [Browserify](http://browserify.org/) if you want all your files to be concatenated and minified together.
+
+> Grunt task for compiling Facebook React's .jsx templates into .js
+>
+> ```javascript
+grunt.initConfig({
+  react: {
+    app: {
+      options: { extension: 'js' },
+      files: { 'path/to/output/dir': 'path/to/jsx/templates/dir' }
+```
+>
+> It also works great with `grunt-browserify`!
+>
+> ```javascript
+browserify: {
+  options: {
+    transform: [ require('grunt-react').browserify ]
+  },
+  app: {
+    src: 'path/to/source/main.js',
+    dest: 'path/to/target/output.js'
+```
+>
+> [Check out the project ...](https://github.com/ericclemmons/grunt-react)
+
+## Backbone/Handlebars Nested Views
+
+[Joel Burget](http://joelburget.com/) wrote a blog post talking about the way we would write React-like components in Backbone and Handlebars.
+
+> The problem here is that we're trying to maniplate a tree, but there's a textual layer we have to go through. Our views are represented as a tree - the subviews are children of CommentCollectionView - and they end up as part of a tree in the DOM. But there's a Handlebars layer in the middle (which deals in flat strings), so the hierarchy must be destructed and rebuilt when we render.
+>
+> What does it take to render a collection view? In the Backbone/Handlebars view of the world you have to render the template (with stubs), render each subview which replaces a stub, and keep a reference to each subview (or anything within the view that could change in the future).
+>
+> So while our view is conceptually hierarchical, due to the fact that it has to go through a flat textual representation, we need to do a lot of extra work to reassemble that structure after rendering.
+>
+> [Read the full post...](http://joelburget.com/react/)
+
+## JSRomandie Meetup
+
+[Renault John Lecoultre](https://twitter.com/renajohn/) from [BugBuster](http://www.bugbuster.com) did a React introduction talk at a JS meetup called [JS Romandie](https://twitter.com/jsromandie) last week.
+
+<script async class="speakerdeck-embed" data-id="888a9d50c01b01300df36658d0894ac1" data-ratio="1.33333333333333" src="//speakerdeck.com/assets/embed.js"></script>
+
+## CoffeeScript integration
+
+[Vjeux](http://blog.vjeux.com/) used the fact that JSX is just a syntactic sugar on-top of regular JS to rewrite the React front-page examples in CoffeeScript.
+
+> Multiple people asked what's the story about JSX and CoffeeScript. There is no JSX pre-processor for CoffeeScript and I'm not aware of anyone working on it. Fortunately, CoffeeScript is pretty expressive and we can play around the syntax to come up with something that is usable.
+>
+> ```javascript
+{div, h3, textarea} = React.DOM
+(div {className: 'MarkdownEditor'}, [
+  (h3 {}, 'Input'),
+  (textarea {onKeyUp: @handleKeyUp, ref: 'textarea'},
+    @state.value
+  )
+])
+```
+>
+> [Read the full post...](http://blog.vjeux.com/2013/javascript/react-coffeescript.html)
+
+## Tutorial in Plain Javascript
+
+We've seen a lot of people comparing React with various frameworks. [Ricardo Tomasi](http://ricardo.cc/) decided to re-implement the tutorial without any framework, just plain Javascript.
+
+> Facebook & Instagram launched the React framework and an accompanying tutorial. Developer Vlad Yazhbin decided to rewrite that using AngularJS. The end result is pretty neat, but if you're like me you will not actually appreciate the HTML speaking for itself and doing all the hard work. So let's see what that looks like in plain javascript.
+>
+> [Read the full post...](http://ricardo.cc/2013/06/07/react-tutorial-rewritten-in-plain-javascript.html)

docs/_posts/2013-07-02-react-v0-4-autobind-by-default.md

@@ -0,0 +1,52 @@
+---
+title: "New in React v0.4: Autobind by Default"
+layout: post
+author: Paul O'Shannessy
+---
+
+React v0.4 is very close to completion. As we finish it off, we'd like to share with you some of the major changes we've made since v0.3. This is the first of several posts we'll be making over the next week.
+
+
+## What is React.autoBind?
+
+If you take a look at most of our current examples, you'll see us using `React.autoBind` for event handlers. This is used in place of `Function.prototype.bind`. Remember that in JS, [function calls are late-bound](http://bonsaiden.github.io/JavaScript-Garden/#function.this). That means that if you simply pass a function around, the `this` used inside won't necessarily be the `this` you expect. `Function.prototype.bind` creates a new, properly bound, function so that when called, `this` is exactly what you expect it to be.
+
+Before we launched React, we would write this:
+
+```js{4}
+React.createClass({
+  onClick: function(event) {/* do something with this */},
+  render: function() {
+    return <button onClick={this.onClick.bind(this)} />;
+  }
+});
+```
+
+We wrote `React.autoBind` as a way to cache the function creation and save on memory usage. Since `render` can get called multiple times, if you used `this.onClick.bind(this)` you would actually create a new function on each pass. With React v0.3 you were able to write this instead:
+
+```js{2,4}
+React.createClass({
+  onClick: React.autoBind(function(event) {/* do something with this */}),
+  render: function() {
+    return <button onClick={this.onClick} />;
+  }
+});
+```
+
+
+## What's Changing in v0.4?
+
+After using `React.autoBind` for a few weeks, we realized that there were very few times that we didn't want that behavior. So we made it the default! Now all methods defined within `React.createClass` will already be bound to the correct instance.
+
+Starting with v0.4 you can just write this:
+
+```js{2,4}
+React.createClass({
+  onClick: function(event) {/* do something with this */},
+  render: function() {
+    return <button onClick={this.onClick} />;
+  }
+});
+```
+
+For v0.4 we will simply be making `React.autoBind` a no-op — it will just return the function you pass to it. Most likely you won't have to change your code to account for this change, though we encourage you to update. We'll publish a migration guide documenting this and other changes that come along with React v0.4.

docs/_posts/2013-07-03-community-roundup-4.md

@@ -0,0 +1,58 @@
+---
+title: "Community Round-up #4"
+layout: post
+author: Vjeux
+---
+
+React reconciliation process appears to be very well suited to implement a text editor with a live preview as people at Khan Academy show us.
+
+## Khan Academy
+
+[Ben Kamens](http://bjk5.com/) explains how [Ben Alpert](http://benalpert.com/) and [Joel Burget](http://joelburget.com/) are promoting React inside of [Khan Academy](https://www.khanacademy.org/). They now have three projects in the works using React.
+
+> Recently two Khan Academy devs dropped into our team chat and said they were gonna use React to write a new feature. They even hinted that we may want to adopt it product-wide.
+>
+> "The library is only a week old. It's a brand new way of thinking about things. We're the first to use it outside of Facebook. Heck, even the React devs were surprised to hear we're using this in production!!!"
+>
+> [Read the full post...](http://bjk5.com/post/53742233351/getting-your-team-to-adopt-new-technology)
+
+The best part is the demo of how React reconciliation process makes live editing more user-friendly.
+
+> Our renderer, post-React, is on the left. A typical math editor's preview is on the right.
+> <figure>[<img src="/react/img/blog/monkeys.gif" width="70%" />](http://bjk5.com/post/53742233351/getting-your-team-to-adopt-new-technology)</figure>
+
+## React Snippets
+
+Over the past several weeks, members of our team, [Pete Hunt](http://www.petehunt.net/) and [Paul O'Shannessy](http://zpao.com/), answered many questions that were asked in the [React group](https://groups.google.com/forum/#!forum/reactjs). They give a good overview of how to integrate React with other libraries and APIs through the use of [Mixins](/react/docs/reusable-components.html) and [Lifecycle Methods](/react/docs/working-with-the-browser.html).
+
+> [Listening Scroll Event](https://groups.google.com/forum/#!topic/reactjs/l6PnP8qbofk)
+>
+>  * [JSFiddle](http://jsfiddle.net/aabeL/1/): Basically I've given you two mixins. The first lets you react to global scroll events. The second is, IMO, much more useful: it gives you scroll start and scroll end events, which you can use with setState() to create components that react based on whether the user is scrolling or not.
+>
+> [Fade-in Transition](https://groups.google.com/forum/#!topic/reactjs/RVAY_eQmdpo)
+>
+>  * [JSFiddle](http://jsfiddle.net/ufe8k/1/): Creating a new `<FadeInWhenAdded>` component and using jQuery `.fadeIn()` function on the DOM node.
+>  * [JSFiddle](http://jsfiddle.net/R8f5L/5/): Using CSS transition instead.
+>
+> [Socket.IO Integration](https://groups.google.com/forum/#!topic/reactjs/pyUZBRWcHB4)
+>
+> * [Gist](https://gist.github.com/zpao/5686416): The big thing to notice is that my component is pretty dumb (it doesn't have to be but that's how I chose to model it). All it does is render itself based on the props that are passed in. renderOrUpdate is where the "magic" happens.
+> * [Gist](https://gist.github.com/petehunt/5687230): This example is doing everything -- including the IO -- inside of a single React component.
+> * [Gist](https://gist.github.com/petehunt/5687276): One pattern that we use at Instagram a lot is to employ separation of concerns and consolidate I/O and state into components higher in the hierarchy to keep the rest of the components mostly stateless and purely display.
+>
+> [Sortable jQuery Plugin Integration](https://groups.google.com/forum/#!topic/reactjs/mHfBGI3Qwz4)
+>
+> * [JSFiddle](http://jsfiddle.net/LQxy7/): Your React component simply render empty divs, and then in componentDidMount() you call React.renderComponent() on each of those divs to set up a new root React tree. Be sure to explicitly unmountAndReleaseReactRootNode() for each component in componentWillUnmount().
+
+## Introduction to React Screencast
+
+[Pete Hunt](http://www.petehunt.net/) recorded himself implementing a simple `<Blink>` tag in React.
+
+<figure><iframe src="http://player.vimeo.com/video/67248575" width="500" height="340" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></figure>
+
+## Snake in React
+
+[Tom Occhino](http://tomocchino.com/) implemented Snake in 150 lines with React.
+
+> [Check the source on Github](https://github.com/tomocchino/react-snake/blob/master/src/snake.js)
+> <figure>[![](/react/img/blog/snake.png)](http://tomocchino.github.io/react-snake/)</figure>

docs/_posts/2013-07-11-react-v0-4-prop-validation-and-default-values.md

@@ -0,0 +1,63 @@
+---
+title: "New in React v0.4: Prop Validation and Default Values"
+layout: post
+author: Paul O'Shannessy
+---
+
+Many of the questions we got following the public launch of React revolved around `props`, specifically that people wanted to do validation and to make sure their components had sensible defaults.
+
+
+## Validation
+
+Oftentimes you want to validate your `props` before you use them. Perhaps you want to ensure they are a specific type. Or maybe you want to restrict your prop to specific values. Or maybe you want to make a specific prop required. This was always possible — you could have written validations in your `render` or `componentWillReceiveProps` functions, but that gets clunky fast.
+
+React v0.4 will provide a nice easy way for you to use built-in validators, or to even write your own.
+
+```js
+React.createClass({
+  propTypes: {
+    // An optional string prop named "description".
+    description: React.PropTypes.string,
+
+    // A required enum prop named "category".
+    category: React.PropTypes.oneOf(['News','Photos']).isRequired,
+
+    // A prop named "dialog" that requires an instance of Dialog.
+    dialog: React.PropTypes.instanceOf(Dialog).isRequired
+  },
+  ...
+});
+```
+
+
+## Default Values
+
+One common pattern we've seen with our React code is to do something like this:
+
+```js
+React.createClass({
+  render: function() {
+    var value = this.props.value || 'default value';
+    return <div>{value}</div>;
+  }
+});
+```
+
+Do this for a few `props` across a few components and now you have a lot of redundant code. Starting with React v0.4, you can provide default values in a declarative way:
+
+```js
+React.createClass({
+  getDefaultProps: function() {
+    return {
+      value: 'default value'
+    };
+  }
+  ...
+});
+```
+
+We will use the cached result of this function before each `render`. We also perform all validations before each `render` to ensure that you have all of the data you need in the right form before you try to use it.
+
+- - -
+
+Both of these features are entirely optional. We've found them to be increasingly valuable at Facebook as our applications grow and evolve, and we hope others find them useful as well.