move docs around, add likebutton

_config.yml

@@ -1,17 +1,17 @@
 --- 
-markdown: redcarpet
+baseurl: /react
-name: React
+url: http://facebook.github.io
-description: A JavaScript library for building user interfaces
+permalink: /blog/:year/:month/:day/:title.html
-redcarpet:
-  extensions:
-  - fenced_code_blocks
-react_version: 0.3.2
-pygments: true
 exclude: 
 - Gemfile
 - Gemfile.lock
 - README.md
 - Rakefile
-url: http://facebook.github.io
+redcarpet: 
-baseurl: /react
+  extensions: 
-permalink: /blog/:year/:month/:day/:title.html
+  - fenced_code_blocks
+pygments: true
+name: React
+markdown: redcarpet
+react_version: 0.4.0a
+description: A JavaScript library for building user interfaces

_includes/nav_docs.html

@@ -1,31 +1,18 @@
-<div class="nav-docs">
-  <div class="nav-docs-section">
-    <h3>Getting started</h3>
-    <ul>
-      <li><a href="/react/docs/getting-started.html"{% if page.id == 'docs-getting-started' %} class="active"{% endif %}>Getting Started</a></li>
-      <li><a href="/react/docs/tutorial.html"{% if page.id == 'docs-tutorial' %} class="active"{% endif %}>Tutorial</a></li>
-      <li><a href="/react/docs/common-questions.html"{% if page.id == 'docs-common-questions' %} class="active"{% endif %}>Common Questions</a></li>
-    </ul>
-  </div>
 
+<div class="nav-docs">
   <div class="nav-docs-section">
-    <h3>Reference</h3>
+    <h3>React documentation</h3>
     <ul>
-      <li><a href="/react/docs/syntax.html"{% if page.id == 'docs-syntax' %} class="active"{% endif %}>JSX Syntax</a></li>
+        <li><a href="/react/docs/01-why-react.html"{% if page.id == '01-why-react' %} class="active"{% endif %}>Why React?</a></li>
-      <li><a href="/react/docs/component-basics.html"{% if page.id == 'docs-component-basics' %} class="active"{% endif %}>Component Basics</a></li>
+        <li><a href="/react/docs/02-displaying-data.html"{% if page.id == '02-displaying-data' %} class="active"{% endif %}>Displaying data</a></li>
-      <li><a href="/react/docs/component-data.html"{% if page.id == 'docs-component-data' %} class="active"{% endif %}>Component Data</a></li>
+        <li><a href="/react/docs/03-interactivity-and-dynamic-uis.html"{% if page.id == '03-interactivity-and-dynamic-uis' %} class="active"{% endif %}>Interactivity and dynamic UIs</a></li>
-      <li><a href="/react/docs/component-lifecycle.html"{% if page.id == 'docs-component-lifecycle' %} class="active"{% endif %}>Component Lifecycle</a></li>
+        <li><a href="/react/docs/04-multiple-components.html"{% if page.id == '04-multiple-components' %} class="active"{% endif %}>Multiple components</a></li>
-      <li><a href="/react/docs/event-handling.html"{% if page.id == 'docs-event-handling' %} class="active"{% endif %}>Event Handling</a></li>
+        <li><a href="/react/docs/05-reusable-components.html"{% if page.id == '05-reusable-components' %} class="active"{% endif %}>Reusable components</a></li>
-      <li><a href="/react/docs/advanced-components.html"{% if page.id == 'docs-advanced-components' %} class="active"{% endif %}>Advanced Components</a></li>
+        <li><a href="/react/docs/06-forms.html"{% if page.id == '06-forms' %} class="active"{% endif %}>Forms</a></li>
-      <li><a href="/react/docs/mixins.html"{% if page.id == 'docs-mixins' %} class="active"{% endif %}>Mixins</a></li>
+        <li><a href="/react/docs/07-working-with-the-browser.html"{% if page.id == '07-working-with-the-browser' %} class="active"{% endif %}>Working with the browser</a></li>
-      <li><a href="/react/docs/api.html"{% if page.id == 'docs-api' %} class="active"{% endif %}>API</a></li>
+        <li><a href="/react/docs/08-tooling-integration.html"{% if page.id == '08-tooling-integration' %} class="active"{% endif %}>Tooling integration</a></li>
-    </ul>
+        <li><a href="/react/docs/09-reference.html"{% if page.id == '09-reference' %} class="active"{% endif %}>Reference</a></li>
-  </div>
 
-  <div class="nav-docs-section">
-    <h3>Appendix</h3>
-    <ul>
-      <li><a href="/react/docs/jsx-is-not-html.html"{% if page.id == 'docs-jsx-is-not-html' %} class="active"{% endif %}>JSX is not HTML</a></li>
     </ul>
   </div>
 </div>

docs/01-motivation.md

@@ -0,0 +1,27 @@
+---
+id: 01-motivation
+title: Motivation / Why React?
+layout: docs
+next: 02-displaying-data.html
+---
+React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the **V** in **[MVC](http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)**.
+
+We built React to solve one problem: **building large applications with data that changes over time**. To do this, React has two main ideas.
+
+### Stay simple and declarative
+
+React apps are easy to write. Simply express how the UI should look at any given point in time, and React will manage all UI updates for you when your underlying data changes.
+
+It's just like writing a server-rendered web app: when the data changes, React conceptually hits the refresh button, except React is very fast and maintains the state of your UI. Because of this, React's API is very small and easy to understand.
+
+### Build composable components
+
+React is all about building reusable components. In fact, with React the *only* thing you do is build components. Since they're so encapsulated, components make code reuse, testing, and separation of concerns easy.
+
+### Give it five minutes
+
+React challenges a lot of conventional wisdom, and at first glance some of the ideas may seem crazy. We ask that you [give it five minutes](http://37signals.com/svn/posts/3124-give-it-five-minutes) while reading about React; engineers and designers have built thousands of components both inside and outside of Facebook and Instagram, and we hope you'll find it useful!
+
+### Learn more
+
+You can learn more about our motivations behind building React in [this blog post](http://facebook.github.io/react/blog/2013/06/05/why-react.html).

docs/refactor/01-why-react.md → docs/01-why-react.md

@@ -1,23 +1,27 @@
-# Why React?
+---
-
+id: 01-why-react
+title: Why React?
+layout: docs
+next: 02-displaying-data.html
+---
 React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the **V** in **[MVC](http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)**.
 
 We built React to solve one problem: **building large applications with data that changes over time**. To do this, React has two main ideas.
 
-## Stay simple and declarative
+### Stay simple and declarative
 
 React apps are easy to write. Simply express how the UI should look at any given point in time, and React will manage all UI updates for you when your underlying data changes.
 
 It's just like writing a server-rendered web app: when the data changes, React conceptually hits the refresh button, except React is very fast and maintains the state of your UI. Because of this, React's API is very small and easy to understand.
 
-## Build composable components
+### Build composable components
 
 React is all about building reusable components. In fact, with React the *only* thing you do is build components. Since they're so encapsulated, components make code reuse, testing, and separation of concerns easy.
 
-## Give it five minutes
+### Give it five minutes
 
 React challenges a lot of conventional wisdom, and at first glance some of the ideas may seem crazy. We ask that you [give it five minutes](http://37signals.com/svn/posts/3124-give-it-five-minutes) while reading about React; engineers and designers have built thousands of components both inside and outside of Facebook and Instagram, and we hope you'll find it useful!
 
-## Learn more
+### Learn more
 
 You can learn more about our motivations behind building React in [this blog post](http://facebook.github.io/react/blog/2013/06/05/why-react.html).

docs/refactor/02-displaying-data.md → docs/02-displaying-data.md

@@ -1,8 +1,13 @@
-# Displaying data
+---
-
+id: 02-displaying-data
+title: Displaying data
+layout: docs
+prev: 01-why-react.html
+next: 02.1-jsx-in-depth.html
+---
 The most basic thing you can do with a UI is display some data. React makes it easy to display data, and automatically keeps it up-to-date when the data changes.
 
-## Getting started
+### Getting started
 
 Let's look at a really simple example. Create a `hello-react.html` file with the following code:
 
@@ -49,7 +54,7 @@ setInterval(function() {
 }, 500);
 ```
 
-## Reactive updates
+### Reactive updates
 
 View the finished code in a web browser and type your name into the text field. Notice that React is only changing the time string in the UI -- any input you put in the text field remains, even though you haven't written any code to manage this behavior. React figures it out for you and does the right thing.
 
@@ -57,13 +62,13 @@ The way it is able to figure this out is that React does not directly manipulate
 
 The inputs to this component are called `props` -- short for "properties". They're passed as attributes in JSX syntax. You should think of these as immutable within the component, that is, **never write to this.props**.
 
-## Components are just like functions
+### Components are just like functions
 
 React components are very simple. You can think of them as simple function that take in `props` and `state` (discussed later) and render HTML. Because they're so simple, it makes them very easy to reason about.
 
 **One limitation**: React components can only render a single root node. If you want to return multiple nodes they *must* be wrapped in a single root. This is a limitation we can fix, but we have not identified a pressing reason to do so yet; reach out to our [Google Group](http://groups.google.com/group/reactjs) if you have a compelling case for it.
 
-## JSX syntax
+### JSX syntax
 
 We strongly believe that components are the right way to separate concerns rather than "templates" and "display logic." We think that markup and the code that generates it are intimately tied together. Additionally, display logic is often very complex and using template languages to express it becomes cumbersome.
 

docs/refactor/02.1-jsx-in-depth.md → docs/02.1-jsx-in-depth.md

@@ -1,9 +1,14 @@
-# JSX in Depth
+---
-
+id: 02.1-jsx-in-depth
+title: JSX in Depth
+layout: docs
+prev: 02-displaying-data.html
+next: 02.2-jsx-gotchas.html
+---
 JSX is a JavaScript XML syntax transform recommended (but not required) for use
 with React.
 
-## Why JSX?
+### Why JSX?
 
 First of all, **don't use JSX if you don't like it!**
 
@@ -20,7 +25,7 @@ We recommend using JSX for many reasons:
 - Designers are more comfortable making changes.
 - It's familiar for those who have used MXML or XAML.
 
-## The Transform
+### The Transform
 
 JSX transforms XML-like syntax into native JavaScript. It turns XML elements and
 attributes into function calls and objects, respectively.
@@ -56,7 +61,7 @@ how to setup compilation.
 > Details about the code transform are given here to increase understanding, but
 > your code should not rely on these implementation details.
 
-## React and JSX
+### React and JSX
 
 React and JSX are independent technologies, but JSX was primarily built with
 React in mind. The two valid uses of JSX are:
@@ -92,7 +97,7 @@ See [Component Basics](component-basics.html) to learn more about components.
 > as XML attribute names. Instead, React DOM components expect attributes like
 > `className` and `htmlFor`, respectively.
 
-## DOM Convenience
+### DOM Convenience
 
 Having to define variables for every type of DOM element can get tedious
 (e.g. `var div, span, h1, h2, ...`). JSX provides a convenience to address this
@@ -116,9 +121,9 @@ var tree = Nav(null, React.DOM.span(null, null));
 > DOM. The docblock parameter is only a convenience to resolve the most commonly
 > used elements. In general, JSX has no notion of the DOM.
 
-## JavaScript Expressions
+### JavaScript Expressions
 
-#### Attribute Expressions
+##### Attribute Expressions
 
 To use a JavaScript expression as an attribute value, wrap the expression in a
 pair of curly braces (`{}`) instead of quotes (`""`).
@@ -130,7 +135,7 @@ var person = <Person name={window.isLoggedIn ? window.name : ''} />;
 var person = Person({name: window.isLoggedIn ? window.name : ''});
 ```
 
-#### Child Expressions
+##### Child Expressions
 
 Likewise, JavaScript expressions may be used to express children:
 
@@ -141,14 +146,14 @@ var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
 var content = Container(null, window.isLoggedIn ? Nav(null, null) : Login(null, null));
 ```
 
-#### Comments
+##### Comments
 
 It's easy to add comments within your JSX; they're just JS expressions:
 ```javascript
 var content = <Container>{/* this is a comment */}<Nav /></Container>;
 ```
 
-## Tooling
+### Tooling
 
 Beyond the compilation step, JSX does not require any special tools.
 
@@ -157,7 +162,7 @@ Beyond the compilation step, JSX does not require any special tools.
 - Elements use standard scoping so linters can find usage of out-of-scope
   components.
 
-## Prior Work
+### Prior Work
 
 JSX is similar to several other JavaScript embedded XML language
 proposals/projects. Some of the features of JSX that distinguish it from similar

docs/refactor/02.2-jsx-gotchas.md → docs/02.2-jsx-gotchas.md

@@ -1,8 +1,13 @@
-# JSX gotchas
+---
-
+id: 02.2-jsx-gotchas
+title: JSX gotchas
+layout: docs
+prev: 02.1-jsx-in-depth.html
+next: 03-interactivity-and-dynamic-uis.html
+---
 JSX looks like HTML but there are some important differences you may run into.
 
-## Whitespace removal
+### Whitespace removal
 
 JSX doesn't follow the same whitespace elimination rules as HTML. JSX removes all whitespace between two curly braces expressions. If you want to have whitespace, simply add `{' '}`.
 
@@ -12,7 +17,7 @@ JSX doesn't follow the same whitespace elimination rules as HTML. JSX removes al
 
 Follow [Issue #65](https://github.com/facebook/react/issues/65) for discussion on this behavior.
 
-## HTML Entities
+### HTML Entities
 
 You can insert HTML entities within literal text in JSX:
 
@@ -52,7 +57,7 @@ As a last resort, you always have the ability to insert raw HTML.
 <div dangerouslySetInnerHTML={{'{{'}}__html: 'First &middot; Second'}} />
 ```
 
-## Custom HTML Attributes
+### Custom HTML Attributes
 
 If you pass properties to native HTML elements that do not exist in the HTML specification, React will not render them. If you want to use a custom attribute, you should prefix it with `data-`.
 

docs/refactor/03-interactivity-and-dynamic-uis.md → docs/03-interactivity-and-dynamic-uis.md

@@ -1,8 +1,13 @@
-# Interactivity and dynamic UIs
+---
-
+id: 03-interactivity-and-dynamic-uis
+title: Interactivity and dynamic UIs
+layout: docs
+prev: 02.2-jsx-gotchas.html
+next: 04-multiple-components.html
+---
 You've already [learned how to display data](./02-displaying-data.html) with React. Now let's look at how to make our UIs interactive.
 
-## A simple example
+### A simple example
 
 ```javascript
 /** @jsx React.DOM */
@@ -30,13 +35,13 @@ React.renderComponent(
 );
 ```
 
-## Event handling and synthetic events
+### Event handling and synthetic events
 
 With React you simply pass your event handler as a camelCased prop similar to how you'd do it in normal HTML. React ensures that all events behave identically in IE8 and above by implementing a synthetic event system. That is, React knows how to bubble and capture events according to the spec, and the events passed to your event handler are guaranteed to be consistent with [the W3C spec](http://www.w3.org/TR/DOM-Level-3-Events/), regardless of which browser you're using.
 
 **If you'd like to use React on a touch device** (i.e. a phone or tablet), simply call `React.initializeTouchEvents(true);` to turn them on.
 
-## Under the hood: autoBind and event delegation
+### Under the hood: autoBind and event delegation
 
 Under the hood React does a few things to keep your code performant and easy to understand.
 
@@ -44,17 +49,17 @@ Under the hood React does a few things to keep your code performant and easy to
 
 **Event delegation.** React doesn't actually attach event handlers to the nodes themselves. When React starts up, it starts listening for all events at the top level using a single event listener. When a component is mounted or unmounted, the event handlers are simply added or removed from a fast internal event mapping. When the event occurs, React knows how to dispatch it using this mapping. When there are no event handlers left in the mapping, React's event handlers are simple no-ops. To learn more about why this is fast, see [David Walsh's excellent blog post](http://davidwalsh.name/event-delegate).
 
-## Components are just state machines
+### Components are just state machines
 
 React thinks of UIs as simple state machines. By thinking of a UI as being in various states and rendering those states, it's easy to keep your UI consistent.
 
 In React, you simply update a component's state, and then render a new UI based on this new state. React takes care of updating the DOM for you in the most efficient way.
 
-## How state works
+### How state works
 
 A common way to inform React of a data change is by calling `setState(data, callback)`. This method merges `data` into `this.state` and re-renders the component. When the component finishes re-rendering, the optional `callback` is called. Most of the time you'll never need to provide a `callback` since React will take care of keeping your UI up-to-date for you.
 
-## What components should have state?
+### What components should have state?
 
 Most of your components should simply take some data from `props` and render it. However, sometimes you need to respond to user input, a server request or the passage of time. For this you use state.
 
@@ -62,11 +67,11 @@ Most of your components should simply take some data from `props` and render it.
 
 A common pattern is to create several stateless components that just render data, and have a stateful component above them in the hierarchy that passes its state to its children via `props`. The stateful component encapsulates all of the interaction logic, while the stateless components take care of rendering data in a declarative way.
 
-## What should go in state?
+### What should go in state?
 
 **State should contain data that the component's event handlers may change to trigger a UI update.** In real apps this data tends to be very small and JSON-serializable. When building a stateful component, think about the minimal possible representation of its state, and only store those properties in `this.state`. Inside of `render()` simply compute any other information you need based on this state. You'll find that thinking about and writing applications in this way tends to lead to the most correct application, since adding redundant or computed values to state means that you need to explicitly keep them in sync rather than rely on React computing them for you.
 
-## What *shouldn't* go in state?
+### What *shouldn't* go in state?
 
 `this.state` should only contain the minimal amount of data needed to represent your UI's state. As such, it should not contain:
 * **Computed data.** Don't worry about precomputing values based on state -- it's easier to ensure that your UI is consistent if you do all computation within `render()`. For example, if you have an array of list items in state and you want to render the count as a string, simply render `this.state.listItems.length + ' list items'` in your `render()` method rather than storing it on state.

docs/refactor/04-multiple-components.md → docs/04-multiple-components.md

@@ -1,12 +1,17 @@
-# Multiple components
+---
-
+id: 04-multiple-components
+title: Multiple components
+layout: docs
+prev: 03-interactivity-and-dynamic-uis.html
+next: 05-reusable-components.html
+---
 So far, we've looked at how to write a single component to display data and handle user input. Next let's examine one of React's finest features: composability.
 
-## Motivation: separation of concerns
+### Motivation: separation of concerns
 
 By building modular components that reuse other components with well-defined interfaces, you get much of the same benefits that you get by using functions or classes. Specifically you can *separate the different concerns* of your app however you please simply by building new components. By building a custom component library for your application, you are expressing your UI in a way that best fits your domain.
 
-## Composition example
+### Composition example
 
 Let's create a simple Avatar component which shows a profile picture and username using the Facebook Graph API.
 
@@ -48,13 +53,13 @@ React.renderComponent(
 );
 ```
 
-## Ownership
+### Ownership
 
 In the above example, instances of `Avatar` *own* instances of `ProfilePic` and `ProfileLink`. In React, **an owner is the component that sets the `props` of other components**. More formally, if a component `X` is created in component `Y`'s `render()` method, it is said that `X` is *owned by* `Y`. As discussed earlier, a component cannot mutate its `props` -- they are always consistent with what its owner sets them to. This key property leads to UIs that are guaranteed to be consistent.
 
 It's important to draw a distinciton between the owner-ownee relationship and the parent-child relationship. The owner-ownee relationship is specific to React, while the parent-child relationship is simply the one you know and love from the DOM. In the example above, `Avatar` owns the `div`, `ProfilePic` and `ProfileLink` instances, and `div` is the **parent** (but not owner) of the `ProfilePic` and `ProfileLink` instances.
 
-## Children
+### Children
 
 When you create a React component instance, you can include additional React components or JavaScript expressions between the opening and closing tags like this:
 
@@ -64,7 +69,7 @@ When you create a React component instance, you can include additional React com
 
 `Parent` can read its children by accessing the special `this.props.children` prop.
 
-### Child Reconciliation
+#### Child Reconciliation
 
 > Reconciliation is the process by which React updates the DOM with each new render pass.
 
@@ -79,7 +84,7 @@ In general, children are reconciled according to the order in which they are ren
 
 Intuitively, `<p>Paragraph 1</p>` was removed. Instead, React will reconcile the DOM by changing the text content of the first child and destroying the last child. React reconciles according to the *order* of the children.
 
-### Stateful Children
+#### Stateful Children
 
 For most components, this is not a big deal. However, for stateful components that maintain data in `this.state` across render passes, this can be very problematic.
 
@@ -92,7 +97,7 @@ In most cases, this can be sidestepped by hiding elements instead of destroying
 <Card><p style={{display: 'none'}}>Paragraph 1</p><p>Paragraph 2</p></Card>
 ```
 
-### Dynamic Children
+#### Dynamic Children
 
 The situation gets more complicated when the children are shuffled around (as in search results) or if new components are added onto the front of the list (as in streams). In these cases where the identity and state of each child must be maintained across render passes, you can uniquely identify each child by assigning it a `key`:
 
@@ -111,11 +116,11 @@ The situation gets more complicated when the children are shuffled around (as in
 
 When React reconciles the keyed children, it will ensure that any child with `key` will be reordered (instead of clobbered) or destroyed (instead of reused).
 
-## Data flow
+### Data flow
 
 In React, data flows from owner to owned component through `props` as discussed above. This is effectively one-way data binding: owners bind their owned component's props to some value the owner has computed based on its `props` or `state`. Since this process happens recursively, data changes are automatically reflected everywhere they are used.
 
-## A note on performance
+### A note on performance
 
 You may be thinking that it's expensive to react to changing data if there are a large number of nodes under an owner. The good news is that JavaScript is fast and `render()` methods tend to be quite simple, so in most applications this is extremely fast. Additionally, the bottleneck is almost always the DOM mutation and not JS execution, and React will optimize this for you using batching and change detection.
 

docs/04-scaling-up.md

@@ -0,0 +1,129 @@
+---
+id: 04-scaling-up
+title: Scaling Up and Using Multiple Components
+layout: docs
+prev: 03-interactivity-and-dynamic-uis.html
+next: 05-building-reusable-components.html
+---
+So far, we've looked at how to write a single component to display data and handle user input. Next let's examine one of React's finest features: composability.
+
+### Motivation: separation of concerns
+
+By building modular components that reuse other components with well-defined interfaces, you get much of the same benefits that you get by using functions or classes. Specifically you can *separate the different concerns* of your app however you please simply by building new components. By building a custom component library for your application, you are expressing your UI in a way that best fits your domain.
+
+### Composition example
+
+Let's create a simple Avatar component which shows a profile picture and username using the Facebook Graph API.
+
+```javascript
+/** @jsx React.DOM */
+
+var Avatar = React.createClass({
+  render: function() {
+    return (
+      <div>
+        <ProfilePic username={this.props.username} />
+        <ProfileLink username={this.props.username} />
+      </div>
+    );
+  }
+});
+
+var ProfilePic = React.createClass({
+  render: function() {
+    return (
+      <img src={'http://graph.facebook.com/' + this.props.username + '/picture'} />
+    );
+  }
+});
+
+var ProfileLink = React.createClass({
+  render: function() {
+    return (
+      <a href={'http://www.facebook.com/' + this.props.username}>
+        {this.props.username}
+      </a>
+    );
+  }
+});
+
+React.renderComponent(
+  <Avatar username="pwh" />,
+  document.getElementById('example')
+);
+```
+
+### Ownership
+
+In the above example, instances of `Avatar` *own* instances of `ProfilePic` and `ProfileLink`. In React, **an owner is the component that sets the `props` of other components**. More formally, if a component `X` is created in component `Y`'s `render()` method, it is said that `X` is *owned by* `Y`. As discussed earlier, a component cannot mutate its `props` -- they are always consistent with what its owner sets them to. This key property leads to UIs that are guaranteed to be consistent.
+
+It's important to draw a distinciton between the owner-ownee relationship and the parent-child relationship. The owner-ownee relationship is specific to React, while the parent-child relationship is simply the one you know and love from the DOM. In the example above, `Avatar` owns the `div`, `ProfilePic` and `ProfileLink` instances, and `div` is the **parent** (but not owner) of the `ProfilePic` and `ProfileLink` instances.
+
+### Children
+
+When you create a React component instance, you can include additional React components or JavaScript expressions between the opening and closing tags like this:
+
+```javascript
+<Parent><Child /></Parent>
+```
+
+`Parent` can read its children by accessing the special `this.props.children` prop.
+
+#### Child Reconciliation
+
+> Reconciliation is the process by which React updates the DOM with each new render pass.
+
+In general, children are reconciled according to the order in which they are rendered. For example, suppose two render passes generate the following respective markup:
+
+```html
+// Render Pass 1
+<Card><p>Paragraph 1</p><p>Paragraph 2</p></Card>
+// Render Pass 2
+<Card><p>Paragraph 2</p></Card>
+```
+
+Intuitively, `<p>Paragraph 1</p>` was removed. Instead, React will reconcile the DOM by changing the text content of the first child and destroying the last child. React reconciles according to the *order* of the children.
+
+#### Stateful Children
+
+For most components, this is not a big deal. However, for stateful components that maintain data in `this.state` across render passes, this can be very problematic.
+
+In most cases, this can be sidestepped by hiding elements instead of destroying them:
+
+```html
+// Render Pass 1
+<Card><p>Paragraph 1</p><p>Paragraph 2</p></Card>
+// Render Pass 2
+<Card><p style={{display: 'none'}}>Paragraph 1</p><p>Paragraph 2</p></Card>
+```
+
+#### Dynamic Children
+
+The situation gets more complicated when the children are shuffled around (as in search results) or if new components are added onto the front of the list (as in streams). In these cases where the identity and state of each child must be maintained across render passes, you can uniquely identify each child by assigning it a `key`:
+
+```javascript
+  render: function() {
+    var results = this.props.results;
+    return (
+      <ol>
+        {this.results.map(function(result) {
+          return <li key={result.id}>{result.text}</li>;
+        })}
+      </ol>
+    );
+  }
+```
+
+When React reconciles the keyed children, it will ensure that any child with `key` will be reordered (instead of clobbered) or destroyed (instead of reused).
+
+### Data flow
+
+In React, data flows from owner to owned component through `props` as discussed above. This is effectively one-way data binding: owners bind their owned component's props to some value the owner has computed based on its `props` or `state`. Since this process happens recursively, data changes are automatically reflected everywhere they are used.
+
+### A note on performance
+
+You may be thinking that it's expensive to react to changing data if there are a large number of nodes under an owner. The good news is that JavaScript is fast and `render()` methods tend to be quite simple, so in most applications this is extremely fast. Additionally, the bottleneck is almost always the DOM mutation and not JS execution, and React will optimize this for you using batching and change detection.
+
+However, sometimes you really want to have fine-grained control over your performance. In that case, simply override `shouldComponentUpdate()` to return false when you want React to skip processing of a subtree. See [the React API docs](./api.html) for more information.
+
+**Note:** if `shouldComponentUpdate()` returns false when data has actually changed, React can't keep your UI in sync. Be sure you know what you're doing while using it, and only use this function when you have a noticeable performance problem. Don't underestimate how fast JavaScript is relative to the DOM.

docs/05-building-effective-reusable-components.md

@@ -0,0 +1,90 @@
+---
+id: 05-building-effective-reusable-components
+title: Build reusable component libraries!
+layout: docs
+prev: 04-scaling-up.html
+next: 06-forms.html
+---
+When designing interfaces, break down the common design elements (buttons, form fields, layout components, etc) into reusable components with well-defined interfaces. That way, the next time you need to build some UI you can write much less code, which means faster development time, less bugs, and less bytes down the wire.
+
+### Prop validation
+
+As your app grows it's helpful to ensure that your components are used correctly. We do this using `propTypes`.
+
+** TODO zpao **
+
+### Transferring props: a shortcut
+
+A common type of React component is one that extends a basic HTML in a simple way. Often you'll want to copy any HTML attributes passed to your component to the underlying HTML element to save typing. React provides `transferPropsTo()` to do just this.
+
+```javascript
+/** @jsx React.DOM */
+
+var CheckLink = React.createClass({
+  render: function() {
+    // transferPropsTo() will take any props pased to CheckLink
+    // and copy them to <a>
+    return this.transferPropsTo(<a>{'√ '}{this.props.children}</a>);
+  }
+});
+
+React.renderComponent(
+  <CheckLink href="javascript:alert('Hello, world!');">
+    Click here!
+  </CheckLink>,
+  document.getElementById('example')
+);
+```
+
+### Mixins
+
+Components are the best way to reuse code in React, but sometimes very different components may share some common functionality. These are sometimes called [cross-cutting concerns](http://en.wikipedia.org/wiki/Cross-cutting_concern). React provides `mixins` to solve this problem.
+
+One common use case is a component wanting to update itself on a time interval. It's easy to use `setInterval()`, but it's important to cancel your interval when you don't need it anymore to save memory. React provides [lifecycle methods](./06-working-with-the-browser.html) that let you know when a component is about to be created or destroyed. Let's create a simple mixin that uses these methods to provide an easy `setInterval()` function that will automatically get cleaned up when your component is destroyed.
+
+```javascript
+/** @jsx React.DOM */
+
+var SetIntervalMixin = {
+  componentWillMount: function() {
+    this.intervals = [];
+  },
+  setInterval: function() {
+    this.intervals.push(setInterval.apply(null, arguments));
+  },
+  componentWillUnmount: function() {
+    this.intervals.map(clearInterval);
+  }
+};
+
+var TickTock = React.createClass({
+  mixins: [SetIntervalMixin], // Use the mixin
+  getInitialState: function() {
+    return {seconds: 0};
+  },
+  componentDidMount: function() {
+    this.setInterval(this.tick, 1000); // Call a method on the mixin
+  },
+  tick: function() {
+    this.setState({seconds: this.state.seconds + 1});
+  },
+  render: function() {
+    return (
+      <p>
+        React has been running for {this.state.seconds} seconds.
+      </p>
+    );
+  }
+});
+
+React.renderComponent(
+  <TickTock />,
+  document.getElementById('example')
+);
+```
+
+A nice feature of mixins is that if a component is using multiple mixins and several mixins define the same lifecycle method (i.e. several mixins want to do some cleanup when the component is destroyed), all of the lifecycle methods are guaranteed to be called.
+
+### Testing
+
+**TODO: benjamn**

docs/05-building-reusable-components.md

@@ -0,0 +1,90 @@
+---
+id: 05-building-reusable-components
+title: Building reusable components
+layout: docs
+prev: 04-scaling-up.html
+next: 06-forms.html
+---
+When designing interfaces, break down the common design elements (buttons, form fields, layout components, etc) into reusable components with well-defined interfaces. That way, the next time you need to build some UI you can write much less code, which means faster development time, less bugs, and less bytes down the wire.
+
+### Prop validation
+
+As your app grows it's helpful to ensure that your components are used correctly. We do this using `propTypes`.
+
+** TODO zpao **
+
+### Transferring props: a shortcut
+
+A common type of React component is one that extends a basic HTML in a simple way. Often you'll want to copy any HTML attributes passed to your component to the underlying HTML element to save typing. React provides `transferPropsTo()` to do just this.
+
+```javascript
+/** @jsx React.DOM */
+
+var CheckLink = React.createClass({
+  render: function() {
+    // transferPropsTo() will take any props pased to CheckLink
+    // and copy them to <a>
+    return this.transferPropsTo(<a>{'√ '}{this.props.children}</a>);
+  }
+});
+
+React.renderComponent(
+  <CheckLink href="javascript:alert('Hello, world!');">
+    Click here!
+  </CheckLink>,
+  document.getElementById('example')
+);
+```
+
+### Mixins
+
+Components are the best way to reuse code in React, but sometimes very different components may share some common functionality. These are sometimes called [cross-cutting concerns](http://en.wikipedia.org/wiki/Cross-cutting_concern). React provides `mixins` to solve this problem.
+
+One common use case is a component wanting to update itself on a time interval. It's easy to use `setInterval()`, but it's important to cancel your interval when you don't need it anymore to save memory. React provides [lifecycle methods](./06-working-with-the-browser.html) that let you know when a component is about to be created or destroyed. Let's create a simple mixin that uses these methods to provide an easy `setInterval()` function that will automatically get cleaned up when your component is destroyed.
+
+```javascript
+/** @jsx React.DOM */
+
+var SetIntervalMixin = {
+  componentWillMount: function() {
+    this.intervals = [];
+  },
+  setInterval: function() {
+    this.intervals.push(setInterval.apply(null, arguments));
+  },
+  componentWillUnmount: function() {
+    this.intervals.map(clearInterval);
+  }
+};
+
+var TickTock = React.createClass({
+  mixins: [SetIntervalMixin], // Use the mixin
+  getInitialState: function() {
+    return {seconds: 0};
+  },
+  componentDidMount: function() {
+    this.setInterval(this.tick, 1000); // Call a method on the mixin
+  },
+  tick: function() {
+    this.setState({seconds: this.state.seconds + 1});
+  },
+  render: function() {
+    return (
+      <p>
+        React has been running for {this.state.seconds} seconds.
+      </p>
+    );
+  }
+});
+
+React.renderComponent(
+  <TickTock />,
+  document.getElementById('example')
+);
+```
+
+A nice feature of mixins is that if a component is using multiple mixins and several mixins define the same lifecycle method (i.e. several mixins want to do some cleanup when the component is destroyed), all of the lifecycle methods are guaranteed to be called.
+
+### Testing
+
+**TODO: benjamn**

docs/refactor/05-reusable-components.md → docs/05-reusable-components.md

@@ -1,14 +1,19 @@
-## Reusable components
+---
-
+id: 05-reusable-components
+title: Reusable components
+layout: docs
+prev: 04-multiple-components.html
+next: 06-forms.html
+---
 When designing interfaces, break down the common design elements (buttons, form fields, layout components, etc) into reusable components with well-defined interfaces. That way, the next time you need to build some UI you can write much less code, which means faster development time, less bugs, and less bytes down the wire.
 
-## Prop validation
+### Prop validation
 
 As your app grows it's helpful to ensure that your components are used correctly. We do this using `propTypes`.
 
 ** TODO zpao **
 
-## Transferring props: a shortcut
+### Transferring props: a shortcut
 
 A common type of React component is one that extends a basic HTML in a simple way. Often you'll want to copy any HTML attributes passed to your component to the underlying HTML element to save typing. React provides `transferPropsTo()` to do just this.
 
@@ -31,7 +36,7 @@ React.renderComponent(
 );
 ```
 
-## Mixins
+### Mixins
 
 Components are the best way to reuse code in React, but sometimes very different components may share some common functionality. These are sometimes called [cross-cutting concerns](http://en.wikipedia.org/wiki/Cross-cutting_concern). React provides `mixins` to solve this problem.
 
@@ -80,7 +85,6 @@ React.renderComponent(
 
 A nice feature of mixins is that if a component is using multiple mixins and several mixins define the same lifecycle method (i.e. several mixins want to do some cleanup when the component is destroyed), all of the lifecycle methods are guaranteed to be called.
 
-## Testing
+### Testing
 
 **TODO: benjamn**
-

docs/refactor/06-forms.md → docs/06-forms.md

@@ -1,8 +1,13 @@
-# Forms
+---
-
+id: 06-forms
+title: Forms
+layout: docs
+prev: 05-reusable-components.html
+next: 07-working-with-the-browser.html
+---
 Form components such as `<input>`, `<textarea>`, and `<option>` differ from other native components because they can be mutated via user interactions. These components provide interfaces that make it easier to manage forms in response to user interactions.
 
-## Interactive Props
+### Interactive Props
 
 Form components support a few props that are affected via user interactions:
 
@@ -20,7 +25,7 @@ Form components allow listening for changes by setting a callback to the `onChan
 
 Like all DOM events, the `onChange` prop is supported on all native components and can be used to listen to bubbled change events.
 
-## Controlled Components
+### Controlled Components
 
 An `<input>` with `value` set is a *controlled* component. In a controlled `<input>`, the value of the rendered element will always reflect the `value` prop. For example:
 
@@ -55,7 +60,7 @@ In this example, we are simply accepting the newest value provided by the user a
 
 This would accept user input but truncate the value to the first 140 characters.
 
-## Uncontrolled Components
+### Uncontrolled Components
 
 An `<input>` that does not supply a `value` (or sets it to `null`) is an *uncontrolled* component. In an uncontrolled `<input>`, the value of the rendered element will reflect the user's input. For example:
 
@@ -79,9 +84,9 @@ This example will function much like the **Controlled Components** example above
 
 Likewise, `<input>` supports `defaultChecked` and `<option>` supports `defaultSelected`.
 
-## Advanced Topics
+### Advanced Topics
 
-### Why controlled components?
+#### Why controlled components?
 
 Using form components such as `<input>` in React presents a challenge that is absent when writing traditional form HTML. For example, in HTML:
 
@@ -101,7 +106,7 @@ Unlike HTML, React components must represent the state of the view at any point
 
 Since this method describes the view at any point in time, the value of the text input should *always* be `Untitled`.
 
-### Why textarea value?
+#### Why textarea value?
 
 In HTML, the value of `<textarea>` is usually set using its children:
 

docs/refactor/07-working-with-the-browser.md → docs/07-working-with-the-browser.md

@@ -1,8 +1,13 @@
-# Working with the browser
+---
-
+id: 07-working-with-the-browser
+title: Working with the browser
+layout: docs
+prev: 06-forms.html
+next: 07.1-more-about-refs.html
+---
 React provides powerful abstractions that free you from touching the DOM directly in most cases, but sometimes you simply need to access the underlying API, perhaps to work with a third-party library or existing code.
 
-## The mock DOM
+### The mock DOM
 
 React is so fast because it never talks to the DOM directly. React maintains a fast in-memory representation of the DOM. `render()` methods return a *description* of the DOM, and React can diff this description with the in-memory representation to compute the fastest way to update the browser.
 
@@ -10,7 +15,7 @@ Additionally, React implements a full synthetic event system such that all event
 
 Most of the time you should stay within React's "faked browser" world since it's more performant and easier to reason about. However, sometimes you simply need to access the underlying API, perhaps to work with a third-party library like a jQuery plugin. React provides escape hatches for you to use the underlying DOM API directly.
 
-## Refs and getDOMNode()
+### Refs and getDOMNode()
 
 To interact with the browser, you'll need a reference to a DOM node. Every mounted React component has a `getDOMNode()` function which you can call to get a reference to it.
 
@@ -48,11 +53,11 @@ React.renderComponent(
 );
 ```
 
-## More about refs
+### More about refs
 
 To learn more about refs, including ways to use them effectively, see our [more about refs](./07.1-more-about-refs.html) documentation.
 
-## Component lifecycle
+### Component lifecycle
 
 Components have three main parts of their lifecycle:
 - **Mounting:** A component is being inserted into the DOM.
@@ -61,24 +66,24 @@ Components have three main parts of their lifecycle:
 
 React provides lifecycle methods that you can override to hook into this process. We provide **will** methods, which are called right before something happens, and **did** methods which are called right after something happens.
 
-### Mounting
+#### Mounting
 
  - `getInitialState(): object` is invoked before a component is mounted. Stateful components should implement this and return the initial state data.
  - `componentWillMount()` is invoked immediately before mounting occurs.
  - `componentDidMount(DOMElement rootNode)` is invoked immediately after mounting occurs. Initialization that requires DOM nodes should go here.
 
-### Updating
+#### Updating
 
  - `componentWillReceiveProps(object nextProps)` is invoked when a mounted component receives new props. This method should be used to compare `this.props` and `nextProps` to perform state transitions using `this.setState()`.
  - `shouldComponentUpdate(object nextProps, object nextState): boolean` is invoked when a component decides whether any changes warrant an update to the DOM. Implement this as an optimization to compare `this.props` with `nextProps` and `this.state` with `nextState` and return false if React should skip updating.
  - `componentWillUpdate(object nextProps, object nextState)` is invoked immediately before updating occurs. You cannot call `this.setState()` here.
  - `componentDidUpdate(object prevProps, object prevState, DOMElement rootNode)` is invoked immediately after updating occurs.
 
-### Unmounting
+#### Unmounting
 
  - `componentWillUnmount()` is invoked immediately before a component is unmounted and destroyed. Cleanup should go here.
 
-### Mounted Methods
+#### Mounted Methods
 
 _Mounted_ composite components also support the following methods:
 
@@ -91,14 +96,14 @@ _Mounted_ composite components also support the following methods:
 > `componentDidUpdate()` is a convenience. The same node can be obtained by
 > calling `this.getDOMNode()`.
 
-## Browser suppport and polyfills
+### Browser suppport and polyfills
 
 At Facebook, we support older browsers, including IE8. We've had polyfills in place for a long time to allow us to write forward-thinking JS. This means we don't have a bunch of hacks scattered throughout our codebase and we can still expect our code to "just work". For example, instead of seeing `+new Date()`, we can just write `Date.now()`. Since the open source React is the same as what we use internally, we've carried over this philosophy of using forward thinking JS.
 
 In addition to that philosphy, we've also taken the stance that we, as authors of a JS library, should not be shipping polyfills as a part of our library. If every library did this, there's a good chance you'd be sending down the same polyfill multiple times, which could be a sizable chunk of dead code. If your product needs to support older browsers, chances are you're already using something like [es5-shim](https://github.com/kriskowal/es5-shim).
 
 
-### Polyfills needed to support older browsers
+#### Polyfills needed to support older browsers
 
 * `Array.isArray`
 * `Array.prototype.forEach`

docs/refactor/07.1-more-about-refs.md → docs/07.1-more-about-refs.md

@@ -1,5 +1,10 @@
-# More about refs
+---
-
+id: 07.1-more-about-refs
+title: More about refs
+layout: docs
+prev: 07-working-with-the-browser.html
+next: 08-tooling-integration.html
+---
 After returning the structure of your UI from the render method, you may find yourself wanting to "reach out" and invoke methods on component instances returned from render. Often, doing something like this isn't necessary for making data flow through your application, because the Reactive data flow always ensures that the most recent `props` are sent to each child that is output from `render()`. However there are a few cases, where it still might be necessary or beneficial.
 
 Consider the case when you wish to tell an `<input />` element (that exists within your instances sub-hierarchy) to focus after you update its value to be the empty string, `''`.
@@ -58,7 +63,7 @@ In this counterexample, the `<input />` is merely a *description* of an `<input
 
 So how do we talk to the *real* backing instance of the input?
 
-## The `ref` attribute
+### The `ref` attribute
 
 React supports a very special property that you can attach to any component that is output from `render()`. This special property allows you to refer to the corresponding **backing instance** of anything returned from `render()`. It is always guaranteed to be the proper instance, at any point in time.
 
@@ -76,7 +81,7 @@ It's as simple as:
   this.refs.myInput
 ```
 
-## Completing the Example
+### Completing the Example
 
 ```javascript
   var App = React.createClass({
@@ -110,7 +115,7 @@ It's as simple as:
 In this example, our render function returns a description of an <input /> instance. But the true instance is accessed via `this.refs.theInput`. As long as a child component with `ref="theInput"` is returned from render, `this.refs.theInput` will access the the proper instance. This even works on higher level (non-DOM) components such as <Typeahead ref="myTypeahead" />.
 
 
-## Summary
+### Summary
 
 Refs are a great way to send a message to a particular child instance in a way that would be inconvenient to do via streaming Reactive `props` and `state`. They should, however, not be your go-to abstraction for flowing data through your application. By default, use the Reactive data flow and save `ref`s for use cases that are inherently non-reactive.
 

docs/refactor/08-tooling-integration.md → docs/08-tooling-integration.md

@@ -1,26 +1,31 @@
-# Tooling integration
+---
-
+id: 08-tooling-integration
+title: Tooling integration
+layout: docs
+prev: 07.1-more-about-refs.html
+next: 09-reference.html
+---
 Every project uses a different system for building and deploying JavaScript. We've tried to make React as environment-agnostic as possible.
 
-## CDN-hosted React
+### CDN-hosted React
 
 We provide CDN-hosted versions of React [on our download page](/react/downloads.html). These prebuilt files use the UMD module format. Dropping them in with a simple `<script>` tag will inject a `React` global into your environment. It also works out-of-the-box in CommonJS and AMD environments.
 
-## Using master
+### Using master
 
 We have instructions for building from master [in our GitHub repository](https://github.com/facebook/react). We build a tree of CommonJS modules under `build/modules` which you can drop into any environment or packaging tool that supports CommonJS.
 
-## In-browser JSX transform
+### In-browser JSX transform
 
 If you like using JSX, we provide an in-browser JSX transformer for development [on our download page](/react/downloads.html). Simply include a `<script type="text/jsx">` tag to engage the JSX transformer. Be sure to include the `/** @jsx React.DOM */` comment as well, otherwise the transformer will not run the transforms.
 
 **Warning:** the in-browser JSX transformer is fairly large and is extra computation. Do not use it in production -- see the next section.
 
-## Productionizing: precompiled JSX
+### Productionizing: precompiled JSX
 
 If you have [npm](http://npmjs.org/), you can simply run `npm install -g react-tools` to install our command-line `jsx` tool. This tool will translate files that use JSX syntax to plain JavaScript files that can run directly in the browser. It will also watch directories for you and automatically transform files when they are changed; for example: `jsx --watch src/ build/`. Run `jsx --help` for more information on how to use this tool.
 
-## Helpful open-source projects
+### Helpful open-source projects
 
 The open-source community has built tools that integrate JSX with several build systems.
 

docs/08-working-with-your-environment.md

@@ -0,0 +1,35 @@
+---
+id: 08-working-with-your-environment
+title: Working with your environment
+layout: docs
+prev: 07.1-more-about-refs.html
+next: 09-reference.html
+---
+Every project uses a different system for building and deploying JavaScript. We've tried to make React as environment-agnostic as possible.
+
+### CDN-hosted React
+
+We provide CDN-hosted versions of React [on our download page](/react/downloads.html). These prebuilt files use the UMD module format. Dropping them in with a simple `<script>` tag will inject a `React` global into your environment. It also works out-of-the-box in CommonJS and AMD environments.
+
+### Using master
+
+We have instructions for building from master [in our GitHub repository](https://github.com/facebook/react). We build a tree of CommonJS modules under `build/modules` which you can drop into any environment or packaging tool that supports CommonJS.
+
+### In-browser JSX transform
+
+If you like using JSX, we provide an in-browser JSX transformer for development [on our download page](/react/downloads.html). Simply include a `<script type="text/jsx">` tag to engage the JSX transformer. Be sure to include the `/** @jsx React.DOM */` comment as well, otherwise the transformer will not run the transforms.
+
+**Warning:** the in-browser JSX transformer is fairly large and is extra computation. Do not use it in production -- see the next section.
+
+### Productionizing: precompiled JSX
+
+If you have [npm](http://npmjs.org/), you can simply run `npm install -g react-tools` to install our command-line `jsx` tool. This tool will translate files that use JSX syntax to plain JavaScript files that can run directly in the browser. It will also watch directories for you and automatically transform files when they are changed; for example: `jsx --watch src/ build/`. Run `jsx --help` for more information on how to use this tool.
+
+### Helpful open-source projects
+
+The open-source community has built tools that integrate JSX with several build systems.
+
+* [reactify](https://github.com/andreypopp/reactify) - use JSX with [browserify](http://browserify.org/).
+* [grunt-react](https://github.com/ericclemmons/grunt-react) - [grunt](http://gruntjs.com/) task for JSX
+* [require-jsx](https://github.com/seiffert/require-jsx) - use JSX with [require.js](http://requirejs.org/)
+* [reactapp](https://github.com/jordwalke/reactapp) - a sample project to get up-and-running with React quickly

docs/refactor/09-reference.md → docs/09-reference.md

@@ -1,14 +1,19 @@
-# Reference
+---
+id: 09-reference
+title: Reference
+layout: docs
+prev: 08-tooling-integration.html
+next: 09.1-tutorial.html
+---
+### Examples
 
-## Examples
+#### Production apps
-
-### Production apps
 
 * All of [Instagram.com](http://instagram.com/) is built on React.
 * Many components on [Facebook.com](http://www.facebook.com/), including the commenting interface, ads creation flows, and page insights.
 * [Khan Academy](http://khanacademy.org/) is using React for its question editor.
 
-### Sample code
+#### Sample code
 
 * We've included **[a step-by-step comment box tutorial](./09.1-tutorial.md)**
 * There is also [a simple LikeButton tutorial](./likebutton/)
@@ -17,17 +22,17 @@
 * [React one-hour email](https://github.com/petehunt/react-one-hour-email/commits/master) goes step-by-step from a static HTML mock to an interactive email reader (written in just one hour!)
 * [Rendr + React app template](https://github.com/petehunt/rendr-react-template/) demonstrates how to use React's server rendering capabilities.
 
-## API
+### API
 
-### React
+#### React
 
 `React` is the entry point to the React framework. If you're using one of the prebuilt packages it's available as a global; if you're using CommonJS modules you can `require()` it.
 
-#### React.DOM
+##### React.DOM
 
 `React.DOM` provides all of the standard HTML tags needed to build a React app. You generally don't use it directly; instead, just include it as part of the `/** @jsx React.DOM */` docblock.
 
-#### React.initializeTouchEvents
+##### React.initializeTouchEvents
 
 ```javascript
 initializeTouchEvents(boolean shouldUseTouch)
@@ -35,7 +40,7 @@ initializeTouchEvents(boolean shouldUseTouch)
 
 Configure React's event system to handle touch events on mobile devices.
 
-#### React.createClass
+##### React.createClass
 
 ```javascript
 function createClass(object specification)
@@ -43,7 +48,7 @@ function createClass(object specification)
 
 Creates a component given a specification. A component implements a `render` method which returns **one single** child. That child may have an arbitrarily deep child structure. One thing that makes components different than a standard prototypal classes is that you don't need to call new on them. They are convenience wrappers that construct backing instances (via new) for you.
 
-#### React.renderComponent
+##### React.renderComponent
 
 ```javascript
 ReactComponent renderComponent(ReactComponent container, DOMElement container)
@@ -53,7 +58,7 @@ Renders a React component into the DOM in the supplied `container`.
 
 If the React component was previously rendered into `container`, this will perform an update on it and only mutate the DOM as necessary to reflect the latest React component.
 
-#### React.unmountAndReleaseReactRootNode
+##### React.unmountAndReleaseReactRootNode
 
 ```javascript
 unmountAndReleaseReactRootNode(DOMElement container)
@@ -61,7 +66,7 @@ unmountAndReleaseReactRootNode(DOMElement container)
 
 Remove a mounted React component from the DOM and clean up its event handlers and state.
 
-#### React.renderComponentToString
+##### React.renderComponentToString
 
 ```javascript
 renderComponentToString(ReactComponent component, function callback)
@@ -69,17 +74,17 @@ renderComponentToString(ReactComponent component, function callback)
 
 Render a component to its initial HTML. This should only be used on the server. React will call `callback` with an HTML string when the markup is ready. You can use this method to create static site generators, or you can generate HTML on the server and send it down to have a very fast initial page load. If you call `React.renderComponent()` on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.
 
-### AbstractEvent
+#### AbstractEvent
 
 Your event handlers will be passed instances of `AbstractEvent`, a cross-browser wrapper around the browser's native event. It has the same interface as the browser's native event (such as `stopPropagation()` and `preventDefault()`) except they work exactly the same across all browsers.
 
 If you find that you need the underlying browser event for some reason, simply use the `nativeEvent` attribute to get it.
 
-### ReactComponent
+#### ReactComponent
 
 Component classses created by `createClass()` return instances of `ReactComponent` when called. Most of the time when you're using React you're either creating or consuming `ReactComponent`s.
 
-#### getDOMNode
+##### getDOMNode
 
 ```javascript
 DOMElement getDOMNode()
@@ -87,7 +92,7 @@ DOMElement getDOMNode()
 
 If this component has been mounted into the DOM, this returns the corresponding native browser DOM element. This method is useful for reading values out of the DOM, such as form field values and performing DOM measurements.
 
-#### setProps
+##### setProps
 
 ```javascript
 setProps(object nextProps)
@@ -97,7 +102,7 @@ When you're integrating with an external JavaScript application you may want to
 
 **Note:** This method can only be called on a root-level component. That is, it's only available on the component passed directly to `renderComponent()` and none of its children. If you're inclined to use `setProps()` on a child component, instead take advantage of reactive updates and pass the new prop to the child component when it's created in `render()`.
 
-#### replaceProps
+##### replaceProps
 
 ```javascript
 replaceProps(object nextProps)
@@ -105,7 +110,7 @@ replaceProps(object nextProps)
 
 Like `setProps()` but deletes any pre-existing props that are not in nextProps.
 
-#### transferPropsTo
+##### transferPropsTo
 
 ```javascript
 ReactComponent transferPropsTo(ReactComponent targetComponent)
@@ -113,7 +118,7 @@ ReactComponent transferPropsTo(ReactComponent targetComponent)
 
 Transfer properties from this component to a target component that have not already been set on the target component. This is usually used to pass down properties to the returned root component. `targetComponent`, now updated with some new props is returned as a convenience.
 
-#### setState
+##### setState
 
 ```javascript
 setState(object nextState[, function callback])
@@ -127,7 +132,7 @@ Merges nextState with the current state. This is the primary method you use to t
 
 **Note**: There is no guarantee of synchronous operation of calls to `setState` and calls may be batched for performance gains.
 
-#### replaceState
+##### replaceState
 
 ```javascript
 replaceState(object nextState[, function callback])
@@ -135,7 +140,7 @@ replaceState(object nextState[, function callback])
 
 Like `setState()` but deletes any pre-existing state keys that are not in nextState.
 
-#### forceUpdate()
+##### forceUpdate()
 
 ```javascript
 forceUpdate([function callback])
@@ -147,7 +152,7 @@ Normally you should try to avoid all uses of `forceUpdate()` and only read from
 
 **Note**: There is no guarantee of synchronous operation of calls to `forceUpdate` and calls may be batched for performance gains.
 
-#### Lifecycle methods
+##### Lifecycle methods
 
 ```javascript
 object getInitialState()
@@ -163,7 +168,7 @@ componentWillUnmount()
 
 See the [working with the browser](./07-working-with-the-browser.html) documentation for more details on these lifecycle methods.
 
-## DOM differences
+### DOM differences
 
 React has implemented a browser-independent events and DOM system for performance and cross-browser compatibility reasons. We took the opportunity to clean up a few rough edges in browser DOM implementations.
 

docs/refactor/09.1-tutorial.md → docs/09.1-tutorial.md

@@ -1,5 +1,9 @@
-# Tutorial
+---
-
+id: 09.1-tutorial
+title: Tutorial
+layout: docs
+prev: 09-reference.html
+---
 We'll be building a simple, but realistic comments box that you can drop into a blog, similar to Disqus, LiveFyre or Facebook comments.
 
 We'll provide:
@@ -14,11 +18,11 @@ It'll also have a few neat features:
 * **Live updates:** as other users comment we'll pop them into the comment view in real time
 * **Markdown formatting:** users can use Markdown to format their text
 
-## Want to skip all this and just see the source?
+### Want to skip all this and just see the source?
 
 [It's all on GitHub.](https://github.com/petehunt/react-tutorial)
 
-## Getting started
+### Getting started
 
 For this tutorial we'll use prebuilt JavaScript files on a CDN. Open up your favorite editor and create a new HTML document:
 
@@ -44,7 +48,7 @@ For this tutorial we'll use prebuilt JavaScript files on a CDN. Open up your fav
 
 For the remainder of this tutorial, we'll be writing our JavaScript code in this script tag.
 
-## Your first component
+### Your first component
 
 React is all about modular, composable components. For our comment box example, we'll have the following component structure:
 
@@ -74,7 +78,7 @@ React.renderComponent(
 );
 ```
 
-### JSX Syntax
+#### JSX Syntax
 
 The first thing you'll notice is the XML-ish syntax in your JavaScript. We have a simple precompiler that translates the syntactic sugar to this plain JavaScript:
 
@@ -98,7 +102,7 @@ React.renderComponent(
 
 Its use is optional but we've found JSX syntax easier to use than plain JavaScript. Read more on the [JSX Syntax article](syntax.html).
 
-### What's going on
+#### What's going on
 
 We pass some methods in a JavaScript object to `React.createClass()` to create a new React component. The most important of these methods is called `render` which returns a tree of React components that will eventually render to HTML.
 
@@ -108,7 +112,7 @@ You do not have to return basic HTML. You can return a tree of components that y
 
 `React.renderComponent()` instantiates the root component, starts the framework, and injects the markup into a raw DOM element, provided as the second argument.
 
-# Composing components
+## Composing components
 
 Let's build skeletons for `CommentList` and `CommentForm` which will, again, be simple `<div>`s:
 
@@ -154,7 +158,7 @@ var CommentBox = React.createClass({
 
 Notice how we're mixing HTML tags and components we've built. HTML components are regular React components, just like the ones you define, with one difference. The JSX compiler will automatically rewrite HTML tags to "React.DOM.tagName" expressions and leave everything else alone. This is to prevent the pollution of the global namespace.
 
-## Component Properties
+### Component Properties
 
 Let's create our third component, `Comment`. We will want to pass it the author name and comment text so we can reuse the same code for each unique comment. First let's add some comments to the `CommentList`:
 
@@ -174,7 +178,7 @@ var CommentList = React.createClass({
 
 Note that we have passed some data from the parent `CommentList` component to the child `Comment` component as both XML-like children and attributes. Data passed from parent to child is called **props**, short for properties.
 
-## Using props
+### Using props
 
 Let's create the Comment component. It will read the data passed to it from the CommentList and render some markup:
 
@@ -196,7 +200,7 @@ var Comment = React.createClass({
 
 By surrounding a JavaScript expression in braces inside JSX (as either an attribute or child), you can drop text or React components into the tree. We access named attributes passed to the component as keys on `this.props` and any nested elements as `this.props.children`.
 
-## Adding Markdown
+### Adding Markdown
 
 Markdown is a simple way to format your text inline. For example, surrounding text with asterisks will make it emphasized.
 
@@ -249,7 +253,7 @@ This is a special API that intentionally makes it difficult to insert raw HTML,
 
 **Remember:** by using this feature you're relying on Showdown to be secure.
 
-## Hook up the data model
+### Hook up the data model
 
 So far we've been inserting the comments directly in the source code. Instead, let's render a blob of JSON data into the comment list. Eventually this will come from the server, but for now, write it in your source:
 
@@ -303,7 +307,7 @@ var CommentList = React.createClass({
 
 That's it!
 
-## Fetching from the server
+### Fetching from the server
 
 Let's replace the hard-coded data with some dynamic data from the server. We will remove the data prop and replace it with a URL to fetch:
 
@@ -317,7 +321,7 @@ React.renderComponent(
 
 This component is different from the prior components because it will have to re-render itself. The component won't have any data until the request from the server comes back, at which point the component may need to render some new comments.
 
-## Reactive state
+### Reactive state
 
 So far, each component has rendered itself once based on its props. `props` are immutable: they are passed from the parent and are "owned" by the parent. To implement interactions, we introduce mutable **state** to the component. `this.state` is private to the component and can be changed by calling `this.setState()`. When the state is updated, the component re-renders itself.
 
@@ -345,7 +349,7 @@ var CommentBox = React.createClass({
 
 `getInitialState()` executes exactly once during the lifecycle of the component and sets up the initial state of the component.
 
-### Updating state
+#### Updating state
 When the component is first created, we want to GET some JSON from the server and update the state to reflect the latest data. In a real application this would be a dynamic endpoint, but for this example, we will use a static JSON file to keep things simple:
 
 ```javascript
@@ -431,7 +435,7 @@ React.renderComponent(
 
 All we have done here is move the AJAX call to a separate method and call it when the component is first loaded and every 5 seconds after that. Try running this in your browser and changing the `comments.json` file; within 5 seconds, the changes will show!
 
-## Adding new comments
+### Adding new comments
 
 Now it's time to build the form. Our `CommentForm` component should ask the user for their name and comment text and send a request to the server to save the comment.
 
@@ -482,17 +486,17 @@ var CommentForm = React.createClass({
 });
 ```
 
-#### Events
+##### Events
 
 React attaches event handlers to components using a camelCase naming convention. We attach an `onSubmit` handler to the form that clears the form fields when the form is submitted with valid input.
 
 We always return `false` from the event handler to prevent the browser's default action of submitting the form. (If you prefer, you can instead take the event as an argument and call `preventDefault()` on it &ndash; read more about [event handling](event-handling.html).)
 
-#### Refs
+##### Refs
 
 We use the `ref` attribute to assign a name to a child component and `this.refs` to reference the component. We can call `getDOMNode()` on a component to get the native browser DOM element.
 
-#### Callbacks as props
+##### Callbacks as props
 
 When a user submits a comment, we will need to refresh the list of comments to include the new one. It makes sense to do all of this logic in `CommentBox` since `CommentBox` owns the state that represents the list of comments.
 
@@ -617,7 +621,7 @@ var CommentBox = React.createClass({
 });
 ```
 
-## Optimization: optimistic updates
+### Optimization: optimistic updates
 
 Our application is now feature complete but it feels slow to have to wait for the request to complete before your comment appears in the list. We can optimistically add this comment to the list to make the app feel faster.
 
@@ -672,6 +676,6 @@ var CommentBox = React.createClass({
 });
 ```
 
-## Congrats!
+### Congrats!
 
 You have just built a comment box in a few simple steps. Learn more about React in the [reference](syntax.html) or start hacking! Good luck!

docs/refactor/OUTLINE.md → docs/OUTLINE.md

@@ -1,4 +1,9 @@
-# Goals of the documentation
+---
+id: OUTLINE
+title: Goals of the documentation
+layout: docs
+prev: 09.1-tutorial.html
+---
 - Flow of docs should mimic progression of questions a new user would ask
 - High information density -- assume the reader is adept at JS
 - Talk about best practices
@@ -6,7 +11,7 @@
 - Provide background for some of the design decisions
 - Less words less words less words!
 
-# Outline
+## Outline
 
 Motivation / Why React?
 - Declarative (simple)
@@ -89,4 +94,3 @@ Case studies
 Reference
 - API
 - DOM differences
-

docs/likebutton/docs/assets/css/bootstrap-responsive.css

@@ -0,0 +1,817 @@
+/*!
+ * Bootstrap Responsive v2.0.4
+ *
+ * Copyright 2012 Twitter, Inc
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Designed and built with all the love in the world @twitter by @mdo and @fat.
+ */
+
+/*spin(@btnPrimaryBackground, 15%);*/
+
+.clearfix {
+  *zoom: 1;
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+
+.clearfix:after {
+  clear: both;
+}
+
+.hide-text {
+  font: 0/0 a;
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+}
+
+.input-block-level {
+  display: block;
+  width: 100%;
+  min-height: 28px;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+      -ms-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+.hidden {
+  display: none;
+  visibility: hidden;
+}
+
+.visible-phone {
+  display: none !important;
+}
+
+.visible-tablet {
+  display: none !important;
+}
+
+.hidden-desktop {
+  display: none !important;
+}
+
+@media (max-width: 767px) {
+  .visible-phone {
+    display: inherit !important;
+  }
+  .hidden-phone {
+    display: none !important;
+  }
+  .hidden-desktop {
+    display: inherit !important;
+  }
+  .visible-desktop {
+    display: none !important;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 979px) {
+  .visible-tablet {
+    display: inherit !important;
+  }
+  .hidden-tablet {
+    display: none !important;
+  }
+  .hidden-desktop {
+    display: inherit !important;
+  }
+  .visible-desktop {
+    display: none !important ;
+  }
+}
+
+@media (max-width: 480px) {
+  .nav-collapse {
+    -webkit-transform: translate3d(0, 0, 0);
+  }
+  .page-header h1 small {
+    display: block;
+    line-height: 18px;
+  }
+  input[type="checkbox"],
+  input[type="radio"] {
+    border: 1px solid #ccc;
+  }
+  .form-horizontal .control-group > label {
+    float: none;
+    width: auto;
+    padding-top: 0;
+    text-align: left;
+  }
+  .form-horizontal .controls {
+    margin-left: 0;
+  }
+  .form-horizontal .control-list {
+    padding-top: 0;
+  }
+  .form-horizontal .form-actions {
+    padding-right: 10px;
+    padding-left: 10px;
+  }
+  .modal {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    left: 10px;
+    width: auto;
+    margin: 0;
+  }
+  .modal.fade.in {
+    top: auto;
+  }
+  .modal-header .close {
+    padding: 10px;
+    margin: -10px;
+  }
+  .carousel-caption {
+    position: static;
+  }
+}
+
+@media (max-width: 767px) {
+  body {
+    padding-right: 20px;
+    padding-left: 20px;
+  }
+  .navbar-fixed-top,
+  .navbar-fixed-bottom {
+    margin-right: -20px;
+    margin-left: -20px;
+  }
+  .container-fluid {
+    padding: 0;
+  }
+  .dl-horizontal dt {
+    float: none;
+    width: auto;
+    clear: none;
+    text-align: left;
+  }
+  .dl-horizontal dd {
+    margin-left: 0;
+  }
+  .container {
+    width: auto;
+  }
+  .row-fluid {
+    width: 100%;
+  }
+  .row,
+  .thumbnails {
+    margin-left: 0;
+  }
+  [class*="span"],
+  .row-fluid [class*="span"] {
+    display: block;
+    float: none;
+    width: auto;
+    margin-left: 0;
+  }
+  .input-large,
+  .input-xlarge,
+  .input-xxlarge,
+  input[class*="span"],
+  select[class*="span"],
+  textarea[class*="span"],
+  .uneditable-input {
+    display: block;
+    width: 100%;
+    min-height: 28px;
+    -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+        -ms-box-sizing: border-box;
+            box-sizing: border-box;
+  }
+  .input-prepend input,
+  .input-append input,
+  .input-prepend input[class*="span"],
+  .input-append input[class*="span"] {
+    display: inline-block;
+    width: auto;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 979px) {
+  .row {
+    margin-left: -20px;
+    *zoom: 1;
+  }
+  .row:before,
+  .row:after {
+    display: table;
+    content: "";
+  }
+  .row:after {
+    clear: both;
+  }
+  [class*="span"] {
+    float: left;
+    margin-left: 20px;
+  }
+  .container,
+  .navbar-fixed-top .container,
+  .navbar-fixed-bottom .container {
+    width: 724px;
+  }
+  .span12 {
+    width: 724px;
+  }
+  .span11 {
+    width: 662px;
+  }
+  .span10 {
+    width: 600px;
+  }
+  .span9 {
+    width: 538px;
+  }
+  .span8 {
+    width: 476px;
+  }
+  .span7 {
+    width: 414px;
+  }
+  .span6 {
+    width: 352px;
+  }
+  .span5 {
+    width: 290px;
+  }
+  .span4 {
+    width: 228px;
+  }
+  .span3 {
+    width: 166px;
+  }
+  .span2 {
+    width: 104px;
+  }
+  .span1 {
+    width: 42px;
+  }
+  .offset12 {
+    margin-left: 764px;
+  }
+  .offset11 {
+    margin-left: 702px;
+  }
+  .offset10 {
+    margin-left: 640px;
+  }
+  .offset9 {
+    margin-left: 578px;
+  }
+  .offset8 {
+    margin-left: 516px;
+  }
+  .offset7 {
+    margin-left: 454px;
+  }
+  .offset6 {
+    margin-left: 392px;
+  }
+  .offset5 {
+    margin-left: 330px;
+  }
+  .offset4 {
+    margin-left: 268px;
+  }
+  .offset3 {
+    margin-left: 206px;
+  }
+  .offset2 {
+    margin-left: 144px;
+  }
+  .offset1 {
+    margin-left: 82px;
+  }
+  .row-fluid {
+    width: 100%;
+    *zoom: 1;
+  }
+  .row-fluid:before,
+  .row-fluid:after {
+    display: table;
+    content: "";
+  }
+  .row-fluid:after {
+    clear: both;
+  }
+  .row-fluid [class*="span"] {
+    display: block;
+    float: left;
+    width: 100%;
+    min-height: 28px;
+    margin-left: 2.762430939%;
+    *margin-left: 2.709239449638298%;
+    -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+        -ms-box-sizing: border-box;
+            box-sizing: border-box;
+  }
+  .row-fluid [class*="span"]:first-child {
+    margin-left: 0;
+  }
+  .row-fluid .span12 {
+    width: 99.999999993%;
+    *width: 99.9468085036383%;
+  }
+  .row-fluid .span11 {
+    width: 91.436464082%;
+    *width: 91.38327259263829%;
+  }
+  .row-fluid .span10 {
+    width: 82.87292817100001%;
+    *width: 82.8197366816383%;
+  }
+  .row-fluid .span9 {
+    width: 74.30939226%;
+    *width: 74.25620077063829%;
+  }
+  .row-fluid .span8 {
+    width: 65.74585634900001%;
+    *width: 65.6926648596383%;
+  }
+  .row-fluid .span7 {
+    width: 57.182320438000005%;
+    *width: 57.129128948638304%;
+  }
+  .row-fluid .span6 {
+    width: 48.618784527%;
+    *width: 48.5655930376383%;
+  }
+  .row-fluid .span5 {
+    width: 40.055248616%;
+    *width: 40.0020571266383%;
+  }
+  .row-fluid .span4 {
+    width: 31.491712705%;
+    *width: 31.4385212156383%;
+  }
+  .row-fluid .span3 {
+    width: 22.928176794%;
+    *width: 22.874985304638297%;
+  }
+  .row-fluid .span2 {
+    width: 14.364640883%;
+    *width: 14.311449393638298%;
+  }
+  .row-fluid .span1 {
+    width: 5.801104972%;
+    *width: 5.747913482638298%;
+  }
+  input,
+  textarea,
+  .uneditable-input {
+    margin-left: 0;
+  }
+  input.span12,
+  textarea.span12,
+  .uneditable-input.span12 {
+    width: 714px;
+  }
+  input.span11,
+  textarea.span11,
+  .uneditable-input.span11 {
+    width: 652px;
+  }
+  input.span10,
+  textarea.span10,
+  .uneditable-input.span10 {
+    width: 590px;
+  }
+  input.span9,
+  textarea.span9,
+  .uneditable-input.span9 {
+    width: 528px;
+  }
+  input.span8,
+  textarea.span8,
+  .uneditable-input.span8 {
+    width: 466px;
+  }
+  input.span7,
+  textarea.span7,
+  .uneditable-input.span7 {
+    width: 404px;
+  }
+  input.span6,
+  textarea.span6,
+  .uneditable-input.span6 {
+    width: 342px;
+  }
+  input.span5,
+  textarea.span5,
+  .uneditable-input.span5 {
+    width: 280px;
+  }
+  input.span4,
+  textarea.span4,
+  .uneditable-input.span4 {
+    width: 218px;
+  }
+  input.span3,
+  textarea.span3,
+  .uneditable-input.span3 {
+    width: 156px;
+  }
+  input.span2,
+  textarea.span2,
+  .uneditable-input.span2 {
+    width: 94px;
+  }
+  input.span1,
+  textarea.span1,
+  .uneditable-input.span1 {
+    width: 32px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .row {
+    margin-left: -30px;
+    *zoom: 1;
+  }
+  .row:before,
+  .row:after {
+    display: table;
+    content: "";
+  }
+  .row:after {
+    clear: both;
+  }
+  [class*="span"] {
+    float: left;
+    margin-left: 30px;
+  }
+  .container,
+  .navbar-fixed-top .container,
+  .navbar-fixed-bottom .container {
+    width: 1170px;
+  }
+  .span12 {
+    width: 1170px;
+  }
+  .span11 {
+    width: 1070px;
+  }
+  .span10 {
+    width: 970px;
+  }
+  .span9 {
+    width: 870px;
+  }
+  .span8 {
+    width: 770px;
+  }
+  .span7 {
+    width: 670px;
+  }
+  .span6 {
+    width: 570px;
+  }
+  .span5 {
+    width: 470px;
+  }
+  .span4 {
+    width: 370px;
+  }
+  .span3 {
+    width: 270px;
+  }
+  .span2 {
+    width: 170px;
+  }
+  .span1 {
+    width: 70px;
+  }
+  .offset12 {
+    margin-left: 1230px;
+  }
+  .offset11 {
+    margin-left: 1130px;
+  }
+  .offset10 {
+    margin-left: 1030px;
+  }
+  .offset9 {
+    margin-left: 930px;
+  }
+  .offset8 {
+    margin-left: 830px;
+  }
+  .offset7 {
+    margin-left: 730px;
+  }
+  .offset6 {
+    margin-left: 630px;
+  }
+  .offset5 {
+    margin-left: 530px;
+  }
+  .offset4 {
+    margin-left: 430px;
+  }
+  .offset3 {
+    margin-left: 330px;
+  }
+  .offset2 {
+    margin-left: 230px;
+  }
+  .offset1 {
+    margin-left: 130px;
+  }
+  .row-fluid {
+    width: 100%;
+    *zoom: 1;
+  }
+  .row-fluid:before,
+  .row-fluid:after {
+    display: table;
+    content: "";
+  }
+  .row-fluid:after {
+    clear: both;
+  }
+  .row-fluid [class*="span"] {
+    display: block;
+    float: left;
+    width: 100%;
+    min-height: 28px;
+    margin-left: 2.564102564%;
+    *margin-left: 2.510911074638298%;
+    -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+        -ms-box-sizing: border-box;
+            box-sizing: border-box;
+  }
+  .row-fluid [class*="span"]:first-child {
+    margin-left: 0;
+  }
+  .row-fluid .span12 {
+    width: 100%;
+    *width: 99.94680851063829%;
+  }
+  .row-fluid .span11 {
+    width: 91.45299145300001%;
+    *width: 91.3997999636383%;
+  }
+  .row-fluid .span10 {
+    width: 82.905982906%;
+    *width: 82.8527914166383%;
+  }
+  .row-fluid .span9 {
+    width: 74.358974359%;
+    *width: 74.30578286963829%;
+  }
+  .row-fluid .span8 {
+    width: 65.81196581200001%;
+    *width: 65.7587743226383%;
+  }
+  .row-fluid .span7 {
+    width: 57.264957265%;
+    *width: 57.2117657756383%;
+  }
+  .row-fluid .span6 {
+    width: 48.717948718%;
+    *width: 48.6647572286383%;
+  }
+  .row-fluid .span5 {
+    width: 40.170940171000005%;
+    *width: 40.117748681638304%;
+  }
+  .row-fluid .span4 {
+    width: 31.623931624%;
+    *width: 31.5707401346383%;
+  }
+  .row-fluid .span3 {
+    width: 23.076923077%;
+    *width: 23.0237315876383%;
+  }
+  .row-fluid .span2 {
+    width: 14.529914530000001%;
+    *width: 14.4767230406383%;
+  }
+  .row-fluid .span1 {
+    width: 5.982905983%;
+    *width: 5.929714493638298%;
+  }
+  input,
+  textarea,
+  .uneditable-input {
+    margin-left: 0;
+  }
+  input.span12,
+  textarea.span12,
+  .uneditable-input.span12 {
+    width: 1160px;
+  }
+  input.span11,
+  textarea.span11,
+  .uneditable-input.span11 {
+    width: 1060px;
+  }
+  input.span10,
+  textarea.span10,
+  .uneditable-input.span10 {
+    width: 960px;
+  }
+  input.span9,
+  textarea.span9,
+  .uneditable-input.span9 {
+    width: 860px;
+  }
+  input.span8,
+  textarea.span8,
+  .uneditable-input.span8 {
+    width: 760px;
+  }
+  input.span7,
+  textarea.span7,
+  .uneditable-input.span7 {
+    width: 660px;
+  }
+  input.span6,
+  textarea.span6,
+  .uneditable-input.span6 {
+    width: 560px;
+  }
+  input.span5,
+  textarea.span5,
+  .uneditable-input.span5 {
+    width: 460px;
+  }
+  input.span4,
+  textarea.span4,
+  .uneditable-input.span4 {
+    width: 360px;
+  }
+  input.span3,
+  textarea.span3,
+  .uneditable-input.span3 {
+    width: 260px;
+  }
+  input.span2,
+  textarea.span2,
+  .uneditable-input.span2 {
+    width: 160px;
+  }
+  input.span1,
+  textarea.span1,
+  .uneditable-input.span1 {
+    width: 60px;
+  }
+  .thumbnails {
+    margin-left: -30px;
+  }
+  .thumbnails > li {
+    margin-left: 30px;
+  }
+  .row-fluid .thumbnails {
+    margin-left: 0;
+  }
+}
+
+@media (max-width: 979px) {
+  body {
+    padding-top: 0;
+  }
+  .navbar-fixed-top,
+  .navbar-fixed-bottom {
+    position: static;
+  }
+  .navbar-fixed-top {
+    margin-bottom: 18px;
+  }
+  .navbar-fixed-bottom {
+    margin-top: 18px;
+  }
+  .navbar-fixed-top .navbar-inner,
+  .navbar-fixed-bottom .navbar-inner {
+    padding: 5px;
+  }
+  .navbar .container {
+    width: auto;
+    padding: 0;
+  }
+  .navbar .brand {
+    padding-right: 10px;
+    padding-left: 10px;
+    margin: 0 0 0 -5px;
+  }
+  .nav-collapse {
+    clear: both;
+  }
+  .nav-collapse .nav {
+    float: none;
+    margin: 0 0 9px;
+  }
+  .nav-collapse .nav > li {
+    float: none;
+  }
+  .nav-collapse .nav > li > a {
+    margin-bottom: 2px;
+  }
+  .nav-collapse .nav > .divider-vertical {
+    display: none;
+  }
+  .nav-collapse .nav .nav-header {
+    color: #999999;
+    text-shadow: none;
+  }
+  .nav-collapse .nav > li > a,
+  .nav-collapse .dropdown-menu a {
+    padding: 6px 15px;
+    font-weight: bold;
+    color: #999999;
+    -webkit-border-radius: 3px;
+       -moz-border-radius: 3px;
+            border-radius: 3px;
+  }
+  .nav-collapse .btn {
+    padding: 4px 10px 4px;
+    font-weight: normal;
+    -webkit-border-radius: 4px;
+       -moz-border-radius: 4px;
+            border-radius: 4px;
+  }
+  .nav-collapse .dropdown-menu li + li a {
+    margin-bottom: 2px;
+  }
+  .nav-collapse .nav > li > a:hover,
+  .nav-collapse .dropdown-menu a:hover {
+    background-color: #222222;
+  }
+  .nav-collapse.in .btn-group {
+    padding: 0;
+    margin-top: 5px;
+  }
+  .nav-collapse .dropdown-menu {
+    position: static;
+    top: auto;
+    left: auto;
+    display: block;
+    float: none;
+    max-width: none;
+    padding: 0;
+    margin: 0 15px;
+    background-color: transparent;
+    border: none;
+    -webkit-border-radius: 0;
+       -moz-border-radius: 0;
+            border-radius: 0;
+    -webkit-box-shadow: none;
+       -moz-box-shadow: none;
+            box-shadow: none;
+  }
+  .nav-collapse .dropdown-menu:before,
+  .nav-collapse .dropdown-menu:after {
+    display: none;
+  }
+  .nav-collapse .dropdown-menu .divider {
+    display: none;
+  }
+  .nav-collapse .navbar-form,
+  .nav-collapse .navbar-search {
+    float: none;
+    padding: 9px 15px;
+    margin: 9px 0;
+    border-top: 1px solid #222222;
+    border-bottom: 1px solid #222222;
+    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
+       -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
+            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
+  }
+  .navbar .nav-collapse .nav.pull-right {
+    float: none;
+    margin-left: 0;
+  }
+  .nav-collapse,
+  .nav-collapse.collapse {
+    height: 0;
+    overflow: hidden;
+  }
+  .navbar .btn-navbar {
+    display: block;
+  }
+  .navbar-static .navbar-inner {
+    padding-right: 10px;
+    padding-left: 10px;
+  }
+}
+
+@media (min-width: 980px) {
+  .nav-collapse.collapse {
+    height: auto !important;
+    overflow: visible !important;
+  }
+}

docs/likebutton/docs/assets/css/docs.css

@@ -0,0 +1,846 @@
+/* Add additional stylesheets below
+-------------------------------------------------- */
+/*
+  Bootstrap's documentation styles
+  Special styles for presenting Bootstrap's documentation and examples
+*/
+
+
+/* Body and structure
+-------------------------------------------------- */
+body {
+  position: relative;
+  padding-top: 90px;
+  background-color: #fff;
+  background-image: url(../img/grid-18px-masked.png);
+  background-repeat: repeat-x;
+  background-position: 0 40px;
+}
+
+
+/* Tweak navbar brand link to be super sleek
+-------------------------------------------------- */
+.navbar-fixed-top .brand {
+  padding-right: 0;
+  padding-left: 0;
+  margin-left: 20px;
+  float: right;
+  font-weight: bold;
+  color: #000;
+  text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.125);
+  -webkit-transition: all .2s linear;
+     -moz-transition: all .2s linear;
+          transition: all .2s linear;
+}
+.navbar-fixed-top .brand:hover {
+  text-decoration: none;
+}
+
+
+/* Space out sub-sections more
+-------------------------------------------------- */
+section {
+  padding-top: 60px;
+}
+
+/* Faded out hr */
+hr.soften {
+  height: 1px;
+  margin: 54px 0;
+  background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
+  background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
+  background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
+  background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
+  border: 0;
+}
+
+
+/* Jumbotrons
+-------------------------------------------------- */
+.jumbotron {
+  position: relative;
+}
+.jumbotron h1 {
+  margin-bottom: 9px;
+  font-size: 81px;
+  font-weight: bold;
+  letter-spacing: -1px;
+  line-height: 1;
+}
+.jumbotron p {
+  margin-bottom: 18px;
+  font-weight: 300;
+}
+.jumbotron .btn-large {
+  font-size: 20px;
+  font-weight: normal;
+  padding: 14px 24px;
+  margin-right: 10px;
+  -webkit-border-radius: 6px;
+     -moz-border-radius: 6px;
+          border-radius: 6px;
+}
+.jumbotron .btn-large small {
+  font-size: 14px;
+}
+
+/* Masthead (docs home) */
+.masthead {
+  padding-top: 36px;
+  margin-bottom: 72px;
+}
+.masthead h1,
+.masthead p {
+  text-align: center;
+}
+.masthead h1 {
+  margin-bottom: 18px;
+}
+.masthead p {
+  margin-left: 5%;
+  margin-right: 5%;
+  font-size: 30px;
+  line-height: 36px;
+}
+
+
+/* Specific jumbotrons
+------------------------- */
+/* supporting docs pages */
+.subhead {
+  padding-bottom: 0;
+  margin-bottom: 9px;
+}
+.subhead h1 {
+  font-size: 54px;
+}
+
+/* Subnav */
+.subnav {
+  width: 100%;
+  height: 36px;
+  background-color: #eeeeee; /* Old browsers */
+  background-repeat: repeat-x; /* Repeat the gradient */
+  background-image: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); /* FF3.6+ */
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
+  background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Chrome 10+,Safari 5.1+ */
+  background-image: -ms-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* IE10+ */
+  background-image: -o-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Opera 11.10+ */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
+  background-image: linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* W3C */
+  border: 1px solid #e5e5e5;
+  -webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+}
+.subnav .nav {
+  margin-bottom: 0;
+}
+.subnav .nav > li > a {
+  margin: 0;
+  padding-top:    11px;
+  padding-bottom: 11px;
+  border-left: 1px solid #f5f5f5;
+  border-right: 1px solid #e5e5e5;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+.subnav .nav > .active > a,
+.subnav .nav > .active > a:hover {
+  padding-left: 13px;
+  color: #777;
+  background-color: #e9e9e9;
+  border-right-color: #ddd;
+  border-left: 0;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
+     -moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
+          box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
+}
+.subnav .nav > .active > a .caret,
+.subnav .nav > .active > a:hover .caret {
+  border-top-color: #777;
+}
+.subnav .nav > li:first-child > a,
+.subnav .nav > li:first-child > a:hover {
+  border-left: 0;
+  padding-left: 12px;
+  -webkit-border-radius: 4px 0 0 4px;
+     -moz-border-radius: 4px 0 0 4px;
+          border-radius: 4px 0 0 4px;
+}
+.subnav .nav > li:last-child > a {
+  border-right: 0;
+}
+.subnav .dropdown-menu {
+  -webkit-border-radius: 0 0 4px 4px;
+     -moz-border-radius: 0 0 4px 4px;
+          border-radius: 0 0 4px 4px;
+}
+
+/* Fixed subnav on scroll, but only for 980px and up (sorry IE!) */
+@media (min-width: 980px) {
+  .subnav-fixed {
+    position: fixed;
+    top: 40px;
+    left: 0;
+    right: 0;
+    z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */
+    border-color: #d5d5d5;
+    border-width: 0 0 1px; /* drop the border on the fixed edges */
+    -webkit-border-radius: 0;
+       -moz-border-radius: 0;
+            border-radius: 0;
+    -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
+       -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
+            box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
+    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */
+  }
+  .subnav-fixed .nav {
+    width: 938px;
+    margin: 0 auto;
+    padding: 0 1px;
+  }
+  .subnav .nav > li:first-child > a,
+  .subnav .nav > li:first-child > a:hover {
+    -webkit-border-radius: 0;
+       -moz-border-radius: 0;
+            border-radius: 0;
+  }
+}
+
+
+/* Quick links
+-------------------------------------------------- */
+.bs-links {
+  margin: 36px 0;
+}
+.quick-links {
+  min-height: 30px;
+  margin: 0;
+  padding: 5px 20px;
+  list-style: none;
+  text-align: center;
+  overflow: hidden;
+}
+.quick-links:first-child {
+  min-height: 0;
+}
+.quick-links li {
+  display: inline;
+  margin: 0 8px;
+  color: #999;
+}
+.quick-links .github-btn,
+.quick-links .tweet-btn,
+.quick-links .follow-btn {
+  position: relative;
+  top: 5px;
+}
+
+
+/* Marketing section of Overview
+-------------------------------------------------- */
+.marketing .row {
+  margin-bottom: 9px;
+}
+.marketing h1 {
+  margin: 36px 0 27px;
+  font-size: 40px;
+  font-weight: 300;
+  text-align: center;
+}
+.marketing h2,
+.marketing h3 {
+  font-weight: 300;
+}
+.marketing h2 {
+  font-size: 22px;
+}
+.marketing p {
+  margin-right: 10px;
+}
+.marketing .bs-icon {
+  float: left;
+  margin: 7px 10px 0 0;
+  opacity: .8;
+}
+.marketing .small-bs-icon {
+  float: left;
+  margin: 4px 5px 0 0;
+}
+
+
+
+/* Footer
+-------------------------------------------------- */
+.footer {
+  margin-top: 45px;
+  padding: 35px 0 36px;
+  border-top: 1px solid #e5e5e5;
+}
+.footer p {
+  margin-bottom: 0;
+  color: #555;
+}
+
+
+
+/* Special grid styles
+-------------------------------------------------- */
+.show-grid {
+  margin-top: 10px;
+  margin-bottom: 20px;
+}
+.show-grid [class*="span"] {
+  background-color: #eee;
+  text-align: center;
+  -webkit-border-radius: 3px;
+     -moz-border-radius: 3px;
+          border-radius: 3px;
+  min-height: 30px;
+  line-height: 30px;
+}
+.show-grid:hover [class*="span"] {
+  background: #ddd;
+}
+.show-grid .show-grid {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.show-grid .show-grid [class*="span"] {
+  background-color: #ccc;
+}
+
+
+/* Render mini layout previews
+-------------------------------------------------- */
+.mini-layout {
+  border: 1px solid #ddd;
+  -webkit-border-radius: 6px;
+     -moz-border-radius: 6px;
+          border-radius: 6px;
+  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.075);
+     -moz-box-shadow: 0 1px 2px rgba(0,0,0,.075);
+          box-shadow: 0 1px 2px rgba(0,0,0,.075);
+}
+.mini-layout {
+  height: 240px;
+  margin-bottom: 20px;
+  padding: 9px;
+}
+.mini-layout div {
+  -webkit-border-radius: 3px;
+     -moz-border-radius: 3px;
+          border-radius: 3px;
+}
+.mini-layout .mini-layout-body {
+  background-color: #dceaf4;
+  margin: 0 auto;
+  width: 70%;
+  height: 240px;
+}
+.mini-layout.fluid .mini-layout-sidebar,
+.mini-layout.fluid .mini-layout-header,
+.mini-layout.fluid .mini-layout-body {
+  float: left;
+}
+.mini-layout.fluid .mini-layout-sidebar {
+  background-color: #bbd8e9;
+  width: 20%;
+  height: 240px;
+}
+.mini-layout.fluid .mini-layout-body {
+  width: 77.5%;
+  margin-left: 2.5%;
+}
+
+
+/* Popover docs
+-------------------------------------------------- */
+.popover-well {
+  min-height: 160px;
+}
+.popover-well .popover {
+  display: block;
+}
+.popover-well .popover-wrapper {
+  width: 50%;
+  height: 160px;
+  float: left;
+  margin-left: 55px;
+  position: relative;
+}
+.popover-well .popover-menu-wrapper {
+  height: 80px;
+}
+.large-bird {
+  margin: 5px 0 0 310px;
+  opacity: .1;
+}
+
+
+/* Download page
+-------------------------------------------------- */
+.download .page-header {
+  margin-top: 36px;
+}
+.page-header .toggle-all {
+  margin-top: 5px;
+}
+
+/* Space out h3s when following a section */
+.download h3 {
+  margin-bottom: 5px;
+}
+.download-builder input + h3,
+.download-builder .checkbox + h3 {
+  margin-top: 9px;
+}
+
+/* Fields for variables */
+.download-builder input[type=text] {
+  margin-bottom: 9px;
+  font-family: Menlo, Monaco, "Courier New", monospace;
+  font-size: 12px;
+  color: #d14;
+}
+.download-builder input[type=text]:focus {
+  background-color: #fff;
+}
+
+/* Custom, larger checkbox labels */
+.download .checkbox {
+  padding: 6px 10px 6px 25px;
+  color: #555;
+  background-color: #f9f9f9;
+  -webkit-border-radius: 3px;
+     -moz-border-radius: 3px;
+          border-radius: 3px;
+  cursor: pointer;
+}
+.download .checkbox:hover {
+  color: #333;
+  background-color: #f5f5f5;
+}
+.download .checkbox small {
+  font-size: 12px;
+  color: #777;
+}
+
+/* Variables section */
+#variables label {
+  margin-bottom: 0;
+}
+
+/* Giant download button */
+.download-btn {
+  margin: 36px 0 108px;
+}
+#download p,
+#download h4 {
+  max-width: 50%;
+  margin: 0 auto;
+  color: #999;
+  text-align: center;
+}
+#download h4 {
+  margin-bottom: 0;
+}
+#download p {
+  margin-bottom: 18px;
+}
+.download-btn .btn {
+  display: block;
+  width: auto;
+  padding: 19px 24px;
+  margin-bottom: 27px;
+  font-size: 30px;
+  line-height: 1;
+  text-align: center;
+  -webkit-border-radius: 6px;
+     -moz-border-radius: 6px;
+          border-radius: 6px;
+}
+
+
+
+/* Color swatches on LESS docs page
+-------------------------------------------------- */
+/* Sets the width of the td */
+.swatch-col {
+  width: 30px;
+}
+/* Le swatch */
+.swatch {
+  display: inline-block;
+  width: 30px;
+  height: 20px;
+  margin: -6px 0;
+  -webkit-border-radius: 3px;
+     -moz-border-radius: 3px;
+          border-radius: 3px;
+}
+/* For white swatches, give a border */
+.swatch-bordered {
+  width: 28px;
+  height: 18px;
+  border: 1px solid #eee;
+}
+
+
+/* Misc
+-------------------------------------------------- */
+
+/* Make tables spaced out a bit more */
+h2 + table,
+h3 + table,
+h4 + table,
+h2 + .row {
+  margin-top: 5px;
+}
+
+/* Example sites showcase */
+.example-sites img {
+  max-width: 100%;
+  margin: 0 auto;
+}
+.marketing-byline {
+  margin: -18px 0 27px;
+  font-size: 18px;
+  font-weight: 300;
+  line-height: 24px;
+  color: #999;
+  text-align: center;
+}
+
+.scrollspy-example {
+  height: 200px;
+  overflow: auto;
+  position: relative;
+}
+
+/* Remove bottom margin on example forms in wells */
+form.well {
+  padding: 14px;
+}
+
+/* Tighten up spacing */
+.well hr {
+  margin: 18px 0;
+}
+
+/* Fake the :focus state to demo it */
+.focused {
+  border-color: rgba(82,168,236,.8);
+  -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
+     -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
+          box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
+  outline: 0;
+}
+
+/* For input sizes, make them display block */
+.docs-input-sizes select,
+.docs-input-sizes input[type=text] {
+  display: block;
+  margin-bottom: 9px;
+}
+
+/* Icons
+------------------------- */
+.the-icons {
+  margin-left: 0;
+  list-style: none;
+}
+.the-icons i:hover {
+  background-color: rgba(255,0,0,.25);
+}
+
+/* Eaxmples page
+------------------------- */
+.bootstrap-examples .thumbnail {
+  margin-bottom: 9px;
+  background-color: #fff;
+}
+
+/* Responsive table
+------------------------- */
+.responsive-utilities th small {
+  display: block;
+  font-weight: normal;
+  color: #999;
+}
+.responsive-utilities tbody th {
+  font-weight: normal;
+}
+.responsive-utilities td {
+  text-align: center;
+}
+.responsive-utilities td.is-visible {
+  color: #468847;
+  background-color: #dff0d8 !important;
+}
+.responsive-utilities td.is-hidden {
+  color: #ccc;
+  background-color: #f9f9f9 !important;
+}
+
+/* Responsive tests
+------------------------- */
+.responsive-utilities-test {
+  margin-top: 5px;
+  margin-left: 0;
+  list-style: none;
+  overflow: hidden; /* clear floats */
+}
+.responsive-utilities-test li {
+  position: relative;
+  float: left;
+  width: 25%;
+  height: 43px;
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 43px;
+  color: #999;
+  text-align: center;
+  border: 1px solid #ddd;
+  -webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+}
+.responsive-utilities-test li + li {
+  margin-left: 10px;
+}
+.responsive-utilities-test span {
+  position: absolute;
+  top:    -1px;
+  left:   -1px;
+  right:  -1px;
+  bottom: -1px;
+  -webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+}
+.responsive-utilities-test span {
+  color: #468847;
+  background-color: #dff0d8;
+  border: 1px solid #d6e9c6;
+}
+
+
+/* Responsive Docs
+-------------------------------------------------- */
+@media (max-width: 480px) {
+
+  /* Reduce padding above jumbotron */
+  body {
+    padding-top: 70px;
+  }
+
+  /* Change up some type stuff */
+  h2 {
+    margin-top: 27px;
+  }
+  h2 small {
+    display: block;
+    line-height: 18px;
+  }
+  h3 {
+    margin-top: 18px;
+  }
+
+  /* icons */
+  .marketing .bs-icon {
+    margin: 0;
+  }
+
+  /* Adjust the jumbotron */
+  .jumbotron h1,
+  .jumbotron p {
+    text-align: center;
+    margin-right: 0;
+  }
+  .jumbotron h1 {
+    font-size: 45px;
+    margin-right: 0;
+  }
+  .jumbotron p {
+    margin-right: 0;
+    margin-left: 0;
+    font-size: 18px;
+    line-height: 24px;
+  }
+  .jumbotron .btn {
+    display: block;
+    font-size: 18px;
+    padding: 10px 14px;
+    margin: 0 auto 10px;
+  }
+  /* Masthead (home page jumbotron) */
+  .masthead {
+    padding-top: 0;
+  }
+
+  /* Don't space out quick links so much */
+  .quick-links {
+    margin: 40px 0 0;
+  }
+  /* hide the bullets on mobile since our horizontal space is limited */
+  .quick-links .divider {
+    display: none;
+  }
+
+  /* center example sites */
+  .example-sites {
+    margin-left: 0;
+  }
+  .example-sites > li {
+    float: none;
+    display: block;
+    max-width: 280px;
+    margin: 0 auto 18px;
+    text-align: center;
+  }
+  .example-sites .thumbnail > img {
+    max-width: 270px;
+  }
+
+  table code {
+    white-space: normal;
+    word-wrap: break-word;
+    word-break: break-all;
+  }
+
+  /* Modal example */
+  .modal-example .modal {
+    position: relative;
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+  }
+
+}
+
+
+@media (max-width: 768px) {
+
+  /* Remove any padding from the body */
+  body {
+    padding-top: 0;
+  }
+
+  /* Jumbotron buttons */
+  .jumbotron .btn {
+    margin-bottom: 10px;
+  }
+
+  /* Subnav */
+  .subnav {
+    position: static;
+    top: auto;
+    z-index: auto;
+    width: auto;
+    height: auto;
+    background: #fff; /* whole background property since we use a background-image for gradient */
+    -webkit-box-shadow: none;
+       -moz-box-shadow: none;
+            box-shadow: none;
+  }
+  .subnav .nav > li {
+    float: none;
+  }
+  .subnav .nav > li > a {
+    border: 0;
+  }
+  .subnav .nav > li + li > a {
+    border-top: 1px solid #e5e5e5;
+  }
+  .subnav .nav > li:first-child > a,
+  .subnav .nav > li:first-child > a:hover {
+      -webkit-border-radius: 4px 4px 0 0;
+         -moz-border-radius: 4px 4px 0 0;
+              border-radius: 4px 4px 0 0;
+  }
+
+  /* Popovers */
+  .large-bird {
+    display: none;
+  }
+  .popover-well .popover-wrapper {
+    margin-left: 0;
+  }
+
+  /* Space out the show-grid examples */
+  .show-grid [class*="span"] {
+    margin-bottom: 5px;
+  }
+
+  /* Unfloat the back to top link in footer */
+  .footer .pull-right {
+    float: none;
+  }
+  .footer p {
+    margin-bottom: 9px;
+  }
+
+}
+
+
+@media (min-width: 480px) and (max-width: 768px) {
+
+  /* Scale down the jumbotron content */
+  .jumbotron h1 {
+    font-size: 54px;
+  }
+  .jumbotron p {
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+}
+
+
+@media (min-width: 768px) and (max-width: 980px) {
+
+  /* Remove any padding from the body */
+  body {
+    padding-top: 0;
+  }
+
+  /* Scale down the jumbotron content */
+  .jumbotron h1 {
+    font-size: 72px;
+  }
+
+}
+
+
+@media (max-width: 980px) {
+
+  /* Unfloat brand */
+  .navbar-fixed-top .brand {
+    float: left;
+    margin-left: 0;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+
+  /* Inline-block quick links for more spacing */
+  .quick-links li {
+    display: inline-block;
+    margin: 5px;
+  }
+
+}
+
+
+/* LARGE DESKTOP SCREENS */
+@media (min-width: 1210px) {
+
+  /* Update subnav container */
+  .subnav-fixed .nav {
+    width: 1168px; /* 2px less to account for left/right borders being removed when in fixed mode */
+  }
+
+}

docs/likebutton/docs/assets/js/README.md

@@ -0,0 +1,106 @@
+## 2.0 BOOTSTRAP JS PHILOSOPHY
+These are the high-level design rules which guide the development of Bootstrap's plugin apis.
+
+---
+
+### DATA-ATTRIBUTE API
+
+We believe you should be able to use all plugins provided by Bootstrap purely through the markup API without writing a single line of javascript.
+
+We acknowledge that this isn't always the most performant and sometimes it may be desirable to turn this functionality off altogether. Therefore, as of 2.0 we provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this:
+
+    $('body').off('.data-api')
+
+To target a specific plugin, just include the plugins name as a namespace along with the data-api namespace like this:
+
+    $('body').off('.alert.data-api')
+
+---
+
+### PROGRAMATIC API
+
+We also believe you should be able to use all plugins provided by Bootstrap purely through the JS API.
+
+All public APIs should be single, chainable methods, and return the collection acted upon.
+
+    $(".btn.danger").button("toggle").addClass("fat")
+
+All methods should accept an optional options object, a string which targets a particular method, or null which initiates the default behavior:
+
+    $("#myModal").modal() // initialized with defaults
+    $("#myModal").modal({ keyboard: false }) // initialized with now keyboard
+    $("#myModal").modal('show') // initializes and invokes show immediately afterqwe2
+
+---
+
+### OPTIONS
+
+Options should be sparse and add universal value. We should pick the right defaults.
+
+All plugins should have a default object which can be modified to effect all instance's default options. The defaults object should be available via `$.fn.plugin.defaults`.
+
+    $.fn.modal.defaults = { … }
+
+An options definition should take the following form:
+
+    *noun*: *adjective* - describes or modifies a quality of an instance
+
+examples:
+
+    backdrop: true
+    keyboard: false
+    placement: 'top'
+
+---
+
+### EVENTS
+
+All events should have an infinitive and past participle form. The infinitive is fired just before an action takes place, the past participle on completion of the action.
+
+    show | shown
+    hide | hidden
+
+---
+
+### CONSTRUCTORS
+
+Each plugin should expose it's raw constructor on a `Constructor` property -- accessed in the following way:
+
+
+    $.fn.popover.Constructor
+
+---
+
+### DATA ACCESSOR
+
+Each plugin stores a copy of the invoked class on an object. This class instance can be accessed directly through jQuery's data API like this:
+
+    $('[rel=popover]').data('popover') instanceof $.fn.popover.Constructor
+
+---
+
+### DATA ATTRIBUTES
+
+Data attributes should take the following form:
+
+- data-{{verb}}={{plugin}} - defines main interaction
+- data-target || href^=# - defined on "control" element (if element controls an element other than self)
+- data-{{noun}} - defines class instance options
+
+examples:
+
+    // control other targets
+    data-toggle="modal" data-target="#foo"
+    data-toggle="collapse" data-target="#foo" data-parent="#bar"
+
+    // defined on element they control
+    data-spy="scroll"
+
+    data-dismiss="modal"
+    data-dismiss="alert"
+
+    data-toggle="dropdown"
+
+    data-toggle="button"
+    data-toggle="buttons-checkbox"
+    data-toggle="buttons-radio"

docs/likebutton/docs/assets/js/application.js

@@ -0,0 +1,184 @@
+// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
+// IT'S ALL JUST JUNK FOR OUR DOCS!
+// ++++++++++++++++++++++++++++++++++++++++++
+
+!function ($) {
+
+  $(function(){
+
+    // Disable certain links in docs
+    $('section [href^=#]').click(function (e) {
+      e.preventDefault()
+    })
+
+    // make code pretty
+    window.prettyPrint && prettyPrint()
+
+    // add-ons
+    $('.add-on :checkbox').on('click', function () {
+      var $this = $(this)
+        , method = $this.attr('checked') ? 'addClass' : 'removeClass'
+      $(this).parents('.add-on')[method]('active')
+    })
+
+    // position static twipsies for components page
+    if ($(".twipsies a").length) {
+      $(window).on('load resize', function () {
+        $(".twipsies a").each(function () {
+          $(this)
+            .tooltip({
+              placement: $(this).attr('title')
+            , trigger: 'manual'
+            })
+            .tooltip('show')
+          })
+      })
+    }
+
+    // add tipsies to grid for scaffolding
+    if ($('#grid-system').length) {
+      $('#grid-system').tooltip({
+          selector: '.show-grid > div'
+        , title: function () { return $(this).width() + 'px' }
+      })
+    }
+
+    // fix sub nav on scroll
+    var $win = $(window)
+      , $nav = $('.subnav')
+      , navTop = $('.subnav').length && $('.subnav').offset().top - 40
+      , isFixed = 0
+
+    processScroll()
+
+    // hack sad times - holdover until rewrite for 2.1
+    $nav.on('click', function () {
+      if (!isFixed) setTimeout(function () {  $win.scrollTop($win.scrollTop() - 47) }, 10)
+    })
+
+    $win.on('scroll', processScroll)
+
+    function processScroll() {
+      var i, scrollTop = $win.scrollTop()
+      if (scrollTop >= navTop && !isFixed) {
+        isFixed = 1
+        $nav.addClass('subnav-fixed')
+      } else if (scrollTop <= navTop && isFixed) {
+        isFixed = 0
+        $nav.removeClass('subnav-fixed')
+      }
+    }
+
+    // tooltip demo
+    $('.tooltip-demo.well').tooltip({
+      selector: "a[rel=tooltip]"
+    })
+
+    $('.tooltip-test').tooltip()
+    $('.popover-test').popover()
+
+    // popover demo
+    $("a[rel=popover]")
+      .popover()
+      .click(function(e) {
+        e.preventDefault()
+      })
+
+    // button state demo
+    $('#fat-btn')
+      .click(function () {
+        var btn = $(this)
+        btn.button('loading')
+        setTimeout(function () {
+          btn.button('reset')
+        }, 3000)
+      })
+
+    // carousel demo
+    $('#myCarousel').carousel()
+
+    // javascript build logic
+    var inputsComponent = $("#components.download input")
+      , inputsPlugin = $("#plugins.download input")
+      , inputsVariables = $("#variables.download input")
+
+    // toggle all plugin checkboxes
+    $('#components.download .toggle-all').on('click', function (e) {
+      e.preventDefault()
+      inputsComponent.attr('checked', !inputsComponent.is(':checked'))
+    })
+
+    $('#plugins.download .toggle-all').on('click', function (e) {
+      e.preventDefault()
+      inputsPlugin.attr('checked', !inputsPlugin.is(':checked'))
+    })
+
+    $('#variables.download .toggle-all').on('click', function (e) {
+      e.preventDefault()
+      inputsVariables.val('')
+    })
+
+    // request built javascript
+    $('.download-btn').on('click', function () {
+
+      var css = $("#components.download input:checked")
+            .map(function () { return this.value })
+            .toArray()
+        , js = $("#plugins.download input:checked")
+            .map(function () { return this.value })
+            .toArray()
+        , vars = {}
+        , img = ['glyphicons-halflings.png', 'glyphicons-halflings-white.png']
+
+    $("#variables.download input")
+      .each(function () {
+        $(this).val() && (vars[ $(this).prev().text() ] = $(this).val())
+      })
+
+      $.ajax({
+        type: 'POST'
+      , url: /\?dev/.test(window.location) ? 'http://localhost:3000' : 'http://bootstrap.herokuapp.com'
+      , dataType: 'jsonpi'
+      , params: {
+          js: js
+        , css: css
+        , vars: vars
+        , img: img
+      }
+      })
+    })
+  })
+
+// Modified from the original jsonpi https://github.com/benvinegar/jquery-jsonpi
+$.ajaxTransport('jsonpi', function(opts, originalOptions, jqXHR) {
+  var url = opts.url;
+
+  return {
+    send: function(_, completeCallback) {
+      var name = 'jQuery_iframe_' + jQuery.now()
+        , iframe, form
+
+      iframe = $('<iframe>')
+        .attr('name', name)
+        .appendTo('head')
+
+      form = $('<form>')
+        .attr('method', opts.type) // GET or POST
+        .attr('action', url)
+        .attr('target', name)
+
+      $.each(opts.params, function(k, v) {
+
+        $('<input>')
+          .attr('type', 'hidden')
+          .attr('name', k)
+          .attr('value', typeof v == 'string' ? v : JSON.stringify(v))
+          .appendTo(form)
+      })
+
+      form.appendTo('body').submit()
+    }
+  }
+})
+
+}(window.jQuery)

docs/likebutton/docs/assets/js/bootstrap-alert.js

@@ -0,0 +1,90 @@
+/* ==========================================================
+ * bootstrap-alert.js v2.0.4
+ * http://twitter.github.com/bootstrap/javascript.html#alerts
+ * ==========================================================
+ * Copyright 2012 Twitter, Inc.
+ *
+ * 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.
+ * ========================================================== */
+
+
+!function ($) {
+
+  "use strict"; // jshint ;_;
+
+
+ /* ALERT CLASS DEFINITION
+  * ====================== */
+
+  var dismiss = '[data-dismiss="alert"]'
+    , Alert = function (el) {
+        $(el).on('click', dismiss, this.close)
+      }
+
+  Alert.prototype.close = function (e) {
+    var $this = $(this)
+      , selector = $this.attr('data-target')
+      , $parent
+
+    if (!selector) {
+      selector = $this.attr('href')
+      selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
+    }
+
+    $parent = $(selector)
+
+    e && e.preventDefault()
+
+    $parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent())
+
+    $parent.trigger(e = $.Event('close'))
+
+    if (e.isDefaultPrevented()) return
+
+    $parent.removeClass('in')
+
+    function removeElement() {
+      $parent
+        .trigger('closed')
+        .remove()
+    }
+
+    $.support.transition && $parent.hasClass('fade') ?
+      $parent.on($.support.transition.end, removeElement) :
+      removeElement()
+  }
+
+
+ /* ALERT PLUGIN DEFINITION
+  * ======================= */
+
+  $.fn.alert = function (option) {
+    return this.each(function () {
+      var $this = $(this)
+        , data = $this.data('alert')
+      if (!data) $this.data('alert', (data = new Alert(this)))
+      if (typeof option == 'string') data[option].call($this)
+    })
+  }
+
+  $.fn.alert.Constructor = Alert
+
+
+ /* ALERT DATA-API
+  * ============== */
+
+  $(function () {
+    $('body').on('click.alert.data-api', dismiss, Alert.prototype.close)
+  })
+
+}(window.jQuery);

docs/likebutton/docs/assets/js/bootstrap-button.js

@@ -0,0 +1,96 @@
+/* ============================================================
+ * bootstrap-button.js v2.0.4
+ * http://twitter.github.com/bootstrap/javascript.html#buttons
+ * ============================================================
+ * Copyright 2012 Twitter, Inc.
+ *
+ * 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.
+ * ============================================================ */
+
+
+!function ($) {
+
+  "use strict"; // jshint ;_;
+
+
+ /* BUTTON PUBLIC CLASS DEFINITION
+  * ============================== */
+
+  var Button = function (element, options) {
+    this.$element = $(element)
+    this.options = $.extend({}, $.fn.button.defaults, options)
+  }
+
+  Button.prototype.setState = function (state) {
+    var d = 'disabled'
+      , $el = this.$element
+      , data = $el.data()
+      , val = $el.is('input') ? 'val' : 'html'
+
+    state = state + 'Text'
+    data.resetText || $el.data('resetText', $el[val]())
+
+    $el[val](data[state] || this.options[state])
+
+    // push to event loop to allow forms to submit
+    setTimeout(function () {
+      state == 'loadingText' ?
+        $el.addClass(d).attr(d, d) :
+        $el.removeClass(d).removeAttr(d)
+    }, 0)
+  }
+
+  Button.prototype.toggle = function () {
+    var $parent = this.$element.parent('[data-toggle="buttons-radio"]')
+
+    $parent && $parent
+      .find('.active')
+      .removeClass('active')
+
+    this.$element.toggleClass('active')
+  }
+
+
+ /* BUTTON PLUGIN DEFINITION
+  * ======================== */
+
+  $.fn.button = function (option) {
+    return this.each(function () {
+      var $this = $(this)
+        , data = $this.data('button')
+        , options = typeof option == 'object' && option
+      if (!data) $this.data('button', (data = new Button(this, options)))
+      if (option == 'toggle') data.toggle()
+      else if (option) data.setState(option)
+    })
+  }
+
+  $.fn.button.defaults = {
+    loadingText: 'loading...'
+  }
+
+  $.fn.button.Constructor = Button
+
+
+ /* BUTTON DATA-API
+  * =============== */
+
+  $(function () {
+    $('body').on('click.button.data-api', '[data-toggle^=button]', function ( e ) {
+      var $btn = $(e.target)
+      if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
+      $btn.button('toggle')
+    })
+  })
+
+}(window.jQuery);

docs/likebutton/docs/assets/js/bootstrap-carousel.js

@@ -0,0 +1,169 @@
+/* ==========================================================
+ * bootstrap-carousel.js v2.0.4
+ * http://twitter.github.com/bootstrap/javascript.html#carousel
+ * ==========================================================
+ * Copyright 2012 Twitter, Inc.
+ *
+ * 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.
+ * ========================================================== */
+
+
+!function ($) {
+
+  "use strict"; // jshint ;_;
+
+
+ /* CAROUSEL CLASS DEFINITION
+  * ========================= */
+
+  var Carousel = function (element, options) {
+    this.$element = $(element)
+    this.options = options
+    this.options.slide && this.slide(this.options.slide)
+    this.options.pause == 'hover' && this.$element
+      .on('mouseenter', $.proxy(this.pause, this))
+      .on('mouseleave', $.proxy(this.cycle, this))
+  }
+
+  Carousel.prototype = {
+
+    cycle: function (e) {
+      if (!e) this.paused = false
+      this.options.interval
+        && !this.paused
+        && (this.interval = setInterval($.proxy(this.next, this), this.options.interval))
+      return this
+    }
+
+  , to: function (pos) {
+      var $active = this.$element.find('.active')
+        , children = $active.parent().children()
+        , activePos = children.index($active)
+        , that = this
+
+      if (pos > (children.length - 1) || pos < 0) return
+
+      if (this.sliding) {
+        return this.$element.one('slid', function () {
+          that.to(pos)
+        })
+      }
+
+      if (activePos == pos) {
+        return this.pause().cycle()
+      }
+
+      return this.slide(pos > activePos ? 'next' : 'prev', $(children[pos]))
+    }
+
+  , pause: function (e) {
+      if (!e) this.paused = true
+      clearInterval(this.interval)
+      this.interval = null
+      return this
+    }
+
+  , next: function () {
+      if (this.sliding) return
+      return this.slide('next')
+    }
+
+  , prev: function () {
+      if (this.sliding) return
+      return this.slide('prev')
+    }
+
+  , slide: function (type, next) {
+      var $active = this.$element.find('.active')
+        , $next = next || $active[type]()
+        , isCycling = this.interval
+        , direction = type == 'next' ? 'left' : 'right'
+        , fallback  = type == 'next' ? 'first' : 'last'
+        , that = this
+        , e = $.Event('slide')
+
+      this.sliding = true
+
+      isCycling && this.pause()
+
+      $next = $next.length ? $next : this.$element.find('.item')[fallback]()
+
+      if ($next.hasClass('active')) return
+
+      if ($.support.transition && this.$element.hasClass('slide')) {
+        this.$element.trigger(e)
+        if (e.isDefaultPrevented()) return
+        $next.addClass(type)
+        $next[0].offsetWidth // force reflow
+        $active.addClass(direction)
+        $next.addClass(direction)
+        this.$element.one($.support.transition.end, function () {
+          $next.removeClass([type, direction].join(' ')).addClass('active')
+          $active.removeClass(['active', direction].join(' '))
+          that.sliding = false
+          setTimeout(function () { that.$element.trigger('slid') }, 0)
+        })
+      } else {
+        this.$element.trigger(e)
+        if (e.isDefaultPrevented()) return
+        $active.removeClass('active')
+        $next.addClass('active')
+        this.sliding = false
+        this.$element.trigger('slid')
+      }
+
+      isCycling && this.cycle()
+
+      return this
+    }
+
+  }
+
+
+ /* CAROUSEL PLUGIN DEFINITION
+  * ========================== */
+
+  $.fn.carousel = function (option) {
+    return this.each(function () {
+      var $this = $(this)
+        , data = $this.data('carousel')
+        , options = $.extend({}, $.fn.carousel.defaults, typeof option == 'object' && option)
+      if (!data) $this.data('carousel', (data = new Carousel(this, options)))
+      if (typeof option == 'number') data.to(option)
+      else if (typeof option == 'string' || (option = options.slide)) data[option]()
+      else if (options.interval) data.cycle()
+    })
+  }
+
+  $.fn.carousel.defaults = {
+    interval: 5000
+  , pause: 'hover'
+  }
+
+  $.fn.carousel.Constructor = Carousel
+
+
+ /* CAROUSEL DATA-API
+  * ================= */
+
+  $(function () {
+    $('body').on('click.carousel.data-api', '[data-slide]', function ( e ) {
+      var $this = $(this), href
+        , $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
+        , options = !$target.data('modal') && $.extend({}, $target.data(), $this.data())
+      $target.carousel(options)
+      e.preventDefault()
+    })
+  })
+
+}(window.jQuery);

docs/likebutton/docs/assets/js/bootstrap-collapse.js

@@ -0,0 +1,157 @@
+/* =============================================================
+ * bootstrap-collapse.js v2.0.4
+ * http://twitter.github.com/bootstrap/javascript.html#collapse
+ * =============================================================
+ * Copyright 2012 Twitter, Inc.
+ *
+ * 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.
+ * ============================================================ */
+
+
+!function ($) {
+
+  "use strict"; // jshint ;_;
+
+
+ /* COLLAPSE PUBLIC CLASS DEFINITION
+  * ================================ */
+
+  var Collapse = function (element, options) {
+    this.$element = $(element)
+    this.options = $.extend({}, $.fn.collapse.defaults, options)
+
+    if (this.options.parent) {
+      this.$parent = $(this.options.parent)
+    }
+
+    this.options.toggle && this.toggle()
+  }
+
+  Collapse.prototype = {
+
+    constructor: Collapse
+
+  , dimension: function () {
+      var hasWidth = this.$element.hasClass('width')
+      return hasWidth ? 'width' : 'height'
+    }
+
+  , show: function () {
+      var dimension
+        , scroll
+        , actives
+        , hasData
+
+      if (this.transitioning) return
+
+      dimension = this.dimension()
+      scroll = $.camelCase(['scroll', dimension].join('-'))
+      actives = this.$parent && this.$parent.find('> .accordion-group > .in')
+
+      if (actives && actives.length) {
+        hasData = actives.data('collapse')
+        if (hasData && hasData.transitioning) return
+        actives.collapse('hide')
+        hasData || actives.data('collapse', null)
+      }
+
+      this.$element[dimension](0)
+      this.transition('addClass', $.Event('show'), 'shown')
+      this.$element[dimension](this.$element[0][scroll])
+    }
+
+  , hide: function () {
+      var dimension
+      if (this.transitioning) return
+      dimension = this.dimension()
+      this.reset(this.$element[dimension]())
+      this.transition('removeClass', $.Event('hide'), 'hidden')
+      this.$element[dimension](0)
+    }
+
+  , reset: function (size) {
+      var dimension = this.dimension()
+
+      this.$element
+        .removeClass('collapse')
+        [dimension](size || 'auto')
+        [0].offsetWidth
+
+      this.$element[size !== null ? 'addClass' : 'removeClass']('collapse')
+
+      return this
+    }
+
+  , transition: function (method, startEvent, completeEvent) {
+      var that = this
+        , complete = function () {
+            if (startEvent.type == 'show') that.reset()
+            that.transitioning = 0
+            that.$element.trigger(completeEvent)
+          }
+
+      this.$element.trigger(startEvent)
+
+      if (startEvent.isDefaultPrevented()) return
+
+      this.transitioning = 1
+
+      this.$element[method]('in')
+
+      $.support.transition && this.$element.hasClass('collapse') ?
+        this.$element.one($.support.transition.end, complete) :
+        complete()
+    }
+
+  , toggle: function () {
+      this[this.$element.hasClass('in') ? 'hide' : 'show']()
+    }
+
+  }
+
+
+ /* COLLAPSIBLE PLUGIN DEFINITION
+  * ============================== */
+
+  $.fn.collapse = function (option) {
+    return this.each(function () {
+      var $this = $(this)
+        , data = $this.data('collapse')
+        , options = typeof option == 'object' && option
+      if (!data) $this.data('collapse', (data = new Collapse(this, options)))
+      if (typeof option == 'string') data[option]()
+    })
+  }
+
+  $.fn.collapse.defaults = {
+    toggle: true
+  }
+
+  $.fn.collapse.Constructor = Collapse
+
+
+ /* COLLAPSIBLE DATA-API
+  * ==================== */
+
+  $(function () {
+    $('body').on('click.collapse.data-api', '[data-toggle=collapse]', function ( e ) {
+      var $this = $(this), href
+        , target = $this.attr('data-target')
+          || e.preventDefault()
+          || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
+        , option = $(target).data('collapse') ? 'toggle' : $this.data()
+      $(target).collapse(option)
+    })
+  })
+
+}(window.jQuery);

docs/likebutton/docs/assets/js/bootstrap-dropdown.js

@@ -0,0 +1,100 @@
+/* ============================================================
+ * bootstrap-dropdown.js v2.0.4
+ * http://twitter.github.com/bootstrap/javascript.html#dropdowns
+ * ============================================================
+ * Copyright 2012 Twitter, Inc.
+ *
+ * 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.
+ * ============================================================ */
+
+
+!function ($) {
+
+  "use strict"; // jshint ;_;
+
+
+ /* DROPDOWN CLASS DEFINITION
+  * ========================= */
+
+  var toggle = '[data-toggle="dropdown"]'
+    , Dropdown = function (element) {
+        var $el = $(element).on('click.dropdown.data-api', this.toggle)
+        $('html').on('click.dropdown.data-api', function () {
+          $el.parent().removeClass('open')
+        })
+      }
+
+  Dropdown.prototype = {
+
+    constructor: Dropdown
+
+  , toggle: function (e) {
+      var $this = $(this)
+        , $parent
+        , selector
+        , isActive
+
+      if ($this.is('.disabled, :disabled')) return
+
+      selector = $this.attr('data-target')
+
+      if (!selector) {
+        selector = $this.attr('href')
+        selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
+      }
+
+      $parent = $(selector)
+      $parent.length || ($parent = $this.parent())
+
+      isActive = $parent.hasClass('open')
+
+      clearMenus()
+
+      if (!isActive) $parent.toggleClass('open')
+
+      return false
+    }
+
+  }
+
+  function clearMenus() {
+    $(toggle).parent().removeClass('open')
+  }
+
+
+  /* DROPDOWN PLUGIN DEFINITION
+   * ========================== */
+
+  $.fn.dropdown = function (option) {
+    return this.each(function () {
+      var $this = $(this)
+        , data = $this.data('dropdown')
+      if (!data) $this.data('dropdown', (data = new Dropdown(this)))
+      if (typeof option == 'string') data[option].call($this)
+    })
+  }
+
+  $.fn.dropdown.Constructor = Dropdown
+
+
+  /* APPLY TO STANDARD DROPDOWN ELEMENTS
+   * =================================== */
+
+  $(function () {
+    $('html').on('click.dropdown.data-api', clearMenus)
+    $('body')
+      .on('click.dropdown', '.dropdown form', function (e) { e.stopPropagation() })
+      .on('click.dropdown.data-api', toggle, Dropdown.prototype.toggle)
+  })
+
+}(window.jQuery);

docs/likebutton/docs/assets/js/bootstrap-modal.js

@@ -0,0 +1,218 @@
+/* =========================================================
+ * bootstrap-modal.js v2.0.4
+ * http://twitter.github.com/bootstrap/javascript.html#modals
+ * =========================================================
+ * Copyright 2012 Twitter, Inc.
+ *
+ * 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.
+ * ========================================================= */
+
+
+!function ($) {
+
+  "use strict"; // jshint ;_;
+
+
+ /* MODAL CLASS DEFINITION
+  * ====================== */
+
+  var Modal = function (content, options) {
+    this.options = options
+    this.$element = $(content)
+      .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this))
+  }
+
+  Modal.prototype = {
+
+      constructor: Modal
+
+    , toggle: function () {
+        return this[!this.isShown ? 'show' : 'hide']()
+      }
+
+    , show: function () {
+        var that = this
+          , e = $.Event('show')
+
+        this.$element.trigger(e)
+
+        if (this.isShown || e.isDefaultPrevented()) return
+
+        $('body').addClass('modal-open')
+
+        this.isShown = true
+
+        escape.call(this)
+        backdrop.call(this, function () {
+          var transition = $.support.transition && that.$element.hasClass('fade')
+
+          if (!that.$element.parent().length) {
+            that.$element.appendTo(document.body) //don't move modals dom position
+          }
+
+          that.$element
+            .show()
+
+          if (transition) {
+            that.$element[0].offsetWidth // force reflow
+          }
+
+          that.$element.addClass('in')
+
+          transition ?
+            that.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) :
+            that.$element.trigger('shown')
+
+        })
+      }
+
+    , hide: function (e) {
+        e && e.preventDefault()
+
+        var that = this
+
+        e = $.Event('hide')
+
+        this.$element.trigger(e)
+
+        if (!this.isShown || e.isDefaultPrevented()) return
+
+        this.isShown = false
+
+        $('body').removeClass('modal-open')
+
+        escape.call(this)
+
+        this.$element.removeClass('in')
+
+        $.support.transition && this.$element.hasClass('fade') ?
+          hideWithTransition.call(this) :
+          hideModal.call(this)
+      }
+
+  }
+
+
+ /* MODAL PRIVATE METHODS
+  * ===================== */
+
+  function hideWithTransition() {
+    var that = this
+      , timeout = setTimeout(function () {
+          that.$element.off($.support.transition.end)
+          hideModal.call(that)
+        }, 500)
+
+    this.$element.one($.support.transition.end, function () {
+      clearTimeout(timeout)
+      hideModal.call(that)
+    })
+  }
+
+  function hideModal(that) {
+    this.$element
+      .hide()
+      .trigger('hidden')
+
+    backdrop.call(this)
+  }
+
+  function backdrop(callback) {
+    var that = this
+      , animate = this.$element.hasClass('fade') ? 'fade' : ''
+
+    if (this.isShown && this.options.backdrop) {
+      var doAnimate = $.support.transition && animate
+
+      this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
+        .appendTo(document.body)
+
+      if (this.options.backdrop != 'static') {
+        this.$backdrop.click($.proxy(this.hide, this))
+      }
+
+      if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
+
+      this.$backdrop.addClass('in')
+
+      doAnimate ?
+        this.$backdrop.one($.support.transition.end, callback) :
+        callback()
+
+    } else if (!this.isShown && this.$backdrop) {
+      this.$backdrop.removeClass('in')
+
+      $.support.transition && this.$element.hasClass('fade')?
+        this.$backdrop.one($.support.transition.end, $.proxy(removeBackdrop, this)) :
+        removeBackdrop.call(this)
+
+    } else if (callback) {
+      callback()
+    }
+  }
+
+  function removeBackdrop() {
+    this.$backdrop.remove()
+    this.$backdrop = null
+  }
+
+  function escape() {
+    var that = this
+    if (this.isShown && this.options.keyboard) {
+      $(document).on('keyup.dismiss.modal', function ( e ) {
+        e.which == 27 && that.hide()
+      })
+    } else if (!this.isShown) {
+      $(document).off('keyup.dismiss.modal')
+    }
+  }
+
+
+ /* MODAL PLUGIN DEFINITION
+  * ======================= */
+
+  $.fn.modal = function (option) {
+    return this.each(function () {
+      var $this = $(this)
+        , data = $this.data('modal')
+        , options = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object' && option)
+      if (!data) $this.data('modal', (data = new Modal(this, options)))
+      if (typeof option == 'string') data[option]()
+      else if (options.show) data.show()
+    })
+  }
+
+  $.fn.modal.defaults = {
+      backdrop: true
+    , keyboard: true
+    , show: true
+  }
+
+  $.fn.modal.Constructor = Modal
+
+
+ /* MODAL DATA-API
+  * ============== */
+
+  $(function () {
+    $('body').on('click.modal.data-api', '[data-toggle="modal"]', function ( e ) {
+      var $this = $(this), href
+        , $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
+        , option = $target.data('modal') ? 'toggle' : $.extend({}, $target.data(), $this.data())
+
+      e.preventDefault()
+      $target.modal(option)
+    })
+  })
+
+}(window.jQuery);

docs/likebutton/docs/assets/js/bootstrap-popover.js

@@ -0,0 +1,98 @@
+/* ===========================================================
+ * bootstrap-popover.js v2.0.4
+ * http://twitter.github.com/bootstrap/javascript.html#popovers
+ * ===========================================================
+ * Copyright 2012 Twitter, Inc.
+ *
+ * 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.
+ * =========================================================== */
+
+
+!function ($) {
+
+  "use strict"; // jshint ;_;
+
+
+ /* POPOVER PUBLIC CLASS DEFINITION
+  * =============================== */
+
+  var Popover = function ( element, options ) {
+    this.init('popover', element, options)
+  }
+
+
+  /* NOTE: POPOVER EXTENDS BOOTSTRAP-TOOLTIP.js
+     ========================================== */
+
+  Popover.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype, {
+
+    constructor: Popover
+
+  , setContent: function () {
+      var $tip = this.tip()
+        , title = this.getTitle()
+        , content = this.getContent()
+
+      $tip.find('.popover-title')[this.isHTML(title) ? 'html' : 'text'](title)
+      $tip.find('.popover-content > *')[this.isHTML(content) ? 'html' : 'text'](content)
+
+      $tip.removeClass('fade top bottom left right in')
+    }
+
+  , hasContent: function () {
+      return this.getTitle() || this.getContent()
+    }
+
+  , getContent: function () {
+      var content
+        , $e = this.$element
+        , o = this.options
+
+      content = $e.attr('data-content')
+        || (typeof o.content == 'function' ? o.content.call($e[0]) :  o.content)
+
+      return content
+    }
+
+  , tip: function () {
+      if (!this.$tip) {
+        this.$tip = $(this.options.template)
+      }
+      return this.$tip
+    }
+
+  })
+
+
+ /* POPOVER PLUGIN DEFINITION
+  * ======================= */
+
+  $.fn.popover = function (option) {
+    return this.each(function () {
+      var $this = $(this)
+        , data = $this.data('popover')
+        , options = typeof option == 'object' && option
+      if (!data) $this.data('popover', (data = new Popover(this, options)))
+      if (typeof option == 'string') data[option]()
+    })
+  }
+
+  $.fn.popover.Constructor = Popover
+
+  $.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, {
+    placement: 'right'
+  , content: ''
+  , template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
+  })
+
+}(window.jQuery);

docs/likebutton/docs/assets/js/bootstrap-scrollspy.js

@@ -0,0 +1,151 @@
+/* =============================================================
+ * bootstrap-scrollspy.js v2.0.4
+ * http://twitter.github.com/bootstrap/javascript.html#scrollspy
+ * =============================================================
+ * Copyright 2012 Twitter, Inc.
+ *
+ * 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.
+ * ============================================================== */
+
+
+!function ($) {
+
+  "use strict"; // jshint ;_;
+
+
+  /* SCROLLSPY CLASS DEFINITION
+   * ========================== */
+
+  function ScrollSpy( element, options) {
+    var process = $.proxy(this.process, this)
+      , $element = $(element).is('body') ? $(window) : $(element)
+      , href
+    this.options = $.extend({}, $.fn.scrollspy.defaults, options)
+    this.$scrollElement = $element.on('scroll.scroll.data-api', process)
+    this.selector = (this.options.target
+      || ((href = $(element).attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
+      || '') + ' .nav li > a'
+    this.$body = $('body')
+    this.refresh()
+    this.process()
+  }
+
+  ScrollSpy.prototype = {
+
+      constructor: ScrollSpy
+
+    , refresh: function () {
+        var self = this
+          , $targets
+
+        this.offsets = $([])
+        this.targets = $([])
+
+        $targets = this.$body
+          .find(this.selector)
+          .map(function () {
+            var $el = $(this)
+              , href = $el.data('target') || $el.attr('href')
+              , $href = /^#\w/.test(href) && $(href)
+            return ( $href
+              && href.length
+              && [[ $href.position().top, href ]] ) || null
+          })
+          .sort(function (a, b) { return a[0] - b[0] })
+          .each(function () {
+            self.offsets.push(this[0])
+            self.targets.push(this[1])
+          })
+      }
+
+    , process: function () {
+        var scrollTop = this.$scrollElement.scrollTop() + this.options.offset
+          , scrollHeight = this.$scrollElement[0].scrollHeight || this.$body[0].scrollHeight
+          , maxScroll = scrollHeight - this.$scrollElement.height()
+          , offsets = this.offsets
+          , targets = this.targets
+          , activeTarget = this.activeTarget
+          , i
+
+        if (scrollTop >= maxScroll) {
+          return activeTarget != (i = targets.last()[0])
+            && this.activate ( i )
+        }
+
+        for (i = offsets.length; i--;) {
+          activeTarget != targets[i]
+            && scrollTop >= offsets[i]
+            && (!offsets[i + 1] || scrollTop <= offsets[i + 1])
+            && this.activate( targets[i] )
+        }
+      }
+
+    , activate: function (target) {
+        var active
+          , selector
+
+        this.activeTarget = target
+
+        $(this.selector)
+          .parent('.active')
+          .removeClass('active')
+
+        selector = this.selector
+          + '[data-target="' + target + '"],'
+          + this.selector + '[href="' + target + '"]'
+
+        active = $(selector)
+          .parent('li')
+          .addClass('active')
+
+        if (active.parent('.dropdown-menu'))  {
+          active = active.closest('li.dropdown').addClass('active')
+        }
+
+        active.trigger('activate')
+      }
+
+  }
+
+
+ /* SCROLLSPY PLUGIN DEFINITION
+  * =========================== */
+
+  $.fn.scrollspy = function ( option ) {
+    return this.each(function () {
+      var $this = $(this)
+        , data = $this.data('scrollspy')
+        , options = typeof option == 'object' && option
+      if (!data) $this.data('scrollspy', (data = new ScrollSpy(this, options)))
+      if (typeof option == 'string') data[option]()
+    })
+  }
+
+  $.fn.scrollspy.Constructor = ScrollSpy
+
+  $.fn.scrollspy.defaults = {
+    offset: 10
+  }
+
+
+ /* SCROLLSPY DATA-API
+  * ================== */
+
+  $(function () {
+    $('[data-spy="scroll"]').each(function () {
+      var $spy = $(this)
+      $spy.scrollspy($spy.data())
+    })
+  })
+
+}(window.jQuery);

docs/likebutton/docs/assets/js/bootstrap-tab.js

@@ -0,0 +1,135 @@
+/* ========================================================
+ * bootstrap-tab.js v2.0.4
+ * http://twitter.github.com/bootstrap/javascript.html#tabs
+ * ========================================================
+ * Copyright 2012 Twitter, Inc.
+ *
+ * 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.
+ * ======================================================== */
+
+
+!function ($) {
+
+  "use strict"; // jshint ;_;
+
+
+ /* TAB CLASS DEFINITION
+  * ==================== */
+
+  var Tab = function ( element ) {
+    this.element = $(element)
+  }
+
+  Tab.prototype = {
+
+    constructor: Tab
+
+  , show: function () {
+      var $this = this.element
+        , $ul = $this.closest('ul:not(.dropdown-menu)')
+        , selector = $this.attr('data-target')
+        , previous
+        , $target
+        , e
+
+      if (!selector) {
+        selector = $this.attr('href')
+        selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
+      }
+
+      if ( $this.parent('li').hasClass('active') ) return
+
+      previous = $ul.find('.active a').last()[0]
+
+      e = $.Event('show', {
+        relatedTarget: previous
+      })
+
+      $this.trigger(e)
+
+      if (e.isDefaultPrevented()) return
+
+      $target = $(selector)
+
+      this.activate($this.parent('li'), $ul)
+      this.activate($target, $target.parent(), function () {
+        $this.trigger({
+          type: 'shown'
+        , relatedTarget: previous
+        })
+      })
+    }
+
+  , activate: function ( element, container, callback) {
+      var $active = container.find('> .active')
+        , transition = callback
+            && $.support.transition
+            && $active.hasClass('fade')
+
+      function next() {
+        $active
+          .removeClass('active')
+          .find('> .dropdown-menu > .active')
+          .removeClass('active')
+
+        element.addClass('active')
+
+        if (transition) {
+          element[0].offsetWidth // reflow for transition
+          element.addClass('in')
+        } else {
+          element.removeClass('fade')
+        }
+
+        if ( element.parent('.dropdown-menu') ) {
+          element.closest('li.dropdown').addClass('active')
+        }
+
+        callback && callback()
+      }
+
+      transition ?
+        $active.one($.support.transition.end, next) :
+        next()
+
+      $active.removeClass('in')
+    }
+  }
+
+
+ /* TAB PLUGIN DEFINITION
+  * ===================== */
+
+  $.fn.tab = function ( option ) {
+    return this.each(function () {
+      var $this = $(this)
+        , data = $this.data('tab')
+      if (!data) $this.data('tab', (data = new Tab(this)))
+      if (typeof option == 'string') data[option]()
+    })
+  }
+
+  $.fn.tab.Constructor = Tab
+
+
+ /* TAB DATA-API
+  * ============ */
+
+  $(function () {
+    $('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
+      e.preventDefault()
+      $(this).tab('show')
+    })
+  })
+
+}(window.jQuery);

docs/likebutton/docs/assets/js/bootstrap-tooltip.js

@@ -0,0 +1,275 @@
+/* ===========================================================
+ * bootstrap-tooltip.js v2.0.4
+ * http://twitter.github.com/bootstrap/javascript.html#tooltips
+ * Inspired by the original jQuery.tipsy by Jason Frame
+ * ===========================================================
+ * Copyright 2012 Twitter, Inc.
+ *
+ * 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.
+ * ========================================================== */
+
+
+!function ($) {
+
+  "use strict"; // jshint ;_;
+
+
+ /* TOOLTIP PUBLIC CLASS DEFINITION
+  * =============================== */
+
+  var Tooltip = function (element, options) {
+    this.init('tooltip', element, options)
+  }
+
+  Tooltip.prototype = {
+
+    constructor: Tooltip
+
+  , init: function (type, element, options) {
+      var eventIn
+        , eventOut
+
+      this.type = type
+      this.$element = $(element)
+      this.options = this.getOptions(options)
+      this.enabled = true
+
+      if (this.options.trigger != 'manual') {
+        eventIn  = this.options.trigger == 'hover' ? 'mouseenter' : 'focus'
+        eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur'
+        this.$element.on(eventIn, this.options.selector, $.proxy(this.enter, this))
+        this.$element.on(eventOut, this.options.selector, $.proxy(this.leave, this))
+      }
+
+      this.options.selector ?
+        (this._options = $.extend({}, this.options, { trigger: 'manual', selector: '' })) :
+        this.fixTitle()
+    }
+
+  , getOptions: function (options) {
+      options = $.extend({}, $.fn[this.type].defaults, options, this.$element.data())
+
+      if (options.delay && typeof options.delay == 'number') {
+        options.delay = {
+          show: options.delay
+        , hide: options.delay
+        }
+      }
+
+      return options
+    }
+
+  , enter: function (e) {
+      var self = $(e.currentTarget)[this.type](this._options).data(this.type)
+
+      if (!self.options.delay || !self.options.delay.show) return self.show()
+
+      clearTimeout(this.timeout)
+      self.hoverState = 'in'
+      this.timeout = setTimeout(function() {
+        if (self.hoverState == 'in') self.show()
+      }, self.options.delay.show)
+    }
+
+  , leave: function (e) {
+      var self = $(e.currentTarget)[this.type](this._options).data(this.type)
+
+      if (this.timeout) clearTimeout(this.timeout)
+      if (!self.options.delay || !self.options.delay.hide) return self.hide()
+
+      self.hoverState = 'out'
+      this.timeout = setTimeout(function() {
+        if (self.hoverState == 'out') self.hide()
+      }, self.options.delay.hide)
+    }
+
+  , show: function () {
+      var $tip
+        , inside
+        , pos
+        , actualWidth
+        , actualHeight
+        , placement
+        , tp
+
+      if (this.hasContent() && this.enabled) {
+        $tip = this.tip()
+        this.setContent()
+
+        if (this.options.animation) {
+          $tip.addClass('fade')
+        }
+
+        placement = typeof this.options.placement == 'function' ?
+          this.options.placement.call(this, $tip[0], this.$element[0]) :
+          this.options.placement
+
+        inside = /in/.test(placement)
+
+        $tip
+          .remove()
+          .css({ top: 0, left: 0, display: 'block' })
+          .appendTo(inside ? this.$element : document.body)
+
+        pos = this.getPosition(inside)
+
+        actualWidth = $tip[0].offsetWidth
+        actualHeight = $tip[0].offsetHeight
+
+        switch (inside ? placement.split(' ')[1] : placement) {
+          case 'bottom':
+            tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}
+            break
+          case 'top':
+            tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}
+            break
+          case 'left':
+            tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}
+            break
+          case 'right':
+            tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}
+            break
+        }
+
+        $tip
+          .css(tp)
+          .addClass(placement)
+          .addClass('in')
+      }
+    }
+
+  , isHTML: function(text) {
+      // html string detection logic adapted from jQuery
+      return typeof text != 'string'
+        || ( text.charAt(0) === "<"
+          && text.charAt( text.length - 1 ) === ">"
+          && text.length >= 3
+        ) || /^(?:[^<]*<[\w\W]+>[^>]*$)/.exec(text)
+    }
+
+  , setContent: function () {
+      var $tip = this.tip()
+        , title = this.getTitle()
+
+      $tip.find('.tooltip-inner')[this.isHTML(title) ? 'html' : 'text'](title)
+      $tip.removeClass('fade in top bottom left right')
+    }
+
+  , hide: function () {
+      var that = this
+        , $tip = this.tip()
+
+      $tip.removeClass('in')
+
+      function removeWithAnimation() {
+        var timeout = setTimeout(function () {
+          $tip.off($.support.transition.end).remove()
+        }, 500)
+
+        $tip.one($.support.transition.end, function () {
+          clearTimeout(timeout)
+          $tip.remove()
+        })
+      }
+
+      $.support.transition && this.$tip.hasClass('fade') ?
+        removeWithAnimation() :
+        $tip.remove()
+    }
+
+  , fixTitle: function () {
+      var $e = this.$element
+      if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') {
+        $e.attr('data-original-title', $e.attr('title') || '').removeAttr('title')
+      }
+    }
+
+  , hasContent: function () {
+      return this.getTitle()
+    }
+
+  , getPosition: function (inside) {
+      return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), {
+        width: this.$element[0].offsetWidth
+      , height: this.$element[0].offsetHeight
+      })
+    }
+
+  , getTitle: function () {
+      var title
+        , $e = this.$element
+        , o = this.options
+
+      title = $e.attr('data-original-title')
+        || (typeof o.title == 'function' ? o.title.call($e[0]) :  o.title)
+
+      return title
+    }
+
+  , tip: function () {
+      return this.$tip = this.$tip || $(this.options.template)
+    }
+
+  , validate: function () {
+      if (!this.$element[0].parentNode) {
+        this.hide()
+        this.$element = null
+        this.options = null
+      }
+    }
+
+  , enable: function () {
+      this.enabled = true
+    }
+
+  , disable: function () {
+      this.enabled = false
+    }
+
+  , toggleEnabled: function () {
+      this.enabled = !this.enabled
+    }
+
+  , toggle: function () {
+      this[this.tip().hasClass('in') ? 'hide' : 'show']()
+    }
+
+  }
+
+
+ /* TOOLTIP PLUGIN DEFINITION
+  * ========================= */
+
+  $.fn.tooltip = function ( option ) {
+    return this.each(function () {
+      var $this = $(this)
+        , data = $this.data('tooltip')
+        , options = typeof option == 'object' && option
+      if (!data) $this.data('tooltip', (data = new Tooltip(this, options)))
+      if (typeof option == 'string') data[option]()
+    })
+  }
+
+  $.fn.tooltip.Constructor = Tooltip
+
+  $.fn.tooltip.defaults = {
+    animation: true
+  , placement: 'top'
+  , selector: false
+  , template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
+  , trigger: 'hover'
+  , title: ''
+  , delay: 0
+  }
+
+}(window.jQuery);

docs/likebutton/docs/assets/js/bootstrap-transition.js

@@ -0,0 +1,61 @@
+/* ===================================================
+ * bootstrap-transition.js v2.0.4
+ * http://twitter.github.com/bootstrap/javascript.html#transitions
+ * ===================================================
+ * Copyright 2012 Twitter, Inc.
+ *
+ * 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.
+ * ========================================================== */
+
+
+!function ($) {
+
+  $(function () {
+
+    "use strict"; // jshint ;_;
+
+
+    /* CSS TRANSITION SUPPORT (http://www.modernizr.com/)
+     * ======================================================= */
+
+    $.support.transition = (function () {
+
+      var transitionEnd = (function () {
+
+        var el = document.createElement('bootstrap')
+          , transEndEventNames = {
+               'WebkitTransition' : 'webkitTransitionEnd'
+            ,  'MozTransition'    : 'transitionend'
+            ,  'OTransition'      : 'oTransitionEnd'
+            ,  'msTransition'     : 'MSTransitionEnd'
+            ,  'transition'       : 'transitionend'
+            }
+          , name
+
+        for (name in transEndEventNames){
+          if (el.style[name] !== undefined) {
+            return transEndEventNames[name]
+          }
+        }
+
+      }())
+
+      return transitionEnd && {
+        end: transitionEnd
+      }
+
+    })()
+
+  })
+
+}(window.jQuery);

docs/likebutton/docs/assets/js/bootstrap-typeahead.js

@@ -0,0 +1,285 @@
+/* =============================================================
+ * bootstrap-typeahead.js v2.0.4
+ * http://twitter.github.com/bootstrap/javascript.html#typeahead
+ * =============================================================
+ * Copyright 2012 Twitter, Inc.
+ *
+ * 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.
+ * ============================================================ */
+
+
+!function($){
+
+  "use strict"; // jshint ;_;
+
+
+ /* TYPEAHEAD PUBLIC CLASS DEFINITION
+  * ================================= */
+
+  var Typeahead = function (element, options) {
+    this.$element = $(element)
+    this.options = $.extend({}, $.fn.typeahead.defaults, options)
+    this.matcher = this.options.matcher || this.matcher
+    this.sorter = this.options.sorter || this.sorter
+    this.highlighter = this.options.highlighter || this.highlighter
+    this.updater = this.options.updater || this.updater
+    this.$menu = $(this.options.menu).appendTo('body')
+    this.source = this.options.source
+    this.shown = false
+    this.listen()
+  }
+
+  Typeahead.prototype = {
+
+    constructor: Typeahead
+
+  , select: function () {
+      var val = this.$menu.find('.active').attr('data-value')
+      this.$element
+        .val(this.updater(val))
+        .change()
+      return this.hide()
+    }
+
+  , updater: function (item) {
+      return item
+    }
+
+  , show: function () {
+      var pos = $.extend({}, this.$element.offset(), {
+        height: this.$element[0].offsetHeight
+      })
+
+      this.$menu.css({
+        top: pos.top + pos.height
+      , left: pos.left
+      })
+
+      this.$menu.show()
+      this.shown = true
+      return this
+    }
+
+  , hide: function () {
+      this.$menu.hide()
+      this.shown = false
+      return this
+    }
+
+  , lookup: function (event) {
+      var that = this
+        , items
+        , q
+
+      this.query = this.$element.val()
+
+      if (!this.query) {
+        return this.shown ? this.hide() : this
+      }
+
+      items = $.grep(this.source, function (item) {
+        return that.matcher(item)
+      })
+
+      items = this.sorter(items)
+
+      if (!items.length) {
+        return this.shown ? this.hide() : this
+      }
+
+      return this.render(items.slice(0, this.options.items)).show()
+    }
+
+  , matcher: function (item) {
+      return ~item.toLowerCase().indexOf(this.query.toLowerCase())
+    }
+
+  , sorter: function (items) {
+      var beginswith = []
+        , caseSensitive = []
+        , caseInsensitive = []
+        , item
+
+      while (item = items.shift()) {
+        if (!item.toLowerCase().indexOf(this.query.toLowerCase())) beginswith.push(item)
+        else if (~item.indexOf(this.query)) caseSensitive.push(item)
+        else caseInsensitive.push(item)
+      }
+
+      return beginswith.concat(caseSensitive, caseInsensitive)
+    }
+
+  , highlighter: function (item) {
+      var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
+      return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
+        return '<strong>' + match + '</strong>'
+      })
+    }
+
+  , render: function (items) {
+      var that = this
+
+      items = $(items).map(function (i, item) {
+        i = $(that.options.item).attr('data-value', item)
+        i.find('a').html(that.highlighter(item))
+        return i[0]
+      })
+
+      items.first().addClass('active')
+      this.$menu.html(items)
+      return this
+    }
+
+  , next: function (event) {
+      var active = this.$menu.find('.active').removeClass('active')
+        , next = active.next()
+
+      if (!next.length) {
+        next = $(this.$menu.find('li')[0])
+      }
+
+      next.addClass('active')
+    }
+
+  , prev: function (event) {
+      var active = this.$menu.find('.active').removeClass('active')
+        , prev = active.prev()
+
+      if (!prev.length) {
+        prev = this.$menu.find('li').last()
+      }
+
+      prev.addClass('active')
+    }
+
+  , listen: function () {
+      this.$element
+        .on('blur',     $.proxy(this.blur, this))
+        .on('keypress', $.proxy(this.keypress, this))
+        .on('keyup',    $.proxy(this.keyup, this))
+
+      if ($.browser.webkit || $.browser.msie) {
+        this.$element.on('keydown', $.proxy(this.keypress, this))
+      }
+
+      this.$menu
+        .on('click', $.proxy(this.click, this))
+        .on('mouseenter', 'li', $.proxy(this.mouseenter, this))
+    }
+
+  , keyup: function (e) {
+      switch(e.keyCode) {
+        case 40: // down arrow
+        case 38: // up arrow
+          break
+
+        case 9: // tab
+        case 13: // enter
+          if (!this.shown) return
+          this.select()
+          break
+
+        case 27: // escape
+          if (!this.shown) return
+          this.hide()
+          break
+
+        default:
+          this.lookup()
+      }
+
+      e.stopPropagation()
+      e.preventDefault()
+  }
+
+  , keypress: function (e) {
+      if (!this.shown) return
+
+      switch(e.keyCode) {
+        case 9: // tab
+        case 13: // enter
+        case 27: // escape
+          e.preventDefault()
+          break
+
+        case 38: // up arrow
+          if (e.type != 'keydown') break
+          e.preventDefault()
+          this.prev()
+          break
+
+        case 40: // down arrow
+          if (e.type != 'keydown') break
+          e.preventDefault()
+          this.next()
+          break
+      }
+
+      e.stopPropagation()
+    }
+
+  , blur: function (e) {
+      var that = this
+      setTimeout(function () { that.hide() }, 150)
+    }
+
+  , click: function (e) {
+      e.stopPropagation()
+      e.preventDefault()
+      this.select()
+    }
+
+  , mouseenter: function (e) {
+      this.$menu.find('.active').removeClass('active')
+      $(e.currentTarget).addClass('active')
+    }
+
+  }
+
+
+  /* TYPEAHEAD PLUGIN DEFINITION
+   * =========================== */
+
+  $.fn.typeahead = function (option) {
+    return this.each(function () {
+      var $this = $(this)
+        , data = $this.data('typeahead')
+        , options = typeof option == 'object' && option
+      if (!data) $this.data('typeahead', (data = new Typeahead(this, options)))
+      if (typeof option == 'string') data[option]()
+    })
+  }
+
+  $.fn.typeahead.defaults = {
+    source: []
+  , items: 8
+  , menu: '<ul class="typeahead dropdown-menu"></ul>'
+  , item: '<li><a href="#"></a></li>'
+  }
+
+  $.fn.typeahead.Constructor = Typeahead
+
+
+ /* TYPEAHEAD DATA-API
+  * ================== */
+
+  $(function () {
+    $('body').on('focus.typeahead.data-api', '[data-provide="typeahead"]', function (e) {
+      var $this = $(this)
+      if ($this.data('typeahead')) return
+      e.preventDefault()
+      $this.typeahead($this.data())
+    })
+  })
+
+}(window.jQuery);

docs/likebutton/docs/assets/js/google-code-prettify/prettify.css

@@ -0,0 +1,115 @@
+/* .com { color: #93a1a1; } */
+/* .lit { color: #195f91; } */
+/* .pun, .opn, .clo { color: #93a1a1; } */
+/* .fun { color: #dc322f; } */
+/* .str, .atv { color: #D14; } */
+/* .kwd, .linenums .tag { color: #1e347b; } */
+/* .typ, .atn, .dec, .var { color: teal; } */
+/* .pln { color: #48484c; } */
+
+/* .prettyprint { */
+/*   padding: 8px; */
+/*   background-color: #f9f9f9; */
+/*   border: 1px solid #e1e1e8; */
+/* } */
+/* .prettyprint.linenums { */
+/*   -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; */
+/*      -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; */
+/*           box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; */
+/* } */
+
+/* /1* Specify class=linenums on a pre to get line numbering *1/ */
+/* ol.linenums { */
+/*   margin: 0 0 0 33px; /1* IE indents via margin-left *1/ */
+/* } */ 
+/* ol.linenums li { */
+/*   padding-left: 12px; */
+/*   color: #bebec5; */
+/*   line-height: 18px; */
+/*   text-shadow: 0 1px 0 #fff; */
+/* } */
+
+
+
+/* Jordow's theme */
+/* .com { */
+/*   color: rgba(90, 117, 200, 1); */
+/* } */
+/* .lit { color: #195f91; } */
+/* .pun, .opn, .clo { color: #90908e; } */
+/* .fun { color: #dc322f; } */
+/* .str, .atv { color: #9a9; } */
+/* .kwd, .linenums .tag { color: rgba(90, 117, 200, 1)} */
+/* .typ, .atn, .dec, .var { color: #b86050; } */
+/* .pln { color: #555550; } */
+
+/* .prettyprint { */
+/*   padding: 8px; */
+/*   background-color: rgb(253,253,253); */
+/*   border: 1px solid #e0e0e7; */
+/* } */
+/* .prettyprint.linenums { */
+/*   -webkit-box-shadow: inset 40px 0 0 #f9f9f9, inset 41px 0 0 #E8E8EE; */
+/*      -moz-box-shadow: inset 40px 0 0 #f9f9f9, inset 41px 0 0 #E8E8EE; */
+/*           box-shadow: inset 40px 0 0 #f9f9f9, inset 41px 0 0 #E8E8EE; */
+/* } */
+
+/* /1* Specify class=linenums on a pre to get line numbering *1/ */
+/* ol.linenums { */
+/*   margin: 0 0 0 33px; /1* IE indents via margin-left *1/ */
+/* } */ 
+/* ol.linenums li { */
+/*   padding-left: 12px; */
+/*   color: #ceced5; */
+/*   line-height: 18px; */
+/*   text-shadow: 0 1px 0 #fff; */
+/* } */
+
+/* code { */
+/*   /*border: 1px solid #E8E8EE;*/ */
+/*   box-sizing: border-box; */
+/*   padding: 1px 2px; */
+/*   background-color: #f7f7f7; */
+/*   color: rgba(90, 117, 200, 1); */
+/*   border: 1px solid #E8E8EE; */
+/* } */
+
+
+/** USE THE YELLOW THEME: */
+/* http://docs.scala-lang.org/sips/completed/scala-2-8-arrays.html */
+.lit { color: #195f91; }
+.pun, .opn, .clo { color: #93a1a1; }
+.fun { color: #dc322f; }
+.str, .atv { color: #268bd2; }
+.kwd, .tag { color: #195f91; }
+.typ, .atn, .dec, .var { color: #CB4B16; }
+.pln { color: #555 /*color: #93a1a1;*/ }
+pre.prettyprint {
+  background: #fefbf3;
+  padding: 9px;
+  border: 1px solid rgba(0,0,0,.2);
+  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1);
+  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.1);
+  box-shadow: 0 1px 2px rgba(0,0,0,.1);
+}
+.com {
+  color: rgb(110, 130, 117);
+}
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums {
+  margin: 0 0 0 33px; /* IE indents via margin-left */
+} 
+ol.linenums li {
+  padding-left: 12px;
+  color: #ceced5;
+  line-height: 18px;
+  text-shadow: 0 1px 0 #fff;
+}
+
+
+/* Alternate shading for lines */
+li.L1, li.L3, li.L5, li.L7, li.L9 {  }
+
+
+

docs/likebutton/docs/assets/js/google-code-prettify/prettify.js

@@ -0,0 +1,28 @@
+var q=null;window.PR_SHOULD_USE_CONTINUATION=!0;
+(function(){function L(a){function m(a){var f=a.charCodeAt(0);if(f!==92)return f;var b=a.charAt(1);return(f=r[b])?f:"0"<=b&&b<="7"?parseInt(a.substring(1),8):b==="u"||b==="x"?parseInt(a.substring(2),16):a.charCodeAt(1)}function e(a){if(a<32)return(a<16?"\\x0":"\\x")+a.toString(16);a=String.fromCharCode(a);if(a==="\\"||a==="-"||a==="["||a==="]")a="\\"+a;return a}function h(a){for(var f=a.substring(1,a.length-1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g),a=
+[],b=[],o=f[0]==="^",c=o?1:0,i=f.length;c<i;++c){var j=f[c];if(/\\[bdsw]/i.test(j))a.push(j);else{var j=m(j),d;c+2<i&&"-"===f[c+1]?(d=m(f[c+2]),c+=2):d=j;b.push([j,d]);d<65||j>122||(d<65||j>90||b.push([Math.max(65,j)|32,Math.min(d,90)|32]),d<97||j>122||b.push([Math.max(97,j)&-33,Math.min(d,122)&-33]))}}b.sort(function(a,f){return a[0]-f[0]||f[1]-a[1]});f=[];j=[NaN,NaN];for(c=0;c<b.length;++c)i=b[c],i[0]<=j[1]+1?j[1]=Math.max(j[1],i[1]):f.push(j=i);b=["["];o&&b.push("^");b.push.apply(b,a);for(c=0;c<
+f.length;++c)i=f[c],b.push(e(i[0])),i[1]>i[0]&&(i[1]+1>i[0]&&b.push("-"),b.push(e(i[1])));b.push("]");return b.join("")}function y(a){for(var f=a.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g),b=f.length,d=[],c=0,i=0;c<b;++c){var j=f[c];j==="("?++i:"\\"===j.charAt(0)&&(j=+j.substring(1))&&j<=i&&(d[j]=-1)}for(c=1;c<d.length;++c)-1===d[c]&&(d[c]=++t);for(i=c=0;c<b;++c)j=f[c],j==="("?(++i,d[i]===void 0&&(f[c]="(?:")):"\\"===j.charAt(0)&&
+(j=+j.substring(1))&&j<=i&&(f[c]="\\"+d[i]);for(i=c=0;c<b;++c)"^"===f[c]&&"^"!==f[c+1]&&(f[c]="");if(a.ignoreCase&&s)for(c=0;c<b;++c)j=f[c],a=j.charAt(0),j.length>=2&&a==="["?f[c]=h(j):a!=="\\"&&(f[c]=j.replace(/[A-Za-z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return f.join("")}for(var t=0,s=!1,l=!1,p=0,d=a.length;p<d;++p){var g=a[p];if(g.ignoreCase)l=!0;else if(/[a-z]/i.test(g.source.replace(/\\u[\da-f]{4}|\\x[\da-f]{2}|\\[^UXux]/gi,""))){s=!0;l=!1;break}}for(var r=
+{b:8,t:9,n:10,v:11,f:12,r:13},n=[],p=0,d=a.length;p<d;++p){g=a[p];if(g.global||g.multiline)throw Error(""+g);n.push("(?:"+y(g)+")")}return RegExp(n.join("|"),l?"gi":"g")}function M(a){function m(a){switch(a.nodeType){case 1:if(e.test(a.className))break;for(var g=a.firstChild;g;g=g.nextSibling)m(g);g=a.nodeName;if("BR"===g||"LI"===g)h[s]="\n",t[s<<1]=y++,t[s++<<1|1]=a;break;case 3:case 4:g=a.nodeValue,g.length&&(g=p?g.replace(/\r\n?/g,"\n"):g.replace(/[\t\n\r ]+/g," "),h[s]=g,t[s<<1]=y,y+=g.length,
+t[s++<<1|1]=a)}}var e=/(?:^|\s)nocode(?:\s|$)/,h=[],y=0,t=[],s=0,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=document.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);m(a);return{a:h.join("").replace(/\n$/,""),c:t}}function B(a,m,e,h){m&&(a={a:m,d:a},e(a),h.push.apply(h,a.e))}function x(a,m){function e(a){for(var l=a.d,p=[l,"pln"],d=0,g=a.a.match(y)||[],r={},n=0,z=g.length;n<z;++n){var f=g[n],b=r[f],o=void 0,c;if(typeof b===
+"string")c=!1;else{var i=h[f.charAt(0)];if(i)o=f.match(i[1]),b=i[0];else{for(c=0;c<t;++c)if(i=m[c],o=f.match(i[1])){b=i[0];break}o||(b="pln")}if((c=b.length>=5&&"lang-"===b.substring(0,5))&&!(o&&typeof o[1]==="string"))c=!1,b="src";c||(r[f]=b)}i=d;d+=f.length;if(c){c=o[1];var j=f.indexOf(c),k=j+c.length;o[2]&&(k=f.length-o[2].length,j=k-c.length);b=b.substring(5);B(l+i,f.substring(0,j),e,p);B(l+i+j,c,C(b,c),p);B(l+i+k,f.substring(k),e,p)}else p.push(l+i,b)}a.e=p}var h={},y;(function(){for(var e=a.concat(m),
+l=[],p={},d=0,g=e.length;d<g;++d){var r=e[d],n=r[3];if(n)for(var k=n.length;--k>=0;)h[n.charAt(k)]=r;r=r[1];n=""+r;p.hasOwnProperty(n)||(l.push(r),p[n]=q)}l.push(/[\S\s]/);y=L(l)})();var t=m.length;return e}function u(a){var m=[],e=[];a.tripleQuotedStrings?m.push(["str",/^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/,q,"'\""]):a.multiLineStrings?m.push(["str",/^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/,
+q,"'\"`"]):m.push(["str",/^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,q,"\"'"]);a.verbatimStrings&&e.push(["str",/^@"(?:[^"]|"")*(?:"|$)/,q]);var h=a.hashComments;h&&(a.cStyleComments?(h>1?m.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,q,"#"]):m.push(["com",/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\n\r]*)/,q,"#"]),e.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,q])):m.push(["com",/^#[^\n\r]*/,
+q,"#"]));a.cStyleComments&&(e.push(["com",/^\/\/[^\n\r]*/,q]),e.push(["com",/^\/\*[\S\s]*?(?:\*\/|$)/,q]));a.regexLiterals&&e.push(["lang-regex",/^(?:^^\.?|[!+-]|!=|!==|#|%|%=|&|&&|&&=|&=|\(|\*|\*=|\+=|,|-=|->|\/|\/=|:|::|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|[?@[^]|\^=|\^\^|\^\^=|{|\||\|=|\|\||\|\|=|~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\s*(\/(?=[^*/])(?:[^/[\\]|\\[\S\s]|\[(?:[^\\\]]|\\[\S\s])*(?:]|$))+\/)/]);(h=a.types)&&e.push(["typ",h]);a=(""+a.keywords).replace(/^ | $/g,
+"");a.length&&e.push(["kwd",RegExp("^(?:"+a.replace(/[\s,]+/g,"|")+")\\b"),q]);m.push(["pln",/^\s+/,q," \r\n\t\xa0"]);e.push(["lit",/^@[$_a-z][\w$@]*/i,q],["typ",/^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/,q],["pln",/^[$_a-z][\w$@]*/i,q],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,q,"0123456789"],["pln",/^\\[\S\s]?/,q],["pun",/^.[^\s\w"-$'./@\\`]*/,q]);return x(m,e)}function D(a,m){function e(a){switch(a.nodeType){case 1:if(k.test(a.className))break;if("BR"===a.nodeName)h(a),
+a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)e(a);break;case 3:case 4:if(p){var b=a.nodeValue,d=b.match(t);if(d){var c=b.substring(0,d.index);a.nodeValue=c;(b=b.substring(d.index+d[0].length))&&a.parentNode.insertBefore(s.createTextNode(b),a.nextSibling);h(a);c||a.parentNode.removeChild(a)}}}}function h(a){function b(a,d){var e=d?a.cloneNode(!1):a,f=a.parentNode;if(f){var f=b(f,1),g=a.nextSibling;f.appendChild(e);for(var h=g;h;h=g)g=h.nextSibling,f.appendChild(h)}return e}
+for(;!a.nextSibling;)if(a=a.parentNode,!a)return;for(var a=b(a.nextSibling,0),e;(e=a.parentNode)&&e.nodeType===1;)a=e;d.push(a)}var k=/(?:^|\s)nocode(?:\s|$)/,t=/\r\n?|\n/,s=a.ownerDocument,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=s.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);for(l=s.createElement("LI");a.firstChild;)l.appendChild(a.firstChild);for(var d=[l],g=0;g<d.length;++g)e(d[g]);m===(m|0)&&d[0].setAttribute("value",
+m);var r=s.createElement("OL");r.className="linenums";for(var n=Math.max(0,m-1|0)||0,g=0,z=d.length;g<z;++g)l=d[g],l.className="L"+(g+n)%10,l.firstChild||l.appendChild(s.createTextNode("\xa0")),r.appendChild(l);a.appendChild(r)}function k(a,m){for(var e=m.length;--e>=0;){var h=m[e];A.hasOwnProperty(h)?window.console&&console.warn("cannot override language handler %s",h):A[h]=a}}function C(a,m){if(!a||!A.hasOwnProperty(a))a=/^\s*</.test(m)?"default-markup":"default-code";return A[a]}function E(a){var m=
+a.g;try{var e=M(a.h),h=e.a;a.a=h;a.c=e.c;a.d=0;C(m,h)(a);var k=/\bMSIE\b/.test(navigator.userAgent),m=/\n/g,t=a.a,s=t.length,e=0,l=a.c,p=l.length,h=0,d=a.e,g=d.length,a=0;d[g]=s;var r,n;for(n=r=0;n<g;)d[n]!==d[n+2]?(d[r++]=d[n++],d[r++]=d[n++]):n+=2;g=r;for(n=r=0;n<g;){for(var z=d[n],f=d[n+1],b=n+2;b+2<=g&&d[b+1]===f;)b+=2;d[r++]=z;d[r++]=f;n=b}for(d.length=r;h<p;){var o=l[h+2]||s,c=d[a+2]||s,b=Math.min(o,c),i=l[h+1],j;if(i.nodeType!==1&&(j=t.substring(e,b))){k&&(j=j.replace(m,"\r"));i.nodeValue=
+j;var u=i.ownerDocument,v=u.createElement("SPAN");v.className=d[a+1];var x=i.parentNode;x.replaceChild(v,i);v.appendChild(i);e<o&&(l[h+1]=i=u.createTextNode(t.substring(b,o)),x.insertBefore(i,v.nextSibling))}e=b;e>=o&&(h+=2);e>=c&&(a+=2)}}catch(w){"console"in window&&console.log(w&&w.stack?w.stack:w)}}var v=["break,continue,do,else,for,if,return,while"],w=[[v,"auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"],
+"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],F=[w,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],G=[w,"abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"],
+H=[G,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"],w=[w,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],I=[v,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"],
+J=[v,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],v=[v,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],K=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/,N=/\S/,O=u({keywords:[F,H,w,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END"+
+I,J,v],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),A={};k(O,["default-code"]);k(x([],[["pln",/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",/^<xmp\b[^>]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\S\s]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),
+["default-markup","htm","html","mxml","xhtml","xml","xsl"]);k(x([["pln",/^\s+/,q," \t\r\n"],["atv",/^(?:"[^"]*"?|'[^']*'?)/,q,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/],["pun",/^[/<->]+/],["lang-js",/^on\w+\s*=\s*"([^"]+)"/i],["lang-js",/^on\w+\s*=\s*'([^']+)'/i],["lang-js",/^on\w+\s*=\s*([^\s"'>]+)/i],["lang-css",/^style\s*=\s*"([^"]+)"/i],["lang-css",/^style\s*=\s*'([^']+)'/i],["lang-css",
+/^style\s*=\s*([^\s"'>]+)/i]]),["in.tag"]);k(x([],[["atv",/^[\S\s]+/]]),["uq.val"]);k(u({keywords:F,hashComments:!0,cStyleComments:!0,types:K}),["c","cc","cpp","cxx","cyc","m"]);k(u({keywords:"null,true,false"}),["json"]);k(u({keywords:H,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:K}),["cs"]);k(u({keywords:G,cStyleComments:!0}),["java"]);k(u({keywords:v,hashComments:!0,multiLineStrings:!0}),["bsh","csh","sh"]);k(u({keywords:I,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),
+["cv","py"]);k(u({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["perl","pl","pm"]);k(u({keywords:J,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb"]);k(u({keywords:w,cStyleComments:!0,regexLiterals:!0}),["js"]);k(u({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes",
+hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);k(x([],[["str",/^[\S\s]+/]]),["regex"]);window.prettyPrintOne=function(a,m,e){var h=document.createElement("PRE");h.innerHTML=a;e&&D(h,e);E({g:m,i:e,h:h});return h.innerHTML};window.prettyPrint=function(a){function m(){for(var e=window.PR_SHOULD_USE_CONTINUATION?l.now()+250:Infinity;p<h.length&&l.now()<e;p++){var n=h[p],k=n.className;if(k.indexOf("prettyprint")>=0){var k=k.match(g),f,b;if(b=
+!k){b=n;for(var o=void 0,c=b.firstChild;c;c=c.nextSibling)var i=c.nodeType,o=i===1?o?b:c:i===3?N.test(c.nodeValue)?b:o:o;b=(f=o===b?void 0:o)&&"CODE"===f.tagName}b&&(k=f.className.match(g));k&&(k=k[1]);b=!1;for(o=n.parentNode;o;o=o.parentNode)if((o.tagName==="pre"||o.tagName==="code"||o.tagName==="xmp")&&o.className&&o.className.indexOf("prettyprint")>=0){b=!0;break}b||((b=(b=n.className.match(/\blinenums\b(?::(\d+))?/))?b[1]&&b[1].length?+b[1]:!0:!1)&&D(n,b),d={g:k,h:n,i:b},E(d))}}p<h.length?setTimeout(m,
+250):a&&a()}for(var e=[document.getElementsByTagName("pre"),document.getElementsByTagName("code"),document.getElementsByTagName("xmp")],h=[],k=0;k<e.length;++k)for(var t=0,s=e[k].length;t<s;++t)h.push(e[k][t]);var e=q,l=Date;l.now||(l={now:function(){return+new Date}});var p=0,d,g=/\blang(?:uage)?-([\w.]+)(?!\S)/;m()};window.PR={createSimpleLexer:x,registerLangHandler:k,sourceDecorator:u,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",
+PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ"}})();

docs/likebutton/docs/download.html

@@ -0,0 +1,454 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Download · Twitter Bootstrap</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <!-- Le styles -->
+    <link href="assets/css/bootstrap.css" rel="stylesheet">
+    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
+    <link href="assets/css/docs.css" rel="stylesheet">
+    <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
+
+    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+    <!--[if lt IE 9]>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <!-- Le fav and touch icons -->
+    <link rel="shortcut icon" href="assets/ico/favicon.ico">
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+
+  </head>
+
+  <body data-spy="scroll" data-target=".subnav" data-offset="50">
+
+
+  <!-- Navbar
+    ================================================== -->
+    <div class="navbar navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="brand" href="./index.html">Bootstrap</a>
+          <div class="nav-collapse collapse">
+            <ul class="nav">
+              <li class="">
+                <a href="./index.html">Overview</a>
+              </li>
+              <li class="">
+                <a href="./scaffolding.html">Scaffolding</a>
+              </li>
+              <li class="">
+                <a href="./base-css.html">Base CSS</a>
+              </li>
+              <li class="">
+                <a href="./components.html">Components</a>
+              </li>
+              <li class="">
+                <a href="./javascript.html">Javascript plugins</a>
+              </li>
+              <li class="">
+                <a href="./less.html">Using LESS</a>
+              </li>
+              <li class="divider-vertical"></li>
+              <li class="active">
+                <a href="./download.html">Customize</a>
+              </li>
+              <li class="">
+                <a href="./examples.html">Examples</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="container">
+
+<!-- Masthead
+================================================== -->
+<header class="jumbotron subhead" id="overview">
+  <h1>Customize and download</h1>
+  <p class="lead"><a href="https://github.com/twitter/bootstrap/zipball/master">Download the full repository</a> or customize your entire Bootstrap build by selecting only the components, javascript plugins, and assets you need.</p>
+  <div class="subnav">
+    <ul class="nav nav-pills">
+      <li><a href="#components">1. Choose components</a></li>
+      <li><a href="#plugins">2. Select jQuery plugins</a></li>
+      <li><a href="#variables">3. Customize variables</a></li>
+      <li><a href="#download">4. Download</a></li>
+    </ul>
+  </div>
+</header>
+
+<section class="download" id="components">
+  <div class="page-header">
+    <a class="btn btn-small pull-right toggle-all" href="#">Toggle all</a>
+    <h1>
+      1. Choose components
+      <small>Get just the CSS you need</small>
+    </h1>
+  </div>
+  <div class="row download-builder">
+    <div class="span3">
+      <h3>Scaffolding</h3>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="reset.less"> Normalize and reset</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="scaffolding.less"> Body type and links</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="grid.less"> Grid system</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="layouts.less"> Layouts</label>
+      <h3>Base CSS</h3>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="type.less"> Headings, body, etc</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="code.less"> Code and pre</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="labels-badges.less"> Labels and badges</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="tables.less"> Tables</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="forms.less"> Forms</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="buttons.less"> Buttons</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="sprites.less"> Icons</label>
+    </div><!-- /span -->
+    <div class="span3">
+      <h3>Components</h3>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="button-groups.less"> Button groups and dropdowns</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="navs.less"> Navs, tabs, and pills</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="navbar.less"> Navbar</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="breadcrumbs.less"> Breadcrumbs</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="pagination.less"> Pagination</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="pager.less"> Pager</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="thumbnails.less"> Thumbnails</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="alerts.less"> Alerts</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="progress-bars.less"> Progress bars</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="hero-unit.less"> Hero unit</label>
+    </div><!-- /span -->
+    <div class="span3">
+      <h3>JS Components</h3>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="tooltip.less"> Tooltips</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="popovers.less"> Popovers</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="modals.less"> Modals</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="dropdowns.less"> Dropdowns</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="accordion.less"> Collapse</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="carousel.less"> Carousel</label>
+    </div><!-- /span -->
+    <div class="span3">
+      <h3>Miscellaneous</h3>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="wells.less"> Wells</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="close.less"> Close icon</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> Utilities</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="component-animations.less"> Component animations</label>
+      <h3>Responsive</h3>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-utilities.less"> Visible/hidden classes</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-767px-max.less"> Narrow tablets and below (<767px)</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-768px-979px.less"> Tablets to desktops (767-979px)</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-1200px-min.less"> Large desktops (>1200px)</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-navbar.less"> Responsive navbar</label>
+    </div><!-- /span -->
+  </div><!-- /row -->
+</section>
+
+<section class="download" id="plugins">
+  <div class="page-header">
+    <a class="btn btn-small pull-right toggle-all" href="#">Toggle all</a>
+    <h1>
+      2. Select jQuery plugins
+      <small>Quickly add only the necessary javascript</small>
+    </h1>
+  </div>
+  <div class="row download-builder">
+    <div class="span4">
+      <label class="checkbox">
+        <input type="checkbox" checked="true" value="bootstrap-transition.js">
+        Transitions <small>(required for any animation)</small>
+      </label>
+      <label class="checkbox">
+        <input type="checkbox" checked="true" value="bootstrap-modal.js">
+        Modals
+      </label>
+      <label class="checkbox">
+        <input type="checkbox" checked="true" value="bootstrap-dropdown.js">
+        Dropdowns
+      </label>
+      <label class="checkbox">
+        <input type="checkbox" checked="true" value="bootstrap-scrollspy.js">
+        Scrollspy
+      </label>
+      <label class="checkbox">
+        <input type="checkbox" checked="true" value="bootstrap-tab.js">
+        Togglable tabs
+      </label>
+      <label class="checkbox">
+        <input type="checkbox" checked="true" value="bootstrap-tooltip.js">
+        Tooltips
+      </label>
+    </div><!-- /span -->
+    <div class="span4">
+      <label class="checkbox">
+        <input type="checkbox" checked="true" value="bootstrap-popover.js">
+        Popovers <small>(requires Tooltips)</small>
+      </label>
+      <label class="checkbox">
+        <input type="checkbox" checked="true" value="bootstrap-alert.js">
+        Alert messages
+      </label>
+      <label class="checkbox">
+        <input type="checkbox" checked="true" value="bootstrap-button.js">
+        Buttons
+      </label>
+      <label class="checkbox">
+        <input type="checkbox" checked="true" value="bootstrap-collapse.js">
+        Collapse
+      </label>
+      <label class="checkbox">
+        <input type="checkbox" checked="true" value="bootstrap-carousel.js">
+        Carousel
+      </label>
+      <label class="checkbox">
+        <input type="checkbox" checked="true" value="bootstrap-typeahead.js">
+        Typeahead
+      </label>
+    </div><!-- /span -->
+    <div class="span4">
+      <h4 class="muted">Heads up!</h4>
+      <p class="muted">All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
+    </div><!-- /span -->
+  </div><!-- /row -->
+</section>
+
+
+<section class="download" id="variables">
+  <div class="page-header">
+    <a class="btn btn-small pull-right toggle-all" href="#">Reset to defaults</a>
+    <h1>
+      3. Customize variables
+      <small>Optionally modify Bootstrap without a compiler</small>
+    </h1>
+  </div>
+  <div class="row download-builder">
+    <div class="span3">
+      <h3>Scaffolding</h3>
+      <label>@bodyBackground</label>
+      <input type="text" class="span3" placeholder="@white">
+      <label>@textColor</label>
+      <input type="text" class="span3" placeholder="@grayDark">
+
+      <h3>Links</h3>
+      <label>@linkColor</label>
+      <input type="text" class="span3" placeholder="#08c">
+      <label>@linkColorHover</label>
+      <input type="text" class="span3" placeholder="darken(@linkColor, 15%)">
+      <h3>Colors</h3>
+      <label>@blue</label>
+      <input type="text" class="span3" placeholder="#049cdb">
+      <label>@green</label>
+      <input type="text" class="span3" placeholder="#46a546">
+      <label>@red</label>
+      <input type="text" class="span3" placeholder="#9d261d">
+      <label>@yellow</label>
+      <input type="text" class="span3" placeholder="#ffc40d">
+      <label>@orange</label>
+      <input type="text" class="span3" placeholder="#f89406">
+      <label>@pink</label>
+      <input type="text" class="span3" placeholder="#c3325f">
+      <label>@purple</label>
+      <input type="text" class="span3" placeholder="#7a43b6">
+
+      <h3>Sprites</h3>
+      <label>@iconSpritePath</label>
+      <input type="text" class="span3" placeholder="'../img/glyphicons-halflings.png'">
+      <label>@iconWhiteSpritePath</label>
+      <input type="text" class="span3" placeholder="'../img/glyphicons-halflings-white.png'">
+
+    </div><!-- /span -->
+    <div class="span3">
+      <h3>Grid system</h3>
+      <label>@gridColumns</label>
+      <input type="text" class="span3" placeholder="12">
+      <label>@gridColumnWidth</label>
+      <input type="text" class="span3" placeholder="60px">
+      <label>@gridGutterWidth</label>
+      <input type="text" class="span3" placeholder="20px">
+      <h3>Fluid grid system</h3>
+      <label>@fluidGridColumnWidth</label>
+      <input type="text" class="span3" placeholder="6.382978723%">
+      <label>@fluidGridGutterWidth</label>
+      <input type="text" class="span3" placeholder="2.127659574%">
+
+      <h3>Typography</h3>
+      <label>@sansFontFamily</label>
+      <input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
+      <label>@serifFontFamily</label>
+      <input type="text" class="span3" placeholder="Georgia, 'Times New Roman', Times, serif">
+      <label>@monoFontFamily</label>
+      <input type="text" class="span3" placeholder="Menlo, Monaco, 'Courier New', monospace">
+      <label>@baseFontSize</label>
+      <input type="text" class="span3" placeholder="13px">
+      <label>@baseFontFamily</label>
+      <input type="text" class="span3" placeholder="@sansFontFamily">
+      <label>@baseLineHeight</label>
+      <input type="text" class="span3" placeholder="18px">
+      <label>@altFontFamily</label>
+      <input type="text" class="span3" placeholder="@serifFontFamily">
+      <label>@headingsFontFamily</label>
+      <input type="text" class="span3" placeholder="inherit">
+      <label>@headingsFontWeight</label>
+      <input type="text" class="span3" placeholder="bold">
+      <label>@headingsColor</label>
+      <input type="text" class="span3" placeholder="inherit">
+      <label>@heroUnitBackground</label>
+      <input type="text" class="span3" placeholder="@grayLighter">
+      <label>@heroUnitHeadingColor</label>
+      <input type="text" class="span3" placeholder="inherit">
+      <label>@heroUnitLeadColor</label>
+      <input type="text" class="span3" placeholder="inherit">
+    </div><!-- /span -->
+    <div class="span3">
+      <h3>Tables</h3>
+      <label>@tableBackground</label>
+      <input type="text" class="span3" placeholder="transparent">
+      <label>@tableBackgroundAccent</label>
+      <input type="text" class="span3" placeholder="#f9f9f9">
+      <label>@tableBackgroundHover</label>
+      <input type="text" class="span3" placeholder="#f5f5f5">
+      <label>@tableBorder</label>
+      <input type="text" class="span3" placeholder="#ddd">
+
+      <h3>Navbar</h3>
+      <label>@navbarHeight</label>
+      <input type="text" class="span3" placeholder="40px">
+      <label>@navbarBackground</label>
+      <input type="text" class="span3" placeholder="@grayDarker">
+      <label>@navbarBackgroundHighlight</label>
+      <input type="text" class="span3" placeholder="@grayDark">
+      <label>@navbarText</label>
+      <input type="text" class="span3" placeholder="@grayLight">
+      <label>@navbarBrandColor</label>
+      <input type="text" class="span3" placeholder="@navbarLinkColor">
+      <label>@navbarLinkColor</label>
+      <input type="text" class="span3" placeholder="@grayLight">
+      <label>@navbarLinkColorHover</label>
+      <input type="text" class="span3" placeholder="@white">
+      <label>@navbarLinkColorActive</label>
+      <input type="text" class="span3" placeholder="@navbarLinkColorHover">
+      <label>@navbarLinkBackgroundHover</label>
+      <input type="text" class="span3" placeholder="transparent">
+      <label>@navbarLinkBackgroundActive</label>
+      <input type="text" class="span3" placeholder="@navbarBackground">
+      <label>@navbarSearchBackground</label>
+      <input type="text" class="span3" placeholder="lighten(@navbarBackground, 25%)">
+      <label>@navbarSearchBackgroundFocus</label>
+      <input type="text" class="span3" placeholder="@white">
+      <label>@navbarSearchBorder</label>
+      <input type="text" class="span3" placeholder="darken(@navbarSearchBackground, 30%)">
+      <label>@navbarSearchPlaceholderColor</label>
+      <input type="text" class="span3" placeholder="#ccc">
+
+      <h3>Dropdowns</h3>
+      <label>@dropdownBackground</label>
+      <input type="text" class="span3" placeholder="@white">
+      <label>@dropdownBorder</label>
+      <input type="text" class="span3" placeholder="rgba(0,0,0,.2)">
+      <label>@dropdownLinkColor</label>
+      <input type="text" class="span3" placeholder="@grayDark">
+      <label>@dropdownLinkColorHover</label>
+      <input type="text" class="span3" placeholder="@white">
+      <label>@dropdownLinkBackgroundHover</label>
+      <input type="text" class="span3" placeholder="@linkColor">
+    </div><!-- /span -->
+    <div class="span3">
+      <h3>Forms</h3>
+      <label>@placeholderText</label>
+      <input type="text" class="span3" placeholder="@grayLight">
+      <label>@inputBackground</label>
+      <input type="text" class="span3" placeholder="@white">
+      <label>@inputBorder</label>
+      <input type="text" class="span3" placeholder="#ccc">
+      <label>@inputBorderRadius</label>
+      <input type="text" class="span3" placeholder="3px">
+      <label>@inputDisabledBackground</label>
+      <input type="text" class="span3" placeholder="@grayLighter">
+      <label>@formActionsBackground</label>
+      <input type="text" class="span3" placeholder="#f5f5f5">
+
+      <label>@btnPrimaryBackground</label>
+      <input type="text" class="span3" placeholder="@linkColor">
+      <label>@btnPrimaryBackgroundHighlight</label>
+      <input type="text" class="span3" placeholder="darken(@white, 10%);">
+
+      <h3>Form states &amp; alerts</h3>
+      <label>@warningText</label>
+      <input type="text" class="span3" placeholder="#c09853">
+      <label>@warningBackground</label>
+      <input type="text" class="span3" placeholder="#fcf8e3">
+      <label>@errorText</label>
+      <input type="text" class="span3" placeholder="#b94a48">
+      <label>@errorBackground</label>
+      <input type="text" class="span3" placeholder="#f2dede">
+      <label>@successText</label>
+      <input type="text" class="span3" placeholder="#468847">
+      <label>@successBackground</label>
+      <input type="text" class="span3" placeholder="#dff0d8">
+      <label>@infoText</label>
+      <input type="text" class="span3" placeholder="#3a87ad">
+      <label>@infoBackground</label>
+      <input type="text" class="span3" placeholder="#d9edf7">
+    </div><!-- /span -->
+  </div><!-- /row -->
+</section>
+
+<section class="download" id="download">
+  <div class="page-header">
+    <h1>
+      4. Download
+    </h1>
+  </div>
+  <div class="download-btn">
+    <a class="btn btn-primary" href="#" >Customize and Download</a>
+    <h4>What's included?</h4>
+    <p>Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.</p>
+  </div>
+</section><!-- /download -->
+
+
+     <!-- Footer
+      ================================================== -->
+      <footer class="footer">
+        <p class="pull-right"><a href="#">Back to top</a></p>
+        <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
+        <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
+        <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
+      </footer>
+
+    </div><!-- /container -->
+
+
+
+    <!-- Le javascript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
+    <script src="assets/js/jquery.js"></script>
+    <script src="assets/js/google-code-prettify/prettify.js"></script>
+    <script src="assets/js/bootstrap-transition.js"></script>
+    <script src="assets/js/bootstrap-alert.js"></script>
+    <script src="assets/js/bootstrap-modal.js"></script>
+    <script src="assets/js/bootstrap-dropdown.js"></script>
+    <script src="assets/js/bootstrap-scrollspy.js"></script>
+    <script src="assets/js/bootstrap-tab.js"></script>
+    <script src="assets/js/bootstrap-tooltip.js"></script>
+    <script src="assets/js/bootstrap-popover.js"></script>
+    <script src="assets/js/bootstrap-button.js"></script>
+    <script src="assets/js/bootstrap-collapse.js"></script>
+    <script src="assets/js/bootstrap-carousel.js"></script>
+    <script src="assets/js/bootstrap-typeahead.js"></script>
+    <script src="assets/js/application.js"></script>
+
+
+  </body>
+</html>

docs/likebutton/docs/examples.html

@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Examples · Twitter Bootstrap</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <!-- Le styles -->
+    <link href="assets/css/bootstrap.css" rel="stylesheet">
+    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
+    <link href="assets/css/docs.css" rel="stylesheet">
+    <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
+
+    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+    <!--[if lt IE 9]>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <!-- Le fav and touch icons -->
+    <link rel="shortcut icon" href="assets/ico/favicon.ico">
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+
+  </head>
+
+  <body data-spy="scroll" data-target=".subnav" data-offset="50">
+
+
+  <!-- Navbar
+    ================================================== -->
+    <div class="navbar navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="brand" href="./index.html">Bootstrap</a>
+          <div class="nav-collapse collapse">
+            <ul class="nav">
+              <li class="">
+                <a href="./index.html">Overview</a>
+              </li>
+              <li class="">
+                <a href="./scaffolding.html">Scaffolding</a>
+              </li>
+              <li class="">
+                <a href="./base-css.html">Base CSS</a>
+              </li>
+              <li class="">
+                <a href="./components.html">Components</a>
+              </li>
+              <li class="">
+                <a href="./javascript.html">Javascript plugins</a>
+              </li>
+              <li class="">
+                <a href="./less.html">Using LESS</a>
+              </li>
+              <li class="divider-vertical"></li>
+              <li class="">
+                <a href="./download.html">Customize</a>
+              </li>
+              <li class="active">
+                <a href="./examples.html">Examples</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="container">
+
+<!-- Masthead
+================================================== -->
+<header class="jumbotron subhead" id="overview">
+  <h1>Bootstrap examples</h1>
+  <p class="lead">We've included a few basic examples as starting points for your work with Bootstrap. We encourage folks to iterate on these examples and not simply use them as an end result.</p>
+</header>
+
+
+<ul class="thumbnails bootstrap-examples">
+  <li class="span4">
+    <a class="thumbnail" href="examples/hero.html">
+      <img src="assets/img/examples/bootstrap-example-hero.jpg" alt="">
+    </a>
+    <h3>Basic marketing site</h3>
+    <p>Featuring a hero unit for a primary message and three supporting elements.</p>
+  </li>
+  <li class="span4">
+    <a class="thumbnail" href="examples/fluid.html">
+      <img src="assets/img/examples/bootstrap-example-fluid.jpg" alt="">
+    </a>
+    <h3>Fluid layout</h3>
+    <p>Uses our new responsive, fluid grid system to create a seamless liquid layout.</p>
+  </li>
+  <li class="span4">
+    <a class="thumbnail" href="examples/starter-template.html">
+      <img src="assets/img/examples/bootstrap-example-starter.jpg" alt="">
+    </a>
+    <h3>Starter template</h3>
+    <p>A barebones HTML document with all the Bootstrap CSS and javascript included.</p>
+  </li>
+</ul>
+
+
+     <!-- Footer
+      ================================================== -->
+      <footer class="footer">
+        <p class="pull-right"><a href="#">Back to top</a></p>
+        <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
+        <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
+        <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
+      </footer>
+
+    </div><!-- /container -->
+
+
+
+    <!-- Le javascript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
+    <script src="assets/js/jquery.js"></script>
+    <script src="assets/js/google-code-prettify/prettify.js"></script>
+    <script src="assets/js/bootstrap-transition.js"></script>
+    <script src="assets/js/bootstrap-alert.js"></script>
+    <script src="assets/js/bootstrap-modal.js"></script>
+    <script src="assets/js/bootstrap-dropdown.js"></script>
+    <script src="assets/js/bootstrap-scrollspy.js"></script>
+    <script src="assets/js/bootstrap-tab.js"></script>
+    <script src="assets/js/bootstrap-tooltip.js"></script>
+    <script src="assets/js/bootstrap-popover.js"></script>
+    <script src="assets/js/bootstrap-button.js"></script>
+    <script src="assets/js/bootstrap-collapse.js"></script>
+    <script src="assets/js/bootstrap-carousel.js"></script>
+    <script src="assets/js/bootstrap-typeahead.js"></script>
+    <script src="assets/js/application.js"></script>
+
+
+  </body>
+</html>

docs/likebutton/docs/examples/fluid.html

@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Bootstrap, from Twitter</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <!-- Le styles -->
+    <link href="../assets/css/bootstrap.css" rel="stylesheet">
+    <style type="text/css">
+      body {
+        padding-top: 60px;
+        padding-bottom: 40px;
+      }
+      .sidebar-nav {
+        padding: 9px 0;
+      }
+    </style>
+    <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
+
+    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+    <!--[if lt IE 9]>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <!-- Le fav and touch icons -->
+    <link rel="shortcut icon" href="../assets/ico/favicon.ico">
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
+  </head>
+
+  <body>
+
+    <div class="navbar navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container-fluid">
+          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </a>
+          <a class="brand" href="#">Project name</a>
+          <div class="btn-group pull-right">
+            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
+              <i class="icon-user"></i> Username
+              <span class="caret"></span>
+            </a>
+            <ul class="dropdown-menu">
+              <li><a href="#">Profile</a></li>
+              <li class="divider"></li>
+              <li><a href="#">Sign Out</a></li>
+            </ul>
+          </div>
+          <div class="nav-collapse">
+            <ul class="nav">
+              <li class="active"><a href="#">Home</a></li>
+              <li><a href="#about">About</a></li>
+              <li><a href="#contact">Contact</a></li>
+            </ul>
+          </div><!--/.nav-collapse -->
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+      <div class="row-fluid">
+        <div class="span3">
+          <div class="well sidebar-nav">
+            <ul class="nav nav-list">
+              <li class="nav-header">Sidebar</li>
+              <li class="active"><a href="#">Link</a></li>
+              <li><a href="#">Link</a></li>
+              <li><a href="#">Link</a></li>
+              <li><a href="#">Link</a></li>
+              <li class="nav-header">Sidebar</li>
+              <li><a href="#">Link</a></li>
+              <li><a href="#">Link</a></li>
+              <li><a href="#">Link</a></li>
+              <li><a href="#">Link</a></li>
+              <li><a href="#">Link</a></li>
+              <li><a href="#">Link</a></li>
+              <li class="nav-header">Sidebar</li>
+              <li><a href="#">Link</a></li>
+              <li><a href="#">Link</a></li>
+              <li><a href="#">Link</a></li>
+            </ul>
+          </div><!--/.well -->
+        </div><!--/span-->
+        <div class="span9">
+          <div class="hero-unit">
+            <h1>Hello, world!</h1>
+            <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
+            <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
+          </div>
+          <div class="row-fluid">
+            <div class="span4">
+              <h2>Heading</h2>
+              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+              <p><a class="btn" href="#">View details &raquo;</a></p>
+            </div><!--/span-->
+            <div class="span4">
+              <h2>Heading</h2>
+              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+              <p><a class="btn" href="#">View details &raquo;</a></p>
+            </div><!--/span-->
+            <div class="span4">
+              <h2>Heading</h2>
+              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+              <p><a class="btn" href="#">View details &raquo;</a></p>
+            </div><!--/span-->
+          </div><!--/row-->
+          <div class="row-fluid">
+            <div class="span4">
+              <h2>Heading</h2>
+              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+              <p><a class="btn" href="#">View details &raquo;</a></p>
+            </div><!--/span-->
+            <div class="span4">
+              <h2>Heading</h2>
+              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+              <p><a class="btn" href="#">View details &raquo;</a></p>
+            </div><!--/span-->
+            <div class="span4">
+              <h2>Heading</h2>
+              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+              <p><a class="btn" href="#">View details &raquo;</a></p>
+            </div><!--/span-->
+          </div><!--/row-->
+        </div><!--/span-->
+      </div><!--/row-->
+
+      <hr>
+
+      <footer>
+        <p>&copy; Company 2012</p>
+      </footer>
+
+    </div><!--/.fluid-container-->
+
+    <!-- Le javascript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="../assets/js/jquery.js"></script>
+    <script src="../assets/js/bootstrap-transition.js"></script>
+    <script src="../assets/js/bootstrap-alert.js"></script>
+    <script src="../assets/js/bootstrap-modal.js"></script>
+    <script src="../assets/js/bootstrap-dropdown.js"></script>
+    <script src="../assets/js/bootstrap-scrollspy.js"></script>
+    <script src="../assets/js/bootstrap-tab.js"></script>
+    <script src="../assets/js/bootstrap-tooltip.js"></script>
+    <script src="../assets/js/bootstrap-popover.js"></script>
+    <script src="../assets/js/bootstrap-button.js"></script>
+    <script src="../assets/js/bootstrap-collapse.js"></script>
+    <script src="../assets/js/bootstrap-carousel.js"></script>
+    <script src="../assets/js/bootstrap-typeahead.js"></script>
+
+  </body>
+</html>

docs/likebutton/docs/examples/hero.html

@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Bootstrap, from Twitter</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <!-- Le styles -->
+    <link href="../assets/css/bootstrap.css" rel="stylesheet">
+    <style type="text/css">
+      body {
+        padding-top: 60px;
+        padding-bottom: 40px;
+      }
+    </style>
+    <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
+
+    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+    <!--[if lt IE 9]>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <!-- Le fav and touch icons -->
+    <link rel="shortcut icon" href="../assets/ico/favicon.ico">
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
+  </head>
+
+  <body>
+
+    <div class="navbar navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </a>
+          <a class="brand" href="#">Project name</a>
+          <div class="nav-collapse">
+            <ul class="nav">
+              <li class="active"><a href="#">Home</a></li>
+              <li><a href="#about">About</a></li>
+              <li><a href="#contact">Contact</a></li>
+            </ul>
+          </div><!--/.nav-collapse -->
+        </div>
+      </div>
+    </div>
+
+    <div class="container">
+
+      <!-- Main hero unit for a primary marketing message or call to action -->
+      <div class="hero-unit">
+        <h1>Hello, world!</h1>
+        <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
+        <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
+      </div>
+
+      <!-- Example row of columns -->
+      <div class="row">
+        <div class="span4">
+          <h2>Heading</h2>
+           <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+          <p><a class="btn" href="#">View details &raquo;</a></p>
+        </div>
+        <div class="span4">
+          <h2>Heading</h2>
+           <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+          <p><a class="btn" href="#">View details &raquo;</a></p>
+       </div>
+        <div class="span4">
+          <h2>Heading</h2>
+          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+          <p><a class="btn" href="#">View details &raquo;</a></p>
+        </div>
+      </div>
+
+      <hr>
+
+      <footer>
+        <p>&copy; Company 2012</p>
+      </footer>
+
+    </div> <!-- /container -->
+
+    <!-- Le javascript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="../assets/js/jquery.js"></script>
+    <script src="../assets/js/bootstrap-transition.js"></script>
+    <script src="../assets/js/bootstrap-alert.js"></script>
+    <script src="../assets/js/bootstrap-modal.js"></script>
+    <script src="../assets/js/bootstrap-dropdown.js"></script>
+    <script src="../assets/js/bootstrap-scrollspy.js"></script>
+    <script src="../assets/js/bootstrap-tab.js"></script>
+    <script src="../assets/js/bootstrap-tooltip.js"></script>
+    <script src="../assets/js/bootstrap-popover.js"></script>
+    <script src="../assets/js/bootstrap-button.js"></script>
+    <script src="../assets/js/bootstrap-collapse.js"></script>
+    <script src="../assets/js/bootstrap-carousel.js"></script>
+    <script src="../assets/js/bootstrap-typeahead.js"></script>
+
+  </body>
+</html>

docs/likebutton/docs/examples/starter-template.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Bootstrap, from Twitter</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <!-- Le styles -->
+    <link href="../assets/css/bootstrap.css" rel="stylesheet">
+    <style>
+      body {
+        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
+      }
+    </style>
+    <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
+
+    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+    <!--[if lt IE 9]>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <!-- Le fav and touch icons -->
+    <link rel="shortcut icon" href="../assets/ico/favicon.ico">
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
+  </head>
+
+  <body>
+
+    <div class="navbar navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </a>
+          <a class="brand" href="#">Project name</a>
+          <div class="nav-collapse">
+            <ul class="nav">
+              <li class="active"><a href="#">Home</a></li>
+              <li><a href="#about">About</a></li>
+              <li><a href="#contact">Contact</a></li>
+            </ul>
+          </div><!--/.nav-collapse -->
+        </div>
+      </div>
+    </div>
+
+    <div class="container">
+
+      <h1>Bootstrap starter template</h1>
+      <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
+
+    </div> <!-- /container -->
+
+    <!-- Le javascript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="../assets/js/jquery.js"></script>
+    <script src="../assets/js/bootstrap-transition.js"></script>
+    <script src="../assets/js/bootstrap-alert.js"></script>
+    <script src="../assets/js/bootstrap-modal.js"></script>
+    <script src="../assets/js/bootstrap-dropdown.js"></script>
+    <script src="../assets/js/bootstrap-scrollspy.js"></script>
+    <script src="../assets/js/bootstrap-tab.js"></script>
+    <script src="../assets/js/bootstrap-tooltip.js"></script>
+    <script src="../assets/js/bootstrap-popover.js"></script>
+    <script src="../assets/js/bootstrap-button.js"></script>
+    <script src="../assets/js/bootstrap-collapse.js"></script>
+    <script src="../assets/js/bootstrap-carousel.js"></script>
+    <script src="../assets/js/bootstrap-typeahead.js"></script>
+
+  </body>
+</html>

docs/likebutton/docs/index.html

@@ -0,0 +1,259 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Twitter Bootstrap</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <!-- Le styles -->
+    <link href="assets/css/bootstrap.css" rel="stylesheet">
+    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
+    <link href="assets/css/docs.css" rel="stylesheet">
+    <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
+
+    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+    <!--[if lt IE 9]>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <!-- Le fav and touch icons -->
+    <link rel="shortcut icon" href="assets/ico/favicon.ico">
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+
+  </head>
+
+  <body data-spy="scroll" data-target=".subnav" data-offset="50">
+
+
+  <!-- Navbar
+    ================================================== -->
+    <div class="navbar navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="brand" href="./index.html">Bootstrap</a>
+          <div class="nav-collapse collapse">
+            <ul class="nav">
+              <li class="active">
+                <a href="./index.html">Overview</a>
+              </li>
+              <li class="">
+                <a href="./scaffolding.html">Scaffolding</a>
+              </li>
+              <li class="">
+                <a href="./base-css.html">Base CSS</a>
+              </li>
+              <li class="">
+                <a href="./components.html">Components</a>
+              </li>
+              <li class="">
+                <a href="./javascript.html">Javascript plugins</a>
+              </li>
+              <li class="">
+                <a href="./less.html">Using LESS</a>
+              </li>
+              <li class="divider-vertical"></li>
+              <li class="">
+                <a href="./download.html">Customize</a>
+              </li>
+              <li class="">
+                <a href="./examples.html">Examples</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="container">
+
+<!-- Masthead
+================================================== -->
+<header class="jumbotron masthead">
+  <div class="inner">
+    <h1>Bootstrap, from Twitter</h1>
+    <p>Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.</p>
+    <p class="download-info">
+      <a href="https://github.com/twitter/bootstrap/" class="btn btn-primary btn-large" >View project on GitHub</a>
+      <a href="assets/bootstrap.zip" class="btn btn-large" >Download Bootstrap <small>(v2.0.4)</small></a>
+    </p>
+  </div>
+
+  <div class="bs-links">
+    <ul class="quick-links">
+      <li><a href="./upgrading.html">Upgrading from 1.4</a></li>
+      <li><a href="https://github.com/twitter/bootstrap/zipball/master">Download with docs</a></li>
+      <li><a href="http://blog.getbootstrap.com">Read the blog</a></li>
+      <li><a href="https://github.com/twitter/bootstrap/issues?state=open">Submit issues</a></li>
+      <li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap and changelog</a></li>
+    </ul>
+    <ul class="quick-links">
+      <li>
+        <iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="112px" height="20px"></iframe>
+      </li>
+      <li>
+        <iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="98px" height="20px"></iframe>
+      </li>
+      <li class="follow-btn">
+        <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @twbootstrap</a>
+      </li>
+      <li class="tweet-btn">
+        <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
+      </li>
+    </ul>
+  </div>
+</header>
+
+<hr class="soften">
+
+<div class="marketing">
+  <h1>Designed for everyone, everywhere.</h1>
+  <p class="marketing-byline">Need reasons to love Bootstrap? Look no further.</p>
+  <div class="row">
+    <div class="span4">
+      <img class="bs-icon" src="assets/img/glyphicons/glyphicons_042_group.png">
+      <h2>Built for and by nerds</h2>
+      <p>Like you, we love building awesome products on the web. We love it so much, we decided to help people just like us do it easier, better, and faster. Bootstrap is built for you.</p>
+    </div>
+    <div class="span4">
+      <img class="bs-icon" src="assets/img/glyphicons/glyphicons_079_podium.png">
+      <h2>For all skill levels</h2>
+      <p>Bootstrap is designed to help people of all skill levels&mdash;designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.</p>
+    </div>
+    <div class="span4">
+      <img class="bs-icon" src="assets/img/glyphicons/glyphicons_163_iphone.png">
+      <h2>Cross-everything</h2>
+      <p>Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.</p>
+    </div>
+  </div><!--/row-->
+  <div class="row">
+    <div class="span4">
+      <img class="bs-icon" src="assets/img/glyphicons/glyphicons_155_show_thumbnails.png">
+      <h2>12-column grid</h2>
+      <p>Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.</p>
+    </div>
+    <div class="span4">
+      <img class="bs-icon" src="assets/img/glyphicons/glyphicons_214_resize_small.png">
+      <h2>Responsive design</h2>
+      <p>With Bootstrap 2, we've gone fully responsive. Our components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.</p>
+    </div>
+    <div class="span4">
+      <img class="bs-icon" src="assets/img/glyphicons/glyphicons_266_book_open.png">
+      <h2>Styleguide docs</h2>
+      <p>Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only our features, but best practices and living, coded examples.</p>
+    </div>
+  </div><!--/row-->
+  <div class="row">
+    <div class="span4">
+      <img class="bs-icon" src="assets/img/glyphicons/glyphicons_082_roundabout.png">
+      <h2>Growing library</h2>
+      <p>Despite being only 10kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components ready to be put to use.</p>
+    </div>
+    <div class="span4">
+      <img class="bs-icon" src="assets/img/glyphicons/glyphicons_009_magic.png">
+      <h2>Custom jQuery plugins</h2>
+      <p>What good is an awesome design component without easy-to-use, proper, and extensible interactions? With Bootstrap, you get custom-built jQuery plugins to bring your projects to life.</p>
+    </div>
+    <div class="span4">
+      <img class="bs-icon" src="assets/img/less-small.png">
+      <h2>Built on LESS</h2>
+      <p>Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.</p>
+    </div>
+  </div><!--/row-->
+  <div class="row">
+    <div class="span3">
+      <img class="small-bs-icon" src="assets/img/icon-html5.png">
+      <h3>HTML5</h3>
+      <p>Built to support new HTML5 elements and syntax.</p>
+    </div>
+    <div class="span3">
+      <img class="small-bs-icon" src="assets/img/icon-css3.png">
+      <h3>CSS3</h3>
+      <p>Progressively enhanced components for ultimate style.</p>
+    </div>
+    <div class="span3">
+      <img class="small-bs-icon" src="assets/img/icon-github.png">
+      <h3>Open-source</h3>
+      <p>Built for and maintained by the community via <a href="https://github.com">GitHub</a>.</p>
+    </div>
+    <div class="span3">
+      <img class="small-bs-icon" src="assets/img/icon-twitter.png">
+      <h3>Made at Twitter</h3>
+      <p>Brought to you by an experienced <a href="http://twitter.com/fat">engineer</a> and <a href="http://twitter.com/mdo">designer</a>.</p>
+    </div>
+  </div><!--/row-->
+
+  <hr class="soften">
+
+  <h1>Built with Bootstrap.</h1>
+  <p class="marketing-byline">For even more sites built with Bootstrap, <a href="http://builtwithbootstrap.tumblr.com/" target="_blank">visit the unofficial Tumblr</a> or <a href="./examples.html">browse the examples</a>.</p>
+  <ul class="thumbnails example-sites">
+    <li class="span3">
+      <a class="thumbnail" href="http://soundready.fm/" target="_blank">
+        <img src="assets/img/example-sites/soundready.png" alt="SoundReady.fm">
+      </a>
+    </li>
+    <li class="span3">
+      <a class="thumbnail" href="http://kippt.com/" target="_blank">
+        <img src="assets/img/example-sites/kippt.png" alt="Kippt">
+      </a>
+    </li>
+    <li class="span3">
+      <a class="thumbnail" href="http://www.fleetio.com/" target="_blank">
+        <img src="assets/img/example-sites/fleetio.png" alt="Fleetio">
+      </a>
+    </li>
+    <li class="span3">
+      <a class="thumbnail" href="http://www.jshint.com/" target="_blank">
+        <img src="assets/img/example-sites/jshint.png" alt="JS Hint">
+      </a>
+    </li>
+  </ul>
+
+</div><!-- /.marketing -->
+
+     <!-- Footer
+      ================================================== -->
+      <footer class="footer">
+        <p class="pull-right"><a href="#">Back to top</a></p>
+        <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
+        <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
+        <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
+      </footer>
+
+    </div><!-- /container -->
+
+
+
+    <!-- Le javascript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
+    <script src="assets/js/jquery.js"></script>
+    <script src="assets/js/google-code-prettify/prettify.js"></script>
+    <script src="assets/js/bootstrap-transition.js"></script>
+    <script src="assets/js/bootstrap-alert.js"></script>
+    <script src="assets/js/bootstrap-modal.js"></script>
+    <script src="assets/js/bootstrap-dropdown.js"></script>
+    <script src="assets/js/bootstrap-scrollspy.js"></script>
+    <script src="assets/js/bootstrap-tab.js"></script>
+    <script src="assets/js/bootstrap-tooltip.js"></script>
+    <script src="assets/js/bootstrap-popover.js"></script>
+    <script src="assets/js/bootstrap-button.js"></script>
+    <script src="assets/js/bootstrap-collapse.js"></script>
+    <script src="assets/js/bootstrap-carousel.js"></script>
+    <script src="assets/js/bootstrap-typeahead.js"></script>
+    <script src="assets/js/application.js"></script>
+
+
+  </body>
+</html>

docs/likebutton/docs/scaffolding.html

@@ -0,0 +1,671 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Scaffolding · Twitter Bootstrap</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <!-- Le styles -->
+    <link href="assets/css/bootstrap.css" rel="stylesheet">
+    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
+    <link href="assets/css/docs.css" rel="stylesheet">
+    <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
+
+    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+    <!--[if lt IE 9]>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <!-- Le fav and touch icons -->
+    <link rel="shortcut icon" href="assets/ico/favicon.ico">
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+
+  </head>
+
+  <body data-spy="scroll" data-target=".subnav" data-offset="50">
+
+
+  <!-- Navbar
+    ================================================== -->
+    <div class="navbar navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="brand" href="./index.html">Bootstrap</a>
+          <div class="nav-collapse collapse">
+            <ul class="nav">
+              <li class="">
+                <a href="./index.html">Overview</a>
+              </li>
+              <li class="active">
+                <a href="./scaffolding.html">Scaffolding</a>
+              </li>
+              <li class="">
+                <a href="./base-css.html">Base CSS</a>
+              </li>
+              <li class="">
+                <a href="./components.html">Components</a>
+              </li>
+              <li class="">
+                <a href="./javascript.html">Javascript plugins</a>
+              </li>
+              <li class="">
+                <a href="./less.html">Using LESS</a>
+              </li>
+              <li class="divider-vertical"></li>
+              <li class="">
+                <a href="./download.html">Customize</a>
+              </li>
+              <li class="">
+                <a href="./examples.html">Examples</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="container">
+
+<!-- Masthead
+================================================== -->
+<header class="jumbotron subhead" id="overview">
+  <h1>Scaffolding</h1>
+  <p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p>
+  <div class="subnav">
+    <ul class="nav nav-pills">
+      <li><a href="#global">Global styles</a></li>
+      <li><a href="#gridSystem">Grid system</a></li>
+      <li><a href="#fluidGridSystem">Fluid grid system</a></li>
+      <li><a href="#gridCustomization">Customizing</a></li>
+      <li><a href="#layouts">Layouts</a></li>
+      <li><a href="#responsive">Responsive design</a></li>
+    </ul>
+  </div>
+</header>
+
+
+
+
+<!-- Global Bootstrap settings
+================================================== -->
+<section id="global">
+  <div class="page-header">
+    <h1>Global styles <small>for CSS reset, typography, and links</small></h1>
+  </div>
+  <div class="row">
+    <div class="span4">
+      <h2>Requires HTML5 doctype</h2>
+      <p>Bootstrap makes use of HTML elements and CSS properties that require the use of the HTML5 doctype. Be sure to include it at the beginning of every Bootstrapped page in your project.</p>
+<pre class="prettyprint linenums">
+&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  ...
+&lt;/html&gt;
+</pre>
+    </div><!-- /.span -->
+    <div class="span4">
+      <h2>Typography and links</h2>
+      <p>Within the <strong>scaffolding.less</strong> file, we set basic global display, typography, and link styles. Specifically, we:</p>
+      <ul>
+        <li>Remove margin on the body</li>
+        <li>Set <code>background-color: white;</code> on the <code>body</code></li>
+        <li>Use the <code>@baseFontFamily</code>, <code>@baseFontSize</code>, and <code>@baseLineHeight</code> attributes as our typographyic base</li>
+        <li>Set the global link color via <code>@linkColor</code> and apply link underlines only on <code>:hover</code></li>
+      </ul>
+    </div><!-- /.span -->
+    <div class="span4">
+      <h2>Reset via Normalize</h2>
+      <p>As of Bootstrap 2, the traditional CSS reset has evolved to make use of elements from <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize.css</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> that also powers the <a href="http://html5boilerplate.com" target="_blank">HTML5 Boilerplate</a>.</p>
+      <p>The new reset can still be found in <strong>reset.less</strong>, but with many elements removed for brevity and accuracy.</p>
+    </div><!-- /.span -->
+  </div><!-- /.row -->
+</section>
+
+
+
+
+<!-- Grid system
+================================================== -->
+<section id="gridSystem">
+  <div class="page-header">
+    <h1>Default grid system <small>12 columns with a responsive twist</small></h1>
+  </div>
+
+  <div class="row show-grid">
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+  </div>
+  <div class="row show-grid">
+    <div class="span4">4</div>
+    <div class="span4">4</div>
+    <div class="span4">4</div>
+  </div>
+  <div class="row show-grid">
+    <div class="span4">4</div>
+    <div class="span8">8</div>
+  </div>
+  <div class="row show-grid">
+    <div class="span6">6</div>
+    <div class="span6">6</div>
+  </div>
+  <div class="row show-grid">
+    <div class="span12">12</div>
+  </div>
+  <div class="row">
+    <div class="span4">
+      <p>The default grid system provided in Bootstrap utilizes <strong>12 columns</strong> that render out at widths of 724px, 940px (default without responsive CSS included), and 1170px. Below 767px viewports, the columns become fluid and stack vertically. </p>
+    </div><!-- /.span -->
+    <div class="span4">
+<pre class="prettyprint linenums">
+&lt;div class="row"&gt;
+  &lt;div class="span4"&gt;...&lt;/div&gt;
+  &lt;div class="span8"&gt;...&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+    </div><!-- /.span -->
+    <div class="span4">
+      <p>As shown here, a basic layout can be created with two "columns", each spanning a number of the 12 foundational columns we defined as part of our grid system.</p>
+    </div><!-- /.span -->
+  </div><!-- /.row -->
+
+  <br>
+
+  <h2>Offsetting columns</h2>
+  <div class="row show-grid">
+    <div class="span4">4</div>
+    <div class="span4 offset4">4 offset 4</div>
+  </div><!-- /row -->
+  <div class="row show-grid">
+    <div class="span3 offset3">3 offset 3</div>
+    <div class="span3 offset3">3 offset 3</div>
+  </div><!-- /row -->
+  <div class="row show-grid">
+    <div class="span8 offset4">8 offset 4</div>
+  </div><!-- /row -->
+<pre class="prettyprint linenums">
+&lt;div class="row"&gt;
+  &lt;div class="span4"&gt;...&lt;/div&gt;
+  &lt;div class="span4 offset4"&gt;...&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+  <br>
+
+  <h2>Nesting columns</h2>
+  <div class="row">
+    <div class="span6">
+      <p>With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column.</p>
+      <h3>Example</h3>
+      <p>Nested rows should include a set of columns that add up to the number of columns of it's parent. For example, two nested <code>.span3</code> columns should be placed within a <code>.span6</code>.</p>
+      <div class="row show-grid">
+        <div class="span6">
+          Level 1 of column
+          <div class="row show-grid">
+            <div class="span3">
+              Level 2
+            </div>
+            <div class="span3">
+              Level 2
+            </div>
+          </div>
+        </div>
+      </div>
+    </div><!-- /.span -->
+    <div class="span6">
+<pre class="prettyprint linenums">
+&lt;div class="row"&gt;
+  &lt;div class="span6"&gt;
+    Level 1 column
+    &lt;div class="row"&gt;
+      &lt;div class="span3"&gt;Level 2&lt;/div&gt;
+      &lt;div class="span3"&gt;Level 2&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+    </div><!-- /.span -->
+  </div><!-- /.row -->
+</section>
+
+
+
+<!-- Fluid grid system
+================================================== -->
+<section id="fluidGridSystem">
+  <div class="page-header">
+    <h1>Fluid grid system <small>12 responsive, percent-based columns</small></h1>
+  </div>
+
+  <h2>Fluid columns</h2>
+  <div class="row-fluid show-grid">
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+  </div>
+  <div class="row-fluid show-grid">
+    <div class="span4">4</div>
+    <div class="span4">4</div>
+    <div class="span4">4</div>
+  </div>
+  <div class="row-fluid show-grid">
+    <div class="span4">4</div>
+    <div class="span8">8</div>
+  </div>
+  <div class="row-fluid show-grid">
+    <div class="span6">6</div>
+    <div class="span6">6</div>
+  </div>
+  <div class="row-fluid show-grid">
+    <div class="span12">12</div>
+  </div>
+
+  <div class="row">
+    <div class="span4">
+      <h3>Percents, not pixels</h3>
+      <p>The fluid grid system uses percents for column widths instead of fixed pixels. It also has the same responsive variations as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.</p>
+    </div><!-- /.span -->
+    <div class="span4">
+      <h3>Fluid rows</h3>
+      <p>Make any row fluid simply by changing <code>.row</code> to <code>.row-fluid</code>. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.</p>
+    </div><!-- /.span -->
+    <div class="span4">
+      <h3>Markup</h3>
+<pre class="prettyprint linenums">
+&lt;div class="row-fluid"&gt;
+  &lt;div class="span4"&gt;...&lt;/div&gt;
+  &lt;div class="span8"&gt;...&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+    </div><!-- /.span -->
+  </div><!-- /.row -->
+
+  <h2>Fluid nesting</h2>
+  <div class="row">
+    <div class="span6">
+      <p>Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.</p>
+      <div class="row-fluid show-grid">
+        <div class="span12">
+          Fluid 12
+          <div class="row-fluid show-grid">
+            <div class="span6">
+              Fluid 6
+            </div>
+            <div class="span6">
+              Fluid 6
+            </div>
+          </div>
+        </div>
+      </div>
+    </div><!-- /.span -->
+    <div class="span6">
+<pre class="prettyprint linenums">
+&lt;div class="row-fluid"&gt;
+  &lt;div class="span12"&gt;
+    Level 1 of column
+    &lt;div class="row-fluid"&gt;
+      &lt;div class="span6"&gt;Level 2&lt;/div&gt;
+      &lt;div class="span6"&gt;Level 2&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+    </div><!-- /.span -->
+  </div><!-- /.row -->
+
+</section>
+
+
+
+<!-- Customizaton
+================================================== -->
+<section id="gridCustomization">
+  <div class="page-header">
+    <h1>Grid customization</h1>
+  </div>
+  <table class="table table-bordered table-striped">
+    <thead>
+      <tr>
+        <th>Variable</th>
+        <th>Default value</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>@gridColumns</code></td>
+        <td>12</td>
+        <td>Number of columns</td>
+      </tr>
+      <tr>
+        <td><code>@gridColumnWidth</code></td>
+        <td>60px</td>
+        <td>Width of each column</td>
+      </tr>
+      <tr>
+        <td><code>@gridGutterWidth</code></td>
+        <td>20px</td>
+        <td>Negative space between columns</td>
+      </tr>
+    </tbody>
+  </table>
+  <div class="row">
+    <div class="span4">
+      <h3>Variables in LESS</h3>
+      <p>Built into Bootstrap are a handful of variables for customizing the default 940px grid system, documented above. All variables for the grid are stored in variables.less.</p>
+    </div><!-- /.span -->
+    <div class="span4">
+      <h3>How to customize</h3>
+      <p>Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the <a href="less.html#compiling">four ways documented to recompile</a>. If you're adding more columns, be sure to add the CSS for those in grid.less.</p>
+    </div><!-- /.span -->
+    <div class="span4">
+      <h3>Staying responsive</h3>
+      <p>Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to customize the grids in responsive.less.</p>
+    </div><!-- /.span -->
+  </div><!-- /.row -->
+
+</section>
+
+
+
+<!-- Layouts (Default and fluid)
+================================================== -->
+<section id="layouts">
+  <div class="page-header">
+    <h1>Layouts <small>Basic templates to create webpages</small></h1>
+  </div>
+
+  <div class="row">
+    <div class="span6">
+      <h2>Fixed layout</h2>
+      <p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code>&lt;div class="container"&gt;</code>.</p>
+      <div class="mini-layout">
+        <div class="mini-layout-body"></div>
+      </div>
+<pre class="prettyprint linenums">
+&lt;body&gt;
+  &lt;div class="container"&gt;
+    ...
+  &lt;/div&gt;
+&lt;/body&gt;
+</pre>
+    </div><!-- /.span -->
+    <div class="span6">
+      <h2>Fluid layout</h2>
+      <p><code>&lt;div class="container-fluid"&gt;</code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.</p>
+      <div class="mini-layout fluid">
+        <div class="mini-layout-sidebar"></div>
+        <div class="mini-layout-body"></div>
+      </div>
+<pre class="prettyprint linenums">
+&lt;div class="container-fluid"&gt;
+  &lt;div class="row-fluid"&gt;
+    &lt;div class="span2"&gt;
+      &lt;!--Sidebar content--&gt;
+    &lt;/div&gt;
+    &lt;div class="span10"&gt;
+      &lt;!--Body content--&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+    </div><!-- /.span -->
+  </div><!-- /.row -->
+</section>
+
+
+
+
+<!-- Responsive design
+================================================== -->
+<section id="responsive">
+  <div class="page-header">
+    <h1>Responsive design <small>Media queries for various devices and resolutions</small></h1>
+  </div>
+  <!-- Supported devices -->
+  <div class="row">
+    <div class="span4">
+      <p><img src="assets/img/responsive-illustrations.png" alt="Responsive devices"></p>
+      <h3>What they do</h3>
+      <p>Media queries allow for custom CSS based on a number of conditions&mdash;ratios, widths, display type, etc&mdash;but usually focuses around <code>min-width</code> and <code>max-width</code>.</p>
+      <ul>
+        <li>Modify the width of column in our grid</li>
+        <li>Stack elements instead of float wherever necessary</li>
+        <li>Resize headings and text to be more appropriate for devices</li>
+      </ul>
+      <p>Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.</p>
+    </div><!-- /.span -->
+    <div class="span8">
+      <h2>Supported devices</h2>
+      <p>Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:</p>
+      <table class="table table-bordered table-striped">
+        <thead>
+          <tr>
+            <th>Label</th>
+            <th>Layout width</th>
+            <th>Column width</th>
+            <th>Gutter width</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Smartphones</td>
+            <td>480px and below</td>
+            <td class="muted" colspan="2">Fluid columns, no fixed widths</td>
+          </tr>
+          <tr>
+            <td>Smartphones to tablets</td>
+            <td>767px and below</td>
+            <td class="muted" colspan="2">Fluid columns, no fixed widths</td>
+          </tr>
+          <tr>
+            <td>Portrait tablets</td>
+            <td>768px and above</td>
+            <td>42px</td>
+            <td>20px</td>
+          </tr>
+          <tr>
+            <td>Default</td>
+            <td>980px and up</td>
+            <td>60px</td>
+            <td>20px</td>
+          </tr>
+          <tr>
+            <td>Large display</td>
+            <td>1200px and up</td>
+            <td>70px</td>
+            <td>30px</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <h3>Requires meta tag</h3>
+      <p>To ensure devices display responsive pages properly, include the viewport meta tag.</p>
+      <pre class="prettyprint linenums">&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
+    </div><!-- /.span -->
+  </div><!-- /.row -->
+
+  <br>
+
+  <!-- Media query code -->
+  <h2>Using the media queries</h2>
+  <div class="row">
+    <div class="span4">
+      <p>Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:</p>
+      <ol>
+        <li>Use the compiled responsive version, bootstrap-responsive.css</li>
+        <li>Add @import "responsive.less" and recompile Bootstrap</li>
+        <li>Modify and recompile responsive.less as a separate file</li>
+      </ol>
+      <p><strong>Why not just include it?</strong> Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.</p>
+    </div><!-- /.span -->
+    <div class="span8">
+<pre class="prettyprint linenums">
+  /* Landscape phones and down */
+  @media (max-width: 480px) { ... }
+
+  /* Landscape phone to portrait tablet */
+  @media (max-width: 767px) { ... }
+
+  /* Portrait tablet to landscape and desktop */
+  @media (min-width: 768px) and (max-width: 979px) { ... }
+
+  /* Large desktop */
+  @media (min-width: 1200px) { ... }
+</pre>
+    </div><!-- /.span -->
+  </div><!-- /.row -->
+  <br>
+
+  <!-- Responsive utility classes -->
+  <h2>Responsive utility classes</h2>
+  <div class="row">
+    <div class="span4">
+      <h3>What are they</h2>
+      <p>For faster mobile-friendly development, use these basic utility classes for showing and hiding content by device.</p>
+      <h3>When to use</h2>
+      <p>Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.</p>
+      <p>For example, you might show a <code>&lt;select&gt;</code> element for nav on mobile layouts, but not on tablets or desktops.</p>
+    </div><!-- /.span -->
+    <div class="span8">
+      <h3>Support classes</h3>
+      <p>Shown here is a table of the classes we support and their effect on a given media query layout (labeled by device). They can be found in <code>responsive.less</code>.</p>
+      <table class="table table-bordered table-striped responsive-utilities">
+        <thead>
+          <tr>
+            <th>Class</th>
+            <th>Phones <small>480px and below</small></th>
+            <th>Tablets <small>767px and below</small></th>
+            <th>Desktops <small>768px and above</small></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th><code>.visible-phone</code></th>
+            <td class="is-visible">Visible</td>
+            <td class="is-hidden">Hidden</td>
+            <td class="is-hidden">Hidden</td>
+          </tr>
+          <tr>
+            <th><code>.visible-tablet</code></th>
+            <td class="is-hidden">Hidden</td>
+            <td class="is-visible">Visible</td>
+            <td class="is-hidden">Hidden</td>
+          </tr>
+          <tr>
+            <th><code>.visible-desktop</code></th>
+            <td class="is-hidden">Hidden</td>
+            <td class="is-hidden">Hidden</td>
+            <td class="is-visible">Visible</td>
+          </tr>
+          <tr>
+            <th><code>.hidden-phone</code></th>
+            <td class="is-hidden">Hidden</td>
+            <td class="is-visible">Visible</td>
+            <td class="is-visible">Visible</td>
+          </tr>
+          <tr>
+            <th><code>.hidden-tablet</code></th>
+            <td class="is-visible">Visible</td>
+            <td class="is-hidden">Hidden</td>
+            <td class="is-visible">Visible</td>
+          </tr>
+          <tr>
+            <th><code>.hidden-desktop</code></th>
+            <td class="is-visible">Visible</td>
+            <td class="is-visible">Visible</td>
+            <td class="is-hidden">Hidden</td>
+          </tr>
+        </tbody>
+      </table>
+      <h3>Test case</h3>
+      <p>Resize your browser or load on different devices to test the above classes.</p>
+      <h4>Visible on...</h4>
+      <p>Green checkmarks indicate that class is visible in your current viewport.</p>
+      <ul class="responsive-utilities-test">
+        <li>Phone<span class="visible-phone">&#10004; Phone</span></li>
+        <li>Tablet<span class="visible-tablet">&#10004; Tablet</span></li>
+        <li>Desktop<span class="visible-desktop">&#10004; Desktop</span></li>
+      </ul>
+      <h4>Hidden on...</h4>
+      <p>Here, green checkmarks indicate that class is hidden in your current viewport.</p>
+      <ul class="responsive-utilities-test hidden-on">
+        <li>Phone<span class="hidden-phone">&#10004; Phone</span></li>
+        <li>Tablet<span class="hidden-tablet">&#10004; Tablet</span></li>
+        <li>Desktop<span class="hidden-desktop">&#10004; Desktop</span></li>
+      </ul>
+    </div><!-- /.span -->
+  </div><!-- /.row -->
+
+
+  <div class="row">
+    <div class="span4">
+    </div><!-- /.span -->
+  </div><!-- /.row -->
+</section>
+
+
+     <!-- Footer
+      ================================================== -->
+      <footer class="footer">
+        <p class="pull-right"><a href="#">Back to top</a></p>
+        <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
+        <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
+        <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
+      </footer>
+
+    </div><!-- /container -->
+
+
+
+    <!-- Le javascript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
+    <script src="assets/js/jquery.js"></script>
+    <script src="assets/js/google-code-prettify/prettify.js"></script>
+    <script src="assets/js/bootstrap-transition.js"></script>
+    <script src="assets/js/bootstrap-alert.js"></script>
+    <script src="assets/js/bootstrap-modal.js"></script>
+    <script src="assets/js/bootstrap-dropdown.js"></script>
+    <script src="assets/js/bootstrap-scrollspy.js"></script>
+    <script src="assets/js/bootstrap-tab.js"></script>
+    <script src="assets/js/bootstrap-tooltip.js"></script>
+    <script src="assets/js/bootstrap-popover.js"></script>
+    <script src="assets/js/bootstrap-button.js"></script>
+    <script src="assets/js/bootstrap-collapse.js"></script>
+    <script src="assets/js/bootstrap-carousel.js"></script>
+    <script src="assets/js/bootstrap-typeahead.js"></script>
+    <script src="assets/js/application.js"></script>
+
+
+  </body>
+</html>

docs/likebutton/docs/templates/layout.mustache

@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>{{title}}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <!-- Le styles -->
+    <link href="assets/css/bootstrap.css" rel="stylesheet">
+    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
+    <link href="assets/css/docs.css" rel="stylesheet">
+    <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
+
+    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+    <!--[if lt IE 9]>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <!-- Le fav and touch icons -->
+    <link rel="shortcut icon" href="assets/ico/favicon.ico">
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
+    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
+
+    {{#production}}
+    <script type="text/javascript">
+      var _gaq = _gaq || [];
+      _gaq.push(['_setAccount', 'UA-146052-10']);
+      _gaq.push(['_trackPageview']);
+      (function() {
+        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+      })();
+    </script>
+    {{/production}}
+  </head>
+
+  <body data-spy="scroll" data-target=".subnav" data-offset="50">
+
+
+  <!-- Navbar
+    ================================================== -->
+    <div class="navbar navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="brand" href="./index.html">Bootstrap</a>
+          <div class="nav-collapse collapse">
+            <ul class="nav">
+              <li class="{{index}}">
+                <a href="./index.html">{{_i}}Overview{{/i}}</a>
+              </li>
+              <li class="{{scaffolding}}">
+                <a href="./scaffolding.html">{{_i}}Scaffolding{{/i}}</a>
+              </li>
+              <li class="{{base-css}}">
+                <a href="./base-css.html">{{_i}}Base CSS{{/i}}</a>
+              </li>
+              <li class="{{components}}">
+                <a href="./components.html">{{_i}}Components{{/i}}</a>
+              </li>
+              <li class="{{javascript}}">
+                <a href="./javascript.html">{{_i}}Javascript plugins{{/i}}</a>
+              </li>
+              <li class="{{less}}">
+                <a href="./less.html">{{_i}}Using LESS{{/i}}</a>
+              </li>
+              <li class="divider-vertical"></li>
+              <li class="{{download}}">
+                <a href="./download.html">{{_i}}Customize{{/i}}</a>
+              </li>
+              <li class="{{examples}}">
+                <a href="./examples.html">{{_i}}Examples{{/i}}</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="container">
+
+{{>body}}
+
+
+     <!-- Footer
+      ================================================== -->
+      <footer class="footer">
+        <p class="pull-right"><a href="#">{{_i}}Back to top{{/i}}</a></p>
+        <p>{{_i}}Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.{{/i}}</p>
+        <p>{{_i}}Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.{{/i}}</p>
+        <p>{{_i}}Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.{{/i}}</p>
+      </footer>
+
+    </div><!-- /container -->
+
+
+
+    <!-- Le javascript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
+    <script src="assets/js/jquery.js"></script>
+    <script src="assets/js/google-code-prettify/prettify.js"></script>
+    <script src="assets/js/bootstrap-transition.js"></script>
+    <script src="assets/js/bootstrap-alert.js"></script>
+    <script src="assets/js/bootstrap-modal.js"></script>
+    <script src="assets/js/bootstrap-dropdown.js"></script>
+    <script src="assets/js/bootstrap-scrollspy.js"></script>
+    <script src="assets/js/bootstrap-tab.js"></script>
+    <script src="assets/js/bootstrap-tooltip.js"></script>
+    <script src="assets/js/bootstrap-popover.js"></script>
+    <script src="assets/js/bootstrap-button.js"></script>
+    <script src="assets/js/bootstrap-collapse.js"></script>
+    <script src="assets/js/bootstrap-carousel.js"></script>
+    <script src="assets/js/bootstrap-typeahead.js"></script>
+    <script src="assets/js/application.js"></script>
+
+    {{#production}}
+    <!-- Analytics
+    ================================================== -->
+    <script>
+      var _gauges = _gauges || [];
+      (function() {
+        var t   = document.createElement('script');
+        t.type  = 'text/javascript';
+        t.async = true;
+        t.id    = 'gauges-tracker';
+        t.setAttribute('data-site-id', '4f0dc9fef5a1f55508000013');
+        t.src = '//secure.gaug.es/track.js';
+        var s = document.getElementsByTagName('script')[0];
+        s.parentNode.insertBefore(t, s);
+      })();
+    </script>
+    {{/production}}
+
+  </body>
+</html>

docs/likebutton/docs/templates/pages/download.mustache

@@ -0,0 +1,338 @@
+<!-- Masthead
+================================================== -->
+<header class="jumbotron subhead" id="overview">
+  <h1>{{_i}}Customize and download{{/i}}</h1>
+  <p class="lead">{{_i}}<a href="https://github.com/twitter/bootstrap/zipball/master">Download the full repository</a> or customize your entire Bootstrap build by selecting only the components, javascript plugins, and assets you need.{{/i}}</p>
+  <div class="subnav">
+    <ul class="nav nav-pills">
+      <li><a href="#components">{{_i}}1. Choose components{{/i}}</a></li>
+      <li><a href="#plugins">{{_i}}2. Select jQuery plugins{{/i}}</a></li>
+      <li><a href="#variables">{{_i}}3. Customize variables{{/i}}</a></li>
+      <li><a href="#download">{{_i}}4. Download{{/i}}</a></li>
+    </ul>
+  </div>
+</header>
+
+<section class="download" id="components">
+  <div class="page-header">
+    <a class="btn btn-small pull-right toggle-all" href="#">{{_i}}Toggle all{{/i}}</a>
+    <h1>
+      {{_i}}1. Choose components{{/i}}
+      <small>{{_i}}Get just the CSS you need{{/i}}</small>
+    </h1>
+  </div>
+  <div class="row download-builder">
+    <div class="span3">
+      <h3>{{_i}}Scaffolding{{/i}}</h3>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="reset.less"> {{_i}}Normalize and reset{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="scaffolding.less"> {{_i}}Body type and links{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="grid.less"> {{_i}}Grid system{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="layouts.less"> {{_i}}Layouts{{/i}}</label>
+      <h3>{{_i}}Base CSS{{/i}}</h3>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="type.less"> {{_i}}Headings, body, etc{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="code.less"> {{_i}}Code and pre{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="labels-badges.less"> {{_i}}Labels and badges{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="tables.less"> {{_i}}Tables{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="forms.less"> {{_i}}Forms{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="buttons.less"> {{_i}}Buttons{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="sprites.less"> {{_i}}Icons{{/i}}</label>
+    </div><!-- /span -->
+    <div class="span3">
+      <h3>{{_i}}Components{{/i}}</h3>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="button-groups.less"> {{_i}}Button groups and dropdowns{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="navs.less"> {{_i}}Navs, tabs, and pills{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="navbar.less"> {{_i}}Navbar{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="breadcrumbs.less"> {{_i}}Breadcrumbs{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="pagination.less"> {{_i}}Pagination{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="pager.less"> {{_i}}Pager{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="thumbnails.less"> {{_i}}Thumbnails{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="alerts.less"> {{_i}}Alerts{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="progress-bars.less"> {{_i}}Progress bars{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="hero-unit.less"> {{_i}}Hero unit{{/i}}</label>
+    </div><!-- /span -->
+    <div class="span3">
+      <h3>{{_i}}JS Components{{/i}}</h3>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="tooltip.less"> {{_i}}Tooltips{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="popovers.less"> {{_i}}Popovers{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="modals.less"> {{_i}}Modals{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="dropdowns.less"> {{_i}}Dropdowns{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="accordion.less"> {{_i}}Collapse{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="carousel.less"> {{_i}}Carousel{{/i}}</label>
+    </div><!-- /span -->
+    <div class="span3">
+      <h3>{{_i}}Miscellaneous{{/i}}</h3>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="wells.less"> {{_i}}Wells{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="close.less"> {{_i}}Close icon{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> {{_i}}Utilities{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="component-animations.less"> {{_i}}Component animations{{/i}}</label>
+      <h3>{{_i}}Responsive{{/i}}</h3>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-utilities.less"> {{_i}}Visible/hidden classes{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-767px-max.less"> {{_i}}Narrow tablets and below (<767px){{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-768px-979px.less"> {{_i}}Tablets to desktops (767-979px){{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-1200px-min.less"> {{_i}}Large desktops (>1200px){{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-navbar.less"> {{_i}}Responsive navbar{{/i}}</label>
+    </div><!-- /span -->
+  </div><!-- /row -->
+</section>
+
+<section class="download" id="plugins">
+  <div class="page-header">
+    <a class="btn btn-small pull-right toggle-all" href="#">{{_i}}Toggle all{{/i}}</a>
+    <h1>
+      {{_i}}2. Select jQuery plugins{{/i}}
+      <small>{{_i}}Quickly add only the necessary javascript{{/i}}</small>
+    </h1>
+  </div>
+  <div class="row download-builder">
+    <div class="span4">
+      <label class="checkbox">
+        <input type="checkbox" checked="true" value="bootstrap-transition.js">
+        {{_i}}Transitions <small>(required for any animation)</small>{{/i}}
+      </label>
+      <label class="checkbox">
+        <input type="checkbox" checked="true" value="bootstrap-modal.js">
+        {{_i}}Modals{{/i}}
+      </label>
+      <label class="checkbox">
+        <input type="checkbox" checked="true" value="bootstrap-dropdown.js">
+        {{_i}}Dropdowns{{/i}}
+      </label>
+      <label class="checkbox">
+        <input type="checkbox" checked="true" value="bootstrap-scrollspy.js">
+        {{_i}}Scrollspy{{/i}}
+      </label>
+      <label class="checkbox">
+        <input type="checkbox" checked="true" value="bootstrap-tab.js">
+        {{_i}}Togglable tabs{{/i}}
+      </label>
+      <label class="checkbox">
+        <input type="checkbox" checked="true" value="bootstrap-tooltip.js">
+        {{_i}}Tooltips{{/i}}
+      </label>
+    </div><!-- /span -->
+    <div class="span4">
+      <label class="checkbox">
+        <input type="checkbox" checked="true" value="bootstrap-popover.js">
+        {{_i}}Popovers <small>(requires Tooltips)</small>{{/i}}
+      </label>
+      <label class="checkbox">
+        <input type="checkbox" checked="true" value="bootstrap-alert.js">
+        {{_i}}Alert messages{{/i}}
+      </label>
+      <label class="checkbox">
+        <input type="checkbox" checked="true" value="bootstrap-button.js">
+        {{_i}}Buttons{{/i}}
+      </label>
+      <label class="checkbox">
+        <input type="checkbox" checked="true" value="bootstrap-collapse.js">
+        {{_i}}Collapse{{/i}}
+      </label>
+      <label class="checkbox">
+        <input type="checkbox" checked="true" value="bootstrap-carousel.js">
+        {{_i}}Carousel{{/i}}
+      </label>
+      <label class="checkbox">
+        <input type="checkbox" checked="true" value="bootstrap-typeahead.js">
+        {{_i}}Typeahead{{/i}}
+      </label>
+    </div><!-- /span -->
+    <div class="span4">
+      <h4 class="muted">{{_i}}Heads up!{{/i}}</h4>
+      <p class="muted">{{_i}}All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.{{/i}}</p>
+    </div><!-- /span -->
+  </div><!-- /row -->
+</section>
+
+
+<section class="download" id="variables">
+  <div class="page-header">
+    <a class="btn btn-small pull-right toggle-all" href="#">{{_i}}Reset to defaults{{/i}}</a>
+    <h1>
+      {{_i}}3. Customize variables{{/i}}
+      <small>{{_i}}Optionally modify Bootstrap without a compiler{{/i}}</small>
+    </h1>
+  </div>
+  <div class="row download-builder">
+    <div class="span3">
+      <h3>{{_i}}Scaffolding{{/i}}</h3>
+      <label>@bodyBackground</label>
+      <input type="text" class="span3" placeholder="@white">
+      <label>@textColor</label>
+      <input type="text" class="span3" placeholder="@grayDark">
+
+      <h3>{{_i}}Links{{/i}}</h3>
+      <label>@linkColor</label>
+      <input type="text" class="span3" placeholder="#08c">
+      <label>@linkColorHover</label>
+      <input type="text" class="span3" placeholder="darken(@linkColor, 15%)">
+      <h3>{{_i}}Colors{{/i}}</h3>
+      <label>@blue</label>
+      <input type="text" class="span3" placeholder="#049cdb">
+      <label>@green</label>
+      <input type="text" class="span3" placeholder="#46a546">
+      <label>@red</label>
+      <input type="text" class="span3" placeholder="#9d261d">
+      <label>@yellow</label>
+      <input type="text" class="span3" placeholder="#ffc40d">
+      <label>@orange</label>
+      <input type="text" class="span3" placeholder="#f89406">
+      <label>@pink</label>
+      <input type="text" class="span3" placeholder="#c3325f">
+      <label>@purple</label>
+      <input type="text" class="span3" placeholder="#7a43b6">
+
+      <h3>{{_i}}Sprites{{/i}}</h3>
+      <label>@iconSpritePath</label>
+      <input type="text" class="span3" placeholder="'../img/glyphicons-halflings.png'">
+      <label>@iconWhiteSpritePath</label>
+      <input type="text" class="span3" placeholder="'../img/glyphicons-halflings-white.png'">
+
+    </div><!-- /span -->
+    <div class="span3">
+      <h3>{{_i}}Grid system{{/i}}</h3>
+      <label>@gridColumns</label>
+      <input type="text" class="span3" placeholder="12">
+      <label>@gridColumnWidth</label>
+      <input type="text" class="span3" placeholder="60px">
+      <label>@gridGutterWidth</label>
+      <input type="text" class="span3" placeholder="20px">
+      <h3>{{_i}}Fluid grid system{{/i}}</h3>
+      <label>@fluidGridColumnWidth</label>
+      <input type="text" class="span3" placeholder="6.382978723%">
+      <label>@fluidGridGutterWidth</label>
+      <input type="text" class="span3" placeholder="2.127659574%">
+
+      <h3>{{_i}}Typography{{/i}}</h3>
+      <label>@sansFontFamily</label>
+      <input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
+      <label>@serifFontFamily</label>
+      <input type="text" class="span3" placeholder="Georgia, 'Times New Roman', Times, serif">
+      <label>@monoFontFamily</label>
+      <input type="text" class="span3" placeholder="Menlo, Monaco, 'Courier New', monospace">
+      <label>@baseFontSize</label>
+      <input type="text" class="span3" placeholder="13px">
+      <label>@baseFontFamily</label>
+      <input type="text" class="span3" placeholder="@sansFontFamily">
+      <label>@baseLineHeight</label>
+      <input type="text" class="span3" placeholder="18px">
+      <label>@altFontFamily</label>
+      <input type="text" class="span3" placeholder="@serifFontFamily">
+      <label>@headingsFontFamily</label>
+      <input type="text" class="span3" placeholder="inherit">
+      <label>@headingsFontWeight</label>
+      <input type="text" class="span3" placeholder="bold">
+      <label>@headingsColor</label>
+      <input type="text" class="span3" placeholder="inherit">
+      <label>@heroUnitBackground</label>
+      <input type="text" class="span3" placeholder="@grayLighter">
+      <label>@heroUnitHeadingColor</label>
+      <input type="text" class="span3" placeholder="inherit">
+      <label>@heroUnitLeadColor</label>
+      <input type="text" class="span3" placeholder="inherit">
+    </div><!-- /span -->
+    <div class="span3">
+      <h3>{{_i}}Tables{{/i}}</h3>
+      <label>@tableBackground</label>
+      <input type="text" class="span3" placeholder="transparent">
+      <label>@tableBackgroundAccent</label>
+      <input type="text" class="span3" placeholder="#f9f9f9">
+      <label>@tableBackgroundHover</label>
+      <input type="text" class="span3" placeholder="#f5f5f5">
+      <label>@tableBorder</label>
+      <input type="text" class="span3" placeholder="#ddd">
+
+      <h3>{{_i}}Navbar{{/i}}</h3>
+      <label>@navbarHeight</label>
+      <input type="text" class="span3" placeholder="40px">
+      <label>@navbarBackground</label>
+      <input type="text" class="span3" placeholder="@grayDarker">
+      <label>@navbarBackgroundHighlight</label>
+      <input type="text" class="span3" placeholder="@grayDark">
+      <label>@navbarText</label>
+      <input type="text" class="span3" placeholder="@grayLight">
+      <label>@navbarBrandColor</label>
+      <input type="text" class="span3" placeholder="@navbarLinkColor">
+      <label>@navbarLinkColor</label>
+      <input type="text" class="span3" placeholder="@grayLight">
+      <label>@navbarLinkColorHover</label>
+      <input type="text" class="span3" placeholder="@white">
+      <label>@navbarLinkColorActive</label>
+      <input type="text" class="span3" placeholder="@navbarLinkColorHover">
+      <label>@navbarLinkBackgroundHover</label>
+      <input type="text" class="span3" placeholder="transparent">
+      <label>@navbarLinkBackgroundActive</label>
+      <input type="text" class="span3" placeholder="@navbarBackground">
+      <label>@navbarSearchBackground</label>
+      <input type="text" class="span3" placeholder="lighten(@navbarBackground, 25%)">
+      <label>@navbarSearchBackgroundFocus</label>
+      <input type="text" class="span3" placeholder="@white">
+      <label>@navbarSearchBorder</label>
+      <input type="text" class="span3" placeholder="darken(@navbarSearchBackground, 30%)">
+      <label>@navbarSearchPlaceholderColor</label>
+      <input type="text" class="span3" placeholder="#ccc">
+
+      <h3>{{_i}}Dropdowns{{/i}}</h3>
+      <label>@dropdownBackground</label>
+      <input type="text" class="span3" placeholder="@white">
+      <label>@dropdownBorder</label>
+      <input type="text" class="span3" placeholder="rgba(0,0,0,.2)">
+      <label>@dropdownLinkColor</label>
+      <input type="text" class="span3" placeholder="@grayDark">
+      <label>@dropdownLinkColorHover</label>
+      <input type="text" class="span3" placeholder="@white">
+      <label>@dropdownLinkBackgroundHover</label>
+      <input type="text" class="span3" placeholder="@linkColor">
+    </div><!-- /span -->
+    <div class="span3">
+      <h3>{{_i}}Forms{{/i}}</h3>
+      <label>@placeholderText</label>
+      <input type="text" class="span3" placeholder="@grayLight">
+      <label>@inputBackground</label>
+      <input type="text" class="span3" placeholder="@white">
+      <label>@inputBorder</label>
+      <input type="text" class="span3" placeholder="#ccc">
+      <label>@inputBorderRadius</label>
+      <input type="text" class="span3" placeholder="3px">
+      <label>@inputDisabledBackground</label>
+      <input type="text" class="span3" placeholder="@grayLighter">
+      <label>@formActionsBackground</label>
+      <input type="text" class="span3" placeholder="#f5f5f5">
+
+      <label>@btnPrimaryBackground</label>
+      <input type="text" class="span3" placeholder="@linkColor">
+      <label>@btnPrimaryBackgroundHighlight</label>
+      <input type="text" class="span3" placeholder="darken(@white, 10%);">
+
+      <h3>{{_i}}Form states &amp; alerts{{/i}}</h3>
+      <label>@warningText</label>
+      <input type="text" class="span3" placeholder="#c09853">
+      <label>@warningBackground</label>
+      <input type="text" class="span3" placeholder="#fcf8e3">
+      <label>@errorText</label>
+      <input type="text" class="span3" placeholder="#b94a48">
+      <label>@errorBackground</label>
+      <input type="text" class="span3" placeholder="#f2dede">
+      <label>@successText</label>
+      <input type="text" class="span3" placeholder="#468847">
+      <label>@successBackground</label>
+      <input type="text" class="span3" placeholder="#dff0d8">
+      <label>@infoText</label>
+      <input type="text" class="span3" placeholder="#3a87ad">
+      <label>@infoBackground</label>
+      <input type="text" class="span3" placeholder="#d9edf7">
+    </div><!-- /span -->
+  </div><!-- /row -->
+</section>
+
+<section class="download" id="download">
+  <div class="page-header">
+    <h1>
+      {{_i}}4. Download{{/i}}
+    </h1>
+  </div>
+  <div class="download-btn">
+    <a class="btn btn-primary" href="#" {{#production}}onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);"{{/production}}>Customize and Download</a>
+    <h4>{{_i}}What's included?{{/i}}</h4>
+    <p>{{_i}}Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.{{/i}}</p>
+  </div>
+</section><!-- /download -->

docs/likebutton/docs/templates/pages/examples.mustache

@@ -0,0 +1,31 @@
+<!-- Masthead
+================================================== -->
+<header class="jumbotron subhead" id="overview">
+  <h1>{{_i}}Bootstrap examples{{/i}}</h1>
+  <p class="lead">{{_i}}We've included a few basic examples as starting points for your work with Bootstrap. We encourage folks to iterate on these examples and not simply use them as an end result.{{/i}}</p>
+</header>
+
+
+<ul class="thumbnails bootstrap-examples">
+  <li class="span4">
+    <a class="thumbnail" href="examples/hero.html">
+      <img src="assets/img/examples/bootstrap-example-hero.jpg" alt="">
+    </a>
+    <h3>{{_i}}Basic marketing site{{/i}}</h3>
+    <p>{{_i}}Featuring a hero unit for a primary message and three supporting elements.{{/i}}</p>
+  </li>
+  <li class="span4">
+    <a class="thumbnail" href="examples/fluid.html">
+      <img src="assets/img/examples/bootstrap-example-fluid.jpg" alt="">
+    </a>
+    <h3>{{_i}}Fluid layout{{/i}}</h3>
+    <p>{{_i}}Uses our new responsive, fluid grid system to create a seamless liquid layout.{{/i}}</p>
+  </li>
+  <li class="span4">
+    <a class="thumbnail" href="examples/starter-template.html">
+      <img src="assets/img/examples/bootstrap-example-starter.jpg" alt="">
+    </a>
+    <h3>{{_i}}Starter template{{/i}}</h3>
+    <p>{{_i}}A barebones HTML document with all the Bootstrap CSS and javascript included.{{/i}}</p>
+  </li>
+</ul>

docs/likebutton/docs/templates/pages/index.mustache

@@ -0,0 +1,144 @@
+<!-- Masthead
+================================================== -->
+<header class="jumbotron masthead">
+  <div class="inner">
+    <h1>{{_i}}Bootstrap, from Twitter{{/i}}</h1>
+    <p>{{_i}}Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.{{/i}}</p>
+    <p class="download-info">
+      <a href="https://github.com/twitter/bootstrap/" class="btn btn-primary btn-large" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'GitHub Project', 'View project on GitHub']);"{{/production}}>{{_i}}View project on GitHub{{/i}}</a>
+      <a href="assets/bootstrap.zip" class="btn btn-large" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 2.0.4']);"{{/production}}>{{_i}}Download Bootstrap <small>(v2.0.4)</small>{{/i}}</a>
+    </p>
+  </div>
+
+  <div class="bs-links">
+    <ul class="quick-links">
+      <li><a href="./upgrading.html">{{_i}}Upgrading from 1.4{{/i}}</a></li>
+      <li><a href="https://github.com/twitter/bootstrap/zipball/master">{{_i}}Download with docs{{/i}}</a></li>
+      <li><a href="http://blog.getbootstrap.com">{{_i}}Read the blog{{/i}}</a></li>
+      <li><a href="https://github.com/twitter/bootstrap/issues?state=open">{{_i}}Submit issues{{/i}}</a></li>
+      <li><a href="https://github.com/twitter/bootstrap/wiki">{{_i}}Roadmap and changelog{{/i}}</a></li>
+    </ul>
+    <ul class="quick-links">
+      <li>
+        <iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="112px" height="20px"></iframe>
+      </li>
+      <li>
+        <iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="98px" height="20px"></iframe>
+      </li>
+      <li class="follow-btn">
+        <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">{{_i}}Follow @twbootstrap{{/i}}</a>
+      </li>
+      <li class="tweet-btn">
+        <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
+      </li>
+    </ul>
+  </div>
+</header>
+
+<hr class="soften">
+
+<div class="marketing">
+  <h1>{{_i}}Designed for everyone, everywhere.{{/i}}</h1>
+  <p class="marketing-byline">{{_i}}Need reasons to love Bootstrap? Look no further.{{/i}}</p>
+  <div class="row">
+    <div class="span4">
+      <img class="bs-icon" src="assets/img/glyphicons/glyphicons_042_group.png">
+      <h2>{{_i}}Built for and by nerds{{/i}}</h2>
+      <p>{{_i}}Like you, we love building awesome products on the web. We love it so much, we decided to help people just like us do it easier, better, and faster. Bootstrap is built for you.{{/i}}</p>
+    </div>
+    <div class="span4">
+      <img class="bs-icon" src="assets/img/glyphicons/glyphicons_079_podium.png">
+      <h2>{{_i}}For all skill levels{{/i}}</h2>
+      <p>{{_i}}Bootstrap is designed to help people of all skill levels&mdash;designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.{{/i}}</p>
+    </div>
+    <div class="span4">
+      <img class="bs-icon" src="assets/img/glyphicons/glyphicons_163_iphone.png">
+      <h2>{{_i}}Cross-everything{{/i}}</h2>
+      <p>{{_i}}Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.{{/i}}</p>
+    </div>
+  </div><!--/row-->
+  <div class="row">
+    <div class="span4">
+      <img class="bs-icon" src="assets/img/glyphicons/glyphicons_155_show_thumbnails.png">
+      <h2>{{_i}}12-column grid{{/i}}</h2>
+      <p>{{_i}}Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.{{/i}}</p>
+    </div>
+    <div class="span4">
+      <img class="bs-icon" src="assets/img/glyphicons/glyphicons_214_resize_small.png">
+      <h2>{{_i}}Responsive design{{/i}}</h2>
+      <p>{{_i}}With Bootstrap 2, we've gone fully responsive. Our components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.{{/i}}</p>
+    </div>
+    <div class="span4">
+      <img class="bs-icon" src="assets/img/glyphicons/glyphicons_266_book_open.png">
+      <h2>{{_i}}Styleguide docs{{/i}}</h2>
+      <p>{{_i}}Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only our features, but best practices and living, coded examples.{{/i}}</p>
+    </div>
+  </div><!--/row-->
+  <div class="row">
+    <div class="span4">
+      <img class="bs-icon" src="assets/img/glyphicons/glyphicons_082_roundabout.png">
+      <h2>{{_i}}Growing library{{/i}}</h2>
+      <p>{{_i}}Despite being only 10kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components ready to be put to use.{{/i}}</p>
+    </div>
+    <div class="span4">
+      <img class="bs-icon" src="assets/img/glyphicons/glyphicons_009_magic.png">
+      <h2>{{_i}}Custom jQuery plugins{{/i}}</h2>
+      <p>{{_i}}What good is an awesome design component without easy-to-use, proper, and extensible interactions? With Bootstrap, you get custom-built jQuery plugins to bring your projects to life.{{/i}}</p>
+    </div>
+    <div class="span4">
+      <img class="bs-icon" src="assets/img/less-small.png">
+      <h2>{{_i}}Built on LESS{{/i}}</h2>
+      <p>{{_i}}Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.{{/i}}</p>
+    </div>
+  </div><!--/row-->
+  <div class="row">
+    <div class="span3">
+      <img class="small-bs-icon" src="assets/img/icon-html5.png">
+      <h3>HTML5</h3>
+      <p>{{_i}}Built to support new HTML5 elements and syntax.{{/i}}</p>
+    </div>
+    <div class="span3">
+      <img class="small-bs-icon" src="assets/img/icon-css3.png">
+      <h3>CSS3</h3>
+      <p>{{_i}}Progressively enhanced components for ultimate style.{{/i}}</p>
+    </div>
+    <div class="span3">
+      <img class="small-bs-icon" src="assets/img/icon-github.png">
+      <h3>{{_i}}Open-source{{/i}}</h3>
+      <p>{{_i}}Built for and maintained by the community via <a href="https://github.com">GitHub</a>.{{/i}}</p>
+    </div>
+    <div class="span3">
+      <img class="small-bs-icon" src="assets/img/icon-twitter.png">
+      <h3>{{_i}}Made at Twitter{{/i}}</h3>
+      <p>{{_i}}Brought to you by an experienced <a href="http://twitter.com/fat">engineer</a> and <a href="http://twitter.com/mdo">designer</a>.{{/i}}</p>
+    </div>
+  </div><!--/row-->
+
+  <hr class="soften">
+
+  <h1>{{_i}}Built with Bootstrap.{{/i}}</h1>
+  <p class="marketing-byline">{{_i}}For even more sites built with Bootstrap, <a href="http://builtwithbootstrap.tumblr.com/" target="_blank">visit the unofficial Tumblr</a> or <a href="./examples.html">browse the examples</a>.{{/i}}</p>
+  <ul class="thumbnails example-sites">
+    <li class="span3">
+      <a class="thumbnail" href="http://soundready.fm/" target="_blank">
+        <img src="assets/img/example-sites/soundready.png" alt="SoundReady.fm">
+      </a>
+    </li>
+    <li class="span3">
+      <a class="thumbnail" href="http://kippt.com/" target="_blank">
+        <img src="assets/img/example-sites/kippt.png" alt="Kippt">
+      </a>
+    </li>
+    <li class="span3">
+      <a class="thumbnail" href="http://www.fleetio.com/" target="_blank">
+        <img src="assets/img/example-sites/fleetio.png" alt="Fleetio">
+      </a>
+    </li>
+    <li class="span3">
+      <a class="thumbnail" href="http://www.jshint.com/" target="_blank">
+        <img src="assets/img/example-sites/jshint.png" alt="JS Hint">
+      </a>
+    </li>
+  </ul>
+
+</div><!-- /.marketing -->

docs/likebutton/docs/templates/pages/less.mustache

@@ -0,0 +1,944 @@
+<!-- Masthead
+================================================== -->
+<header class="jumbotron subhead" id="overview">
+  <h1>{{_i}}Using LESS with Bootstrap{{/i}}</h1>
+  <p class="lead">{{_i}}Customize and extend Bootstrap with <a href="http://lesscss.org" target="_blank">LESS</a>, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.{{/i}}</p>
+  <div class="subnav">
+    <ul class="nav nav-pills">
+      <li><a href="#builtWith">{{_i}}Built with Less{{/i}}</a></li>
+      <li><a href="#variables">{{_i}}Variables{{/i}}</a></li>
+      <li><a href="#mixins">{{_i}}Mixins{{/i}}</a></li>
+      <li><a href="#compiling">{{_i}}Compiling Bootstrap{{/i}}</a></li>
+    </ul>
+  </div>
+</header>
+
+
+
+<!-- BUILT WITH LESS
+================================================== -->
+<section id="builtWith">
+  <div class="page-header">
+    <h1>{{_i}}Built with LESS{{/i}}</h1>
+  </div>
+  <div class="row">
+    <div class="span4">
+      <h3>{{_i}}Why LESS?{{/i}}</h3>
+      <p>{{_i}}Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.{{/i}}</p>
+    </div>
+    <div class="span4">
+      <h3>{{_i}}What's included?{{/i}}</h3>
+      <p>{{_i}}As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.{{/i}}</p>
+    </div>
+    <div class="span4">
+      <h3>{{_i}}Learn more{{/i}}</h3>
+      <img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS">
+      <p>{{_i}}Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.{{/i}}</p>
+    </div>
+  </div>
+  <div class="row">
+    <div class="span4">
+      <h3><a href="#variables">{{_i}}Variables{{/i}}</a></h3>
+      <p>{{_i}}Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though&mdash;assign colors or pixel values as variables and change them once.{{/i}}</p>
+    </div>
+    <div class="span4">
+      <h3><a href="#mixins">{{_i}}Mixins{{/i}}</a></h3>
+      <p>{{_i}}Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.{{/i}}</p>
+    </div>
+    <div class="span4">
+      <h3>{{_i}}Operations{{/i}}</h3>
+      <p>{{_i}}Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiply, divide, add, and subtract your way to CSS sanity.{{/i}}</p>
+    </div>
+  </div>
+</section>
+
+
+
+<!-- VARIABLES
+================================================== -->
+<section id="variables">
+  <div class="page-header">
+    <h1>{{_i}}Bootstrap variables <small>LESS variables, their values, and usage guidelines</small>{{/i}}</h1>
+  </div>
+
+  <h3>{{_i}}Scaffolding and links{{/i}}</h3>
+  <table class="table table-bordered table-striped">
+    <tbody>
+      <tr>
+        <td class="span4"><code>@bodyBackground</code></td>
+        <td><code>@white</code></td>
+        <td>{{_i}}Page background color{{/i}}</td>
+        <td class="swatch-col"><span class="swatch" style="background-color: #fff;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@textColor</code></td>
+        <td><code>@grayDark</code></td>
+        <td>{{_i}}Default text color for entire body, headings, and more{{/i}}</td>
+        <td class="swatch-col"><span class="swatch" style="background-color: #333;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@linkColor</code></td>
+        <td><code>#08c</code></td>
+        <td>{{_i}}Default link text color{{/i}}</td>
+        <td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@linkColorHover</code></td>
+        <td><code>darken(@linkColor, 15%)</code></td>
+        <td>{{_i}}Default link text hover color{{/i}}</td>
+        <td><span class="swatch" style="background-color: #005580;"></span></td>
+      </tr>
+    </tbody>
+  </table>
+  <h3>{{_i}}Grid system{{/i}}</h3>
+  <table class="table table-bordered table-striped">
+    <tbody>
+      <tr>
+        <td class="span4"><code>@gridColumns</code></td>
+        <td>12</td>
+      </tr>
+      <tr>
+        <td><code>@gridColumnWidth</code></td>
+        <td>60px</td>
+      </tr>
+      <tr>
+        <td><code>@gridGutterWidth</code></td>
+        <td>20px</td>
+      </tr>
+      <tr>
+        <td><code>@fluidGridColumnWidth</code></td>
+        <td>6.382978723%</td>
+      </tr>
+      <tr>
+        <td><code>@fluidGridGutterWidth</code></td>
+        <td>2.127659574%</td>
+      </tr>
+    </tbody>
+  </table>
+  <h3>{{_i}}Typography{{/i}}</h3>
+  <table class="table table-bordered table-striped">
+    <tbody>
+      <tr>
+        <td class="span4"><code>@sansFontFamily</code></td>
+        <td colspan="2">"Helvetica Neue", Helvetica, Arial, sans-serif</td>
+      </tr>
+      <tr>
+        <td><code>@serifFontFamily</code></td>
+        <td colspan="2"><code>Georgia, "Times New Roman", Times, serif</code></td>
+      </tr>
+      <tr>
+        <td><code>@monoFontFamily</code></td>
+        <td colspan="2">Menlo, Monaco, "Courier New", monospace</td>
+      </tr>
+
+      <tr>
+        <td><code>@baseFontSize</code></td>
+        <td>13px</td>
+        <td><em class="muted">Must be pixels</em></td>
+      </tr>
+      <tr>
+        <td><code>@baseFontFamily</code></td>
+        <td colspan="2"><code>@sansFontFamily</code></td>
+      </tr>
+      <tr>
+        <td><code>@baseLineHeight</code></td>
+        <td>18px</td>
+        <td><em class="muted">Must be pixels</em></td>
+      </tr>
+      <tr>
+        <td><code>@altFontFamily</code></td>
+        <td colspan="2"><code>@serifFontFamily</code></td>
+      </tr>
+
+      <tr>
+        <td><code>@headingsFontFamily</code></td>
+        <td colspan="2"><code>inherit</code></td>
+      </tr>
+      <tr>
+        <td><code>@headingsFontWeight</code></td>
+        <td colspan="2"><code>bold</code></td>
+      </tr>
+      <tr>
+        <td><code>@headingsColor</code></td>
+        <td colspan="2"><code>inherit</code></td>
+      </tr>
+    </tbody>
+  </table>
+  <h3>{{_i}}Tables{{/i}}</h3>
+  <table class="table table-bordered table-striped">
+    <tbody>
+      <tr>
+        <td class="span4"><code>@tableBackground</code></td>
+        <td><code>transparent</code></td>
+      </tr>
+      <tr>
+        <td><code>@tableBackgroundAccent</code></td>
+        <td><code>#f9f9f9</code></td>
+      </tr>
+      <tr>
+        <td><code>@tableBackgroundHover</code></td>
+        <td><code>#f5f5f5</code></td>
+      </tr>
+      <tr>
+        <td><code>@tableBorder</code></td>
+        <td><code>ddd</code></td>
+      </tr>
+    </tbody>
+  </table>
+
+  <h3>{{_i}}Grayscale colors{{/i}}</h3>
+  <table class="table table-bordered table-striped">
+    <tbody>
+      <tr>
+        <td class="span4"><code>@black</code></td>
+        <td>#000</td>
+        <td class="swatch-col"><span class="swatch" style="background-color: #000;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@grayDarker</code></td>
+        <td>#222</td>
+        <td><span class="swatch" style="background-color: #222;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@grayDark</code></td>
+        <td>#333</td>
+        <td><span class="swatch" style="background-color: #333;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@gray</code></td>
+        <td>#555</td>
+        <td><span class="swatch" style="background-color: #555;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@grayLight</code></td>
+        <td>#999</td>
+        <td><span class="swatch" style="background-color: #999;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@grayLighter</code></td>
+        <td>#eee</td>
+        <td><span class="swatch" style="background-color: #eee;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@white</code></td>
+        <td>#fff</td>
+        <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+      </tr>
+    </tbody>
+  </table>
+  <h3>{{_i}}Accent colors{{/i}}</h3>
+  <table class="table table-bordered table-striped">
+    <tbody>
+      <tr>
+        <td class="span4"><code>@blue</code></td>
+        <td>#049cdb</td>
+        <td class="swatch-col"><span class="swatch" style="background-color: #049cdb;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@green</code></td>
+        <td>#46a546</td>
+        <td><span class="swatch" style="background-color: #46a546;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@red</code></td>
+        <td>#9d261d</td>
+        <td><span class="swatch" style="background-color: #9d261d;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@yellow</code></td>
+        <td>#ffc40d</td>
+        <td><span class="swatch" style="background-color: #ffc40d;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@orange</code></td>
+        <td>#f89406</td>
+        <td><span class="swatch" style="background-color: #f89406;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@pink</code></td>
+        <td>#c3325f</td>
+        <td><span class="swatch" style="background-color: #c3325f;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@purple</code></td>
+        <td>#7a43b6</td>
+        <td><span class="swatch" style="background-color: #7a43b6;"></span></td>
+      </tr>
+    </tbody>
+  </table>
+
+
+  <h3>{{_i}}Components{{/i}}</h3>
+
+  <h4>{{_i}}Buttons{{/i}}</h4>
+  <table class="table table-bordered table-striped">
+    <tbody>
+      <tr>
+        <td class="span4"><code>@btnBackground</code></td>
+        <td><code>@white</code></td>
+        <td class="swatch-col"><span class="swatch" style="background-color: #fff;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@btnBackgroundHighlight</code></td>
+        <td><code>darken(@white, 10%)</code></td>
+        <td class="swatch-col"><span class="swatch" style="background-color: #e6e6e6;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@btnBorder</code></td>
+        <td><code>darken(@white, 20%)</code></td>
+        <td class="swatch-col"><span class="swatch" style="background-color: #ccc;"></span></td>
+      </tr>
+
+      <tr>
+        <td><code>@btnPrimaryBackground</code></td>
+        <td><code>@linkColor</code></td>
+        <td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@btnPrimaryBackgroundHighlight</code></td>
+        <td><code>spin(@btnPrimaryBackground, 15%)</code></td>
+        <td class="swatch-col"><span class="swatch" style="background-color: #05c;"></span></td>
+      </tr>
+
+      <tr>
+        <td><code>@btnInfoBackground</code></td>
+        <td><code>#5bc0de</code></td>
+        <td class="swatch-col"><span class="swatch" style="background-color: #5bc0de;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@btnInfoBackgroundHighlight</code></td>
+        <td><code>#2f96b4</code></td>
+        <td class="swatch-col"><span class="swatch" style="background-color: #2f96b4;"></span></td>
+      </tr>
+
+      <tr>
+        <td><code>@btnSuccessBackground</code></td>
+        <td><code>#62c462</code></td>
+        <td class="swatch-col"><span class="swatch" style="background-color: #62c462;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@btnSuccessBackgroundHighlight</code></td>
+        <td><code>51a351</code></td>
+        <td class="swatch-col"><span class="swatch" style="background-color: #51a351;"></span></td>
+      </tr>
+
+      <tr>
+        <td><code>@btnWarningBackground</code></td>
+        <td><code>lighten(@orange, 15%)</code></td>
+        <td class="swatch-col"><span class="swatch" style="background-color: #fbb450;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@btnWarningBackgroundHighlight</code></td>
+        <td><code>@orange</code></td>
+        <td class="swatch-col"><span class="swatch" style="background-color: #f89406;"></span></td>
+      </tr>
+
+      <tr>
+        <td><code>@btnDangerBackground</code></td>
+        <td><code>#ee5f5b</code></td>
+        <td class="swatch-col"><span class="swatch" style="background-color: #ee5f5b;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@btnDangerBackgroundHighlight</code></td>
+        <td><code>#bd362f</code></td>
+        <td class="swatch-col"><span class="swatch" style="background-color: #bd362f;"></span></td>
+      </tr>
+
+      <tr>
+        <td><code>@btnInverseBackground</code></td>
+        <td><code>@gray</code></td>
+        <td class="swatch-col"><span class="swatch" style="background-color: #555;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@btnInverseBackgroundHighlight</code></td>
+        <td><code>@grayDarker</code></td>
+        <td class="swatch-col"><span class="swatch" style="background-color: #222;"></span></td>
+      </tr>
+    </tbody>
+  </table>
+  <h4>{{_i}}Forms{{/i}}</h4>
+  <table class="table table-bordered table-striped">
+    <tbody>
+      <tr>
+        <td class="span4"><code>@placeholderText</code></td>
+        <td><code>@grayLight</code></td>
+      </tr>
+      <tr>
+        <td><code>@inputBackground</code></td>
+        <td><code>@white</code></td>
+      </tr>
+      <tr>
+        <td><code>@inputBorder</code></td>
+        <td><code>#ccc</code></td>
+      </tr>
+      <tr>
+        <td><code>@inputBorderRadius</code></td>
+        <td><code>3px</code></td>
+      </tr>
+      <tr>
+        <td><code>@inputDisabledBackground</code></td>
+        <td><code>@grayLighter</code></td>
+      </tr>
+      <tr>
+        <td><code>@formActionsBackground</code></td>
+        <td><code>#f5f5f5</code></td>
+      </tr>
+    </tbody>
+  </table>
+  <h4>{{_i}}Form states and alerts{{/i}}</h4>
+  <table class="table table-bordered table-striped">
+    <tbody>
+      <tr>
+        <td class="span4"><code>@warningText</code></td>
+        <td>#c09853</td>
+        <td><span class="swatch" style="background-color: #c09853;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@warningBackground</code></td>
+        <td>#f3edd2</td>
+        <td class="swatch-col"><span class="swatch" style="background-color: #f3edd2;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@errorText</code></td>
+        <td>#b94a48</td>
+        <td><span class="swatch" style="background-color: #b94a48;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@errorBackground</code></td>
+        <td>#f2dede</td>
+        <td><span class="swatch" style="background-color: #f2dede;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@successText</code></td>
+        <td>#468847</td>
+        <td><span class="swatch" style="background-color: #468847;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@successBackground</code></td>
+        <td>#dff0d8</td>
+        <td><span class="swatch" style="background-color: #dff0d8;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@infoText</code></td>
+        <td>#3a87ad</td>
+        <td><span class="swatch" style="background-color: #3a87ad;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@infoBackground</code></td>
+        <td>#d9edf7</td>
+        <td><span class="swatch" style="background-color: #d9edf7;"></span></td>
+      </tr>
+    </tbody>
+  </table>
+
+  <h4>{{_i}}Navbar{{/i}}</h4>
+  <table class="table table-bordered table-striped">
+    <tbody>
+      <tr>
+        <td class="span4"><code>@navbarHeight</code></td>
+        <td>40px</td>
+        <td class="swatch-col"></td>
+      </tr>
+      <tr>
+        <td><code>@navbarBackground</code></td>
+        <td><code>@grayDarker</code></td>
+        <td><span class="swatch" style="background-color: #222;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@navbarBackgroundHighlight</code></td>
+        <td><code>@grayDark</code></td>
+        <td><span class="swatch" style="background-color: #333;"></span></td>
+      </tr>
+
+      <tr>
+        <td><code>@navbarText</code></td>
+        <td><code>@grayLight</code></td>
+        <td><span class="swatch" style="background-color: #999;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@navbarLinkColor</code></td>
+        <td><code>@grayLight</code></td>
+        <td><span class="swatch" style="background-color: #999;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@navbarLinkColorHover</code></td>
+        <td><code>@white</code></td>
+        <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@navbarLinkColorActive</code></td>
+        <td><code>@navbarLinkColorHover</code></td>
+        <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@navbarLinkBackgroundHover</code></td>
+        <td><code>transparent</code></td>
+        <td><span class="swatch swatch-bordered" style="background-color: transparent;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@navbarLinkBackgroundActive</code></td>
+        <td><code>@navbarBackground</code></td>
+        <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+      </tr>
+
+      <tr>
+        <td><code>@navbarSearchBackground</code></td>
+        <td><code>lighten(@navbarBackground, 25%)</code></td>
+        <td><span class="swatch" style="background-color: #666;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@navbarSearchBackgroundFocus</code></td>
+        <td><code>@white</code></td>
+        <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@navbarSearchBorder</code></td>
+        <td><code>darken(@navbarSearchBackground, 30%)</code></td>
+        <td><span class="swatch" style="background-color: #111;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@navbarSearchPlaceholderColor</code></td>
+        <td><code>#ccc</code></td>
+        <td><span class="swatch" style="background-color: #ccc;"></span></td>
+      </tr>
+      <tr>
+        <td><code>@navbarBrandColor</code></td>
+        <td><code>@navbarLinkColor</code></td>
+        <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+      </tr>
+    </tbody>
+  </table>
+  <h4>{{_i}}Dropdowns{{/i}}</h4>
+  <table class="table table-bordered table-striped">
+    <tbody>
+      <tr>
+        <td class="span4"><code>@dropdownBackground</code></td>
+        <td><code>@white</code></td>
+      </tr>
+      <tr>
+        <td><code>@dropdownBorder</code></td>
+        <td><code>rgba(0,0,0,.2)</code></td>
+      </tr>
+      <tr>
+        <td><code>@dropdownLinkColor</code></td>
+        <td><code>@grayDark</code></td>
+      </tr>
+      <tr>
+        <td><code>@dropdownLinkColorHover</code></td>
+        <td><code>@white</code></td>
+      </tr>
+      <tr>
+        <td><code>@dropdownLinkBackgroundHover</code></td>
+        <td><code>@linkColor</code></td>
+      </tr>
+      <tr>
+        <td><code>@@dropdownDividerTop</code></td>
+        <td><code>#e5e5e5</code></td>
+      </tr>
+      <tr>
+        <td><code>@@dropdownDividerBottom</code></td>
+        <td><code>@white</code></td>
+      </tr>
+    </tbody>
+  </table>
+  <h4>{{_i}}Hero unit{{/i}}</h4>
+  <table class="table table-bordered table-striped">
+    <tbody>
+      <tr>
+        <td class="span4"><code>@heroUnitBackground</code></td>
+        <td><code>@grayLighter</code></td>
+        <td class="swatch-col"><span class="swatch" style="background-color: #eee;"></span></td>
+      </tr>
+      <tr>
+        <td class="span2"><code>@heroUnitHeadingColor</code></td>
+        <td><code>inherit</code></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><code>@heroUnitLeadColor</code></td>
+        <td><code>inhereit</code></td>
+        <td></td>
+      </tr>
+    </tbody>
+  </table>
+
+
+</section>
+
+
+
+<!-- MIXINS
+================================================== -->
+<section id="mixins">
+  <div class="page-header">
+    <h1>{{_i}}Bootstrap mixins <small></small>{{/i}}</h1>
+  </div>
+  <h2>{{_i}}About mixins{{/i}}</h2>
+  <div class="row">
+    <div class="span4">
+      <h3>{{_i}}Basic mixins{{/i}}</h3>
+      <p>{{_i}}A basic mixin is essentially an include or a partial for a snippet of CSS. They're written just like a CSS class and can be called anywhere.{{/i}}</p>
+<pre class="prettyprint linenums">
+.element {
+  .clearfix();
+}
+</pre>
+    </div><!-- /span4 -->
+    <div class="span4">
+      <h3>{{_i}}Parametric mixins{{/i}}</h3>
+      <p>{{_i}}A parametric mixin is just like a basic mixin, but it also accepts parameters (hence the name) with optional default values.{{/i}}</p>
+<pre class="prettyprint linenums">
+.element {
+  .border-radius(4px);
+}
+</pre>
+    </div><!-- /span4 -->
+    <div class="span4">
+      <h3>{{_i}}Easily add your own{{/i}}</h3>
+      <p>{{_i}}Nearly all of Bootstrap's mixins are stored in mixins.less, a wonderful utility .less file that enables you to use a mixin in any of the .less files in the toolkit.{{/i}}</p>
+      <p>{{_i}}So, go ahead and use the existing ones or feel free to add your own as you need.{{/i}}</p>
+    </div><!-- /span4 -->
+  </div><!-- /row -->
+  <h2>{{_i}}Included mixins{{/i}}</h2>
+  <h3>{{_i}}Utilities{{/i}}</h3>
+  <table class="table table-bordered table-striped">
+    <thead>
+      <tr>
+        <th class="span4">{{_i}}Mixin{{/i}}</th>
+        <th>{{_i}}Parameters{{/i}}</th>
+        <th>{{_i}}Usage{{/i}}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>.clearfix()</code></td>
+        <td><em class="muted">none</em></td>
+        <td>{{_i}}Add to any parent to clear floats within{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>.tab-focus()</code></td>
+        <td><em class="muted">none</em></td>
+        <td>{{_i}}Apply the Webkit focus style and round Firefox outline{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>.center-block()</code></td>
+        <td><em class="muted">none</em></td>
+        <td>{{_i}}Auto center a block-level element using <code>margin: auto</code>{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>.ie7-inline-block()</code></td>
+        <td><em class="muted">none</em></td>
+        <td>{{_i}}Use in addition to regular <code>display: inline-block</code> to get IE7 support{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>.size()</code></td>
+        <td><code>@height @width</code></td>
+        <td>{{_i}}Quickly set the height and width on one line{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>.square()</code></td>
+        <td><code>@size</code></td>
+        <td>{{_i}}Builds on <code>.size()</code> to set the width and height as same value{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>.opacity()</code></td>
+        <td><code>@opacity</code></td>
+        <td>{{_i}}Set, in whole numbers, the opacity percentage (e.g., "50" or "75"){{/i}}</td>
+      </tr>
+    </tbody>
+  </table>
+  <h3>Forms</h3>
+  <table class="table table-bordered table-striped">
+    <thead>
+      <tr>
+        <th class="span4">{{_i}}Mixin{{/i}}</th>
+        <th>{{_i}}Parameters{{/i}}</th>
+        <th>{{_i}}Usage{{/i}}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>.placeholder()</code></td>
+        <td><code>@color: @placeholderText</code></td>
+        <td>{{_i}}Set the <code>placeholder</code> text color for inputs{{/i}}</td>
+      </tr>
+    </tbody>
+  </table>
+  <h3>Typography</h3>
+  <table class="table table-bordered table-striped">
+    <thead>
+      <tr>
+        <th class="span4">{{_i}}Mixin{{/i}}</th>
+        <th>{{_i}}Parameters{{/i}}</th>
+        <th>{{_i}}Usage{{/i}}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>#font > #family > .serif()</code></td>
+        <td><em class="muted">none</em></td>
+        <td>{{_i}}Make an element use a serif font stack{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>#font > #family > .sans-serif()</code></td>
+        <td><em class="muted">none</em></td>
+        <td>{{_i}}Make an element use a sans-serif font stack{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>#font > #family > .monospace()</code></td>
+        <td><em class="muted">none</em></td>
+        <td>{{_i}}Make an element use a monospace font stack{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>#font > .shorthand()</code></td>
+        <td><code>@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight</code></td>
+        <td>{{_i}}Easily set font size, weight, and leading{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>#font > .serif()</code></td>
+        <td><code>@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight</code></td>
+        <td>{{_i}}Set font family to serif, and control size, weight, and leading{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>#font > .sans-serif()</code></td>
+        <td><code>@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight</code></td>
+        <td>{{_i}}Set font family to sans-serif, and control size, weight, and leading{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>#font > .monospace()</code></td>
+        <td><code>@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight</code></td>
+        <td>{{_i}}Set font family to monospace, and control size, weight, and leading{{/i}}</td>
+      </tr>
+    </tbody>
+  </table>
+  <h3>Grid system</h3>
+  <table class="table table-bordered table-striped">
+    <thead>
+      <tr>
+        <th class="span4">{{_i}}Mixin{{/i}}</th>
+        <th>{{_i}}Parameters{{/i}}</th>
+        <th>{{_i}}Usage{{/i}}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>.container-fixed()</code></td>
+        <td><em class="muted">none</em></td>
+        <td>{{_i}}Create a horizontally centered container for holding your content{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>#grid > .core()</code></td>
+        <td><code>@gridColumnWidth, @gridGutterWidth</code></td>
+        <td>{{_i}}Generate a pixel grid system (container, row, and columns) with <em>n</em> columns and <em>x</em> pixel wide gutter{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>#grid > .fluid()</code></td>
+        <td><code>@fluidGridColumnWidth, @fluidGridGutterWidth</code></td>
+        <td>{{_i}}Generate a percent grid system with <em>n</em> columns and <em>x</em> % wide gutter{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>#grid > .input()</code></td>
+        <td><code>@gridColumnWidth, @gridGutterWidth</code></td>
+        <td>{{_i}}Generate the pixel grid system for <code>input</code> elements, accounting for padding and borders{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>.makeColumn</code></td>
+        <td><code>@columns: 1, @offset: 0</code></td>
+        <td>{{_i}}Turn any <code>div</code> into a grid column without the <code>.span*</code> classes{{/i}}</td>
+      </tr>
+    </tbody>
+  </table>
+  <h3>{{_i}}CSS3 properties{{/i}}</h3>
+  <table class="table table-bordered table-striped">
+    <thead>
+      <tr>
+        <th class="span3">{{_i}}Mixin{{/i}}</th>
+        <th>{{_i}}Parameters{{/i}}</th>
+        <th>{{_i}}Usage{{/i}}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>.border-radius()</code></td>
+        <td><code>@radius</code></td>
+        <td>{{_i}}Round the corners of an element. Can be a single value or four space-separated values{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>.box-shadow()</code></td>
+        <td><code>@shadow</code></td>
+        <td>{{_i}}Add a drop shadow to an element{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>.transition()</code></td>
+        <td><code>@transition</code></td>
+        <td>{{_i}}Add CSS3 transition effect (e.g., <code>all .2s linear</code>){{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>.rotate()</code></td>
+        <td><code>@degrees</code></td>
+        <td>{{_i}}Rotate an element <em>n</em> degrees{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>.scale()</code></td>
+        <td><code>@ratio</code></td>
+        <td>{{_i}}Scale an element to <em>n</em> times its original size{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>.translate()</code></td>
+        <td><code>@x, @y</code></td>
+        <td>{{_i}}Move an element on the x and y planes{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>.background-clip()</code></td>
+        <td><code>@clip</code></td>
+        <td>{{_i}}Crop the background of an element (useful for <code>border-radius</code>){{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>.background-size()</code></td>
+        <td><code>@size</code></td>
+        <td>{{_i}}Control the size of background images via CSS3{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>.box-sizing()</code></td>
+        <td><code>@boxmodel</code></td>
+        <td>{{_i}}Change the box model for an element (e.g., <code>border-box</code> for a full-width <code>input</code>){{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>.user-select()</code></td>
+        <td><code>@select</code></td>
+        <td>{{_i}}Control cursor selection of text on a page{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>.backface-visibility()</code></td>
+        <td><code>@visibility: visible</code></td>
+        <td>{{_i}}Prevent flickering of content when using CSS 3D transforms{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>.resizable()</code></td>
+        <td><code>@direction: both</code></td>
+        <td>{{_i}}Make any element resizable on the right and bottom{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>.content-columns()</code></td>
+        <td><code>@columnCount, @columnGap: @gridGutterWidth</code></td>
+        <td>{{_i}}Make the content of any element use CSS3 columns{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>.hyphens()</code></td>
+        <td><code>@mode: auto</code></td>
+        <td>{{_i}}CSS3 hyphenation when you want it (includes <code>word-wrap: break-word</code>){{/i}}</td>
+      </tr>
+    </tbody>
+  </table>
+  <h3>{{_i}}Backgrounds and gradients{{/i}}</h3>
+  <table class="table table-bordered table-striped">
+    <thead>
+      <tr>
+        <th class="span4">{{_i}}Mixin{{/i}}</th>
+        <th>{{_i}}Parameters{{/i}}</th>
+        <th>{{_i}}Usage{{/i}}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>#translucent > .background()</code></td>
+        <td><code>@color: @white, @alpha: 1</code></td>
+        <td>{{_i}}Give an element a translucent background color{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>#translucent > .border()</code></td>
+        <td><code>@color: @white, @alpha: 1</code></td>
+        <td>{{_i}}Give an element a translucent border color{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>#gradient > .vertical()</code></td>
+        <td><code>@startColor, @endColor</code></td>
+        <td>{{_i}}Create a cross-browser vertical background gradient{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>#gradient > .horizontal()</code></td>
+        <td><code>@startColor, @endColor</code></td>
+        <td>{{_i}}Create a cross-browser horizontal background gradient{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>#gradient > .directional()</code></td>
+        <td><code>@startColor, @endColor, @deg</code></td>
+        <td>{{_i}}Create a cross-browser directional background gradient{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>#gradient > .vertical-three-colors()</code></td>
+        <td><code>@startColor, @midColor, @colorStop, @endColor</code></td>
+        <td>{{_i}}Create a cross-browser three-color background gradient{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>#gradient > .radial()</code></td>
+        <td><code>@innerColor, @outerColor</code></td>
+        <td>{{_i}}Create a cross-browser radial background gradient{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>#gradient > .striped()</code></td>
+        <td><code>@color, @angle</code></td>
+        <td>{{_i}}Create a cross-browser striped background gradient{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>#gradientBar()</code></td>
+        <td><code>@primaryColor, @secondaryColor</code></td>
+        <td>{{_i}}Used for buttons to assign a gradient and slightly darker border{{/i}}</td>
+      </tr>
+    </tbody>
+  </table>
+</section>
+
+
+
+<!-- COMPILING LESS AND BOOTSTRAP
+================================================== -->
+<section id="compiling">
+  <div class="page-header">
+    <h1>{{_i}}Compiling Bootstrap with LESS{{/i}}</h1>
+  </div>
+  <div class="alert alert-info">
+    {{_i}}<strong>Note:</strong> If you're submitting a pull request to GitHub with modified CSS, you <strong>must</strong> recompile the CSS via any of these methods.{{/i}}
+  </div>
+  <h2>{{_i}}Tools for compiling{{/i}}</h2>
+  <div class="row">
+    <div class="span4">
+      <h3>{{_i}}Node with makefile{{/i}}</h3>
+      <p>{{_i}}Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:{{/i}}</p>
+      <pre>$ npm install -g less jshint recess uglify-js</pre>
+      <p>{{_i}}Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.{{/i}}</p>
+      <p>{{_i}}Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).{{/i}}</p>
+    </div><!-- /span4 -->
+    <div class="span4">
+      <h3>{{_i}}Command line{{/i}}</h3>
+      <p>{{_i}}Install the LESS command line tool via Node and run the following command:{{/i}}</p>
+        <pre>$ lessc ./less/bootstrap.less > bootstrap.css</pre>
+      <p>{{_i}}Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!{{/i}}</p>
+    </div><!-- /span4 -->
+    <div class="span4">
+      <h3>{{_i}}Javascript{{/i}}</h3>
+      <p>{{_i}}<a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code>&lt;head&gt;</code>.{{/i}}</p>
+<pre class="prettyprint">
+&lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
+&lt;script src="/path/to/less.js"&gt;&lt;/script&gt;
+</pre>
+      <p>{{_i}}To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.{{/i}}</p>
+    </div><!-- /span4 -->
+  </div><!-- /row -->
+  <div class="row">
+    <div class="span4">
+      <h3>{{_i}}Unofficial Mac app{{/i}}</h3>
+      <p>{{_i}}<a href="http://incident57.com/less/">The unofficial Mac app</a> watches directories of .less files and compiles the code to local files after every save of a watched .less file.{{/i}}</p>
+      <p>{{_i}}If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.{{/i}}</p>
+    </div><!-- /span4 -->
+    <div class="span4">
+      <h3>{{_i}}More Mac apps{{/i}}</h3>
+      <h4><a href="http://crunchapp.net/" target="_blank">Crunch</a></h4>
+      <p>{{_i}}Crunch is a great looking LESS editor and compiler built on Adobe Air.{{/i}}</p>
+      <h4><a href="http://incident57.com/codekit/" target="_blank">CodeKit</a></h4>
+      <p>{{_i}}Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.{{/i}}</p>
+      <h4><a href="http://wearekiss.com/simpless" target="_blank">Simpless</a></h4>
+      <p>{{_i}}Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the <a href="https://github.com/Paratron/SimpLESS" target="_blank">source code is on GitHub</a>.{{/i}}</p>
+    </div><!-- /span4 -->
+  </div><!-- /row -->
+</section>

docs/likebutton/docs/templates/pages/scaffolding.mustache

@@ -0,0 +1,555 @@
+<!-- Masthead
+================================================== -->
+<header class="jumbotron subhead" id="overview">
+  <h1>{{_i}}Scaffolding{{/i}}</h1>
+  <p class="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p>
+  <div class="subnav">
+    <ul class="nav nav-pills">
+      <li><a href="#global">{{_i}}Global styles{{/i}}</a></li>
+      <li><a href="#gridSystem">{{_i}}Grid system{{/i}}</a></li>
+      <li><a href="#fluidGridSystem">{{_i}}Fluid grid system{{/i}}</a></li>
+      <li><a href="#gridCustomization">{{_i}}Customizing{{/i}}</a></li>
+      <li><a href="#layouts">{{_i}}Layouts{{/i}}</a></li>
+      <li><a href="#responsive">{{_i}}Responsive design{{/i}}</a></li>
+    </ul>
+  </div>
+</header>
+
+
+
+
+<!-- Global Bootstrap settings
+================================================== -->
+<section id="global">
+  <div class="page-header">
+    <h1>{{_i}}Global styles <small>for CSS reset, typography, and links</small>{{/i}}</h1>
+  </div>
+  <div class="row">
+    <div class="span4">
+      <h2>{{_i}}Requires HTML5 doctype{{/i}}</h2>
+      <p>{{_i}}Bootstrap makes use of HTML elements and CSS properties that require the use of the HTML5 doctype. Be sure to include it at the beginning of every Bootstrapped page in your project.{{/i}}</p>
+<pre class="prettyprint linenums">
+&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  ...
+&lt;/html&gt;
+</pre>
+    </div><!-- /.span -->
+    <div class="span4">
+      <h2>{{_i}}Typography and links{{/i}}</h2>
+      <p>{{_i}}Within the <strong>scaffolding.less</strong> file, we set basic global display, typography, and link styles. Specifically, we:{{/i}}</p>
+      <ul>
+        <li>{{_i}}Remove margin on the body{{/i}}</li>
+        <li>{{_i}}Set <code>background-color: white;</code> on the <code>body</code>{{/i}}</li>
+        <li>{{_i}}Use the <code>@baseFontFamily</code>, <code>@baseFontSize</code>, and <code>@baseLineHeight</code> attributes as our typographyic base{{/i}}</li>
+        <li>{{_i}}Set the global link color via <code>@linkColor</code> and apply link underlines only on <code>:hover</code>{{/i}}</li>
+      </ul>
+    </div><!-- /.span -->
+    <div class="span4">
+      <h2>{{_i}}Reset via Normalize{{/i}}</h2>
+      <p>{{_i}}As of Bootstrap 2, the traditional CSS reset has evolved to make use of elements from <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize.css</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> that also powers the <a href="http://html5boilerplate.com" target="_blank">HTML5 Boilerplate</a>.{{/i}}</p>
+      <p>{{_i}}The new reset can still be found in <strong>reset.less</strong>, but with many elements removed for brevity and accuracy.{{/i}}</p>
+    </div><!-- /.span -->
+  </div><!-- /.row -->
+</section>
+
+
+
+
+<!-- Grid system
+================================================== -->
+<section id="gridSystem">
+  <div class="page-header">
+    <h1>{{_i}}Default grid system <small>12 columns with a responsive twist</small>{{/i}}</h1>
+  </div>
+
+  <div class="row show-grid">
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+  </div>
+  <div class="row show-grid">
+    <div class="span4">4</div>
+    <div class="span4">4</div>
+    <div class="span4">4</div>
+  </div>
+  <div class="row show-grid">
+    <div class="span4">4</div>
+    <div class="span8">8</div>
+  </div>
+  <div class="row show-grid">
+    <div class="span6">6</div>
+    <div class="span6">6</div>
+  </div>
+  <div class="row show-grid">
+    <div class="span12">12</div>
+  </div>
+  <div class="row">
+    <div class="span4">
+      <p>{{_i}}The default grid system provided in Bootstrap utilizes <strong>12 columns</strong> that render out at widths of 724px, 940px (default without responsive CSS included), and 1170px. Below 767px viewports, the columns become fluid and stack vertically. {{/i}}</p>
+    </div><!-- /.span -->
+    <div class="span4">
+<pre class="prettyprint linenums">
+&lt;div class="row"&gt;
+  &lt;div class="span4"&gt;...&lt;/div&gt;
+  &lt;div class="span8"&gt;...&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+    </div><!-- /.span -->
+    <div class="span4">
+      <p>{{_i}}As shown here, a basic layout can be created with two "columns", each spanning a number of the 12 foundational columns we defined as part of our grid system.{{/i}}</p>
+    </div><!-- /.span -->
+  </div><!-- /.row -->
+
+  <br>
+
+  <h2>{{_i}}Offsetting columns{{/i}}</h2>
+  <div class="row show-grid">
+    <div class="span4">4</div>
+    <div class="span4 offset4">4 offset 4</div>
+  </div><!-- /row -->
+  <div class="row show-grid">
+    <div class="span3 offset3">3 offset 3</div>
+    <div class="span3 offset3">3 offset 3</div>
+  </div><!-- /row -->
+  <div class="row show-grid">
+    <div class="span8 offset4">8 offset 4</div>
+  </div><!-- /row -->
+<pre class="prettyprint linenums">
+&lt;div class="row"&gt;
+  &lt;div class="span4"&gt;...&lt;/div&gt;
+  &lt;div class="span4 offset4"&gt;...&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+  <br>
+
+  <h2>{{_i}}Nesting columns{{/i}}</h2>
+  <div class="row">
+    <div class="span6">
+      <p>{{_i}}With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column.{{/i}}</p>
+      <h3>{{_i}}Example{{/i}}</h3>
+      <p>{{_i}}Nested rows should include a set of columns that add up to the number of columns of it's parent. For example, two nested <code>.span3</code> columns should be placed within a <code>.span6</code>.{{/i}}</p>
+      <div class="row show-grid">
+        <div class="span6">
+          {{_i}}Level 1 of column{{/i}}
+          <div class="row show-grid">
+            <div class="span3">
+              {{_i}}Level 2{{/i}}
+            </div>
+            <div class="span3">
+              {{_i}}Level 2{{/i}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div><!-- /.span -->
+    <div class="span6">
+<pre class="prettyprint linenums">
+&lt;div class="row"&gt;
+  &lt;div class="span6"&gt;
+    {{_i}}Level 1 column{{/i}}
+    &lt;div class="row"&gt;
+      &lt;div class="span3"&gt;{{_i}}Level 2{{/i}}&lt;/div&gt;
+      &lt;div class="span3"&gt;{{_i}}Level 2{{/i}}&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+    </div><!-- /.span -->
+  </div><!-- /.row -->
+</section>
+
+
+
+<!-- Fluid grid system
+================================================== -->
+<section id="fluidGridSystem">
+  <div class="page-header">
+    <h1>{{_i}}Fluid grid system <small>12 responsive, percent-based columns</small>{{/i}}</h1>
+  </div>
+
+  <h2>{{_i}}Fluid columns{{/i}}</h2>
+  <div class="row-fluid show-grid">
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+  </div>
+  <div class="row-fluid show-grid">
+    <div class="span4">4</div>
+    <div class="span4">4</div>
+    <div class="span4">4</div>
+  </div>
+  <div class="row-fluid show-grid">
+    <div class="span4">4</div>
+    <div class="span8">8</div>
+  </div>
+  <div class="row-fluid show-grid">
+    <div class="span6">6</div>
+    <div class="span6">6</div>
+  </div>
+  <div class="row-fluid show-grid">
+    <div class="span12">12</div>
+  </div>
+
+  <div class="row">
+    <div class="span4">
+      <h3>{{_i}}Percents, not pixels{{/i}}</h3>
+      <p>{{_i}}The fluid grid system uses percents for column widths instead of fixed pixels. It also has the same responsive variations as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.{{/i}}</p>
+    </div><!-- /.span -->
+    <div class="span4">
+      <h3>{{_i}}Fluid rows{{/i}}</h3>
+      <p>{{_i}}Make any row fluid simply by changing <code>.row</code> to <code>.row-fluid</code>. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.{{/i}}</p>
+    </div><!-- /.span -->
+    <div class="span4">
+      <h3>{{_i}}Markup{{/i}}</h3>
+<pre class="prettyprint linenums">
+&lt;div class="row-fluid"&gt;
+  &lt;div class="span4"&gt;...&lt;/div&gt;
+  &lt;div class="span8"&gt;...&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+    </div><!-- /.span -->
+  </div><!-- /.row -->
+
+  <h2>{{_i}}Fluid nesting{{/i}}</h2>
+  <div class="row">
+    <div class="span6">
+      <p>{{_i}}Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.{{/i}}</p>
+      <div class="row-fluid show-grid">
+        <div class="span12">
+          {{_i}}Fluid 12{{/i}}
+          <div class="row-fluid show-grid">
+            <div class="span6">
+              {{_i}}Fluid 6{{/i}}
+            </div>
+            <div class="span6">
+              {{_i}}Fluid 6{{/i}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div><!-- /.span -->
+    <div class="span6">
+<pre class="prettyprint linenums">
+&lt;div class="row-fluid"&gt;
+  &lt;div class="span12"&gt;
+    {{_i}}Level 1 of column{{/i}}
+    &lt;div class="row-fluid"&gt;
+      &lt;div class="span6"&gt;{{_i}}Level 2{{/i}}&lt;/div&gt;
+      &lt;div class="span6"&gt;{{_i}}Level 2{{/i}}&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+    </div><!-- /.span -->
+  </div><!-- /.row -->
+
+</section>
+
+
+
+<!-- Customizaton
+================================================== -->
+<section id="gridCustomization">
+  <div class="page-header">
+    <h1>{{_i}}Grid customization{{/i}}</h1>
+  </div>
+  <table class="table table-bordered table-striped">
+    <thead>
+      <tr>
+        <th>{{_i}}Variable{{/i}}</th>
+        <th>{{_i}}Default value{{/i}}</th>
+        <th>{{_i}}Description{{/i}}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>@gridColumns</code></td>
+        <td>12</td>
+        <td>{{_i}}Number of columns{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>@gridColumnWidth</code></td>
+        <td>60px</td>
+        <td>{{_i}}Width of each column{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>@gridGutterWidth</code></td>
+        <td>20px</td>
+        <td>{{_i}}Negative space between columns{{/i}}</td>
+      </tr>
+    </tbody>
+  </table>
+  <div class="row">
+    <div class="span4">
+      <h3>{{_i}}Variables in LESS{{/i}}</h3>
+      <p>{{_i}}Built into Bootstrap are a handful of variables for customizing the default 940px grid system, documented above. All variables for the grid are stored in variables.less.{{/i}}</p>
+    </div><!-- /.span -->
+    <div class="span4">
+      <h3>{{_i}}How to customize{{/i}}</h3>
+      <p>{{_i}}Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the <a href="less.html#compiling">four ways documented to recompile</a>. If you're adding more columns, be sure to add the CSS for those in grid.less.{{/i}}</p>
+    </div><!-- /.span -->
+    <div class="span4">
+      <h3>{{_i}}Staying responsive{{/i}}</h3>
+      <p>{{_i}}Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to customize the grids in responsive.less.{{/i}}</p>
+    </div><!-- /.span -->
+  </div><!-- /.row -->
+
+</section>
+
+
+
+<!-- Layouts (Default and fluid)
+================================================== -->
+<section id="layouts">
+  <div class="page-header">
+    <h1>{{_i}}Layouts <small>Basic templates to create webpages</small>{{/i}}</h1>
+  </div>
+
+  <div class="row">
+    <div class="span6">
+      <h2>{{_i}}Fixed layout{{/i}}</h2>
+      <p>{{_i}}The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code>&lt;div class="container"&gt;</code>.{{/i}}</p>
+      <div class="mini-layout">
+        <div class="mini-layout-body"></div>
+      </div>
+<pre class="prettyprint linenums">
+&lt;body&gt;
+  &lt;div class="container"&gt;
+    ...
+  &lt;/div&gt;
+&lt;/body&gt;
+</pre>
+    </div><!-- /.span -->
+    <div class="span6">
+      <h2>{{_i}}Fluid layout{{/i}}</h2>
+      <p>{{_i}}<code>&lt;div class="container-fluid"&gt;</code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.{{/i}}</p>
+      <div class="mini-layout fluid">
+        <div class="mini-layout-sidebar"></div>
+        <div class="mini-layout-body"></div>
+      </div>
+<pre class="prettyprint linenums">
+&lt;div class="container-fluid"&gt;
+  &lt;div class="row-fluid"&gt;
+    &lt;div class="span2"&gt;
+      &lt;!--{{_i}}Sidebar content{{/i}}--&gt;
+    &lt;/div&gt;
+    &lt;div class="span10"&gt;
+      &lt;!--{{_i}}Body content{{/i}}--&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+    </div><!-- /.span -->
+  </div><!-- /.row -->
+</section>
+
+
+
+
+<!-- Responsive design
+================================================== -->
+<section id="responsive">
+  <div class="page-header">
+    <h1>{{_i}}Responsive design <small>Media queries for various devices and resolutions</small>{{/i}}</h1>
+  </div>
+  <!-- Supported devices -->
+  <div class="row">
+    <div class="span4">
+      <p><img src="assets/img/responsive-illustrations.png" alt="Responsive devices"></p>
+      <h3>{{_i}}What they do{{/i}}</h3>
+      <p>{{_i}}Media queries allow for custom CSS based on a number of conditions&mdash;ratios, widths, display type, etc&mdash;but usually focuses around <code>min-width</code> and <code>max-width</code>.{{/i}}</p>
+      <ul>
+        <li>{{_i}}Modify the width of column in our grid{{/i}}</li>
+        <li>{{_i}}Stack elements instead of float wherever necessary{{/i}}</li>
+        <li>{{_i}}Resize headings and text to be more appropriate for devices{{/i}}</li>
+      </ul>
+      <p>{{_i}}Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.{{/i}}</p>
+    </div><!-- /.span -->
+    <div class="span8">
+      <h2>{{_i}}Supported devices{{/i}}</h2>
+      <p>{{_i}}Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:{{/i}}</p>
+      <table class="table table-bordered table-striped">
+        <thead>
+          <tr>
+            <th>{{_i}}Label{{/i}}</th>
+            <th>{{_i}}Layout width{{/i}}</th>
+            <th>{{_i}}Column width{{/i}}</th>
+            <th>{{_i}}Gutter width{{/i}}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>{{_i}}Smartphones{{/i}}</td>
+            <td>480px and below</td>
+            <td class="muted" colspan="2">{{_i}}Fluid columns, no fixed widths{{/i}}</td>
+          </tr>
+          <tr>
+            <td>{{_i}}Smartphones to tablets{{/i}}</td>
+            <td>767px and below</td>
+            <td class="muted" colspan="2">{{_i}}Fluid columns, no fixed widths{{/i}}</td>
+          </tr>
+          <tr>
+            <td>{{_i}}Portrait tablets{{/i}}</td>
+            <td>768px and above</td>
+            <td>42px</td>
+            <td>20px</td>
+          </tr>
+          <tr>
+            <td>{{_i}}Default{{/i}}</td>
+            <td>980px and up</td>
+            <td>60px</td>
+            <td>20px</td>
+          </tr>
+          <tr>
+            <td>{{_i}}Large display{{/i}}</td>
+            <td>1200px and up</td>
+            <td>70px</td>
+            <td>30px</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <h3>{{_i}}Requires meta tag{{/i}}</h3>
+      <p>{{_i}}To ensure devices display responsive pages properly, include the viewport meta tag.{{/i}}</p>
+      <pre class="prettyprint linenums">&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
+    </div><!-- /.span -->
+  </div><!-- /.row -->
+
+  <br>
+
+  <!-- Media query code -->
+  <h2>{{_i}}Using the media queries{{/i}}</h2>
+  <div class="row">
+    <div class="span4">
+      <p>{{_i}}Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:{{/i}}</p>
+      <ol>
+        <li>{{_i}}Use the compiled responsive version, bootstrap-responsive.css{{/i}}</li>
+        <li>{{_i}}Add @import "responsive.less" and recompile Bootstrap{{/i}}</li>
+        <li>{{_i}}Modify and recompile responsive.less as a separate file{{/i}}</li>
+      </ol>
+      <p>{{_i}}<strong>Why not just include it?</strong> Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.{{/i}}</p>
+    </div><!-- /.span -->
+    <div class="span8">
+<pre class="prettyprint linenums">
+  /* {{_i}}Landscape phones and down{{/i}} */
+  @media (max-width: 480px) { ... }
+
+  /* {{_i}}Landscape phone to portrait tablet{{/i}} */
+  @media (max-width: 767px) { ... }
+
+  /* {{_i}}Portrait tablet to landscape and desktop{{/i}} */
+  @media (min-width: 768px) and (max-width: 979px) { ... }
+
+  /* {{_i}}Large desktop{{/i}} */
+  @media (min-width: 1200px) { ... }
+</pre>
+    </div><!-- /.span -->
+  </div><!-- /.row -->
+  <br>
+
+  <!-- Responsive utility classes -->
+  <h2>{{_i}}Responsive utility classes{{/i}}</h2>
+  <div class="row">
+    <div class="span4">
+      <h3>{{_i}}What are they{{/i}}</h2>
+      <p>{{_i}}For faster mobile-friendly development, use these basic utility classes for showing and hiding content by device.{{/i}}</p>
+      <h3>{{_i}}When to use{{/i}}</h2>
+      <p>{{_i}}Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.{{/i}}</p>
+      <p>{{_i}}For example, you might show a <code>&lt;select&gt;</code> element for nav on mobile layouts, but not on tablets or desktops.{{/i}}</p>
+    </div><!-- /.span -->
+    <div class="span8">
+      <h3>{{_i}}Support classes{{/i}}</h3>
+      <p>{{_i}}Shown here is a table of the classes we support and their effect on a given media query layout (labeled by device). They can be found in <code>responsive.less</code>.{{/i}}</p>
+      <table class="table table-bordered table-striped responsive-utilities">
+        <thead>
+          <tr>
+            <th>{{_i}}Class{{/i}}</th>
+            <th>{{_i}}Phones <small>480px and below</small>{{/i}}</th>
+            <th>{{_i}}Tablets <small>767px and below</small>{{/i}}</th>
+            <th>{{_i}}Desktops <small>768px and above</small>{{/i}}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th><code>.visible-phone</code></th>
+            <td class="is-visible">{{_i}}Visible{{/i}}</td>
+            <td class="is-hidden">{{_i}}Hidden{{/i}}</td>
+            <td class="is-hidden">{{_i}}Hidden{{/i}}</td>
+          </tr>
+          <tr>
+            <th><code>.visible-tablet</code></th>
+            <td class="is-hidden">{{_i}}Hidden{{/i}}</td>
+            <td class="is-visible">{{_i}}Visible{{/i}}</td>
+            <td class="is-hidden">{{_i}}Hidden{{/i}}</td>
+          </tr>
+          <tr>
+            <th><code>.visible-desktop</code></th>
+            <td class="is-hidden">{{_i}}Hidden{{/i}}</td>
+            <td class="is-hidden">{{_i}}Hidden{{/i}}</td>
+            <td class="is-visible">{{_i}}Visible{{/i}}</td>
+          </tr>
+          <tr>
+            <th><code>.hidden-phone</code></th>
+            <td class="is-hidden">{{_i}}Hidden{{/i}}</td>
+            <td class="is-visible">{{_i}}Visible{{/i}}</td>
+            <td class="is-visible">{{_i}}Visible{{/i}}</td>
+          </tr>
+          <tr>
+            <th><code>.hidden-tablet</code></th>
+            <td class="is-visible">{{_i}}Visible{{/i}}</td>
+            <td class="is-hidden">{{_i}}Hidden{{/i}}</td>
+            <td class="is-visible">{{_i}}Visible{{/i}}</td>
+          </tr>
+          <tr>
+            <th><code>.hidden-desktop</code></th>
+            <td class="is-visible">{{_i}}Visible{{/i}}</td>
+            <td class="is-visible">{{_i}}Visible{{/i}}</td>
+            <td class="is-hidden">{{_i}}Hidden{{/i}}</td>
+          </tr>
+        </tbody>
+      </table>
+      <h3>{{_i}}Test case{{/i}}</h3>
+      <p>{{_i}}Resize your browser or load on different devices to test the above classes.{{/i}}</p>
+      <h4>{{_i}}Visible on...{{/i}}</h4>
+      <p>{{_i}}Green checkmarks indicate that class is visible in your current viewport.{{/i}}</p>
+      <ul class="responsive-utilities-test">
+        <li>{{_i}}Phone{{/i}}<span class="visible-phone">&#10004; {{_i}}Phone{{/i}}</span></li>
+        <li>{{_i}}Tablet{{/i}}<span class="visible-tablet">&#10004; {{_i}}Tablet{{/i}}</span></li>
+        <li>{{_i}}Desktop{{/i}}<span class="visible-desktop">&#10004; {{_i}}Desktop{{/i}}</span></li>
+      </ul>
+      <h4>{{_i}}Hidden on...{{/i}}</h4>
+      <p>{{_i}}Here, green checkmarks indicate that class is hidden in your current viewport.{{/i}}</p>
+      <ul class="responsive-utilities-test hidden-on">
+        <li>{{_i}}Phone{{/i}}<span class="hidden-phone">&#10004; {{_i}}Phone{{/i}}</span></li>
+        <li>{{_i}}Tablet{{/i}}<span class="hidden-tablet">&#10004; {{_i}}Tablet{{/i}}</span></li>
+        <li>{{_i}}Desktop{{/i}}<span class="hidden-desktop">&#10004; {{_i}}Desktop{{/i}}</span></li>
+      </ul>
+    </div><!-- /.span -->
+  </div><!-- /.row -->
+
+
+  <div class="row">
+    <div class="span4">
+    </div><!-- /.span -->
+  </div><!-- /.row -->
+</section>

docs/likebutton/docs/templates/pages/upgrading.mustache

@@ -0,0 +1,194 @@
+<!-- Masthead
+================================================== -->
+<header class="jumbotron subhead" id="overview">
+  <h1>{{_i}}Upgrading to Bootstrap 2{{/i}}</h1>
+  <p class="lead">{{_i}}Learn about significant changes and additions since v1.4 with this handy guide.{{/i}}</p>
+</header>
+
+
+
+<!-- Project
+================================================== -->
+<section id="docs">
+  <div class="page-header">
+    <h1>{{_i}}Project changes{{/i}}</h1>
+  </div>
+  <ul>
+    <li>{{_i}}Docs: major updates across the board to general structure, examples, and code snippets. Also made responsive with new media queries.{{/i}}</li>
+    <li>{{_i}}Docs: all docs pages are now powered by Mustache templates and strings are wrapped in i18n tags for translation by the Twitter Translation Center. All changes to documentation must be done here and then compiled (similar to our CSS and LESS).{{/i}}</li>
+    <li>{{_i}}Repo directory structure: removed the compiled CSS from the root in favor of a large direct download link on the docs homepage. Compiled CSS is in <code>/docs/assets/css/</code>.{{/i}}</li>
+    <li>{{_i}}Docs and repo: one makefile, just type <code>make</code> in the Terminal and get updated docs and CSS.{{/i}}</li>
+  </ul>
+</section>
+
+
+
+<!-- Scaffolding
+================================================== -->
+<section id="scaffolding">
+  <div class="page-header">
+    <h1>{{_i}}Scaffolding{{/i}}</h1>
+  </div>
+  <h3>{{_i}}Grid system{{/i}}</h3>
+  <ul>
+    <li>{{_i}}Updated grid system, now only 12 columns instead of 16{{/i}}
+    <li>{{_i}}Responsive approach means your projects virtually work out of the box on smartphones, tablets, and more{{/i}}</li>
+    <li>{{_i}}Removed unused (by default) grid columns support for 17-24 columns{{/i}}</li>
+  </ul>
+  <h3>{{_i}}Responsive (media queries){{/i}}</h3>
+  <ul>
+    <li>{{_i}}Media queries added for <strong>basic support</strong> across mobile and tablet devices{{/i}}
+    <li>{{_i}}Responsive CSS is compiled separately, as bootstrap-responsive.css{{/i}}</li>
+  </ul>
+</section>
+
+
+
+<!-- Base CSS
+================================================== -->
+<section id="baseCSS">
+  <div class="page-header">
+    <h1>{{_i}}Base CSS{{/i}}</h1>
+  </div>
+  <h3>{{_i}}Typography{{/i}}</h3>
+  <ul>
+    <li>{{_i}}<code>h4</code> elements were dropped from 16px to 14px with a default <code>line-height</code> of 18px{{/i}}</li>
+    <li>{{_i}}<code>h5</code> elements were dropped from 14px to 12px{{/i}}</li>
+    <li>{{_i}}<code>h6</code> elements were dropped from 13px to 11px{{/i}}</li>
+    <li>{{_i}}Right-aligned option for blockquotes if <code>float: right;</code>{{/i}}</li>
+  </ul>
+  <h3>{{_i}}Code{{/i}}</h3>
+  <ul>
+    <li>{{_i}}New graphical style for <code>&lt;code&gt;</code>{{/i}}</li>
+    <li>{{_i}}Google Code Prettify styles updated (based on GitHub's gists){{/i}}</li>
+  </ul>
+  <h3>{{_i}}Tables{{/i}}</h3>
+  <ul>
+    <li>{{_i}}Improved support for <code>colspan</code> and <code>rowspan</code>{{/i}}</li>
+    <li>{{_i}}Styles now restricted to new base class, <code>.table</code>{{/i}}</li>
+    <li>{{_i}}Table classes standardized with <code>.table-</code> required as a prefix{{/i}}</li>
+    <li>{{_i}}Removed unused table color options (too much code for such little impact){{/i}}</li>
+    <li>{{_i}}Dropped support for TableSorter{{/i}}</li>
+  </ul>
+  <h3>{{_i}}Buttons{{/i}}</h3>
+  <ul>
+    <li>{{_i}}New classes for colors and sizes, all prefixed with <code>.btn-</code>{{/i}}</li>
+    <li>{{_i}}IE9: removed gradients and added rounded corners{{/i}}</li>
+    <li>{{_i}}Updated active state to make styling clearer in button groups (new) and look better with custom transition{{/i}}</li>
+    <li>{{_i}}New mixin, <code>.buttonBackground</code>, to set button gradients{{/i}}</li>
+    <li>{{_i}}The <code>.secondary</code> class was removed from modal examples in our docs as it never had associated styles.{{/i}}</li>
+  </ul>
+  <h3>{{_i}}Forms{{/i}}</h3>
+  <ul>
+    <li>{{_i}}Default form style is now vertical (stacked) to use less CSS and add greater flexibility{{/i}}</li>
+    <li>{{_i}}Form classes standardized with <code>.form-</code> required as a prefix{{/i}}</li>
+    <li>{{_i}}New built-in form defaults for search, inline, and horizontal forms{{/i}}</li>
+    <li>{{_i}}For horizontal forms, previous classes <code>.clearfix</code> and <code>.input</code> are equivalent to the new <code>.control-group</code> and <code>.controls</code>.{{/i}}</li>
+    <li>{{_i}}More flexible horizontal form markup with classes for all styling, including new optional class for the <code>label</code>{{/i}}</li>
+    <li>{{_i}}Form states: colors updated and customizable via new LESS variables{{/i}}</li>
+  </ul>
+  <h3>{{_i}}Icons, by Glyphicons{{/i}}</h3>
+  <ul>
+    <li>{{_i}}New Glyphicons Halflings icon set added in sprite form, in black and white{{/i}}</li>
+    <li>{{_i}}Simple markup required for an icon in tons of contexts: <code>&lt;i class="icon-cog"&gt;&lt;/&gt;</code>{{/i}}</li>
+    <li>{{_i}}Add another class, <code>.icon-white</code>, for white variation of the same icon{{/i}}</li>
+  </ul>
+</section>
+
+
+
+<!-- Components
+================================================== -->
+<section id="components">
+  <div class="page-header">
+    <h1>{{_i}}Components{{/i}}</h1>
+  </div>
+  <h3>{{_i}}Button groups and dropdowns{{/i}}</h3>
+  <ul>
+    <li>{{_i}}Two brand new components in 2.0: button groups and button dropdowns{{/i}}</li>
+    <li>{{_i}}Dependency: button dropdowns are built on button groups, and therefore require all their styles{{/i}}</li>
+    <li>{{_i}}Button groups, <code>.btn-group</code>, can be grouped one level higher with a button toolbar, <code>.btn-toolbar</code>{{/i}}</li>
+  </ul>
+  <h3>{{_i}}Navigation{{/i}}</h3>
+  <ul>
+    <li>{{_i}}Tabs and pills now require the use of a new base class, <code>.nav</code>, on their <code>&lt;ul&gt;</code> and the class names are now <code>.nav-pills</code> and <code>.nav-tabs</code>.{{/i}}</li>
+    <li>{{_i}}New nav list variation added that uses the same base class, <code>.nav</code>{{/i}}</li>
+    <li>{{_i}}Vertical tabs and pills have been added&mdash;just add <code>.nav-stacked</code> to the <code>&lt;ul&gt;</code>{{/i}}</li>
+    <li>{{_i}}Pills were restyled to be less rounded by default{{/i}}</li>
+    <li>{{_i}}Pills now have dropdown menu support (they share the same markup and styles as tabs){{/i}}</li>
+  </ul>
+  <h3>{{_i}}Navbar (formerly topbar){{/i}}</h3>
+  <ul>
+    <li>{{_i}}Base class changed from <code>.topbar</code> to <code>.navbar</code>{{/i}}</li>
+    <li>{{_i}}Now supports static position (default behavior, not fixed) and fixed to the top of viewport via <code>.navbar-fixed-top</code> (previously only supported fixed){{/i}}</li>
+    <li>{{_i}}Added vertical dividers to top-level nav{{/i}}</li>
+    <li>{{_i}}Improved support for inline forms in the navbar, which now require <code>.navbar-form</code> to properly scope styles to only the intended forms.{{/i}}</li>
+    <li>{{_i}}Navbar search form now requires use of the <code>.navbar-search</code> class and its input the use of <code>.search-query</code>. To position the search form, you <strong>must</strong> use <code>.pull-left</code> or <code>.pull-right</code>.{{/i}}</li>
+    <li>{{_i}}Added optional responsive markup for collapsing navbar contents for smaller resolutions and devices. <a href="./components.html#navbar">See navbar docs</a> for how to utilize.{{/i}}</li>
+  </ul>
+  <h3>{{_i}}Dropdown menus{{/i}}</h3>
+  <ul>
+    <li>{{_i}}Updated the <code>.dropdown-menu</code> to tighten up spacing{{/i}}</li>
+    <li>{{_i}}Now requires you to add a <code>&lt;span class="caret"&gt;&lt;/span&gt;</code> to show the dropdown arrow{{/i}}</li>
+    <li>{{_i}}Now requires you to add a <code>data-toggle="dropdown"</code> attribute to obtain toggling behavior{{/i}}</li>
+    <li>{{_i}}The navbar (fixed topbar) has brand new dropdowns. Gone are the dark versions and in their place are the standard white ones with an additional caret at their tops for clarity of position.{{/i}}</li>
+  </ul>
+  <h3>{{_i}}Labels{{/i}}</h3>
+  <ul>
+    <li>{{_i}}Label colors updated to match form state colors{{/i}}</li>
+    <li>{{_i}}Not only do they match graphically, but they are powered by the same new variables{{/i}}</li>
+  </ul>
+  <h3>{{_i}}Thumbnails{{/i}}</h3>
+  <ul>
+    <li>{{_i}}Formerly <code>.media-grid</code>, now just <code>.thumbnails</code>, we've thoroughly extended this component for more uses while maintaining overall simplicity out of the box.{{/i}}</li>
+    <li>{{_i}}Individual thumbnails now require <code>.thumbnail</code> class{{/i}}</li>
+  </ul>
+  <h3>{{_i}}Alerts{{/i}}</h3>
+  <ul>
+    <li>{{_i}}New base class: <code>.alert</code> instead of <code>.alert-message</code>{{/i}}</li>
+    <li>{{_i}}Class names standardized for other options, now all starting with <code>.alert-</code>{{/i}}</li>
+    <li>{{_i}}Redesigned base alert styles to combine the default alerts and block-level alerts into one{{/i}}</li>
+    <li>{{_i}}Block level alert class changed: <code>.alert-block</code> instead of <code>.block-message</code>{{/i}}</li>
+  </ul>
+  <h3>{{_i}}Progress bars{{/i}}</h3>
+  <ul>
+    <li>{{_i}}New in 2.0{{/i}}</li>
+    <li>{{_i}}Features multiple styles via classes, including striped and animated variations via CSS3{{/i}}</li>
+  </ul>
+  <h3>{{_i}}Miscellaneous components{{/i}}</h3>
+  <ul>
+    <li>{{_i}}Added documentation for the well component and the close icon (used in modals and alerts){{/i}}</li>
+  </ul>
+</section>
+
+
+
+<!-- Javascript
+================================================== -->
+<section id="javascript">
+  <div class="page-header">
+    <h1>{{_i}}Javascript plugins{{/i}}</h1>
+  </div>
+  <div class="alert alert-info">
+    <strong>{{_i}}Heads up!{{/i}}</strong> {{_i}}We've rewritten just about everything for our plugins, so head on over to <a href="./javascript.html">the Javascript page</a> to learn more.{{/i}}
+  </div>
+  <h3>{{_i}}Tooltips{{/i}}</h3>
+  <ul>
+    <li>{{_i}}The plugin method has been renamed from <code>twipsy()</code> to <code>tooltip()</code>, and the class name changed from <code>twipsy</code> to <code>tooltip</code>.{{/i}}</li>
+    <li>{{_i}}The <code>placement</code> option value that was <code>below</code> is now <code>bottom</code>, and <code>above</code> is now <code>top</code>.{{/i}}</li>
+    <li>{{_i}}The <code>animate</code> option was renamed to <code>animation</code>.{{/i}}</li>
+    <li>{{_i}}The <code>html</code> option was removed, as the tooltips default to allowing HTML now.{{/i}}</li>
+  </ul>
+  <h3>{{_i}}Popovers{{/i}}</h3>
+  <ul>
+    <li>{{_i}}Child elements now properly namespaced: <code>.title</code> to <code>.popover-title</code>, <code>.inner</code> to <code>.popover-inner</code>, and <code>.content</code> to <code>.popover-content</code>.{{/i}}</li>
+    <li>{{_i}}The <code>placement</code> option value that was <code>below</code> is now <code>bottom</code>, and <code>above</code> is now <code>top</code>.{{/i}}</li>
+  </ul>
+  <h3>{{_i}}New plugins{{/i}}</h3>
+  <ul>
+    <li>{{_i}}<a href="./javascript.html#collapse">Collapse</a>{{/i}}</li>
+    <li>{{_i}}<a href="./javascript.html#carousel">Carousel</a>{{/i}}</li>
+    <li>{{_i}}<a href="./javascript.html#typeahead">Typeahead</a>{{/i}}</li>
+  </ul>
+</section>
+