From 7c7d52b1717d35afc99bbe45e28f25ac5de8d64d Mon Sep 17 00:00:00 2001
From: Robert Payne <robertpayne@me.com>
Date: Fri, 17 Apr 2015 00:10:40 +1200
Subject: [PATCH] Updates

---
 _config.yml                     |   9 +-
 _includes/footer.html           |   3 +-
 _includes/head.html             |   2 +-
 _includes/header.html           |   2 +-
 _layouts/page.html              |  14 --
 _layouts/post.html              |  15 --
 _sass/_base.scss                |   1 +
 _sass/_settings.scss            |   8 +-
 _sass/_syntax-highlighting.scss |   1 -
 about.md                        |  11 --
 css/main.scss                   | 162 ------------------
 docs.md                         | 283 ++++++++++++++++++++++++++++++++
 faq.md                          |  28 ++++
 {img => images}/logo.png        | Bin
 {img => images}/logo_2x.png     | Bin
 index.html                      |  14 +-
 stylesheets/main.scss           | 212 ++++++++++++++++++++++++
 17 files changed, 546 insertions(+), 219 deletions(-)
 delete mode 100644 _layouts/page.html
 delete mode 100644 _layouts/post.html
 delete mode 100644 about.md
 delete mode 100755 css/main.scss
 create mode 100644 docs.md
 create mode 100644 faq.md
 rename {img => images}/logo.png (100%)
 rename {img => images}/logo_2x.png (100%)
 create mode 100755 stylesheets/main.scss

diff --git a/_config.yml b/_config.yml
index aaaeb88..a8cf8bb 100644
--- a/_config.yml
+++ b/_config.yml
@@ -1,8 +1,9 @@
-title: Snap
+title: SnapKit
 email: robertpayne@me.com
 description: Swift AutoLayout DSL for iOS and OS X
 url: "http://www.snapkit.io/"
-twitter_username: robertjpayne
-github_username:  robertjpayne
+github_username:  SnapKit
 
-markdown: kramdown
+markdown: redcarpet
+redcarpet:
+  extensions: ["no_intra_emphasis", "fenced_code_blocks", "autolink", "strikethrough", "tables", "superscript", "with_toc_data"]
diff --git a/_includes/footer.html b/_includes/footer.html
index 23037df..cb5be84 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,2 +1 @@
-<footer id="footer">
-</footer>
\ No newline at end of file
+<footer id="footer"></footer>
\ No newline at end of file
diff --git a/_includes/head.html b/_includes/head.html
index fe05cb4..6c868f1 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -7,7 +7,7 @@
   <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
 
   <link rel="stylesheet" type="text/css" href="//cloud.typography.com/797458/727746/css/fonts.css">
-  <link rel="stylesheet" type="text/css" href="/css/main.css">
+  <link rel="stylesheet" type="text/css" href="/stylesheets/main.css">
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
   <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.url }}">
 
diff --git a/_includes/header.html b/_includes/header.html
index e316faf..2c0b380 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -1,5 +1,5 @@
 <header id="header">
-  <h1 id="logo">SnapKit</h1>
+  <a id="logo" href="/">SnapKit</a>
   <nav id="nav">
     <ul>
       <li><a href="https://github.com/SnapKit/SnapKit">Github</a></li>
diff --git a/_layouts/page.html b/_layouts/page.html
deleted file mode 100644
index 74c1a11..0000000
--- a/_layouts/page.html
+++ /dev/null
@@ -1,14 +0,0 @@
----
-layout: default
----
-<div class="post">
-
-  <header class="post-header">
-    <h1 class="post-title">{{ page.title }}</h1>
-  </header>
-
-  <article class="post-content">
-    {{ content }}
-  </article>
-
-</div>
diff --git a/_layouts/post.html b/_layouts/post.html
deleted file mode 100644
index a2b4e52..0000000
--- a/_layouts/post.html
+++ /dev/null
@@ -1,15 +0,0 @@
----
-layout: default
----
-<div class="post">
-
-  <header class="post-header">
-    <h1 class="post-title">{{ page.title }}</h1>
-    <p class="post-meta">{{ page.date | date: "%b %-d, %Y" }}{% if page.author %} • {{ page.author }}{% endif %}{% if page.meta %} • {{ page.meta }}{% endif %}</p>
-  </header>
-
-  <article class="post-content">
-    {{ content }}
-  </article>
-
-</div>
diff --git a/_sass/_base.scss b/_sass/_base.scss
index df866f5..27e0ccf 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -1,5 +1,6 @@
 @import "normalize";
 @import "bourbon/bourbon";
 @import "settings";
