Merge pull request #421 from twbs/about

Adding an about page

docs/_includes/masthead.html

@@ -11,6 +11,7 @@
           <a class="docs-nav-item" href="/getting-started" data-ignore="push">Getting started</a>
           <a class="docs-nav-item" href="/components" data-ignore="push">Components</a>
           <a class="docs-nav-item" href="/examples" data-ignore="push">Examples</a>
+          <a class="docs-nav-item" href="/about" data-ignore="push">About</a>
           <a class="docs-nav-item" href="https://github.com/twbs/ratchet" data-ignore="push">GitHub project</a>
         </div>
       </nav>

docs/about.html

@@ -0,0 +1,77 @@
+---
+layout: default
+title: About · Ratchet
+---
+
+<div class="docs-sub-header">
+  {% include masthead.html %}
+  <div class="container">
+    <div class="docs-sub-content">
+      <h2 class="page-title">About</h2>
+      <p class="page-description">Learn about the project's history and meet the maintaining team.</p>
+    </div>
+    {% include ad.html %}
+  </div>
+</div>
+
+<div class="container">
+  <div class="column-group">
+    <div class="column lg-units-8 docs-content">
+      <div class="docs-section">
+        <h2>History</h2>
+        <p>The idea for Ratchet was developed by <a href="https://twitter.com/connors">@connors</a>, <a href="https://twitter.com/dhg">@dhg</a>, and <a href="https://twitter.com/fat">@fat</a> in mid-2012. Before it became a full fledged framework, Ratchet began as a series of HTML/CSS prototypes of the Twitter for iPhone app. These prototypes became invaluable to the process of testing new feature designs that ended up being shipped as part of the native mobile app.</p>
+        <p>As it became clear that this was the quickest and most effective way to design mobile apps, components were abstracted from these prototypes and became the framework you know today.</p>
+        <p>Released in November 2012, Ratchet quickly became one of the most popular prototyping tools on GitHub. Following that initial launch, we released v2 &#8211; a complete rewrite. With v2 we've abstracted the platform specific styles into their own theme CSS files, added an icon set called Ratchicons, and offically become part of the Bootstrap family.</p>
+      </div>
+
+      <div class="docs-section">
+        <h2>Team</h2>
+        <p class="lead">Ratchet is maintained by one of its creators, a couple of core contributors, and its awesome community.</p>
+
+        <div class="list-group">
+          <div class="list-group-item">
+            <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=connors&amp;type=follow"></iframe>
+            <a class="team-member" href="https://github.com/connors">
+              <img src="http://www.gravatar.com/avatar/53d633ae4622de17906338910085275a" alt="@connors">
+              <div class="team-member-info">  
+                <strong>Connor Sears</strong>
+                @connors
+              </div>
+            </a>
+          </div>
+          <div class="list-group-item">
+            <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=connor&amp;type=follow"></iframe>
+            <a class="team-member" href="https://github.com/connor">
+              <img src="http://www.gravatar.com/avatar/f12ed6301268a1a8d40f292135e6bfca" alt="@connor">
+              <div class="team-member-info">
+                <strong>Connor Montgomery</strong>
+                @connor
+              </div>
+            </a>
+          </div>
+          <div class="list-group-item">
+            <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=mdo&amp;type=follow"></iframe>
+            <a class="team-member" href="https://github.com/mdo">
+              <img src="http://www.gravatar.com/avatar/bc4ab438f7a4ce1c406aadc688427f2c" alt="@mdo">
+              <div class="team-member-info">
+                <strong>Mark Otto</strong>
+                @mdo
+              </div>
+            </a>
+          </div>
+        </div>
+
+        <p>Get involved with Ratchet development by <a href="https://github.com/twbs/ratchet/issues/new">opening an issue</a> or submitting a pull request. Read our <a href="https://github.com/twbs/ratchet/blob/master/CONTRIBUTING.md">contributing guidelines</a> for information on how we develop.</p>
+      </div>
+    </div>
+
+    <div class="column lg-units-4">
+      {% include download-module.html %}
+    </div>
+  </div>
+
+  <div class="column">
+    <!-- Footer -->
+    {% include footer.html %}
+  </div>
+</div>

