diff --git a/html/css/pattern-scaffolding.css b/html/css/pattern-scaffolding.css
new file mode 100644
index 0000000..2a69457
--- /dev/null
+++ b/html/css/pattern-scaffolding.css
@@ -0,0 +1,54 @@
+/**
+ * This stylesheet is for styles you want to include only when displaying demo
+ * styles for grids, animations, color swatches, etc.
+ * These styles will not be your production CSS.
+ */
+#sg-patterns {
+ -webkit-box-sizing: border-box !important;
+ box-sizing: border-box !important;
+ max-width: 100%;
+ padding: 0 0.5em;
+}
+
+.demo-animate {
+ background: #ddd;
+ padding: 1em;
+ margin-bottom: 1em;
+ text-align: center;
+ border-radius: 8px;
+ cursor: pointer;
+}
+
+.sg-colors {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ list-style: none !important;
+ padding: 0 !important;
+ margin: 0 !important;
+}
+.sg-colors li {
+ -webkit-box-flex: 1;
+ -ms-flex: auto;
+ flex: auto;
+ padding: 0.3em;
+ margin: 0 0.5em 0.5em 0;
+ min-width: 5em;
+ max-width: 14em;
+ border: 1px solid #ddd;
+ border-radius: 8px;
+}
+
+.sg-swatch {
+ display: block;
+ height: 4em;
+ margin-bottom: 0.3em;
+ border-radius: 5px;
+}
+
+.sg-label {
+ font-size: 90%;
+ line-height: 1;
+}
diff --git a/html/css/style.css b/html/css/style.css
new file mode 100644
index 0000000..47dd8d7
--- /dev/null
+++ b/html/css/style.css
@@ -0,0 +1 @@
+.highlight-title,.section-heading{font-weight:700;display:inline-block;line-height:1;padding:.5em .75em;font-family:"PT Sans","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif}.logo--link,a.social_media--icon{text-indent:-9999px;background-repeat:no-repeat;background-size:contain}#site-header,.section-main{-ms-grid-rows:1fr;grid-template-rows:1fr;grid-gap:1em}a,a:visited{text-decoration:none}.highlight-title,.section-heading,body,h1,h2,h3,h4{font-family:"PT Sans","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif}h3.list-title{font-size:2em}h3.list-title a{color:#000}h3.list-title a:hover{color:#0fa620}div.list-body{font-size:1.125em;margin-bottom:2em}div.list-body a{font-weight:700}img.list-image{max-width:300px}.highlight-title{color:#fff;background-color:#ed6300}.highlight-title:hover{background-color:#0fa620}.posted-on{color:#969696;margin:0 0 1em;line-height:1}.section-heading{color:#fff;background-color:#ed6300}.section-heading:hover{background-color:#0fa620}.section-content,body{background-color:#fff}.section-content{border:2px solid #EDEDED;margin-bottom:30px;font-size:16px}.logo--link,.logo--wrapper{margin:0;display:block;padding:0}.section-content .ul .li{border-bottom:1px solid #ccc}.section-content .ul .li:last-child{border-bottom:none}.logo--link{width:inherit;height:inherit}.blog-tags,.list-element{margin-bottom:1em}.blog-tags{border-bottom:1px solid #EDEDED}.list-element .list-element-body{display:block}.list-element .list-element-body .list-element-image{float:left;clear:left;margin:0 1em 1em 0}.list-element .list-element-body:after{content:" ";display:block;clear:both}.section p{margin:20px}ul.social_media--list{display:block;list-style:none;padding:0;margin:0}li.social_media--item{display:inline-block;padding:0;margin:0;height:2em;width:2em}a.social_media--icon{display:block;height:inherit;width:inherit}a.social_media--icon.Twitter{background-image:url(../images/social_media_icons/social_twitter.png)}a.social_media--icon.Facebook{background-image:url(../images/social_media_icons/social_facebook.png)}a.social_media--icon.LinkedIn{background-image:url(../images/social_media_icons/social_linkedin.png)}.blog-list{margin-bottom:2em}#site-header{background-color:#eee;border:0 solid #aaa;padding:1.5vw;display:-ms-grid;display:grid;-ms-grid-columns:(1fr) [6];grid-template-columns:repeat(6,1fr);grid-template-areas:"a a a b b b"}#site-header>.grid-cell{border:0 solid #aaa;padding:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.logo--wrapper{width:23vw;height:10vw}.grid-cell--logo{grid-area:a;-ms-flex-pack:left;justify-content:left}.grid-cell--social-icons{grid-area:b;-ms-flex-pack:right;justify-content:right}.grid-cell--social-icons .social_media--list{margin-left:auto}.grid-cell--social-icons .social_media--list .social_media--item{height:5vw;width:5vw}.page-wrapper{width:100%;padding:0;margin:0}.section{width:100%;padding:0;margin:0 0 1em}.section-main{display:-ms-grid;display:grid;-ms-grid-columns:1fr;grid-template-columns:1fr;grid-template-areas:"a" "b"}@media (min-width:768px){.section-main{-ms-grid-columns:(1fr) [8];grid-template-columns:repeat(8,1fr);grid-template-areas:"a a a a a b b b"}}@media (min-width:960px){.section-main{-ms-grid-columns:(1fr) [8];grid-template-columns:repeat(8,1fr);grid-template-areas:"a a a a a a b b"}}.section-main .content{grid-area:a}.section-main .sidebar{grid-area:b}html{font-size:16px}body{font-size:1em;line-height:1.5;font-weight:400;overflow-x:hidden;color:#4c4c4c}a{color:#ed6300}a:hover{color:#0fa620;text-decoration:underline}h1,h2,h3,h4{font-weight:700;padding:0;line-height:1.2;margin:0 0 .5em}h1{font-size:2em}h2{font-size:1.67em}h3{font-size:1.33em}h4{font-size:1em}
\ No newline at end of file
diff --git a/html/images/dog-cello.jpg b/html/images/dog-cello.jpg
new file mode 100644
index 0000000..a414252
Binary files /dev/null and b/html/images/dog-cello.jpg differ
diff --git a/html/images/favicon_16x16.jpg b/html/images/favicon_16x16.jpg
new file mode 100644
index 0000000..05e7449
Binary files /dev/null and b/html/images/favicon_16x16.jpg differ
diff --git a/html/images/favicon_32x32.jpg b/html/images/favicon_32x32.jpg
new file mode 100644
index 0000000..0970980
Binary files /dev/null and b/html/images/favicon_32x32.jpg differ
diff --git a/html/images/fpo_16x9.png b/html/images/fpo_16x9.png
new file mode 100644
index 0000000..013949d
Binary files /dev/null and b/html/images/fpo_16x9.png differ
diff --git a/html/images/fpo_4x3.png b/html/images/fpo_4x3.png
new file mode 100644
index 0000000..7ff84b8
Binary files /dev/null and b/html/images/fpo_4x3.png differ
diff --git a/html/images/fpo_avatar.png b/html/images/fpo_avatar.png
new file mode 100644
index 0000000..e666a40
Binary files /dev/null and b/html/images/fpo_avatar.png differ
diff --git a/html/images/fpo_square.png b/html/images/fpo_square.png
new file mode 100644
index 0000000..ce8a1e4
Binary files /dev/null and b/html/images/fpo_square.png differ
diff --git a/html/images/logo.png b/html/images/logo.png
new file mode 100644
index 0000000..93db733
Binary files /dev/null and b/html/images/logo.png differ
diff --git a/html/images/nerdstein_11.png b/html/images/nerdstein_11.png
new file mode 100644
index 0000000..808742c
Binary files /dev/null and b/html/images/nerdstein_11.png differ
diff --git a/html/images/sample/landscape-16x9-mountains.jpg b/html/images/sample/landscape-16x9-mountains.jpg
new file mode 100644
index 0000000..3c0d92b
Binary files /dev/null and b/html/images/sample/landscape-16x9-mountains.jpg differ
diff --git a/html/images/sample/thumb-square-fire.jpg b/html/images/sample/thumb-square-fire.jpg
new file mode 100644
index 0000000..20a5c5e
Binary files /dev/null and b/html/images/sample/thumb-square-fire.jpg differ
diff --git a/html/images/sample/thumb-square-gear.jpg b/html/images/sample/thumb-square-gear.jpg
new file mode 100644
index 0000000..052a52a
Binary files /dev/null and b/html/images/sample/thumb-square-gear.jpg differ
diff --git a/html/images/sample/thumb-square-ivy.jpg b/html/images/sample/thumb-square-ivy.jpg
new file mode 100644
index 0000000..64183a7
Binary files /dev/null and b/html/images/sample/thumb-square-ivy.jpg differ
diff --git a/html/images/sample/thumb-square-river.jpg b/html/images/sample/thumb-square-river.jpg
new file mode 100644
index 0000000..f190186
Binary files /dev/null and b/html/images/sample/thumb-square-river.jpg differ
diff --git a/html/images/sample/thumb-square-yosemite.jpg b/html/images/sample/thumb-square-yosemite.jpg
new file mode 100644
index 0000000..8f388d7
Binary files /dev/null and b/html/images/sample/thumb-square-yosemite.jpg differ
diff --git a/html/images/sample/tout-4x3-climber.jpg b/html/images/sample/tout-4x3-climber.jpg
new file mode 100644
index 0000000..1348cd7
Binary files /dev/null and b/html/images/sample/tout-4x3-climber.jpg differ
diff --git a/html/images/sample/tout-4x3-climbers.jpg b/html/images/sample/tout-4x3-climbers.jpg
new file mode 100644
index 0000000..d8461a1
Binary files /dev/null and b/html/images/sample/tout-4x3-climbers.jpg differ
diff --git a/html/images/sample/tout-4x3-stream.jpg b/html/images/sample/tout-4x3-stream.jpg
new file mode 100644
index 0000000..8e091d1
Binary files /dev/null and b/html/images/sample/tout-4x3-stream.jpg differ
diff --git a/html/images/social_media_icons/social_facebook.png b/html/images/social_media_icons/social_facebook.png
new file mode 100644
index 0000000..4f53365
Binary files /dev/null and b/html/images/social_media_icons/social_facebook.png differ
diff --git a/html/images/social_media_icons/social_linkedin.png b/html/images/social_media_icons/social_linkedin.png
new file mode 100644
index 0000000..61adf75
Binary files /dev/null and b/html/images/social_media_icons/social_linkedin.png differ
diff --git a/html/images/social_media_icons/social_twitter.png b/html/images/social_media_icons/social_twitter.png
new file mode 100644
index 0000000..813b6d2
Binary files /dev/null and b/html/images/social_media_icons/social_twitter.png differ
diff --git a/html/js/.gitkeep b/html/js/.gitkeep
new file mode 100644
index 0000000..67291bb
--- /dev/null
+++ b/html/js/.gitkeep
@@ -0,0 +1 @@
+keeping this dir around
\ No newline at end of file
diff --git a/html/patterns/01-atoms-01-list-title-list-title/01-atoms-01-list-title-list-title.html b/html/patterns/01-atoms-01-list-title-list-title/01-atoms-01-list-title-list-title.html
index 3c5435c..9d607e1 100644
--- a/html/patterns/01-atoms-01-list-title-list-title/01-atoms-01-list-title-list-title.html
+++ b/html/patterns/01-atoms-01-list-title-list-title/01-atoms-01-list-title-list-title.html
@@ -5,8 +5,8 @@
-
-
+
+
diff --git a/html/patterns/01-atoms-02-list-body-list-body/01-atoms-02-list-body-list-body.html b/html/patterns/01-atoms-02-list-body-list-body/01-atoms-02-list-body-list-body.html
index 3671c43..08c295e 100644
--- a/html/patterns/01-atoms-02-list-body-list-body/01-atoms-02-list-body-list-body.html
+++ b/html/patterns/01-atoms-02-list-body-list-body/01-atoms-02-list-body-list-body.html
@@ -5,8 +5,8 @@
-
-
+
+
diff --git a/html/patterns/01-atoms-03-list-image-list-image/01-atoms-03-list-image-list-image.html b/html/patterns/01-atoms-03-list-image-list-image/01-atoms-03-list-image-list-image.html
index 7f05853..6a216b9 100644
--- a/html/patterns/01-atoms-03-list-image-list-image/01-atoms-03-list-image-list-image.html
+++ b/html/patterns/01-atoms-03-list-image-list-image/01-atoms-03-list-image-list-image.html
@@ -5,8 +5,8 @@
-
-
+
+
diff --git a/html/patterns/01-atoms-04-blog-tag-blog-tag/01-atoms-04-blog-tag-blog-tag.html b/html/patterns/01-atoms-04-blog-tag-blog-tag/01-atoms-04-blog-tag-blog-tag.html
index 0d054d7..030a023 100644
--- a/html/patterns/01-atoms-04-blog-tag-blog-tag/01-atoms-04-blog-tag-blog-tag.html
+++ b/html/patterns/01-atoms-04-blog-tag-blog-tag/01-atoms-04-blog-tag-blog-tag.html
@@ -5,8 +5,8 @@
-
-
+
+
diff --git a/html/patterns/01-atoms-05-list-posted-on-list-posted-on/01-atoms-05-list-posted-on-list-posted-on.html b/html/patterns/01-atoms-05-list-posted-on-list-posted-on/01-atoms-05-list-posted-on-list-posted-on.html
index 282c080..4be38af 100644
--- a/html/patterns/01-atoms-05-list-posted-on-list-posted-on/01-atoms-05-list-posted-on-list-posted-on.html
+++ b/html/patterns/01-atoms-05-list-posted-on-list-posted-on/01-atoms-05-list-posted-on-list-posted-on.html
@@ -5,8 +5,8 @@
-
-
+
+
diff --git a/html/patterns/01-atoms-06-section-heading-section-heading/01-atoms-06-section-heading-section-heading.html b/html/patterns/01-atoms-06-section-heading-section-heading/01-atoms-06-section-heading-section-heading.html
index 9aafd81..6593651 100644
--- a/html/patterns/01-atoms-06-section-heading-section-heading/01-atoms-06-section-heading-section-heading.html
+++ b/html/patterns/01-atoms-06-section-heading-section-heading/01-atoms-06-section-heading-section-heading.html
@@ -5,8 +5,8 @@
-
-
+
+
diff --git a/html/patterns/01-atoms-07-section-content-section-content/01-atoms-07-section-content-section-content.html b/html/patterns/01-atoms-07-section-content-section-content/01-atoms-07-section-content-section-content.html
index fbc7d71..f6ce45f 100644
--- a/html/patterns/01-atoms-07-section-content-section-content/01-atoms-07-section-content-section-content.html
+++ b/html/patterns/01-atoms-07-section-content-section-content/01-atoms-07-section-content-section-content.html
@@ -5,8 +5,8 @@
-
-
+
+
diff --git a/html/patterns/01-atoms-08-logo-logo/01-atoms-08-logo-logo.html b/html/patterns/01-atoms-08-logo-logo/01-atoms-08-logo-logo.html
index 3aa5357..13c3a1d 100644
--- a/html/patterns/01-atoms-08-logo-logo/01-atoms-08-logo-logo.html
+++ b/html/patterns/01-atoms-08-logo-logo/01-atoms-08-logo-logo.html
@@ -5,8 +5,8 @@
-
-
+
+
diff --git a/html/patterns/01-atoms-09-social-icon-social-icon/01-atoms-09-social-icon-social-icon.html b/html/patterns/01-atoms-09-social-icon-social-icon/01-atoms-09-social-icon-social-icon.html
index 1afa5ab..1444ca1 100644
--- a/html/patterns/01-atoms-09-social-icon-social-icon/01-atoms-09-social-icon-social-icon.html
+++ b/html/patterns/01-atoms-09-social-icon-social-icon/01-atoms-09-social-icon-social-icon.html
@@ -5,8 +5,8 @@
-
-
+
+
diff --git a/html/patterns/02-molecules-01-blog-tags-blog-tags/02-molecules-01-blog-tags-blog-tags.html b/html/patterns/02-molecules-01-blog-tags-blog-tags/02-molecules-01-blog-tags-blog-tags.html
index e9a7a6a..b32ba7c 100644
--- a/html/patterns/02-molecules-01-blog-tags-blog-tags/02-molecules-01-blog-tags-blog-tags.html
+++ b/html/patterns/02-molecules-01-blog-tags-blog-tags/02-molecules-01-blog-tags-blog-tags.html
@@ -5,8 +5,8 @@
-
-
+
+
diff --git a/html/patterns/02-molecules-02-list-element-list-element-1-image/02-molecules-02-list-element-list-element-1-image.html b/html/patterns/02-molecules-02-list-element-list-element-1-image/02-molecules-02-list-element-list-element-1-image.html
index a503f60..bea3583 100644
--- a/html/patterns/02-molecules-02-list-element-list-element-1-image/02-molecules-02-list-element-list-element-1-image.html
+++ b/html/patterns/02-molecules-02-list-element-list-element-1-image/02-molecules-02-list-element-list-element-1-image.html
@@ -5,8 +5,8 @@
-
-
+
+
diff --git a/html/patterns/02-molecules-02-list-element-list-element/02-molecules-02-list-element-list-element.html b/html/patterns/02-molecules-02-list-element-list-element/02-molecules-02-list-element-list-element.html
index 400518c..7f100da 100644
--- a/html/patterns/02-molecules-02-list-element-list-element/02-molecules-02-list-element-list-element.html
+++ b/html/patterns/02-molecules-02-list-element-list-element/02-molecules-02-list-element-list-element.html
@@ -5,8 +5,8 @@
-
-
+
+
diff --git a/html/patterns/02-molecules-03-section-section/02-molecules-03-section-section.html b/html/patterns/02-molecules-03-section-section/02-molecules-03-section-section.html
index e305dd4..222d10e 100644
--- a/html/patterns/02-molecules-03-section-section/02-molecules-03-section-section.html
+++ b/html/patterns/02-molecules-03-section-section/02-molecules-03-section-section.html
@@ -5,8 +5,8 @@
-
-
+
+
diff --git a/html/patterns/02-molecules-04-social-icons-social-icons/02-molecules-04-social-icons-social-icons.html b/html/patterns/02-molecules-04-social-icons-social-icons/02-molecules-04-social-icons-social-icons.html
index 53b92aa..7fb5f37 100644
--- a/html/patterns/02-molecules-04-social-icons-social-icons/02-molecules-04-social-icons-social-icons.html
+++ b/html/patterns/02-molecules-04-social-icons-social-icons/02-molecules-04-social-icons-social-icons.html
@@ -5,8 +5,8 @@
-
-
+
+
diff --git a/html/patterns/03-organisms-01-blog-list-blog-list/03-organisms-01-blog-list-blog-list.html b/html/patterns/03-organisms-01-blog-list-blog-list/03-organisms-01-blog-list-blog-list.html
index ae72254..0a4662d 100644
--- a/html/patterns/03-organisms-01-blog-list-blog-list/03-organisms-01-blog-list-blog-list.html
+++ b/html/patterns/03-organisms-01-blog-list-blog-list/03-organisms-01-blog-list-blog-list.html
@@ -5,8 +5,8 @@
-
-
+
+
diff --git a/html/patterns/03-organisms-02-header-header/03-organisms-02-header-header.html b/html/patterns/03-organisms-02-header-header/03-organisms-02-header-header.html
index dab44db..2d6c431 100644
--- a/html/patterns/03-organisms-02-header-header/03-organisms-02-header-header.html
+++ b/html/patterns/03-organisms-02-header-header/03-organisms-02-header-header.html
@@ -5,8 +5,8 @@
-
-
+
+
diff --git a/html/patterns/04-pages-01-one-sidebar-one-sidebar/04-pages-01-one-sidebar-one-sidebar.html b/html/patterns/04-pages-01-one-sidebar-one-sidebar/04-pages-01-one-sidebar-one-sidebar.html
index f4bfb6b..91881e0 100644
--- a/html/patterns/04-pages-01-one-sidebar-one-sidebar/04-pages-01-one-sidebar-one-sidebar.html
+++ b/html/patterns/04-pages-01-one-sidebar-one-sidebar/04-pages-01-one-sidebar-one-sidebar.html
@@ -5,8 +5,8 @@
-
-
+
+