dhg · mattbyrnes · Apr 25, 2017 · May 17, 2017 · May 17, 2017
diff --git a/.vs/VSWorkspaceState.json b/.vs/VSWorkspaceState.json
@@ -0,0 +1,8 @@
+{
+  "ExpandedNodes": [
+    "",
+    "\\css"
+  ],
+  "SelectedNode": "\\css\\skeleton.css",
+  "PreviewInSolutionExplorer": false
+}
diff --git a/.vs/config/applicationhost.config b/.vs/config/applicationhost.config
diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite
diff --git a/css/custom.css b/css/custom.css
@@ -0,0 +1,173 @@
+/* Shared
+�������������������������������������������������� */
+.button {
+    border-radius: 100px;
+}
+
+/* Sections
+�������������������������������������������������� */
+.section {
+    padding: 8rem 0 7rem;
+    text-align: center;
+}
+
+.section-heading,
+.section-description {
+    margin-bottom: 1.2rem;
+}
+
+/* Hero
+�������������������������������������������������� */
+.phones {
+    position: relative;
+}
+
+.phone {
+    position: relative;
+    max-width: 80%;
+    margin: 3rem auto -12rem;
+}
+
+    .phone + .phone {
+        display: none;
+    }
+
+/* Values
+�������������������������������������������������� */
+.values {
+    background-image: url('../images/values-bg.jpg');
+    background-size: cover;
+    color: #fff;
+    padding-bottom: 5rem;
+}
+
+.value-multiplier {
+    margin-bottom: .5rem;
+    color: #11DFC7;
+}
+
+.value-heading {
+    margin-bottom: .3rem;
+}
+
+.value-description {
+    opacity: .8;
+    font-weight: 300;
+}
+
+/* Help
+�������������������������������������������������� */
+.get-help {
+    border-bottom: 1px solid #ddd;
+}
+
+/* Categories
+�������������������������������������������������� */
+.categories {
+    background-image: url('../images/values-bg.jpg');
+    background-size: cover;
+    color: #fff;
+}
+
+    .categories .section-description {
+        margin-bottom: 4rem;
+    }
+
+/* Bigger than 550 */
+@media (min-width: 550px) {
+    .section {
+        padding: 12rem 0 11rem;
+    }
+
+    .hero {
+        padding-bottom: 12rem;
+        text-align: left;
+        height: 165px;
+    }
+
+    .phone {
+        position: absolute;
+        top: -7rem;
+        right: 3rem;
+        max-height: 362px;
+        z-index: 3;
+    }
+
+        .phone + .phone {
+            top: -6rem;
+            display: block;
+            max-width: 73.8%;
+            right: 0;
+            z-index: 2;
+            max-height: 338px;
+        }
+
+    .hero-heading {
+        font-size: 2.4rem;
+    }
+}
+
+/* Bigger than 750 */
+@media (min-width: 750px) {
+    .hero {
+        height: 190px;
+    }
+
+    .hero-heading {
+        font-size: 2.6rem;
+    }
+
+    .section {
+        padding: 14rem 0 15rem;
+    }
+
+    .hero {
+        padding: 16rem 0 14rem;
+    }
+
+    .section-description {
+        max-width: 60%;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .phone {
+        top: -14rem;
+        right: 5rem;
+        max-height: 510px;
+    }
+
+        .phone + .phone {
+            top: -12rem;
+            max-height: 472px;
+        }
+
+    .categories {
+        padding: 15rem 0 8rem;
+    }
+}
+
+/* Bigger than 1000 */
+@media (min-width: 1000px) {
+    .section {
+        padding: 20rem 0 19rem;
+    }
+
+    .hero {
+        padding: 22rem 0;
+    }
+
+    .hero-heading {
+        font-size: 3.0rem;
+    }
+
+    .phone {
+        top: -16rem;
+        max-height: 615px;
+    }
+
+        .phone + .phone {
+            top: -14rem;
+            max-height: 570px;
+        }
+}
diff --git a/css/skeleton.css b/css/skeleton.css
@@ -9,6 +9,8 @@
 
 
 /* Table of contents
+
+
 ––––––––––––––––––––––––––––––––––––––––––––––––––
 - Grid
 - Base Styles

diff --git a/images/iphone.png b/images/iphone.png
diff --git a/images/placeholder.png b/images/placeholder.png
diff --git a/images/values-bg.jpg b/images/values-bg.jpg
diff --git a/index.html b/index.html
@@ -1,46 +1,106 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
 
-  <!-- Basic Page Needs
-  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-  <meta charset="utf-8">
-  <title>Your page title here :)</title>
-  <meta name="description" content="">
-  <meta name="author" content="">
+    <!-- Basic Page Needs
+    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+    <meta charset="utf-8">
+    <title>Skeleton: Responsive CSS Boilerplate</title>
+    <meta name="description" content="">
+    <meta name="author" content="">
 
-  <!-- Mobile Specific Metas
-  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- Mobile Specific Metas
+    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
-  <!-- FONT
-  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-  <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
+    <!-- FONT
+    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+    <link href='//fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>
 
-  <!-- CSS
-  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-  <link rel="stylesheet" href="css/normalize.css">
-  <link rel="stylesheet" href="css/skeleton.css">
+    <!-- CSS
+    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+    <link rel="stylesheet" href="/css/normalize.css">
+    <link rel="stylesheet" href="/css/skeleton.css">
+    <link rel="stylesheet" href="/css/custom.css">
 
-  <!-- Favicon
-  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-  <link rel="icon" type="image/png" href="images/favicon.png">
+    <!-- Scripts
+    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+
+    <!-- Favicon
+    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+    <link rel="icon" type="image/png" href="../../dist/images/favicon.png">
 
 </head>
 <body>
 
-  <!-- Primary Page Layout
-  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-  <div class="container">
-    <div class="row">
-      <div class="one-half column" style="margin-top: 25%">
-        <h4>Basic Page</h4>
-        <p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the <a href="http://www.getskeleton.com">Skeleton documentation</a>.</p>
-      </div>
+    <!-- Primary Page Layout
+    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+
+    <div class="section hero">
+        <div class="container">
+            <div class="row">
+                <div class="one-half column">
+                    <h4 class="hero-heading">Stop coding non-responsive sites. Let users view sites from anywhere.</h4>
+                    <a class="button button-primary" href="http://getskeleton.com">Try Skeleton</a>
+                </div>
+                <div class="one-half column phones">
+                    <img class="phone" src="images/iphone.png">
+                    <img class="phone" src="images/iphone.png">
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="section values">
+        <div class="container">
+            <div class="row">
+                <div class="one-third column value">
+                    <h2 class="value-multiplier">67%</h2>
+                    <h5 class="value-heading">Purchase Increase</h5>
+                    <p class="value-description">Percentage of users more likely to purchase on mobile friendly site.</p>
+                </div>
+                <div class="one-third column value">
+                    <h2 class="value-multiplier">90%</h2>
+                    <h5 class="value-heading">Multi-device Users</h5>
+                    <p class="value-description">Most of the world accesses the internet on multiple devices.</p>
+                </div>
+                <div class="one-third column value">
+                    <h2 class="value-multiplier">66%</h2>
+                    <h5 class="value-heading">Sad Users</h5>
+                    <p class="value-description">Percentage of users that are frustrated with page load times.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="section get-help">
+        <div class="container">
+            <h3 class="section-heading">Need help getting started?</h3>
+            <p class="section-description">Skeleton is an amazingly easy place to start with responsive development. If you want to learn more, just visit the documentation!</p>
+            <a class="button button-primary" href="http://getskeleton.com">View Skeleton Docs</a>
+        </div>
     </div>
-  </div>
 
-<!-- End Document
-  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+    <div class="section categories">
+        <div class="container">
+            <h3 class="section-heading">Responsive Images</h3>
+            <p class="section-description">Skeleton images sit easily in grid with .u-max-full-width class. I suggest exploring solution to serving different images based on device size.</p>
+            <div class="row">
+                <div class="one-half column category">
+                    <img class="u-max-full-width" src="images/placeholder.png">
+                </div>
+                <div class="one-half column category">
+                    <img class="u-max-full-width" src="images/placeholder.png">
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+
+
+    <!-- End Document
+      –––––––––––––––––––––––––––––––––––––––––––––––––– -->
 </body>
-</html>
+</html>
diff --git a/node_modules/.bin/acorn b/node_modules/.bin/acorn
diff --git a/node_modules/.bin/acorn.cmd b/node_modules/.bin/acorn.cmd
diff --git a/node_modules/.bin/browser-sync b/node_modules/.bin/browser-sync
diff --git a/node_modules/.bin/browser-sync.cmd b/node_modules/.bin/browser-sync.cmd
diff --git a/node_modules/.bin/buble b/node_modules/.bin/buble
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,6 +9,8 @@ @@
     /* Table of contents
     ––––––––––––––––––––––––––––––––––––––––––––––––––
     - Grid
     - Base Styles
@@ Expand Down @@