updating version numbers after wonkiness

added example ID to example select input

.gitignore

@@ -1 +0,0 @@
-.DS_Store

CNAME

@@ -0,0 +1 @@
+getskeleton.com

LICENSE.md

@@ -1,22 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2011-2014 Dave Gamache
-Copyright (c) 2023 Bit Goblin
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.

README.md

@@ -1,68 +0,0 @@
-# [Skeleton](http://getskeleton.com)
-Skeleton is a simple, responsive boilerplate to kickstart any responsive project.
-
-Check out <http://getskeleton.com> for documentation and details.
-
-## Getting started
-
-There are a couple ways to download Skeleton:
-- [Download the zip](https://github.com/dhg/Skeleton/releases/download/2.0.4/Skeleton-2.0.4.zip)
-- Clone the repo: `git clone https://github.com/dhg/Skeleton.git` (Note: this is under active development, so if you're looking for stable and safe, use the zipped download)
-
-
-### What's in the download?
-
-The download includes Skeleton's CSS, Normalize CSS as a reset, a sample favicon, and an index.html as a starting point.
-
-```
-Skeleton/
-├── index.html
-├── css/
-│   ├── normalize.min.css
-│   └── skeleton.css
-└── images/
-    └── favicon.ico
-
-```
-
-### Why it's awesome
-
-Skeleton is lightweight and simple. It styles only raw HTML elements (with a few exceptions) and provides a responsive grid. Nothing more.
-- Around 400 lines of CSS unminified and with comments
-- It's a starting point, not a UI framework
-- No compiling or installing...just vanilla CSS
-
-
-## Browser support
-
-- Chrome latest
-- Firefox latest
-- Opera latest
-- Safari latest
-- IE latest
-
-The above list is non-exhaustive. Skeleton works perfectly with almost all older versions of the browsers above, though IE certainly has large degradation prior to IE9.
-
-
-## License
-
-All parts of Skeleton are free to use and abuse under the [open-source MIT license](https://github.com/dhg/Skeleton/blob/master/LICENSE.md).
-
-
-## Extensions
-
-The following are extensions to Skeleton built by the community. They are not officially supported, but all have been tested and are compatible with v2.0 (exact release noted):
-- [Skeleton on LESS](https://github.com/whatsnewsaes/Skeleton-less): Skeleton built with LESS for easier replacement of grid, color, and media queries. (Last update was to match v2.0.1)
-- [Skeleton on Sass](https://github.com/whatsnewsaes/Skeleton-Sass): Skeleton built with Sass for easier replacement of grid, color, and media queries. (Last update was to match v2.0.1)
-
-Have an extension you want to see here? Just shoot an email to hi@getskeleton.com with your extension!
-
-
-## Colophon
-
-Skeleton was built using [Sublime Text 3](http://www.sublimetext.com/3) and designed with [Sketch](http://bohemiancoding.com/sketch). The typeface [Raleway](http://www.google.com/fonts/specimen/Raleway) was created by [Matt McInerney](http://matt.cc/) and [Pablo Impallari](http://www.impallari.com/). Code highlighting by Google's [Prettify library](https://code.google.com/p/google-code-prettify/). Icons in the header of the documentation are all derivative work of icons from [The Noun Project](http://thenounproject.com). [Feather](http://thenounproject.com/term/feather/22073) by Zach VanDeHey, [Pen](http://thenounproject.com/term/pen/21163) (with cap) by Ed Harrison, [Pen](http://thenounproject.com/term/pen/32847) (with clicker) by Matthew Hall, and [Watch](http://thenounproject.com/term/watch/48015) by Julien Deveaux.
-
-
-## Acknowledgement
-
-Skeleton was created by [Dave Gamache](https://twitter.com/dhg) for a better web.

bower.json

@@ -1,21 +0,0 @@
-{
-  "name": "skeleton",
-  "version": "2.0.4",
-  "homepage": "http://getskeleton.com/",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/dhg/Skeleton"
-  },
-  "authors": [
-    "Dave Gamache <hello@davegamache.com> (http://davegamache.com/)"
-  ],
-  "description": "Skeleton is a dead-simple, responsive boilerplate to kickstart any responsive project.",
-  "main": "css/skeleton.css",
-  "keywords": [
-    "css",
-    "skeleton",
-    "responsive",
-    "boilerplate"
-  ],
-  "license": "MIT"
-}

css/custom.css

@@ -0,0 +1,225 @@
+.container {
+  max-width: 800px; }
+.header {
+  margin-top: 6rem;
+  text-align: center; }
+.value-prop {
+  margin-top: 1rem; }
+.value-props {
+  margin-top: 4rem;
+  margin-bottom: 4rem; }
+.docs-header {
+  text-transform: uppercase;
+  font-size: 1.4rem;
+  letter-spacing: .2rem;
+  font-weight: 600; }
+.docs-section {
+  border-top: 1px solid #eee;
+  padding: 4rem 0;
+  margin-bottom: 0;}
+.value-img {
+  display: block;
+  text-align: center;
+  margin: 2.5rem auto 0; }
+.example-grid .column,
+.example-grid .columns {
+  background: #EEE;
+  text-align: center;
+  border-radius: 4px;
+  font-size: 1rem;
+  text-transform: uppercase;
+  height: 30px;
+  line-height: 30px;
+  margin-bottom: .75rem;
+  font-weight: 600;
+  letter-spacing: .1rem; }
+.docs-example .row,
+.docs-example.row,
+.docs-example form {
+  margin-bottom: 0; }
+.docs-example h1,
+.docs-example h2,
+.docs-example h3,
+.docs-example h4,
+.docs-example h5,
+.docs-example h6 {
+  margin-bottom: 1rem; }
+.heading-font-size {
+  font-size: 1.2rem;
+  color: #999;
+  letter-spacing: normal; }
+.code-example {
+  margin-top: 1.5rem;
+  margin-bottom: 0; }
+.code-example-body {
+  white-space: pre;
+  word-wrap: break-word }
+.example {
+  position: relative; 
+  margin-top: 4rem; }
+.example-header {
+  font-weight: 600;
+  margin-top: 1.5rem;
+  margin-bottom: .5rem; }
+.example-description {
+  margin-bottom: 1.5rem; }
+.example-screenshot-wrapper {
+  display: block;
+  position: relative;
+  overflow: hidden;
+  border-radius: 6px;
+  border: 1px solid #eee;
+  height: 250px; }
+.example-screenshot {
+  width: 100%;
+  height: auto; }
+.example-screenshot.coming-soon {
+  width: auto;
+  position: absolute;
+  background: #eee;
+  top: 5px;
+  right: 5px;
+  bottom: 5px;
+  left: 5px; }
+.navbar {
+  display: none; }
+
+/* Larger than phone */
+@media (min-width: 550px) {
+  .header {
+    margin-top: 18rem; }
+  .value-props {
+    margin-top: 9rem;
+    margin-bottom: 7rem; }
+  .value-img {
+    margin-bottom: 1rem; }
+  .example-grid .column,
+  .example-grid .columns {
+    margin-bottom: 1.5rem; }
+  .docs-section {
+    padding: 6rem 0; }
+  .example-send-yourself-copy {
+    float: right;
+    margin-top: 12px; }
+  .example-screenshot-wrapper {
+    position: absolute;
+    width: 48%;
+    height: 100%;
+    left: 0;
+    max-height: none; }
+}
+
+/* Larger than tablet */
+@media (min-width: 750px) {
+  /* Navbar */
+  .navbar + .docs-section {
+    border-top-width: 0; }
+  .navbar,
+  .navbar-spacer {
+    display: block;
+    width: 100%;
+    height: 6.5rem;
+    background: #fff;
+    z-index: 99;
+    border-top: 1px solid #eee;
+    border-bottom: 1px solid #eee; }
+  .navbar-spacer {
+    display: none; }
+  .navbar > .container {
+    width: 100%; }
+  .navbar-list {
+    list-style: none;
+    margin-bottom: 0; }
+  .navbar-item {
+    position: relative;
+    float: left;
+    margin-bottom: 0; }
+  .navbar-link {
+    text-transform: uppercase;
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: .2rem;
+    margin-right: 35px;
+    text-decoration: none;
+    line-height: 6.5rem;
+    color: #222; }
+  .navbar-link.active {
+    color: #33C3F0; }
+  .has-docked-nav .navbar {
+    position: fixed;
+    top: 0;
+    left: 0; }
+  .has-docked-nav .navbar-spacer {
+    display: block; }
+  /* Re-overiding the width 100% declaration to match size of % based container */
+  .has-docked-nav .navbar > .container {
+    width: 80%; }
+
+  /* Popover */
+  .popover.open {
+    display: block;
+  }
+  .popover {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: #fff;
+    border: 1px solid #eee;
+    border-radius: 4px;
+    top: 92%;
+    left: -50%;
+    -webkit-filter: drop-shadow(0 0 6px rgba(0,0,0,.1));
+       -moz-filter: drop-shadow(0 0 6px rgba(0,0,0,.1));
+            filter: drop-shadow(0 0 6px rgba(0,0,0,.1)); }
+  .popover-item:first-child .popover-link:after, 
+  .popover-item:first-child .popover-link:before {
+    bottom: 100%;
+    left: 50%;
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none; }
+  .popover-item:first-child .popover-link:after {
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #fff;
+    border-width: 10px;
+    margin-left: -10px; }
+  .popover-item:first-child .popover-link:before {
+    border-color: rgba(238, 238, 238, 0);
+    border-bottom-color: #eee;
+    border-width: 11px;
+    margin-left: -11px; }
+  .popover-list {
+    padding: 0;
+    margin: 0;
+    list-style: none; }
+  .popover-item {
+    padding: 0;
+    margin: 0; }
+  .popover-link {
+    position: relative;
+    color: #222;
+    display: block;
+    padding: 8px 20px;
+    border-bottom: 1px solid #eee;
+    text-decoration: none;
+    text-transform: uppercase;
+    font-size: 1.0rem;
+    font-weight: 600;
+    text-align: center;
+    letter-spacing: .1rem; }
+  .popover-item:first-child .popover-link {
+    border-radius: 4px 4px 0 0; }
+  .popover-item:last-child .popover-link {
+    border-radius: 0 0 4px 4px;
+    border-bottom-width: 0; }
+  .popover-link:hover {
+    color: #fff;
+    background: #33C3F0; }
+  .popover-link:hover,
+  .popover-item:first-child .popover-link:hover:after {
+    border-bottom-color: #33C3F0; }
+}

css/github-prettify-theme.css

@@ -0,0 +1,149 @@
+/* GitHub Theme */
+.prettyprint {
+  background: #fff;
+  font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace;
+  font-size: 1.2rem;
+  padding: 2.5rem 3rem;
+  -webkit-font-smoothing: antialiased; 
+}
+
+.pln {
+  color: #333333;
+}
+
+@media screen {
+  .str {
+    color: #dd1144;
+  }
+
+  .kwd {
+    color: #333333;
+  }
+
+  .com {
+    color: #999988;
+  }
+
+  .typ {
+    color: #445588;
+  }
+
+  .lit {
+    color: #445588;
+  }
+
+  .pun {
+    color: #333333;
+  }
+
+  .opn {
+    color: #333333;
+  }
+
+  .clo {
+    color: #333333;
+  }
+
+  .tag {
+    color: navy;
+  }
+
+  .atn {
+    color: teal;
+  }
+
+  .atv {
+    color: #dd1144;
+  }
+
+  .dec {
+    color: #333333;
+  }
+
+  .var {
+    color: teal;
+  }
+
+  .fun {
+    color: #990000;
+  }
+}
+@media print, projection {
+  .str {
+    color: #006600;
+  }
+
+  .kwd {
+    color: #006;
+    font-weight: bold;
+  }
+
+  .com {
+    color: #600;
+    font-style: italic;
+  }
+
+  .typ {
+    color: #404;
+    font-weight: bold;
+  }
+
+  .lit {
+    color: #004444;
+  }
+
+  .pun, .opn, .clo {
+    color: #444400;
+  }
+
+  .tag {
+    color: #006;
+    font-weight: bold;
+  }
+
+  .atn {
+    color: #440044;
+  }
+
+  .atv {
+    color: #006600;
+  }
+}
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/* IE indents via margin-left */
+li.L0,
+li.L1,
+li.L2,
+li.L3,
+li.L4,
+li.L5,
+li.L6,
+li.L7,
+li.L8,
+li.L9 {
+  /* */
+}
+
+/* Alternate shading for lines */
+li.L1,
+li.L3,
+li.L5,
+li.L7,
+li.L9 {
+  /* */
+}
+
+/* My additional styles */
+
+/*li.L0, li.L1, li.L2, li.L3,
+li.L5, li.L6, li.L7, li.L8
+{ list-style-type: decimal !important }*/
+
+.prettyprint li {
+  margin-bottom: .3rem;
+}

examples/landing/css/custom.css

@@ -0,0 +1,151 @@
+/* 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;
+  }
+}

examples/landing/index.html

@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+  <!-- 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">
+
+  <!-- FONT
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <link href='//fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>
+
+  <!-- CSS
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <link rel="stylesheet" href="../../dist/css/normalize.css">
+  <link rel="stylesheet" href="../../dist/css/skeleton.css">
+  <link rel="stylesheet" href="css/custom.css">
+
+  <!-- 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="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 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>

images/feather.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="130px" height="70px" viewBox="0 0 130 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch Beta 3.2 (9961) - http://www.bohemiancoding.com/sketch -->
+    <title>feather</title>
+    <desc>Created with Sketch Beta.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="feather" sketch:type="MSArtboardGroup" stroke-width="1.5" stroke="#FFFFFF" fill="#000000">
+            <path d="M62.7545597,80.9293443 L62.7545597,91.4097889 C62.7545597,92.4644569 63.6105221,93.3204193 64.6651901,93.3204193 C65.719858,93.3204193 66.5758205,92.4644569 66.5758205,91.4097889 L66.5758205,80.9293443 L70.2404096,80.822349 C70.8161462,80.8057902 71.354944,80.5293857 71.7039525,80.0695606 L84.4414884,63.3324383 C84.9892025,62.6140413 84.9573587,61.6090497 84.366337,60.9263178 L78.959253,54.6696401 L84.014781,51.1438902 C84.5268299,50.7872391 84.8325308,50.2013125 84.8325308,49.5771732 L84.8325308,2.83933241 C84.8325308,2.42026748 84.6949654,2.01394008 84.4402147,1.68021663 L66.1835044,-22.240876 C66.1401967,-22.2981949 66.0803303,-22.3351337 66.0306539,-22.3873576 C65.9555025,-22.4663303 65.8841723,-22.5453031 65.7962833,-22.6115383 C65.7134893,-22.6726784 65.6230528,-22.7134385 65.53389,-22.7605674 C65.4689286,-22.7949588 65.4128834,-22.8420877 65.342827,-22.8688365 C65.187429,-22.9159654 65.0855288,-22.9287029 64.9836285,-22.9452617 C64.893192,-22.9605467 64.805303,-22.9822006 64.7148665,-22.9834743 C64.6244299,-22.9860218 64.5352672,-22.969463 64.4435569,-22.959273 C64.3365616,-22.9465355 64.2333876,-22.9350717 64.1302136,-22.9057753 C63.9951957,-22.8739315 63.9506143,-22.8344451 63.8945691,-22.8102438 C63.7939426,-22.7656624 63.6958636,-22.7198073 63.6041533,-22.6573934 C63.5264543,-22.6051695 63.4602192,-22.5440293 63.3927102,-22.4816154 C63.3417601,-22.4357603 63.2831674,-22.4039164 63.2373123,-22.3516925 L50.5354414,-8.03979708 C50.051415,-7.49335679 49.9202184,-6.7189146 50.1978967,-6.04382519 L53.0676635,0.926154503 L46.407206,0.926154503 C45.352538,0.926154503 44.4965756,1.78211692 44.4965756,2.8367849 L44.4965756,43.126885 C44.4965756,43.6121851 44.6812698,44.0783789 45.0124458,44.4324824 L50.8385947,50.65859 L44.7513263,61.2205549 C44.3666527,61.886728 44.4201504,62.7197629 44.8863442,63.3311646 L57.6238802,80.0682869 C57.9741624,80.5293857 58.5129602,80.807064 59.0886968,80.822349 L62.7545597,80.9293443 Z M75.0360919,52.7488197 C74.5915519,53.0583418 74.301136,53.5423682 74.2336271,54.0786184 C74.1661182,54.6161425 74.3291586,55.156214 74.6845359,55.5650889 L80.463556,62.2522953 L69.2163117,77.0303846 L66.5758205,77.1080835 L66.5758205,75.761726 L66.5758205,-15.4288417 L81.01127,3.48512548 L81.01127,48.5823717 L75.0360919,52.7488197 Z M54.5961679,49.0829568 L48.3178364,42.3740966 L48.3178364,4.74996281 L55.9208716,4.74996281 C56.5577484,4.74996281 57.1538651,4.43152441 57.5079686,3.90291666 C57.8620721,3.37303517 57.929581,2.70176702 57.6875678,2.1120191 L54.1860192,-6.39283368 L62.7558334,-16.0491597 L62.7558334,45.4056302 L56.7131463,40.6914681 C55.8788377,40.0418538 54.6789618,40.190883 54.031895,41.0226441 C53.3822807,41.8544052 53.5300361,43.0555548 54.363071,43.7038954 L62.7571072,50.2522626 L62.7571072,65.3844554 L56.7144201,60.6715671 C55.8801115,60.0219527 54.6802356,60.1709819 54.0331688,61.002743 C53.3835544,61.8345041 53.5313099,63.0356538 54.3643447,63.6839943 L62.7583809,70.2310878 L62.7583809,75.7629997 L62.7583809,77.1093573 L60.116616,77.0316583 L48.7012362,62.0319359 L54.8572873,51.3425957 C55.2763523,50.6140087 55.1706307,49.6969061 54.5961679,49.0829568 Z" sketch:type="MSShapeGroup" transform="translate(64.664190, 35.168341) rotate(90.000000) translate(-64.664190, -35.168341) "></path>
+        </g>
+    </g>
+</svg>

images/pens.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="130px" height="70px" viewBox="0 0 130 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch Beta 3.2 (9961) - http://www.bohemiancoding.com/sketch -->
+    <title>pens</title>
+    <desc>Created with Sketch Beta.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="pens" sketch:type="MSArtboardGroup">
+            <g id="capped" sketch:type="MSLayerGroup" transform="translate(65.143695, 20.838603) scale(-1, 1) rotate(-90.000000) translate(-65.143695, -20.838603) translate(16.643695, -32.161397)">
+                <g id="Background"></g>
+                <g id="Pictograms" transform="translate(40.462213, 0.000000)" fill="#000000" sketch:type="MSShapeGroup">
+                    <path d="M11.9353896,2.67942793 L11.9353896,1.83430371 C11.9353896,1.30610107 11.5018659,0.873935276 10.9720035,0.873935276 L1.55008813,0.873935276 C1.02022581,0.873935276 0.586702095,1.30610107 0.586702095,1.83430371 L0.586702095,37.7040648 C0.586702095,38.1554379 0.894985626,38.5299816 1.30924162,38.6260185 L1.30924162,101.667167 C1.30924162,102.070522 1.55972199,102.416255 1.91617482,102.56031 L1.91617482,104.173729 C1.91617482,104.433028 2.02214729,104.682724 2.20519063,104.865194 C2.53274188,105.172512 2.85065928,105.172512 3.53466336,105.162908 L4.07415954,105.153305 L8.91035743,105.162908 L9.23790868,105.162908 C9.70996784,105.162908 9.97008207,105.124494 10.2398302,104.865194 C10.4228735,104.682724 10.528846,104.433028 10.528846,104.173729 L10.5384798,102.579517 C10.9238342,102.454669 11.2032162,102.089729 11.2032162,101.667167 L11.2032162,38.6356221 C11.627106,38.5299816 11.9353896,38.1650416 11.9353896,37.7040648 L11.9353896,4.6001648 L12.8987756,4.6001648 L12.8987756,37.8865348 C12.8987756,38.4243411 13.3322993,38.8469032 13.8621616,38.8469032 C14.4016578,38.8469032 14.8255477,38.4243411 14.8255477,37.8865348 L14.8255477,3.63979637 C14.8255477,3.11159373 14.4016578,2.67942793 13.8621616,2.67942793 L11.9353896,2.67942793 Z M3.23601369,100.706799 L3.23601369,38.6644332 L9.27644412,38.6644332 L9.27644412,100.706799 L3.23601369,100.706799 Z M10.0086175,36.7436963 L2.51347416,36.7436963 L2.51347416,2.79467215 L10.0086175,2.79467215 L10.0086175,36.7436963 L10.0086175,36.7436963 Z" id="Shape"></path>
+                </g>
+                <g id="Guides"></g>
+            </g>
+            <g id="clicked" sketch:type="MSLayerGroup" transform="translate(65.121739, 45.950758) rotate(135.000000) translate(-65.121739, -45.950758) translate(22.350262, 2.839502)" fill="#000000">
+                <path d="M3.51676594,0 C3.32667048,0 3.0415273,0.0947500115 2.85143184,0.284250035 L0.665334096,2.55825031 C0.285143184,2.93725036 0.285143184,3.50575043 0.665334096,3.88475047 L5.4177205,8.71700106 L3.13657502,11.0857513 L3.13657502,11.0857513 L3.0415273,11.1805014 C2.66133638,11.5595014 2.66133638,12.1280015 3.0415273,12.5070015 L6.84343642,16.297002 L3.99200458,19.1395023 C3.61181367,19.5185024 3.61181367,20.0870024 3.99200458,20.4660025 L23.6668843,40.4582549 C23.8569797,40.6477549 24.0470752,40.742505 24.3322184,40.742505 L29.1796525,40.837255 L29.1796525,45.2905055 C29.1796525,45.5747555 29.2747002,45.7642556 29.4647957,45.9537556 L33.8369912,50.4070061 C34.2171821,50.7860062 34.7874685,50.7860062 35.1676594,50.4070061 C35.3577548,50.2175061 35.4528026,49.9332561 35.4528026,49.743756 C35.4528026,49.459506 35.3577548,49.270006 35.1676594,49.080506 L30.9855593,44.9115055 L30.9855593,40.742505 L31.0806071,40.837255 L31.0806071,40.837255 L62.6364528,72.5785088 C62.6364528,72.5785088 62.7315005,72.5785088 62.7315005,72.6732588 C62.7315005,72.6732588 62.7315005,72.7680088 62.8265482,72.7680088 L77.6539938,82.33776 C77.939137,82.52726 78.2242802,82.52726 78.5094234,82.43251 L83.5469529,85.1802604 C83.9271438,85.3697604 84.4023825,85.2750104 84.6875257,84.9907603 C84.8776211,84.8012603 84.9726689,84.5170103 84.9726689,84.3275102 C84.9726689,84.1380102 84.9726689,84.0432602 84.8776211,83.8537602 L82.121237,78.7372596 C82.121237,78.6425096 82.2162847,78.5477595 82.2162847,78.3582595 C82.2162847,78.1687595 82.121237,77.9792595 82.0261893,77.8845095 L72.5214165,62.9140076 C72.5214165,62.9140076 72.5214165,62.9140076 72.4263688,62.8192576 C72.4263688,62.8192576 72.4263688,62.7245076 72.331321,62.7245076 L12.8314433,2.55825031 C12.6413478,2.36875029 12.3562046,2.27400028 12.1661092,2.27400028 C11.880966,2.27400028 11.6908705,2.36875029 11.5007751,2.55825031 L9.02953416,5.02175061 L4.27714776,0.189500023 C4.08705231,0.0947500115 3.80190912,0 3.51676594,0 L3.51676594,0 Z M34.7874685,27.5722534 L27.7539366,34.6785042 L26.3282207,33.162504 L33.3617525,26.1510032 L34.7874685,27.5722534 L34.7874685,27.5722534 Z M38.9695685,31.7412539 L31.9360366,38.8475047 L29.0846048,36.0050044 L36.1181367,28.8987535 L38.9695685,31.7412539 L38.9695685,31.7412539 Z M43.1516685,35.9102544 L36.1181367,43.0165052 L33.2667048,40.1740049 L40.3002367,33.162504 L43.1516685,35.9102544 L43.1516685,35.9102544 Z M47.3337686,40.1740049 L40.3002367,47.2802557 L37.4488048,44.4377554 L44.4823367,37.3315045 L47.3337686,40.1740049 L47.3337686,40.1740049 Z M51.5158686,44.3430054 L44.4823367,51.4492563 L41.6309049,48.6067559 L48.6644368,41.500505 L51.5158686,44.3430054 L51.5158686,44.3430054 Z M31.9360366,24.729753 L24.9025047,31.7412539 L9.59982053,16.202252 L16.6333524,9.19075112 L31.9360366,24.729753 L31.9360366,24.729753 Z M12.1661092,4.73750058 L15.2076365,7.86425096 L8.26915234,14.7810018 L5.22762504,11.6542514 L12.1661092,4.73750058 L12.1661092,4.73750058 Z M24.7124093,38.7527547 L5.98800687,19.8027524 L8.17410461,17.6235021 L29.2747002,39.0370047 L24.7124093,38.7527547 L24.7124093,38.7527547 Z M45.8130049,52.7757564 L52.8465368,45.6695055 L54.177205,46.9960057 L47.1436731,54.0075066 L45.8130049,52.7757564 L45.8130049,52.7757564 Z M48.569389,55.5235067 L55.6029209,48.4172559 L70.5254142,63.4825077 L63.4918823,70.4940086 L48.569389,55.5235067 L48.569389,55.5235067 Z M80.2202825,78.2635095 L78.2242802,80.2532598 L65.012646,71.7257587 L71.6659869,64.9985079 L80.2202825,78.2635095 L80.2202825,78.2635095 Z M7.69886597,6.44300078 L6.84343642,7.29575089 L2.66133638,3.22150039 L3.51676594,2.36875029 L7.69886597,6.44300078 L7.69886597,6.44300078 Z" id="Shape" sketch:type="MSShapeGroup"></path>
+            </g>
+        </g>
+    </g>
+</svg>

images/watch.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="130px" height="70px" viewBox="0 0 130 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch Beta 3.2 (9961) - http://www.bohemiancoding.com/sketch -->
+    <title>watch</title>
+    <desc>Created with Sketch Beta.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="watch" sketch:type="MSArtboardGroup">
+            <g sketch:type="MSLayerGroup" transform="translate(64.000000, 33.000000) scale(1, -1) rotate(90.000000) translate(-64.000000, -33.000000) translate(37.000000, -27.000000)">
+                <path d="M25.268,39.056 C13.572,39.056 4.056,48.572 4.056,60.268 C4.056,71.964 13.572,81.48 25.268,81.48 C36.964,81.48 46.48,71.964 46.48,60.268 C46.48,48.572 36.964,39.056 25.268,39.056 L25.268,39.056 Z M25.268,79.635 C14.588,79.635 5.901,70.947 5.901,60.268 C5.901,49.589 14.589,40.901 25.268,40.901 C35.947,40.901 44.635,49.589 44.635,60.268 C44.635,70.947 35.948,79.635 25.268,79.635 L25.268,79.635 Z" id="Shape" fill="#000000" sketch:type="MSShapeGroup"></path>
+                <path d="M49.724,55.657 C48.467,48.978 44.549,43.232 39.102,39.577 L39.102,5.378 C39.102,2.835 37.034,0.767 34.491,0.767 L16.045,0.767 C13.502,0.767 11.434,2.835 11.434,5.378 L11.434,39.577 C4.766,44.05 0.367,51.653 0.367,60.268 C0.367,68.883 4.766,76.487 11.434,80.959 L11.434,115.158 C11.434,117.701 13.502,119.769 16.045,119.769 L34.49,119.769 C37.033,119.769 39.101,117.701 39.101,115.158 L39.101,80.959 C44.548,77.304 48.466,71.558 49.723,64.879 L51.09,64.879 C52.615,64.879 53.857,63.638 53.857,62.112 L53.857,58.423 C53.858,56.898 52.617,55.657 51.091,55.657 L49.724,55.657 Z M16.046,2.611 L34.491,2.611 C36.016,2.611 37.258,3.852 37.258,5.378 L37.258,38.455 C33.699,36.492 29.613,35.368 25.269,35.368 C20.925,35.368 16.839,36.492 13.28,38.455 L13.28,5.378 C13.279,3.853 14.52,2.611 16.046,2.611 Z M34.49,117.925 L16.045,117.925 C14.52,117.925 13.278,116.684 13.278,115.158 L13.278,82.082 C16.837,84.045 20.923,85.169 25.267,85.169 C29.611,85.169 33.697,84.045 37.256,82.082 L37.256,115.158 C37.257,116.683 36.016,117.925 34.49,117.925 Z M25.268,83.324 C12.555,83.324 2.212,72.981 2.212,60.268 C2.212,47.555 12.555,37.212 25.268,37.212 C37.981,37.212 48.324,47.555 48.324,60.268 C48.324,72.981 37.981,83.324 25.268,83.324 L25.268,83.324 Z M52.013,62.113 C52.013,62.621 51.599,63.035 51.091,63.035 L50.005,63.035 C50.108,62.125 50.169,61.205 50.169,60.268 C50.169,59.331 50.107,58.411 50.005,57.501 L51.091,57.501 C51.599,57.501 52.013,57.915 52.013,58.423 L52.013,62.113 L52.013,62.113 Z" id="Shape" fill="#000000" sketch:type="MSShapeGroup"></path>
+                <path d="M26.806,44.666 C27.973,44.778 29.126,45.021 30.234,45.39 C30.331,45.422 30.428,45.437 30.526,45.437 C30.913,45.437 31.272,45.192 31.401,44.807 C31.561,44.322 31.3,43.8 30.818,43.64 C29.579,43.227 28.289,42.955 26.983,42.829 C26.491,42.8 26.026,43.151 25.976,43.66 C25.927,44.167 26.3,44.617 26.806,44.666 L26.806,44.666 Z" id="Shape" fill="#000000" sketch:type="MSShapeGroup"></path>
+                <path d="M34.979,45.674 C34.56,45.393 33.985,45.505 33.7,45.93 C33.417,46.353 33.533,46.926 33.956,47.209 C36.507,48.907 38.49,51.291 39.689,54.099 C39.838,54.451 40.179,54.659 40.538,54.659 C40.659,54.659 40.783,54.636 40.9,54.585 C41.368,54.385 41.587,53.843 41.386,53.375 C40.044,50.235 37.828,47.573 34.979,45.674 L34.979,45.674 Z" id="Shape" fill="#000000" sketch:type="MSShapeGroup"></path>
+                <path d="M32.1347656,44.5683594 L32.1347656,60.0185547 L23.7851563,68" id="Path-71" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" sketch:type="MSShapeGroup" transform="translate(27.959961, 56.284180) rotate(90.000000) translate(-27.959961, -56.284180) "></path>
+            </g>
+        </g>
+    </g>
+</svg>

index.html

@@ -5,7 +5,7 @@
   <!-- Basic Page Needs
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
   <meta charset="utf-8">
-  <title>Your page title here :)</title>
+  <title>Skeleton: Responsive CSS Boilerplate</title>
   <meta name="description" content="">
   <meta name="author" content="">
 
@@ -15,31 +15,650 @@
 
   <!-- FONT
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-  <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
+  <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">
+  <link rel="stylesheet" href="dist/css/normalize.css">
+  <link rel="stylesheet" href="dist/css/skeleton.css">
+  <link rel="stylesheet" href="css/custom.css">
+
+  <!-- Scripts
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+  <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
+  <link rel="stylesheet" href="css/github-prettify-theme.css">
+  <script src="js/site.js"></script>
 
   <!-- Favicon
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-  <link rel="icon" type="image/png" href="images/favicon.png">
+  <link rel="icon" type="image/png" href="dist/images/favicon.png">
 
 </head>
-<body>
+<body class="code-snippets-visible">
 
   <!-- Primary Page Layout
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
   <div class="container">
+    <section class="header">
+      <h2 class="title">A dead simple, responsive boilerplate.</h2>
+      <a class="button button-primary" href="https://github.com/dhg/Skeleton/releases/download/2.0.4/Skeleton-2.0.4.zip" onClick="_gaq.push(['_trackEvent', 'skeleton', 'download'])">Download</a>
+      <div class="value-props row">
+        <div class="four columns value-prop">
+          <img class="value-img" src="images/feather.svg">
+          Light as a feather at ~400 lines &amp; built with mobile in mind.
+        </div>
+        <div class="four columns value-prop">
+          <img class="value-img" src="images/pens.svg">
+          Styles designed to be a starting point, not a UI framework.
+        </div>
+        <div class="four columns value-prop">
+          <img class="value-img" src="images/watch.svg">
+          Quick to start with zero compiling or installing necessary.
+        </div>
+      </div>
+    </section>
+
+    <div class="navbar-spacer"></div>
+    <nav class="navbar">
+      <div class="container">
+        <ul class="navbar-list">
+          <li class="navbar-item"><a class="navbar-link" href="#intro">Intro</a></li>
+          <li class="navbar-item">
+            <a class="navbar-link" href="#" data-popover="#codeNavPopover">Code</a>
+            <div id="codeNavPopover" class="popover">
+              <ul class="popover-list">
+                <li class="popover-item">
+                  <a class="popover-link" href="#grid">Grid</a>
+                </li>
+                <li class="popover-item">
+                  <a class="popover-link" href="#typography">Typography</a>
+                </li>
+                <li class="popover-item">
+                  <a class="popover-link" href="#buttons">Buttons</a>
+                </li>
+                <li class="popover-item">
+                  <a class="popover-link" href="#forms">Forms</a>
+                </li>
+                <li class="popover-item">
+                  <a class="popover-link" href="#lists">Lists</a>
+                </li>
+                <li class="popover-item">
+                  <a class="popover-link" href="#code">Code</a>
+                </li>
+                <li class="popover-item">
+                  <a class="popover-link" href="#tables">Tables</a>
+                </li>
+                <li class="popover-item">
+                  <a class="popover-link" href="#queries">Queries</a>
+                </li>
+                <li class="popover-item">
+                  <a class="popover-link" href="#utilities">Utilities</a>
+                </li>
+              </ul>
+            </div>
+          </li>
+          <li class="navbar-item"><a class="navbar-link" href="#examples">Examples</a></li>
+          <li class="navbar-item">
+            <a class="navbar-link" href="#" data-popover="#moreNavPopover">More</a>
+            <div id="moreNavPopover" class="popover">
+              <ul class="popover-list">
+                <li class="popover-item">
+                  <a class="popover-link" href="https://github.com/dhg/Skeleton">On Github</a>
+                </li>
+                <li class="popover-item">
+                  <a class="popover-link" href="https://github.com/dhg/Skeleton#browser-support">Browsers</a>
+                </li>
+                <li class="popover-item">
+                  <a class="popover-link" href="https://github.com/dhg/Skeleton#license">License</a>
+                </li>
+                <li class="popover-item">
+                  <a class="popover-link" href="https://github.com/dhg/Skeleton#extensions">Extensions</a>
+                </li>
+                <li class="popover-item">
+                  <a class="popover-link" href="https://github.com/dhg/Skeleton/releases">Versions</a>
+                </li>
+                <li class="popover-item">
+                  <a class="popover-link" href="https://github.com/dhg/Skeleton#colophon">Colophon</a>
+                </li>
+              </ul>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </nav>
+
+    <!-- Why use Skeleton -->
+    <div class="docs-section" id="intro">
+      <h6 class="docs-header">Is Skeleton for you?</h6>
+      <p>You should use Skeleton if you're embarking on a smaller project or just don't feel like you need all the utility of larger frameworks. Skeleton only styles a handful of standard HTML elements and includes a grid, but that's often more than enough to get started. In fact, <u>this site is built on Skeleton and has ~200 lines of custom CSS</u> (half of which is the docking navigation).</p>
+      <p>Love Skeleton and want to Tweet it, share it, or star it? Well, I appreciate that <3</p>
+      <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.getskeleton.com" data-text="Skeleton - A dead simple, responsive boilerplate." data-via="dhg" data-related="dhg">Tweet</a>
+      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
+      <!-- <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.getskeleton.com&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=true&amp;height=21&amp;appId=151131931646052" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px; width:140px" allowTransparency="true"></iframe> -->
+      <iframe src="http://ghbtns.com/github-btn.html?user=dhg&repo=Skeleton&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
+      <iframe src="http://ghbtns.com/github-btn.html?user=dhg&repo=Skeleton&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
+    </div>
+
+    <!-- Grid -->
+    <div class="docs-section" id="grid">
+      <h6 class="docs-header">The grid</h6>
+      <p>The grid is a <u>12-column fluid grid with a max width of 960px</u>, that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. The syntax is simple and it makes coding responsive much easier. Go ahead, resize the browser. </p>
+      <div class="example-grid docs-example">
         <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 class="one column">One</div>
+          <div class="eleven columns">Eleven</div>
+        </div>
+        <div class="row">
+          <div class="two columns">Two</div>
+          <div class="ten columns">Ten</div>
+        </div>
+        <div class="row">
+          <div class="three columns">Three</div>
+          <div class="nine columns">Nine</div>
+        </div>
+        <div class="row">
+          <div class="four columns">Four</div>
+          <div class="eight columns">Eight</div>
+        </div>
+        <div class="row">
+          <div class="five columns">Five</div>
+          <div class="seven columns">Seven</div>
+        </div>
+        <div class="row">
+          <div class="six columns">Six</div>
+          <div class="six columns">Six</div>
+        </div>
+        <div class="row">
+          <div class="seven columns">Seven</div>
+          <div class="five columns">Five</div>
+        </div>
+        <div class="row">
+          <div class="eight columns">Eight</div>
+          <div class="four  columns">Four</div>
+        </div>
+        <div class="row">
+          <div class="nine columns">Nine</div>
+          <div class="three columns">Three</div>
+        </div>
+        <div class="row">
+          <div class="ten columns">Ten</div>
+          <div class="two columns">Two</div>
+        </div>
+        <div class="row">
+          <div class="eleven columns">Eleven</div>
+          <div class="one column">One</div>
+        </div>
+      </div>
+
+
+<!-- CODE EXAMPLE ———————————————————————————————————————— -->
+<pre class="code-example">
+<code class="code-example-body prettyprint"><!-- .container is main centered wrapper -->
+<div class="container">
+
+  <!-- columns should be the immediate child of a .row -->
+  <div class="row">
+    <div class="one column">One</div>
+    <div class="eleven columns">Eleven</div>
+  </div>
+
+  <!-- just use a number and class 'column' or 'columns' -->
+  <div class="row">
+    <div class="two columns">Two</div>
+    <div class="ten columns">Ten</div>
+  </div>
+
+  <!-- there are a few shorthand columns widths as well -->
+  <div class="row">
+    <div class="one-third column">1/3</div>
+    <div class="two-thirds column">2/3</div>
+  </div>
+  <div class="row">
+    <div class="one-half column">1/2</div>
+    <div class="one-half column">1/2</div>
+  </div>
+
+</div>
+
+<!-- Note: columns can be nested, but it's not recommended since Skeleton's grid has %-based gutters, meaning a nested grid results in variable with gutters (which can end up being *really* small on certain browser/device sizes) -->
+</code>
+</pre>
+<!-- ————————————————————————————————————————————————————— -->
+
+
+    </div>
+
+    <!-- Typography -->
+    <div class="docs-section" id="typography">
+      <h6 class="docs-header">Typography</h6>
+      <p>Type is all set with the <code>rems</code>, so font-sizes and spacial relationships can be responsively sized based on a single <code>&lt;html&gt;</code> font-size property. Out of the box, Skeleton never changes the <code>&lt;html&gt;</code> font-size, but it's there in case you need it for your project. All measurements are still base 10 though so, an <code>&lt;h1&gt;</code> with <code>5.0rem</code>font-size just means <code>50px</code>.</p>
+      <div class="docs-example">
+        <div class="row">
+          <div class="six columns">
+            <p><strong>The typography base</strong> is <a href="http://www.google.com/fonts/specimen/Raleway">Raleway</a> served by Google, set at 15rem (15px) over a 1.6 line height (24px). Other type basics like <a href="#">anchors</a>, <strong>strong</strong>, <em>emphasis</em>, and <u>underline</u> are all obviously included.</p>
+            <p><strong>Headings</strong> create a family of distinct sizes each with specific <code>letter-spacing</code>, <code>line-height</code>, and <code>margins</code>.</p>
+          </div>
+          <div class="six columns">
+            <h1>Heading<span class="heading-font-size"> <code>&lt;h1&gt;</code> 50rem</span></h1>
+            <h2>Heading<span class="heading-font-size"> <code>&lt;h2&gt;</code> 42rem</span></h2>
+            <h3>Heading<span class="heading-font-size"> <code>&lt;h3&gt;</code> 36rem</span></h3>
+            <h4>Heading<span class="heading-font-size"> <code>&lt;h4&gt;</code> 30rem</span></h4>
+            <h5>Heading<span class="heading-font-size"> <code>&lt;h5&gt;</code> 24rem</span></h5>
+            <h6>Heading<span class="heading-font-size"> <code>&lt;h6&gt;</code> 15rem</span></h6>
           </div>
         </div>
       </div>
 
+
+<!-- CODE EXAMPLE ———————————————————————————————————————— -->
+<pre class="code-example">
+<code class="code-example-body prettyprint"><!-- Standard Headings -->
+<h1>Heading</h1>
+<h2>Heading</h2>
+<h3>Heading</h3>
+<h4>Heading</h4>
+<h5>Heading</h5>
+<h6>Heading</h6>
+
+<!-- Base type size -->
+<p>The base type is 15px over 1.6 line height (24px)</p>
+
+<!-- Other styled text tags -->
+<strong>Bolded</strong>
+<em>Italicized</em>
+<a>Colored</a>
+<u>Underlined</u>
+</code>
+</pre>
+<!-- ————————————————————————————————————————————————————— -->
+
+
+    </div>
+
+    <!-- Buttons -->
+    <div class="docs-section" id="buttons">
+      <h6 class="docs-header">Buttons</h6>
+      <p>Buttons come in two basic flavors in Skeleton. The standard <code>&lt;button&gt;</code> element is plain, whereas the <code>.button-primary</code> button is vibrant and prominent. Button styles are applied to a number of appropriate form elements, but can also be arbitrarily attached to anchors with a <code>.button</code> class.</p>
+      <div class="docs-example">
+        <div>
+          <a class="button" href="#">Anchor button</a>
+          <button>Button element</button>
+          <input type="submit" value="submit input">
+          <input type="button" value="button input">
+        </div>
+        <div>
+          <a class="button button-primary" href="#">Anchor button</a>
+          <button class="button-primary">Button element</button>
+          <input class="button-primary" type="submit" value="submit input">
+          <input class="button-primary" type="button" value="button input">
+        </div>
+      </div>
+
+
+<!-- CODE EXAMPLE ———————————————————————————————————————— -->
+<pre class="code-example">
+<code class="code-example-body prettyprint"><!-- Standard buttons -->
+<a class="button" href="#">Anchor button</a>
+<button>Button element</button>
+<input type="submit" value="submit input">
+<input type="button" value="button input">
+
+<!-- Primary buttons -->
+<a class="button button-primary" href="#">Anchor button</a>
+<button class="button-primary">Button element</button>
+<input class="button-primary" type="submit" value="submit input">
+<input class="button-primary" type="button" value="button input">
+</code>
+</pre>
+<!-- ————————————————————————————————————————————————————— -->
+
+
+    </div>
+
+    <!-- Forms -->
+    <div class="docs-section" id="forms">
+      <h6 class="docs-header">Forms</h6>
+      <p>Forms are a huge pain, but hopefully these styles make it a bit easier. All inputs, select, and buttons are normalized for a common height cross-browser so inputs can be stacked or placed alongside each other.</p>
+      <div class="docs-example docs-example-forms">
+        <form>
+          <div class="row">
+            <div class="six columns">
+              <label for="exampleEmailInput">Your email</label>
+              <input class="u-full-width" type="email" placeholder="test@mailbox.com" id="exampleEmailInput">
+            </div>
+            <div class="six columns">
+              <label for="exampleRecipientInput">Reason for contacting</label>
+              <select class="u-full-width" id="exampleRecipientInput">
+                <option value="Option 1">Questions</option>
+                <option value="Option 2">Admiration</option>
+                <option value="Option 3">Can I get your number?</option>
+              </select>
+            </div>
+          </div>
+          <label for="exampleMessage">Message</label>
+          <textarea class="u-full-width" placeholder="Hi Dave &hellip;" id="exampleMessage"></textarea>
+          <label class="example-send-yourself-copy">
+            <input type="checkbox">
+            <span class="label-body">Send a copy to yourself</span>
+          </label>
+          <input class="button-primary" type="submit" value="Submit">
+        </form>
+      </div>
+
+
+<!-- CODE EXAMPLE ———————————————————————————————————————— -->
+<pre class="code-example">
+<code class="code-example-body prettyprint"><!-- The above form looks like this -->
+<form>
+  <div class="row">
+    <div class="six columns">
+      <label for="exampleEmailInput">Your email</label>
+      <input class="u-full-width" type="email" placeholder="test@mailbox.com" id="exampleEmailInput">
+    </div>
+    <div class="six columns">
+      <label for="exampleRecipientInput">Reason for contacting</label>
+      <select class="u-full-width" id="exampleRecipientInput">
+        <option value="Option 1">Questions</option>
+        <option value="Option 2">Admiration</option>
+        <option value="Option 3">Can I get your number?</option>
+      </select>
+    </div>
+  </div>
+  <label for="exampleMessage">Message</label>
+  <textarea class="u-full-width" placeholder="Hi Dave &hellip;" id="exampleMessage"></textarea>
+  <label class="example-send-yourself-copy">
+    <input type="checkbox">
+    <span class="label-body">Send a copy to yourself</span>
+  </label>
+  <input class="button-primary" type="submit" value="Submit">
+</form>
+
+<!-- Always wrap checkbox and radio inputs in a label and use a <span class="label-body"> inside of it -->
+
+<!-- Note: The class .u-full-width is just a utility class shorthand for width: 100% -->
+</code>
+</pre>
+<!-- ————————————————————————————————————————————————————— -->
+
+
+    </div>
+
+    <!-- Lists -->
+    <div class="docs-section" id="lists">
+      <h6 class="docs-header">Lists</h6>
+      <div class="row docs-example">
+        <div class="six columns">
+          <ul>
+            <li>Unordered lists have basic styles</li>
+            <li>
+              They use the circle list style
+              <ul>
+                <li>Nested lists styled to feel right</li>
+                <li>Can nest either type of list into the other</li>
+              </ul>
+            </li>
+            <li>Just more list items mama san</li>
+          </ul>
+        </div>
+        <div class="six columns">
+          <ol>
+            <li>Ordered lists also have basic styles</li>
+            <li>
+              They use the decimal list style
+              <ul>
+                <li>Ordered and unordered can be nested</li>
+                <li>Can nest either type of list into the other</li>
+              </ul>
+            </li>
+            <li>Last list item just for the fun</li>
+          </ol>
+        </div>
+      </div>
+
+
+<!-- CODE EXAMPLE ———————————————————————————————————————— -->
+<pre class="code-example">
+<code class="code-example-body prettyprint"><ul>
+  <li>Item 1</li>
+  <li>
+    Item 2
+    <ul>
+      <li>Item 2.1</li>
+      <li>Item 2.2</li>
+    </ul>
+  </li>
+  <li>Item 3</li>
+</ul>
+
+<!-- Easily substitute any <ul> or an <ol> to get number lists or sublists. Skeleton doesn't support lists nested deeper than 2 levels -->
+</code>
+</pre>
+<!-- ————————————————————————————————————————————————————— -->
+
+
+    </div>
+
+    <!-- Code -->
+    <div class="docs-section" id="code">
+      <h6 class="docs-header">Code</h6>
+      <p>Code styling is kept basic – just wrap anything in a <code>&lt;code&gt;</code> and it will appear like <code>this</code>. For blocks of code, wrap a <code>&lt;code&gt;</code> with a <code>&lt;pre&gt;</code>.</p>
+      <div class="docs-example">
+<pre><code>.some-class {
+  background-color: red;
+}</code></pre>
+      </div>
+
+
+<!-- CODE EXAMPLE ———————————————————————————————————————— -->
+<pre class="code-example">
+<code class="code-example-body prettyprint"><pre><code>.some-class {
+  background-color: red;
+}</code></pre>
+
+<!-- Remember every whitespace and break will be preserved in a <pre>, including indentation in your code -->
+</code>
+</pre>
+<!-- ————————————————————————————————————————————————————— -->
+
+
+    </div>
+
+    <!-- Tables -->
+    <div class="docs-section" id="tables">
+      <h6 class="docs-header">Tables</h6>
+      <p>Be sure to use properly formed table markup with <code>&lt;thead&gt;</code> and <code>&lt;tbody&gt;</code> when building a <code>table</code>.</p>
+      <div class="docs-example">
+        <table class="u-full-width">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Age</th>
+              <th>Sex</th>
+              <th>Location</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Dave Gamache</td>
+              <td>26</td>
+              <td>Male</td>
+              <td>San Francisco</td>
+            </tr>
+            <tr>
+              <td>Dwayne Johnson</td>
+              <td>42</td>
+              <td>Male</td>
+              <td>Hayward</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+
+<!-- CODE EXAMPLE ———————————————————————————————————————— -->
+<pre class="code-example">
+<code class="code-example-body prettyprint"><table class="u-full-width">
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Age</th>
+      <th>Sex</th>
+      <th>Location</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Dave Gamache</td>
+      <td>26</td>
+      <td>Male</td>
+      <td>San Francisco</td>
+    </tr>
+    <tr>
+      <td>Dwayne Johnson</td>
+      <td>42</td>
+      <td>Male</td>
+      <td>Hayward</td>
+    </tr>
+  </tbody>
+</table>
+</code>
+</pre>
+<!-- ————————————————————————————————————————————————————— -->
+
+
+    </div>
+
+    <!-- Queries -->
+    <div class="docs-section" id="queries">
+      <h6 class="docs-header">Media queries</h6>
+      <p>Skeleton uses media queries to serve its scalable grid, but also has a list of queries for convenience of styling your site across devices. The queries are mobile-first, meaning they target <code>min-width</code>. Mobile-first queries are how Skeleton's grid is built and is the preferrable method of organizing CSS. It means all styles outside of a query apply to all devices, then larger devices are targeted for enhancement. This prevents small devices from having to parse tons of unused CSS. The sizes for the queries are:</p>
+      <div class="docs-example row">
+        <div class="six columns">
+          <ul>
+            <li><strong>Desktop HD</strong>: 1200px</li>
+            <li><strong>Desktop</strong>: 1000px</li>
+            <li><strong>Tablet</strong>: 750px</li>
+          </ul>
+        </div>
+        <div class="six columns">
+          <ul>
+            <li><strong>Phablet</strong>: 550px</li>
+            <li><strong>Mobile</strong>: 400px</li>
+          </ul>
+        </div>
+      </div>
+
+
+<!-- CODE EXAMPLE ———————————————————————————————————————— -->
+<pre class="code-example">
+<code class="code-example-body prettyprint">/* Mobile first queries */
+
+/* Larger than mobile */
+@media (min-width: 400px) {}
+
+/* Larger than phablet */
+@media (min-width: 550px) {}
+
+/* Larger than tablet */
+@media (min-width: 750px) {}
+
+/* Larger than desktop */
+@media (min-width: 1000px) {}
+
+/* Larger than Desktop HD */
+@media (min-width: 1200px) {}
+
+
+</code>
+</pre>
+<!-- ————————————————————————————————————————————————————— -->
+
+
+    </div>
+
+
+    <!-- Utilities and Misc. -->
+    <div class="docs-section" id="utilities">
+      <h6 class="docs-header">Utilities</h6>
+      <p>Skeleton has a number of small utility classes that act as easy-to-use helpers. Sometimes it's better to use a utility class than create a whole new class just to float an element.</p>
+
+
+<!-- CODE EXAMPLE ———————————————————————————————————————— -->
+<pre class="code-example">
+<code class="code-example-body prettyprint">/* Utility Classes */
+
+/* Make element full width */
+.u-full-width {
+  width: 100%;
+  box-sizing: border-box; }
+
+/* Make sure elements don't run outside containers (great for images in columns) */
+.u-max-full-width {
+  max-width: 100%;
+  box-sizing: border-box; }
+
+/* Float either direction */
+.u-pull-right {
+  float: right; }
+.u-pull-left {
+  float: left; }
+
+/* Clear a float */
+.u-cf {
+  content: "";
+  display: table;
+  clear: both; }
+</code>
+</pre>
+<!-- ————————————————————————————————————————————————————— -->
+
+
+    </div>
+
+    <!-- Examples -->
+    <div class="docs-section examples" id="examples">
+      <h6 class="docs-header">Examples</h6>
+      <div class="row example">
+        <a class="example-screenshot-wrapper" target="_blank" href="examples/landing">
+          <img class="example-screenshot" src="images/examples/landing.jpg">
+        </a>
+        <div class="one-half offset-by-one-half column">
+          <h6 class="example-header">Demo Landing Page</h6>
+          <p class="example-description">This template is an example of how easy it can be to create a landing page with just the Skeleton grid and a few custom styles. The entire demo is ~150 lines of CSS including comments (most of which is positioning the phones at the top).</p>
+          <a class="button" href="examples/landing" target="_blank">Demo</a>
+          <a class="button" href="https://github.com/dhg/Skeleton/tree/gh-pages/examples/landing" target="_blank">Source</a>
+        </div>
+      </div>
+      <div class="row example">
+        <div class="example-screenshot-wrapper">
+          <div class="example-screenshot coming-soon"></div>
+        </div>
+        <div class="one-half offset-by-one-half column">
+          <h6 class="example-header">More Coming Soon!</h6>
+          <p class="example-description">More examples will be added to help anyone get started or more familiar with how Skeleton works. The goal is education. If you're more interested in real, live examples of Skeleton sites, I'll be creating a "Built on Skeleton" list soon!</p>
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+
+  <!-- Google Analytics -->
+  <script type="text/javascript">
+
+    var _gaq = _gaq || [];
+    _gaq.push(['_setAccount', 'UA-33397759-1']);
+    _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>
+
 <!-- End Document
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
 </body>

js/site.js

@@ -0,0 +1,94 @@
+$(document).ready(function() {
+
+  // Variables
+  var $codeSnippets = $('.code-example-body'),
+      $nav = $('.navbar'),
+      $body = $('body'),
+      $window = $(window),
+      $popoverLink = $('[data-popover]'),
+      navOffsetTop = $nav.offset().top,
+      $document = $(document),
+      entityMap = {
+        "&": "&",
+        "<": "&lt;",
+        ">": "&gt;",
+        '"': '&quot;',
+        "'": '&#39;',
+        "/": '&#x2F;'
+      }
+
+  function init() {
+    $window.on('scroll', onScroll)
+    $window.on('resize', resize)
+    $popoverLink.on('click', openPopover)
+    $document.on('click', closePopover)
+    $('a[href^="#"]').on('click', smoothScroll)
+    buildSnippets();
+  }
+
+  function smoothScroll(e) {
+    e.preventDefault();
+    $(document).off("scroll");
+    var target = this.hash,
+        menu = target;
+    $target = $(target);
+    $('html, body').stop().animate({
+        'scrollTop': $target.offset().top-40
+    }, 0, 'swing', function () {
+        window.location.hash = target;
+        $(document).on("scroll", onScroll);
+    });
+  }
+
+  function openPopover(e) {
+    e.preventDefault()
+    closePopover();
+    var popover = $($(this).data('popover'));
+    popover.toggleClass('open')
+    e.stopImmediatePropagation();
+  }
+
+  function closePopover(e) {
+    if($('.popover.open').length > 0) {
+      $('.popover').removeClass('open')
+    }
+  }
+
+  $("#button").click(function() {
+    $('html, body').animate({
+        scrollTop: $("#elementtoScrollToID").offset().top
+    }, 2000);
+});
+
+  function resize() {
+    $body.removeClass('has-docked-nav')
+    navOffsetTop = $nav.offset().top
+    onScroll()
+  }
+
+  function onScroll() {
+    if(navOffsetTop < $window.scrollTop() && !$body.hasClass('has-docked-nav')) {
+      $body.addClass('has-docked-nav')
+    }
+    if(navOffsetTop > $window.scrollTop() && $body.hasClass('has-docked-nav')) {
+      $body.removeClass('has-docked-nav')
+    }
+  }
+
+  function escapeHtml(string) {
+    return String(string).replace(/[&<>"'\/]/g, function (s) {
+      return entityMap[s];
+    });
+  }
+
+  function buildSnippets() {
+    $codeSnippets.each(function() {
+      var newContent = escapeHtml($(this).html())
+      $(this).html(newContent)
+    })
+  }
+
+
+  init();
+
+});