docs/assets/css/docs.css

@@ -1995,3 +1995,46 @@ hr {
 .bs-callout-info h4 {
   color: #5bc0de;
 }
+
+.list-group {
+  margin-bottom: 20px;
+  padding-left: 0;
+}
+
+.list-group-item:first-child {
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+
+.list-group-item {
+  position: relative;
+  display: block;
+  padding: 10px 15px;
+  margin-bottom: -1px;
+  background-color: #fff;
+  border: 1px solid #ddd;
+}
+
+.list-group .team-member {
+  color: #555;
+  font-size: 14px;
+  line-height: 32px;
+}
+
+.list-group img {
+  float: left;
+  width: 32px;
+  margin-right: 10px;
+  border-radius: 4px;
+}
+
+.list-group .team-member-info {
+  overflow: hidden;
+}
+
+.list-group .github-btn {
+  float: right;
+  margin-top: 6px;
+  width: 121px;
+  height: 20px;
+}

docs/getting-started.html

@@ -19,15 +19,15 @@ title: Getting started · Ratchet
     <div class="column lg-units-8 docs-content">
       <div class="docs-section">
         <h2>Quick start</h2>
-        <p class="lead">Quickly get up and running with a Ratchet prototype.</p>
+        <p class="lead">Quickly get up and running with a Ratchet app.</p>
 
         <h3>1. Create your pages</h3>
         <p>Use the <a href="/components" data-ignore="push">documentation</a> as a reference for all the available components and piece together the pages of your app. Be sure to look at the <a href="#pageLayout">basic page template</a> and <a href="/examples" data-ignore="push">example applications</a>. Make sure to add <code>ratchet-theme-ios.css</code> or <code>ratchet-theme-android.css</code> to your app's <code>&lt;head&gt;</code> if you have a specific platform in mind.</p>
 
         <h3>2. Connect pages with push.js</h3>
-        <p>Read about <a href="/components/#push" data-ignore="push">push.js</a> then start connecting your pages. Push.js allows you to create a prototype that feels like a real app when you save it to your phone. (Need to have a server running).</p>
+        <p>Read about <a href="/components/#push" data-ignore="push">push.js</a> then start connecting your pages. Push.js allows you to create a app that feels like a real app when you save it to your phone. (Need to have a server running).</p>
 
-        <h3>3. Save the prototype to your phone</h3>
+        <h3>3. Save the app to your phone</h3>
         <p>There are <a href="https://groups.google.com/forum/#!topic/goratchet/IboE6SCMAyw" data-ignore="push">a few ways to do this</a>, but the simplest is to run a local server on your computer, point Safari on your iPhone to your computer, then click the <span class="icon icon-share"></span> button and "Add to Home Screen". For Android, check out <a href="https://developers.google.com/chrome/mobile/docs/installtohomescreen" data-ignore="push">this guide</a>.</p>
       </div>
 

sass/docs.scss

@@ -1087,3 +1087,41 @@ hr {
 .bs-callout-info h4 {
   color: #5bc0de;
 }
+
+// Team module
+.list-group {
+  margin-bottom: 20px;
+  padding-left: 0;
+}
+.list-group-item:first-child {
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.list-group-item {
+  position: relative;
+  display: block;
+  padding: 10px 15px;
+  margin-bottom: -1px;
+  background-color: #fff;
+  border: 1px solid #ddd;
+}
+.list-group .team-member {
+  color: #555;
+  font-size: 14px;
+  line-height: 32px;
+}
+.list-group img {
+  float: left;
+  width: 32px;
+  margin-right: 10px;
+  border-radius: 4px;
+}
+.list-group .team-member-info {
+  overflow: hidden;
+}
+.list-group .github-btn {
+  float: right;
+  margin-top: 6px;
+  width: 121px;
+  height: 20px;
+}