Updates

airbnb · Feb 27, 2012 · b6b210b · b6b210b
1 parent 6804085
commit b6b210b
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 13 deletions.
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,13 @@
+Copyright 2012 Airbnb, 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.
diff --git a/assets/css/docs.css b/assets/css/docs.css
@@ -21,6 +21,17 @@ pre {
   font-size: 14px;
 }
 
+footer {
+  color: #999;
+  text-align: center; 
+  padding: 100px 0 40px;
+}
+
+footer p {
+  font-size: 14px;
+  line-height: 1em;
+}
+
 .description {
   position: relative;
 }
@@ -58,8 +69,28 @@ pre {
   background-color: #F7F7F9;
   border: 1px solid #E1E1E7;
   display: inline-block;
-  padding: 2px 3px;
+  padding: 2px 5px;
   color: #229695;
+  -webkit-border-radius: 3px;
+  -webkit-border-radius: 3px;
+     -moz-border-radius: 3px;
+     -moz-border-radius: 3px;
+          border-radius: 3px;
+          border-radius: 3px;
+}
+
+pre.inline {
+  background-color: #F7F7F9;
+  border: 1px solid #E1E1E7;
+  display: inline;
+  padding: 2px 5px;
+  color: #229695;
+  -webkit-border-radius: 3px;
+  -webkit-border-radius: 3px;
+     -moz-border-radius: 3px;
+     -moz-border-radius: 3px;
+          border-radius: 3px;
+          border-radius: 3px;
 }
 
 button,
@@ -74,16 +105,14 @@ a.button {
   text-transform: uppercase;
 }
 
-
 #sidebar {
   width: 200px;
   height: 100%;
   top: 0;
   left: 0;
   position: fixed;
   padding: 0 15px;
-  overflow-x: auto;
-  overflow-y: scroll;
+  overflow: auto;
   background-color: #FFF;
   border-right: 1px solid #ddd;
   -webkit-box-shadow: 1px 0 6px rgba(0,0,0,0.1);

diff --git a/index.html b/index.html
@@ -38,26 +38,26 @@ <h3 class='big-h3 bottom-60'>Backpack.js is a lightweight Backbone extension tha
 
           <section class='bottom-60 clearfix'>
             <a href='https://github.com/airbnb/backpack.js/zipball/master' class='download button round tk-league-gothic orange'>Download Backpack.js</a>
-            <a href='https://github.com/airbnb/backpack.js' class='fork button round tk-league-gothic'>Fork on Github</a>
+            <a href='https://github.com/airbnb/backpack.js' class='fork button round tk-league-gothic'>Hosted on Github</a>
           </section>
 
           <section class='bottom-60'>
             <a id='Introduction'>
               <h3 class='title-h3'>Introduction</h3>
             </a>
             <p>
-              Backpack.js is a pack of UI components for Backbone apps. You can get your app up and running quickly with a cleaner, more structured code base. Backpack.js has been built with a focus on the creation of components - CSS files have been included to help you get up and running, but feel free to modify styles as necessary.
+              Backpack.js is a lightweight Backbone extension that provides easy-to-use, extensible UI components, and was built by a couple of Airbnb Engineers.
             </p>
-
             <p>
-              After building the <a href='http://m.airbnb.com' target='_blank'>Airbnb mobile web app</a> with Backbone, we thought it would be nice to have a lightweight pack of components that we could drop in to any Backbone project.
+              Backpack.js has been built with a focus on the creation of components - CSS files have been included to help you get up and running, but feel free to modify styles as necessary.
             </p>
+
             <p>
-              Backbone enabled us to move quickly while building the Airbnb mobile web app. We made Backpack.js because we want to move faster.
+              After building the <a href='http://m.airbnb.com' target='_blank'>Airbnb mobile web app</a> with Backbone, we thought it would be nice to have a lightweight pack of components that we could drop in to any Backbone project.
             </p>
 
             <p>
-              This initial release is the result of our work abstracting components that we initially imagined and built for the Airbnb mobile site. We’ve decided to open this initial release to the community to gather feedback and welcome any contributions.
+              This initial release is the result of our work abstracting components that we initially imagined and built for the Airbnb mobile site. We would like to open this initial release to the community to hear what you guys think and welcome any contributions.
             </p>
           </section>
 
@@ -391,9 +391,9 @@ <h4 class='title-h4'>Backpack.Menu</h4>
             </section>
 
             <!-- 
-              ---------------------------------------
+              =======================================
                   Backpack.Modal
-              ---------------------------------------
+              =======================================
             -->
             <section class='modal description clearfix'>
               <a id='Modal'>
@@ -445,10 +445,56 @@ <h4 class='title-h4'>Backpack.Modal</h4>
               <h3 class='title-h3'>Hack on Backpack</h3>
             </a>
             <p>
-              Backpack.js is still it’s infancy. We’re open sourcing our progress thus far with the hope to continue to build Backpack.js along with the Backbone community. Our ultimate goal is to enable easier web application development through the use of simple, decoupled, reusable components.
+              Backpack.js is still in it's early-days. We’re open-sourcing our progress thus far with the hope to continue to build Backpack.js with the help of the Backbone community.
             </p>
+            <div class='code'>
+              <br/>
+              <p>Getting Stated</p>
+            <pre class='prettyprint linenums'>
+git clone git@github.com:airbnb/backpack.js.git
+cd backpack.js && npm install</pre>
+
+              <br/><br/>
+
+              <p>Cake Build Tools</p>
+              <pre class='prettyprint linenums'>
+cake compile        # Compile CoffeeScript source files
+
+cake build          # Creates /lib_path/Backpack-bundle.js & 
+                    # /lib_path/Backpack-bundle.min.js & 
+                    # /lib_path/js/*.js
+
+cake test           # Opens Jasmine SpecRunner. Watches
+                    # BackpackSpec-Bundle.js for changes
+
+cake docs           # Generate annotated source code 
+                    # with Docco
+
+cake watch          # Recompile CoffeeScript source files when 
+                    # modified to Backpack-bundle.js
+
+cake watch:js       # Recompile CoffeeScript source files when 
+                    # modified to individual .js files</pre>
+
+              <br/><br/>
+
+              <p>Testing</p>
+            </div>
+              <div>Backpack.js tests are written using <a href=''>jasmine</a> with <a href=''>sinon.js</a> and <a href=''>jasmine-sinon</a>.</div>
+
+              <br/>
+
+              <div>You can run the test suite with <pre class='inline'>cake test</pre>.</div>
           </section>
         </section>
+
+        <footer>
+          <p>Backpack.js was born at <a href='http://airbnb.com/jobs'>Airbnb HQ</a> in sunny San Francisco, CA</p>
+          <p>With A Lovely Backpack Logo Design by <a href='http://www.dannyprew.com/'>Danny Prew</a></p>
+          <p>Here's Backpack's <a href='https://github.com/airbnb/backpack.js/blob/master/LICENSE'>Apache 2.0 License</a></p>
+          <br/>
+          <a href='http://airbnb.com/jobs'><img src='http://a1.muscache.com/s/1318028912/images/logos/106x40.png' /></a>
+        </footer>
       </section>
 
     <script>