+@import "foundation/components/grid";
 @import "foundation/components/type";
 @import "syntax-highlighting";
\ No newline at end of file
diff --git a/_sass/_settings.scss b/_sass/_settings.scss
index db86088..4a80d62 100644
--- a/_sass/_settings.scss
+++ b/_sass/_settings.scss
@@ -1,3 +1,5 @@
+@import "foundation/functions";
+
 $body-bg: #FFF;
 $body-font-color: #444;
 $body-font-weight: 400;
@@ -5,7 +7,11 @@ $body-font-style: normal;
 $header-font-color: #444;
 $header-font-weight: 500;
 $header-font-style: normal;
+$header-bottom-margin: 0.75rem;
 
 $body-font-family: "Gotham Rounded A", "Gotham Rounded B", "Helvetica Neue", "Helvetica", sans-serif;
 $header-font-family: $body-font-family;
-$header-line-height: 1;
\ No newline at end of file
+
+// $small-range: (0em, em-calc(767));
+// $medium-range: (em-calc(768), em-calc(1023));
+// $large-range: (em-calc(1024), 0em);
\ No newline at end of file
diff --git a/_sass/_syntax-highlighting.scss b/_sass/_syntax-highlighting.scss
index 96d98d0..c3d5d8d 100644
--- a/_sass/_syntax-highlighting.scss
+++ b/_sass/_syntax-highlighting.scss
@@ -3,7 +3,6 @@
  */
 .highlight {
     background: #fff;
-    // @extend %vertical-rhythm;
 
     .c     { color: #998; font-style: italic } // Comment
     .err   { color: #a61717; background-color: #e3d2d2 } // Error
diff --git a/about.md b/about.md
deleted file mode 100644
index 3ed64bb..0000000
--- a/about.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-layout: page
-title: About
-permalink: /about/
----
-
-This is the base Jekyll theme. You can find out more info about customizing your Jekyll theme, as well as basic Jekyll usage documentation at [jekyllrb.com](http://jekyllrb.com/)
-
-You can find the source code for the Jekyll new theme at: [github.com/jglovier/jekyll-new](https://github.com/jglovier/jekyll-new)
-
-You can find the source code for Jekyll at [github.com/jekyll/jekyll](https://github.com/jekyll/jekyll)
diff --git a/css/main.scss b/css/main.scss
deleted file mode 100755
index 41cc77a..0000000
--- a/css/main.scss
+++ /dev/null
@@ -1,162 +0,0 @@
----
----
-@charset "utf-8";
-@import "base";
-
-body, html {
-  -webkit-font-smoothing: antialiased;
-}
-
-strong {
-  font-weight: 500;
-}
-
-pre {
-  border: rem-calc(1) solid #CCC;
-  border-radius: rem-calc(5);
-  background-color: #F7F7F7;
-  padding: rem-calc(8) rem-calc(12);
-
-  code {
-    color: #222;
-    background-color: transparent;
-    border: none;
-    margin: 0;
-    padding: 0;
-  }
-}
-
-#header {
-  width: 100%;
-  height: rem-calc(340);
-  text-align: center;
-  background-color: #444444;
-  @include background-image(linear-gradient(90deg, #00C7B5 0, #0056C7 100%));
-  #logo {
-    color: transparent;
-    text-indent: -99999px;
-    width: rem-calc(534);
-    height: rem-calc(128);
-    margin-top: rem-calc(90);
-    @include retina-image(/img/logo, rem-calc(534) rem-calc(128));
-    background-size: 100% 100%;
-    display: inline-block;
-  }
-  #nav {
-    margin-top: rem-calc(10);
-    ul {
-      list-style: none;
-      margin: 0;
-      padding: 0;
-      li {
-        display: inline-block;
-        margin: 0 rem-calc(5);
-        padding: rem-calc(6) rem-calc(24);
-        border: rem-calc(1) solid white;
-        border-radius: rem-calc(5);
-        min-width: rem-calc(80);
-
-        a {
-          color: white;
-          text-decoration: none;
-          text-transform: uppercase;
-
-          &:hover {
-            color: white;
-          }
-        }
-      }
-    }
-  }
-}
-
-#content-wrapper {
-  margin: rem-calc(40);
-  #content {
-    width: 100%;
-    max-width: rem-calc(960);
-    margin: 0 auto;
-  }
-}
-
-#page-home {
-  
-  #top {
-    @include clearfix;
-    #info {
-      width: rem-calc(460);
-      margin-right: rem-calc(40);
-      float: left;
-
-      h2 {
-        font-weight: 300;
-      }
-
-      ul {
-        margin: rem-calc(20) 0;
-        li {
-          margin-bottom: rem-calc(20);
-        }
-      }
-    }
-    #example {
-      width: rem-calc(460);
-      float: left;
-
-      h6 {
-        margin: rem-calc(10) 0;
-        text-align: center;
-        font-size: rem-calc(11);
-        text-transform: uppercase;
-        font-weight: 300;
-      }
-
-      .box {
-        border: rem-calc(1) dashed black;
-        border-radius: rem-calc(5);
-        position: relative;
-        height: rem-calc(200);
-        span {
-          position: absolute;
-          display: block;
-          top: 1px;
-          left: 1px;
-          border-radius: rem-calc(5);
-          padding: rem-calc(3) rem-calc(7);
-          background-color: #EEE;
-          font-size: rem-calc(11);
-          line-height: rem-calc(11);
-        }
-
-        .box {
-          width: 50px;
-          height: 50px;
-          border-color: red;
-          position: absolute;
-          left: 50%;
-          top: 50%;
-          margin-left: -25px;
-          margin-top: -25px;
-        }
-      }
-    }
-
-    
-  }
-
-  #get-started-btn {
-    margin: 0 auto;
-    margin-top: rem-calc(80);
-    padding: rem-calc(12) rem-calc(24);
-    display: block;
-    font-size: rem-calc(20);
-    font-weight: 300;
-    background: none;
-    border: 1px solid #444;
-    border-radius: rem-calc(5);
-    a {
-      text-decoration: none;
-      color: #444;
-    }
-  }
-}
\ No newline at end of file
diff --git a/docs.md b/docs.md
new file mode 100644
index 0000000..4aab181
--- /dev/null
+++ b/docs.md
@@ -0,0 +1,283 @@
+---
+layout: default
+permalink: /docs/
+id: docs
+---
+## Requirements
+
+* iOS 7.0+ / OS X 10.9+
+* Xcode 6.3+
+
+> While SnapKit supports iOS 7.0, frameworks are not supported for iOS 7.0 so you must use manually embed the framework for non app store apps or integrate the source files directly.
+
+## Installing
+
+The first thing you’ll need to do with SnapKit is get it installed into your project. We support three different integrations:
+
+### Cocoapods
+
+[CocoaPods](http://cocoapods.org) is a dependency manager for Cocoa projects.
+
+CocoaPods 0.36 adds supports for Swift and embedded frameworks. You can install it with the following command:
+
+```bash
+$ gem install cocoapods
+```
+
+To integrate SnapKit into your Xcode project using CocoaPods, specify it in your `Podfile`:
+
+```ruby
+source 'https://github.com/CocoaPods/Specs.git'
+platform :ios, '8.0'
+use_frameworks!
+
+pod 'SnapKit', '~> 0.10.0'
+```
+
+Then, run the following command:
+
+```bash
+$ pod install
+```
+
+### Carthage
+
+Carthage is a decentralized dependency manager that automates the process of adding frameworks to your Cocoa application.
+
+You can install Carthage with [Homebrew](http://brew.sh/) using the following command:
+
+```bash
+$ brew update
+$ brew install carthage
+```
+
+To integrate SnapKit into your Xcode project using Carthage, specify it in your `Cartfile`:
+
+```
+github "SnapKit/SnapKit" >= 0.10.0
+```
+
+### Embedded Framework
+
+- Add SnapKit as a [submodule](http://git-scm.com/docs/git-submodule) by opening the Terminal, `cd`-ing into your top-level project directory, and entering the following command:
+
+```bash
+$ git submodule add https://github.com/SnapKit/SnapKit.git
+```
+
+- Open the `SnapKit` folder, and drag `SnapKit.xcodeproj` into the file navigator of your app project.
+- In Xcode, navigate to the target configuration window by clicking on the blue project icon, and selecting the application target under the "Targets" heading in the sidebar.
+- Ensure that the deployment target of `SnapKit.framework` matches that of the application target.
+- In the tab bar at the top of that window, open the "Build Phases" panel.
+- Expand the "Target Dependencies" group, and add `SnapKit.framework`.
+- Click on the `+` button at the top left of the panel and select "New Copy Files Phase". Rename this new phase to "Copy Frameworks", set the "Destination" to "Frameworks", and add `SnapKit.framework`.
+
+## Usage
+
+SnapKit is designed to be extremely easy to use. Let's say we want to layout a box that is constrained to it's superview's edges with 20pts of padding.
+
+```swift
+let box = UIView()
+superview.addSubview(box)
+
+box.snp_makeConstraints { (make) -> Void in
+    make.top.equalTo(superview).offset(20)
+    make.left.equalTo(superview).offset(20)
+    make.bottom.equalTo(superview).offset(20)
+    make.right.equalTo(superview).offset(20)
+}
+```
+
+Or even shorter:
+
+```swift
+let box = UIView()
+superview.addSubview(box)
+
+box.snp_makeConstraints { (make) -> Void in
+    make.edges.equalTo(superview).inset(UIEdgeInsetsMake(20, 20, 20, 20))
+}
+```
+
+Not only does this greatly shorten and increase the readability of constraints SnapKit is also taking care of a few crucial steps in the process:
+
+- Determining the best common superview to install the constraints on.
+- Keeping track of the constrainted installed so they can easily be removed later.
+- Ensuring `setTranslatesAutoresizingMaskIntoConstraints(false)` is called on all appropriate views.
+
+### Not all things are created equal
+
+> `.equalTo` equivalent to **NSLayoutRelation.Equal**
+
+> `.lessThanOrEqualTo` equivalent to **NSLayoutRelation.LessThanOrEqual**
+
+> `.greaterThanOrEqualTo` equivalent to **NSLayoutRelation.GreaterThanOrEqual**
+
+These three equality constraints accept one argument which can be any of the following:
+
+#### 1. ViewAttribute
+
+```swift
+make.centerX.lessThanOrEqualTo(view2.snp_left)
+```
+
+ViewAttribute              |  NSLayoutAttribute
+-------------------------  |  --------------------------
+view.snp_left              |  NSLayoutAttribute.Left
+view.snp_right             |  NSLayoutAttribute.Right
+view.snp_top               |  NSLayoutAttribute.Top
+view.snp_bottom            |  NSLayoutAttribute.Bottom
+view.snp_leading           |  NSLayoutAttribute.Leading
+view.snp_trailing          |  NSLayoutAttribute.Trailing
+view.snp_width             |  NSLayoutAttribute.Width
+view.snp_height            |  NSLayoutAttribute.Height
+view.snp_centerX           |  NSLayoutAttribute.CenterX
+view.snp_centerY           |  NSLayoutAttribute.CenterY
+view.snp_baseline          |  NSLayoutAttribute.Baseline
+
+
+#### 2. UIView/NSView
+
+if you want view.left to be greater than or equal to label.left:
+
+```swift
+// these two constraints are exactly the same
+make.left.greaterThanOrEqualTo(label)
+make.left.greaterThanOrEqualTo(label.snp_left)
+```
+
+#### 3. Strict Checks
+
+Auto Layout allows width and height to be set to constant values.
+if you want to set view to have a minimum and maximum width you could pass a primitive to the equality blocks:
+
+```swift
+// width >= 200 && width <= 400
+make.width.greaterThanOrEqualTo(200)
+make.width.lessThanOrEqualTo(400)
+```
+
+However Auto Layout does not allow alignment attributes such as left, right, centerY etc to be set to constant values.
+So if you pass a primitive for these attributes SnapKit will turn these into constraints relative to the view's superview ie:
+
+```swift
+// creates view.left <= view.superview.left + 10
+make.left.lessThanOrEqualTo(10)
+```
+
+You can also use other primitives and structs to build your constraints, like so:
+
+```swift
+make.top.equalTo(42)
+make.height.equalTo(20)
+make.size.equalTo(CGSizeMake(50, 100))
+make.edges.equalTo(UIEdgeInsetsMake(10, 0, 10, 0))
+make.left.equalTo(view).offset(UIEdgeInsetsMake(10, 0, 10, 0))
+```
+
+### Learn to prioritize
+
+> `.prority` allows you to specify an exact priority
+
+> `.priorityHigh` equivalent to **UILayoutPriority.DefaultHigh**
+
+> `.priorityMedium` is half way between high and low
+
+> `.priorityLow` equivalent to **UILayoutPriority.DefaultLow**
+
+Priorities are can be tacked on to the end of a constraint chain like so:
+
+```swift
+make.left.greaterThanOrEqualTo(label.snp_left).priorityLow()
+make.top.equalTo(label.snp_top).priority(600)
+```
+
+### Composition, composition, composition
+
+SnapKit also gives you a few convenience methods to create multiple constraints at the same time.
+
+#### edges
+
+```swift
+// make top, left, bottom, right equal view2
+make.edges.equalTo(view2);
+
+// make top = superview.top + 5, left = superview.left + 10,
+//      bottom = superview.bottom - 15, right = superview.right - 20
+make.edges.equalTo(superview).insets(UIEdgeInsetsMake(5, 10, 15, 20))
+```
+
+#### size
+
+```swift
+// make width and height greater than or equal to titleLabel
+make.size.greaterThanOrEqualTo(titleLabel)
+
+// make width = superview.width + 100, height = superview.height - 50
+make.size.equalTo(superview).offset(CGSizeMake(100, -50))
+```
+
+#### center
+
+```swift
+// make centerX and centerY = button1
+make.center.equalTo(button1)
+
+// make centerX = superview.centerX - 5, centerY = superview.centerY + 10
+make.center.equalTo(superview).offset(CGPointMake(-5, 10))
+```
+
+You can chain view attributes for increased readability:
+
+```swift
+// All edges but the top should equal those of the superview
+make.left.right.bottom.equalTo(superview)
+make.top.equalTo(otherView)
+```
+
+### Hold on for dear life
+
+Sometimes you need modify existing constraints in order to animate or remove/replace constraints.
+In SnapKit there are a few different approaches to updating constraints.
+
+#### 1. References
+You can hold on to a reference of a particular constraint by assigning the result of a constraint make expression to a local variable or a class property.
+You could also reference multiple constraints by storing them away in an array.
+
+```swift
+var topConstraint: Constraint? = nil
+
+...
+
+// when making constraints
+view1.snp_makeConstraints { (make) -> Void in
+  self.topConstraint = make.top.equalTo(superview).offset(padding.top).constraint
+  make.left.equalTo(superview).offset(padding.left)
+}
+
+...
+// then later you can call
+self.topConstraint.uninstall()
+
+// or if you want to update the constraint
+self.topConstraint.updateOffset(5)
+```
+
+### 2. snp_remakeConstraints
+
+`snp_remakeConstraints` is similar to `snp_makeConstraints`, but will first remove all existing constraints installed by SnapKit.
+
+```swift
+func changeButtonPosition() {
+  self.button.snp_remakeConstraints { (make) -> Void in 
+    make.size.equalTo(self.buttonSize)
+
+    if topLeft {
+      make.top.left.equalTo(10)
+    } else {
+      make.bottom.equalTo(self.view).offset(-10)
+      make.right.equalTo(self.view).offset(-10)
+    }
+  }
+}
+```
diff --git a/faq.md b/faq.md
new file mode 100644
index 0000000..04d1c18
--- /dev/null
+++ b/faq.md
@@ -0,0 +1,28 @@
+---
+layout: default
+id: faq
+permalink: /faq/
+---
+## FAQ
+
+### Cocoapods won't let me install SnapKit into my iOS 7.0 project?
+
+SnapKit doesn't use any iOS 8.0 specific APIs but because Cocoapods does not support integrating Swift code without dynamic frameworks it cannot be integrated via Cocoapods for iOS 7.0 deployments. You should instead embed the source code directly into your application.
+
+### Do you have any examples?
+
+We're working on getting some great examples! Stay tuned.
+
+### What about Swift's operator overloading?
+
+SnapKit's intention is to be simple and understandable to ensure new users and old alike can easily dive in and get going. While operator overloading may make the code a bit more concise it greatly reduces the readability.
+
+### Why not just use Interface Builder?
+
+SnapKit is about building code based views and layouts. Interface Builder is fiddly and limiting when it comes to building constraints and is a nightmare for your source control change logs.
+
+### Who's behind all this?
+
+* [Robert Payne](https://github.com/robertjpayne)
+* [Jonas Buddleman](https://github.com/cloudkite)
+* [Countless others](https://github.com/SnapKit/SnapKit/graphs/contributors)
\ No newline at end of file
diff --git a/img/logo.png b/images/logo.png
similarity index 100%
rename from img/logo.png
rename to images/logo.png
diff --git a/img/logo_2x.png b/images/logo_2x.png
similarity index 100%
rename from img/logo_2x.png
rename to images/logo_2x.png
diff --git a/index.html b/index.html
index dd0af74..0fdc0c6 100644
--- a/index.html
+++ b/index.html
@@ -2,18 +2,18 @@
 layout: default
 id: home
 ---
-<div id="top">
-  <div id="info">
-    <h2>SnapKit is a DSL to make autolayout easy on both iOS&nbsp;and&nbsp;OS&nbsp;X.</h2>
+<div class="row">
+  <div id="info" class="small-12 large-6 columns">
+    <h4>SnapKit is a DSL to make autolayout easy on both iOS&nbsp;and&nbsp;OS&nbsp;X.</h4>
     <ul>
       <li><strong>Simple &amp; Expressive</strong> chaining DSL allows building constraints with minimal amounts of code while ensuring they are easy to read and understand.</li>
-      <li><strong>Type Safe</strong> by design to reduce programmer error and keep invalid constraints from being created in the first place increases productivity.</li>
-      <li><strong>Compatible</strong>for both iOS and OS X apps installable through Cocoapods or Carthage.</li>
+      <li><strong>Type Safe</strong> by design to reduce programmer error and keep invalid constraints from being created in the first place for maximized productivity.</li>
+      <li><strong>Compatible</strong> for both iOS and OS X apps installable through Cocoapods or Carthage.</li>
       <li><strong>Free</strong> to use in all projects and licensed under the flexible MIT&nbsp;license.</li>
     </ul>
   </div>
 
-  <div id="example">
+  <div id="example" class="small-12 large-6 columns">
 {% highlight swift %}
 let box = UIView()
 let container = UIView()
@@ -35,4 +35,4 @@ box.snp_makeConstraints { (make) -> Void in
   </div>
 </div>
 
-<button id="get-started-btn"><a href="/docs">Get Started &rarr;</a></button>
\ No newline at end of file
+<button id="get-started-btn"><a href="/docs">Getting Started &amp; Docs &rarr;</a></button>
\ No newline at end of file
diff --git a/stylesheets/main.scss b/stylesheets/main.scss
new file mode 100755
index 0000000..58435b1
--- /dev/null
+++ b/stylesheets/main.scss
@@ -0,0 +1,212 @@
+---
+---
+@charset "utf-8";
+@import "base";
+
+body, html {
+  -webkit-font-smoothing: antialiased;
+  -moz-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+}
+
+strong {
+  font-weight: 500;
+}
+
+pre {
+  border: rem-calc(1) solid #CCC;
+  border-radius: rem-calc(5);
+  background-color: #F7F7F7;
+  padding: rem-calc(8) rem-calc(12);
+
+  code {
+    display: block;
+    color: #222;
+    background-color: transparent;
+    border: none;
+    margin: 0;
+    padding: 0;
+  }
+
+}
+
+code {
+  border: none;
+  border: rem-calc(1) solid #CCC;
+  border-radius: rem-calc(3);
+  background-color: #F7F7F7;
+  padding: rem-calc(3) rem-calc(6);
+}
+
+table {
+  overflow: auto;
+  th {
+    padding: rem-calc(8) rem-calc(16);
+    font-weight: 500;
+    border: rem-calc(1) solid #ccc;
+  }
+  tr {
+    border: rem-calc(1) solid #ccc;
+  }
+  td {
+    padding: rem-calc(5) rem-calc(16);
+    border: rem-calc(1) solid #ccc;
+  }
+  margin-bottom: $paragraph-margin-bottom;
+}
+
+.highlight {
+  margin-bottom: $paragraph-margin-bottom;
+}
+
+#header {
+  width: 100%;
+  height: rem-calc(340);
+  text-align: center;
+  background-color: #444444;
+  @include background-image(linear-gradient(90deg, #00C7B5 0, #0056C7 100%));
+  #logo {
+    color: transparent;
+    text-indent: -99999px;
+    width: rem-calc(534);
+    height: rem-calc(128);
+    margin-top: rem-calc(90);
+    @include retina-image(/images/logo, rem-calc(534) rem-calc(128));
+    background-size: 100% 100%;
+    display: inline-block;
+  }
+  #nav {
+    margin-top: rem-calc(40);
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      li {
+        display: inline-block;
+        margin: 0 rem-calc(5);
+        padding: rem-calc(6) rem-calc(24);
+        border: rem-calc(1) solid white;
+        border-radius: rem-calc(5);
+        min-width: rem-calc(80);
+
+        a {
+          color: white;
+          text-decoration: none;
+          text-transform: uppercase;
+
+          &:hover {
+            color: white;
+          }
+        }
+      }
+    }
+  }
+
+  @media (max-width: rem-calc(534)) {
+    height: rem-calc(200);
+    #logo {
+      margin-top: rem-calc(40);
+      width: rem-calc(280.0);
+      height: rem-calc(67);
+      background-size: rem-calc(280) rem-calc(67);
+    }
+    #nav {
+      margin-top: rem-calc(20);
+      ul {
+        li {
+          margin: 0 rem-calc(4);
+          padding: rem-calc(3) rem-calc(12);
+        }
+      }
+    }
+  }
+}
+
+#content-wrapper {
+  margin: rem-calc(30) rem-calc(20);
+  #content {
+    width: 100%;
+    max-width: rem-calc(960);
+    margin: 0 auto;
+  }
+}
+
+#page-docs {
+  #content-wrapper {
+    #content {
+      max-width: rem-calc(800);
+    }
+  }
+}
+
+#page-home {
+  
+  #info {
+    h2 {
+      font-weight: 300;
+    }
+
+    ul {
+      margin: rem-calc(20) 0;
+      padding-left: rem-calc(20);
+      padding-right: rem-calc(20);
+      li {
+        margin-bottom: rem-calc(20);
+      }
+    }
+  }
+  #example {
+    h6 {
+      margin: rem-calc(10) 0;
+      text-align: center;
+      font-size: rem-calc(11);
+      text-transform: uppercase;
+      font-weight: 300;
+    }
+
+    .box {
+      border: rem-calc(1) dashed black;
+      border-radius: rem-calc(5);
+      position: relative;
+      height: rem-calc(200);
+      span {
+        position: absolute;
+        display: block;
+        top: 1px;
+        left: 1px;
+        border-radius: rem-calc(5);
+        padding: rem-calc(3) rem-calc(7);
+        background-color: #EEE;
+        font-size: rem-calc(11);
+        line-height: rem-calc(11);
+      }
+
+      .box {
+        width: 50px;
+        height: 50px;
+        border-color: red;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        margin-left: -25px;
+        margin-top: -25px;
+      }
+    }
+  }
+
+  #get-started-btn {
+    margin: 0 auto;
+    margin-top: rem-calc(80);
+    padding: rem-calc(12) rem-calc(24);
+    display: block;
+    font-size: rem-calc(20);
+    font-weight: 300;
+    background: none;
+    border: 1px solid #444;
+    border-radius: rem-calc(5);
+    a {
+      text-decoration: none;
+      color: #444;
+    }
+  }
+}
\ No newline at end of file