From e11973b0c53e7c600a289a83a74f87be5729561b Mon Sep 17 00:00:00 2001
From: Jessica Paoli <skullface@github.com>
Date: Sat, 1 Jul 2017 21:06:36 -0400
Subject: [PATCH]  initialize project

---
 .gitignore                              |   4 +
 404.html                                |   7 +
 _config.yml                             |  17 +
 _includes/footer.html                   |   5 +
 _includes/head.html                     |  17 +
 _layouts/default.html                   |  14 +
 _layouts/post.html                      |  14 +
 _posts/.DS_Store                        | Bin 0 -> 6148 bytes
 _posts/2017-06-30-a11y.md               |  11 +
 _posts/2017-06-30-browser-extensions.md |  12 +
 _posts/2017-06-30-brushes.md            |   9 +
 _posts/2017-06-30-colors.md             |  15 +
 _posts/2017-06-30-fonts.md              |  37 ++
 _posts/2017-06-30-icons.md              |   9 +
 _posts/2017-06-30-inspiration.md        |  55 +++
 _posts/2017-06-30-mocks.md              |   9 +
 _posts/2017-06-30-prototyping-tools.md  |  12 +
 _posts/2017-06-30-stock-photography.md  |  12 +
 _posts/2017-06-30-user-testing.md       |   8 +
 _scss/.DS_Store                         | Bin 0 -> 6148 bytes
 _scss/_syntax.scss                      |  60 +++
 _scss/base/_base.scss                   |   4 +
 _scss/base/_colors.scss                 |   0
 _scss/base/_forms.scss                  |   0
 _scss/base/_reset.scss                  | 465 +++++++++++++++++++++++
 _scss/base/_typography.scss             |  45 +++
 _scss/components/_article.scss          |  36 ++
 _scss/components/_footer.scss           |   4 +
 _scss/components/_header.scss           |  20 +
 _scss/components/_page.scss             |   7 +
 _scss/main.scss                         |  10 +
 assets/main.css                         | 483 ++++++++++++++++++++++++
 css/main.css                            | 432 +++++++++++++++++++++
 gulpfile.js                             |  67 ++++
 index.html                              |  23 ++
 main.css                                | 432 +++++++++++++++++++++
 package.json                            |  31 ++
 37 files changed, 2386 insertions(+)
 create mode 100755 .gitignore
 create mode 100644 404.html
 create mode 100755 _config.yml
 create mode 100644 _includes/footer.html
 create mode 100644 _includes/head.html
 create mode 100755 _layouts/default.html
 create mode 100755 _layouts/post.html
 create mode 100644 _posts/.DS_Store
 create mode 100755 _posts/2017-06-30-a11y.md
 create mode 100755 _posts/2017-06-30-browser-extensions.md
 create mode 100644 _posts/2017-06-30-brushes.md
 create mode 100644 _posts/2017-06-30-colors.md
 create mode 100644 _posts/2017-06-30-fonts.md
 create mode 100644 _posts/2017-06-30-icons.md
 create mode 100755 _posts/2017-06-30-inspiration.md
 create mode 100644 _posts/2017-06-30-mocks.md
 create mode 100644 _posts/2017-06-30-prototyping-tools.md
 create mode 100644 _posts/2017-06-30-stock-photography.md
 create mode 100755 _posts/2017-06-30-user-testing.md
 create mode 100644 _scss/.DS_Store
 create mode 100755 _scss/_syntax.scss
 create mode 100755 _scss/base/_base.scss
 create mode 100755 _scss/base/_colors.scss
 create mode 100755 _scss/base/_forms.scss
 create mode 100755 _scss/base/_reset.scss
 create mode 100755 _scss/base/_typography.scss
 create mode 100755 _scss/components/_article.scss
 create mode 100755 _scss/components/_footer.scss
 create mode 100755 _scss/components/_header.scss
 create mode 100755 _scss/components/_page.scss
 create mode 100755 _scss/main.scss
 create mode 100755 assets/main.css
 create mode 100755 css/main.css
 create mode 100755 gulpfile.js
 create mode 100644 index.html
 create mode 100755 main.css
 create mode 100755 package.json

diff --git a/.gitignore b/.gitignore
new file mode 100755
index 0000000..3cc5329
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,4 @@
+.DS_Store
+_site
+.idea
+node_modules
diff --git a/404.html b/404.html
new file mode 100644
index 0000000..4a727a4
--- /dev/null
+++ b/404.html
@@ -0,0 +1,7 @@
+---
+layout: default
+---
+
+<h1>404</h1>
+<p><strong>Page not found :(</strong></p>
+<p>The requested page could not be found.</p>
diff --git a/_config.yml b/_config.yml
new file mode 100755
index 0000000..02de342
--- /dev/null
+++ b/_config.yml
@@ -0,0 +1,17 @@
+# Site settings
+title: Design Resources
+description: My favorite websites, tools, and books for design.
+author: Jessica Paoli
+locale: en-US
+
+# Build settings
+markdown: kramdown
+highlighter: rouge
+permalink: /:title
+
+# Exclude from site build
+exclude:
+  - .DS_Store
+  - node_modules
+  - gulpfile.js
+  - package.json
diff --git a/_includes/footer.html b/_includes/footer.html
new file mode 100644
index 0000000..7409e7d
--- /dev/null
+++ b/_includes/footer.html
@@ -0,0 +1,5 @@
+<footer class="site__footer">
+
+  <p>made by <a href="http://twitter.com/skullface">@skullface</a> &bull; view/contribute on <a href="http://github.com/skullface/design-resources">GitHub</a></p>
+
+</footer>
diff --git a/_includes/head.html b/_includes/head.html
new file mode 100644
index 0000000..cdd8988
--- /dev/null
+++ b/_includes/head.html
@@ -0,0 +1,17 @@
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>{% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %}</title>
+  <meta name="description" content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}">
+
+  <link rel="stylesheet" href="{{ "/css/main.css" | relative_url }}">
+  <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
+  <link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
+  <link rel="alternate" type="application/rss+xml" title="{{ site.title | escape }}" href="{{ "/feed.xml" | relative_url }}">
+
+  {% if jekyll.environment == 'production' and site.google_analytics %}
+  {% include google-analytics.html %}
+  {% endif %}
+</head>
diff --git a/_layouts/default.html b/_layouts/default.html
new file mode 100755
index 0000000..a5221d0
--- /dev/null
+++ b/_layouts/default.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: "en" }}">
+
+  {% include head.html %}
+
+  <body class="site__content">
+
+      <main>
+      {{ content }}
+      </main>
+
+    {% include footer.html %}
+  </body>
+</html>
diff --git a/_layouts/post.html b/_layouts/post.html
new file mode 100755
index 0000000..d86064a
--- /dev/null
+++ b/_layouts/post.html
@@ -0,0 +1,14 @@
+---
+layout: default
+---
+
+<div class="site__header">
+  <h1 class="site__title"><a href="/">{{ site.title }}</a></h1>
+  <p>Websites, tools, and books for designers.</p>
+</div>
+
+<h1>{{ post.title }}</h1>
+
+<article class="post">
+{{ content }}
+</article>
diff --git a/_posts/.DS_Store b/_posts/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..5008ddfcf53c02e82d7eee2e57c38e5672ef89f6
GIT binary patch
literal 6148
zcmeH~Jr2S!425mzP>H1@V-^m;4Wg<&0T*E43hX&L&p$$qDprKhvt+--jT7}7np#A3
zem<@ulZcFPQ@L2!n>{z**<q8>++&mCkOWA81W14cNZ<zv;LbK1Poaz?KmsK2CSc!(
z0ynLxE!0092;Krf2c+FF_Fe*7ECH>lEfg7;MkzE(HCqgga^y>{tEnwC%0;vJ&^%eQ
zLs35+`xjp>T0<F0fCPF1$Cyrb|F7^5{eNG?83~ZUUlGt@xh*qZDeu<Z%US-OSsOPv
j)R!Z4KLME7ReXlK;d!wEw5GODWMKRea10D2@KpjYNUI8I

literal 0
HcmV?d00001

diff --git a/_posts/2017-06-30-a11y.md b/_posts/2017-06-30-a11y.md
new file mode 100755
index 0000000..b8d786d
--- /dev/null
+++ b/_posts/2017-06-30-a11y.md
@@ -0,0 +1,11 @@
+---
+layout: post
+title: Accessibility guidelines and tools
+---
+
+## Guidelines
+- [Vox Media’s Designer Accessibility Checklist](http://) : steps to take when designing to be sure your visual design and experience design is accessible for all users
+- [Google Material Design](http://) : a11y principles; practices for color, sound, motion, layout, copy, hierarchy, focus, and implementation
+
+## Tools
+- [Color palette ideas and contrast ratio checkers](http://) 👆
diff --git a/_posts/2017-06-30-browser-extensions.md b/_posts/2017-06-30-browser-extensions.md
new file mode 100755
index 0000000..22b7837
--- /dev/null
+++ b/_posts/2017-06-30-browser-extensions.md
@@ -0,0 +1,12 @@
+---
+title: "Browser extensions and tools"
+layout: post
+---
+
+## Google Chrome
+- [WhatFont?](http://)
+- [Type Tester](http://)
+
+### Chrome Dev tools
+- [Animation tools](http://)
+- [Full-page screenshot](http://)
diff --git a/_posts/2017-06-30-brushes.md b/_posts/2017-06-30-brushes.md
new file mode 100644
index 0000000..3e6669b
--- /dev/null
+++ b/_posts/2017-06-30-brushes.md
@@ -0,0 +1,9 @@
+---
+title: "Brushes, PSDs"
+layout: post
+---
+
+- [Kyle T. Webster](https://www.kylebrush.com/): best Photoshop brushes for drawing and adding small texture (though they are not of much use without a pressure-sensitive tablet)
+- [RetroSupply](http://www.retrosupply.co/collections/brushes) Photoshop and Illustrator brushes for adding large (2000px) texture; recommended packs are RetroSupply 1 and 2 for PS, VectorFuzz for Illustrator
+- [CreativeMarket](https://creativemarket.com/): huge marketplace for relatively high-quality design assets (including fonts and stock photos), great for when you need to recreate a specific style or work in a particular niche
+- [YouWorkForThem](https://www.youworkforthem.com/graphics/): cool textures and “graphics”
diff --git a/_posts/2017-06-30-colors.md b/_posts/2017-06-30-colors.md
new file mode 100644
index 0000000..3991e32
--- /dev/null
+++ b/_posts/2017-06-30-colors.md
@@ -0,0 +1,15 @@
+---
+title: "Colors and color palettes"
+layout: post
+---
+
+- [Coolors](https://coolors.co/app): interactive color palette generator
+- [Paletteable](http://www.palettable.io/): interactive color palette generator
+- [Sip](http://sipapp.io/): beautifully-designed OSX and iOS colorpicker app, saves palettes
+- [Randoma11y](https://randoma11y.com/): accessibility friendly text & bg color generator
+- [Colors from A11y Stats](http://clrs.cc/a11y/): text & bg combinations with their contrast ratio and WCAG AA/AAA rating
+- [Online contrast checker](http://webaim.org/resources/contrastchecker/) for accessibility (input hex code for text color and bg color)
+- [Contrast Analyzer for OSX](https://www.paciellogroup.com/resources/contrastanalyser/) for easy eye-dropper–tool accessibility color testing  
+- [Hex Naw](https://hexnaw.com/
+- [Kuler](https://color.adobe.com/create/color-wheel/): Adobe color palette resource
+- [Wikipedia’s category for color shades](https://en.wikipedia.org/wiki/Category:Shades_of_color_templates): omg so nerdy
diff --git a/_posts/2017-06-30-fonts.md b/_posts/2017-06-30-fonts.md
new file mode 100644
index 0000000..6e59eca
--- /dev/null
+++ b/_posts/2017-06-30-fonts.md
@@ -0,0 +1,37 @@
+---
+title: "Fonts"
+layout: post
+---
+## Directories and marketplaces
+- [Google Fonts](https://fonts.google.com/&sa=D&ust=1498933355778000&usg=AFQjCNH-hhkhkMn9pvoSUaDCoWeb_lgzYQ): [free]
+- [Type Network](http://www.typenetwork.com/): [paid]
+- [YouWorkForThem](https://www.youworkforthem.com/&sa=D&ust=1498933355779000&usg=AFQjCNEWrJwheEFvwG2raZBXfM13w9g_vQ): [paid]
+- [MyFonts](http://myfonts.com&sa=D&ust=1498933355779000&usg=AFQjCNFL8IvctCLeLFB_2Bio-gaoJ3gXog): [paid]
+- [TypeKit](https://typekit.com/&sa=D&ust=1498933355779000&usg=AFQjCNHI9-NVjfcM3o-JF0C6tBS7zLgn8g): [paid] included with Adobe CC subscription, some only available for desktop or web use
+
+##  Individual foundries
+- [Village](https://vllg.com/&sa=D&ust=1498933355779000&usg=AFQjCNF3fLFYrD3WN0eIp236xOyaw26RDw)
+- [Font Bureau](http://fontbureau.typenetwork.com/&sa=D&ust=1498933355780000&usg=AFQjCNEekABOiPNRm14ummFIu9JMNxfFAA)
+- [GrilliType](https://www.grillitype.com/&sa=D&ust=1498933355780000&usg=AFQjCNHgIHtkOrI_EwLrSVoICmyHh66atw)
+- [Okay Type](https://okaytype.com/&sa=D&ust=1498933355780000&usg=AFQjCNGlmL-3_tXTtoJGcxMqb8JopeMBFg)
+- [HvD Fonts](http://www.hvdfonts.com/&sa=D&ust=1498933355780000&usg=AFQjCNExMpcalIckvIT2UQQVx-ZMeJ4uRQ)
+- [Colophon](http://www.colophon-foundry.org/&sa=D&ust=1498933355781000&usg=AFQjCNExFmdqENTPeg2OMrchOnC0f6WvJw)  
+- [TypeTogether](http://www.type-together.com/&sa=D&ust=1498933355781000&usg=AFQjCNEnA2lMtBlDhwy0lYHR2-50j43t3w)
+- [Lineto](https://lineto.com/&sa=D&ust=1498933355781000&usg=AFQjCNEKheEYnm9dnC9Y6TfBaPl2Usqi6A)
+- [Mark Simpson](http://www.marksimpson.com/&sa=D&ust=1498933355781000&usg=AFQjCNHc2BCuBlpOBEfkzCNYJjz6zIvZwA)
+- [Just Another Foundry](http://justanotherfoundry.com/&sa=D&ust=1498933355781000&usg=AFQjCNEO4pS8er4_LeHdCEXNhvCQiY9v0g)
+- [DSType](http://www.dstype.com/&sa=D&ust=1498933355782000&usg=AFQjCNHIzlQoKCVvfMRD7EQxY5WiTQhcmg)
+- [P22](https://www.p22.com/&sa=D&ust=1498933355782000&usg=AFQjCNF7-f9TT4wXaOPalrnS7bbG6DBwAw)
+- [Process Type](https://processtypefoundry.com/fonts/&sa=D&ust=1498933355782000&usg=AFQjCNGwUt19kM_1ibmawX3Tq96stRItEg)
+- [Commercial Type](https://commercialtype.com/&sa=D&ust=1498933355782000&usg=AFQjCNFZKFfDAMTWGvRGtE8LI2HVHJgz3A)  
+- [Dalton Maag](https://www.daltonmaag.com/&sa=D&ust=1498933355782000&usg=AFQjCNEnA3gYuUSstIUsDvD3JWIwCP4mTA)
+- [Hoefler & Co.](http://www.typography.com/&sa=D&ust=1498933355783000&usg=AFQjCNHW_Zv3-zdsJdAY4bIkPzHVc4TOuw)
+- [A2 Type](http://www.a2-type.co.uk/&sa=D&ust=1498933355783000&usg=AFQjCNFY7ZGWnOwj3raERKkftBib4V6Olg)
+- [Sudtipos](http://www.sudtipos.com/&sa=D&ust=1498933355783000&usg=AFQjCNEp3iLJdhYA-_SEIMQNpiFIaCofMQ)
+- [Fountain](http://www.fountaintype.com/&sa=D&ust=1498933355784000&usg=AFQjCNF5HbCJF4ZyxEzjVq_bJgwr7sWRcA)
+- [Beta Type](http://betatype.com/&sa=D&ust=1498933355784000&usg=AFQjCNFgGsxAozHZukjaJY0N6YTjDFam3Q)
+- [Typotheque](https://www.typotheque.com/&sa=D&ust=1498933355784000&usg=AFQjCNG-YqIjAfWsExpNTqJLS9Ummmk9wg)
+- [Bold Monday](https://www.boldmonday.com/&sa=D&ust=1498933355784000&usg=AFQjCNE49Bd8YQIZLUdkDwooYCExqVNO9w)
+- [Avondale Type Co.](https://avondaletypeco.com/&sa=D&ust=1498933355784000&usg=AFQjCNFIHrIfpH8n1Q6jcqhSQMXzxaCBRg)
+- [FontFont](https://www.fontfont.com/&sa=D&ust=1498933355785000&usg=AFQjCNEwDh9ZH2Lrc3klAOy7eJnGvqa0GA)
+- [House Industries](http://www.houseind.com/&sa=D&ust=1498933355785000&usg=AFQjCNEY1EpYjGA49VqfjG69V9VhL_dqnQ)
diff --git a/_posts/2017-06-30-icons.md b/_posts/2017-06-30-icons.md
new file mode 100644
index 0000000..237de6e
--- /dev/null
+++ b/_posts/2017-06-30-icons.md
@@ -0,0 +1,9 @@
+---
+title: "Icons and emoji"
+layout: post
+---
+
+- The Noun Project: [free/paid] available for use with Creative Commons attribution or available to purchase without attribution for cheap
+- ≤ iOS9 Apple emoji 160x160px transparent PNGs
+- EmojiOne vectors [free, open source]
+- SymbolSet: [paid] super high-quality icon fonts categorized by topic and style
diff --git a/_posts/2017-06-30-inspiration.md b/_posts/2017-06-30-inspiration.md
new file mode 100755
index 0000000..07848ec
--- /dev/null
+++ b/_posts/2017-06-30-inspiration.md
@@ -0,0 +1,55 @@
+---
+title: "Inspiration and criticism websites"
+layout: post
+---
+
+## Web, mobile, product
+
+### Visual design
+- [Siteinspire](http://siteinspire.com): website design gallery
+- [One Page Love](https://onepagelove.com): one-page website design gallery
+- [Web Creme](http://www.webcreme.com): website design gallery
+- [Site See](https://sitesee.co): website design gallery
+- [HTTPSTER](http://httpster.net): website design gallery
+- [Really Good Emails](http://reallygoodemails.com): email design gallery  
+
+
+### UX patterns and components
+- [PTTRNS](http://pttrns.com): mobile design patterns and components
+- [Capptivate](http://capptivate.co): mobile design patterns and components in video form
+- [Unmatched Style](http://unmatchedstyle.com): website design and interactive components gallery
+- [Pattern Tap](http://zurb.com/patterntap): website components gallery
+- [Empty Stat.es](http://emptystat.es): empty state designs
+- [Little Big Details](http://littlebigdetails.com): delightful, thoughtful UX components that make a big difference
+
+## Typography
+- [Alphabettes](http://www.alphabettes.org): commentary, research, and work showcases by women in type design
+- [Typographica](http://typographica.org): reviews and commentary on type books and typefaces
+- [Fonts In Use](https://fontsinuse.com): identifying type in print in real life
+- [Type Wolf](https://www.typewolf.com): basically Fonts In Use online
+
+## Brand identity
+
+- [Brand New](http://www.underconsideration.com/brandnew): brand identity case studies
+- [BP & O](http://bpando.org): killer packaging and brand design gallery
+- [Shipcom](http://shipcom.tumblr.com): collection of shipping, manufacturing, transport, and logistics logos
+
+## Print, layout, packaging, art direction
+
+- [FPO](http://www.underconsideration.com/fpo): print design case studies
+- [Art of the Menu](http://www.underconsideration.com/artofthemenu): restaurant-specific print menu design case studies
+- [Grafik](https://www.grafik.net): cutting-edge and old school fringe aesthetic case studies
+- [Trendlist](http://www.trendlist.org): graphic design trends for the designer’s designer
+- [NubbyTwiglet on Pinterest](https://www.pinterest.com/nubbytwiglet/graphic-design-editorial-layout): print editorial layout gallery
+- [It’s Nice That](http://www.itsnicethat.com): creative inspiration worldwide
+- [Designspiration](http://designspiration.net): photography, print design, cool stuff gallery, Pinterest style
+- [Mind Sparkle Mag](http://mindsparklemag.com): print, brand, interior, industrial design features
+
+## Illustration and art
+
+- [Jacky Winter](http://www.jackywinter.com/all-artists): illustration collective
+- [Boooooooom](http://www.booooooom.com): art, illustration, design, photography interviews and features
+
+## Motion
+
+- [Wine After Coffee](https://vimeo.com/channels/wineaftercoffee): curated channel of the best motion graphics, animation, and video
diff --git a/_posts/2017-06-30-mocks.md b/_posts/2017-06-30-mocks.md
new file mode 100644
index 0000000..ed9cfde
--- /dev/null
+++ b/_posts/2017-06-30-mocks.md
@@ -0,0 +1,9 @@
+---
+title: "Mockups"
+layout: post
+---
+
+- [Facebook Design](http://facebook.design/handskit/): [free] diverse hands holding mobile devices
+- [Graphicburger](http://graphicburger.com/mock-ups/): [free] physical product mockups & templates
+- [Pixeden](http://www.pixeden.com): [free] physical product mockups & templates
+- [GraphicRiver](https://graphicriver.net/): [paid] any product mockup you can ever think of
diff --git a/_posts/2017-06-30-prototyping-tools.md b/_posts/2017-06-30-prototyping-tools.md
new file mode 100644
index 0000000..26f90bc
--- /dev/null
+++ b/_posts/2017-06-30-prototyping-tools.md
@@ -0,0 +1,12 @@
+---
+title: "Prototyping tools"
+layout: post
+---
+
+- [Adobe Experience Design](http://www.adobe.com/products/experience-design.html): included with Adobe CC subscription, for creating wireframes and protoyping interactivity
+- [Principle](http://principleformac.com/): motion design prototyping tool for mobile and web applications
+- [InVision](https://www.invisionapp.com/): collaborative click-through prototyping tool for web and mobile
+- [Marvel](https://marvelapp.com/): simple click-through prototyping tool for web and mobile apps
+- [Atomic](https://atomic.io): prototyping tool for mobile or desktop interactions or animations
+- [Framer](https://framerjs.com): prototyping tool built on framer.js for prototyping mobile and desktop apps
+- 👆 [More details on these apps and the differences between them @ cooper.com](https://www.cooper.com/prototyping-tools)
diff --git a/_posts/2017-06-30-stock-photography.md b/_posts/2017-06-30-stock-photography.md
new file mode 100644
index 0000000..715589f
--- /dev/null
+++ b/_posts/2017-06-30-stock-photography.md
@@ -0,0 +1,12 @@
+---
+title: "Stock photography"
+layout: post
+---
+
+- [Stocksy](http://stocksy.com): [paid] high quality, stylish lifestyle paid stock photos (watermarked comps)
+- [Masterfile](http://masterfile.com): [paid] stock photos, a little higher quality than iStock (unwatermarked hi-res comps with a registered account)
+- [Women of Color in Tech](https://www.flickr.com/photos/wocintechchat/albums): [free] photos of women in color in tech settings since every other stock photo site fails at this hardcore
+- [Unsplash](https://unsplash.com/): [free] the first of the hip and gorgeous free with no strings attached stock photo sites
+- [Gratisography](http://gratisography.com/): [free] photos by one photographer requiring no attribution, most are weird but some are chill to save in a folder for later since they’re free
+- [Magdeline](http://magdeleine.co/browse/): [free] similar to unsplash, some are licensed in public domain, some require Creative Commons attribution
+- [Death to the Stock Photo](http://deathtothestockphoto.com/): [free/paid] new sets emailed weekly, premium plans available for more photos and unlimited access
diff --git a/_posts/2017-06-30-user-testing.md b/_posts/2017-06-30-user-testing.md
new file mode 100755
index 0000000..8543e82
--- /dev/null
+++ b/_posts/2017-06-30-user-testing.md
@@ -0,0 +1,8 @@
+---
+title: "User testing and interactive feedback tools"
+layout: post
+---
+
+- [Lookback](http://): users record their screen, face, voice, and touches while using your site/app/prototype/wireframe
+- [UserTesting](http://): finds participants for you, runs a usability test, and records and stores videos of real people speaking their thoughts as they use your site/app/prototype/wireframe
+- [UsabilityHub](http://): for quick 5-minute qualitative, navigation-based, or hot-spot based remote tests for static images or a series of images
diff --git a/_scss/.DS_Store b/_scss/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..fd8f9509e9814947f78538cf411f60c8dcc409e6
GIT binary patch
literal 6148
zcmeHKOHRW;4E2;OO1tTj<y@g_BotNY3334-smh}Hs2_Gnxfkc)K0J@Ds38-Us6w`6
zzlq15&r38D6Or3o$~Do7h~`kn**#1|xSw?-GxaQhj>kCc*Ll%Y?I_Y5x5@y&yM$ip
zg-*1KyuZG$YO<`noC~6_kI%=jovXfbvafv`eG`4&dw#4BO})ox_<m?X1vOMr3tQ6;
zdZtrkP0_f)`kuo2CgQHv`b%77-O=%W>>*5S#uzXLjDZ_xfX`gWd?{$w7%&Emft~?A
zA3T&XRqO=A(E$@m0AK=l5VX0L;2f`*Dt3bCfjCJ8N~+Tm!$~^)UgJ{5PEgXxY4PE7
zW~UX33$tT<AHvC{f@X~YV_?X@ojk7i{@+g5|HCAEG6sx+f5m`HvOL>hOM17CHph3Z
shdx7DIIa`yQ_u)kF=F{Det-sn-*W?)Dt3bKK<q~#&|t<G_)`YH0es|BqyPW_

literal 0
HcmV?d00001

diff --git a/_scss/_syntax.scss b/_scss/_syntax.scss
new file mode 100755
index 0000000..2774b76
--- /dev/null
+++ b/_scss/_syntax.scss
@@ -0,0 +1,60 @@
+.highlight  { background: #ffffff; }
+.highlight .c { color: #999988; font-style: italic } /* Comment */
+.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+.highlight .k { font-weight: bold } /* Keyword */
+.highlight .o { font-weight: bold } /* Operator */
+.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
+.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
+.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #aa0000 } /* Generic.Error */
+.highlight .gh { color: #999999 } /* Generic.Heading */
+.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
+.highlight .go { color: #888888 } /* Generic.Output */
+.highlight .gp { color: #555555 } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #aaaaaa } /* Generic.Subheading */
+.highlight .gt { color: #aa0000 } /* Generic.Traceback */
+.highlight .kc { font-weight: bold } /* Keyword.Constant */
+.highlight .kd { font-weight: bold } /* Keyword.Declaration */
+.highlight .kp { font-weight: bold } /* Keyword.Pseudo */
+.highlight .kr { font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
+.highlight .m { color: #009999 } /* Literal.Number */
+.highlight .s { color: #d14 } /* Literal.String */
+.highlight .na { color: #008080 } /* Name.Attribute */
+.highlight .nb { color: #0086B3 } /* Name.Builtin */
+.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
+.highlight .no { color: #008080 } /* Name.Constant */
+.highlight .ni { color: #800080 } /* Name.Entity */
+.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
+.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
+.highlight .nn { color: #555555 } /* Name.Namespace */
+.highlight .nt { color: #000080 } /* Name.Tag */
+.highlight .nv { color: #008080 } /* Name.Variable */
+.highlight .ow { font-weight: bold } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mf { color: #009999 } /* Literal.Number.Float */
+.highlight .mh { color: #009999 } /* Literal.Number.Hex */
+.highlight .mi { color: #009999 } /* Literal.Number.Integer */
+.highlight .mo { color: #009999 } /* Literal.Number.Oct */
+.highlight .sb { color: #d14 } /* Literal.String.Backtick */
+.highlight .sc { color: #d14 } /* Literal.String.Char */
+.highlight .sd { color: #d14 } /* Literal.String.Doc */
+.highlight .s2 { color: #d14 } /* Literal.String.Double */
+.highlight .se { color: #d14 } /* Literal.String.Escape */
+.highlight .sh { color: #d14 } /* Literal.String.Heredoc */
+.highlight .si { color: #d14 } /* Literal.String.Interpol */
+.highlight .sx { color: #d14 } /* Literal.String.Other */
+.highlight .sr { color: #009926 } /* Literal.String.Regex */
+.highlight .s1 { color: #d14 } /* Literal.String.Single */
+.highlight .ss { color: #990073 } /* Literal.String.Symbol */
+.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #008080 } /* Name.Variable.Class */
+.highlight .vg { color: #008080 } /* Name.Variable.Global */
+.highlight .vi { color: #008080 } /* Name.Variable.Instance */
+.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
diff --git a/_scss/base/_base.scss b/_scss/base/_base.scss
new file mode 100755
index 0000000..0abc6e9
--- /dev/null
+++ b/_scss/base/_base.scss
@@ -0,0 +1,4 @@
+@import 'reset',
+        'colors',
+        'typography',
+        'forms';
diff --git a/_scss/base/_colors.scss b/_scss/base/_colors.scss
new file mode 100755
index 0000000..e69de29
diff --git a/_scss/base/_forms.scss b/_scss/base/_forms.scss
new file mode 100755
index 0000000..e69de29
diff --git a/_scss/base/_reset.scss b/_scss/base/_reset.scss
new file mode 100755
index 0000000..caea735
--- /dev/null
+++ b/_scss/base/_reset.scss
@@ -0,0 +1,465 @@
+/**
+ *
+ * @group Reset
+ *
+*/
+
+/// Border box <3
+/// https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
+/// -------------
+///
+html {
+  box-sizing: border-box;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in
+ *    IE on Windows Phone and in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+article,
+aside,
+footer,
+header,
+nav,
+section {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in IE.
+ */
+
+figcaption,
+figure,
+main { /* 1 */
+  display: block;
+}
+
+/**
+ * Add the correct margin in IE 8.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+
+a {
+  background-color: transparent; /* 1 */
+  -webkit-text-decoration-skip: objects; /* 2 */
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+
+b,
+strong {
+  font-weight: inherit;
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Add the correct background and color in IE 9-.
+ */
+
+mark {
+  background-color: #ff0;
+  color: #000;
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+video {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+img {
+  border-style: none;
+}
+
+/**
+ * Hide the overflow in IE.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: sans-serif; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ *    controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+html [type="button"], /* 1 */
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ */
+
+details, /* 1 */
+menu {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Scripting
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+canvas {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in IE.
+ */
+
+template {
+  display: none;
+}
+
+/* Hidden
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10-.
+ */
+
+[hidden] {
+  display: none;
+}
diff --git a/_scss/base/_typography.scss b/_scss/base/_typography.scss
new file mode 100755
index 0000000..78f67a5
--- /dev/null
+++ b/_scss/base/_typography.scss
@@ -0,0 +1,45 @@
+/**
+ *
+ * @group Typography
+ *
+*/
+
+/// Settings
+/// -------------
+
+/// Weights + sizing
+$font-weight__normal:   400;
+$font-weight__bold:     700;
+$font-size__base:       100%;
+$leading:               1.5;
+
+/// Family stacks
+$font-family__body:     -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+
+/// Styles
+/// -------------
+body {
+  font: $font-weight__normal $font-size__base $font-family__body;
+  line-height: $leading;
+  color: #343434;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  line-height: 1.1;
+}
+
+a {
+  color: inherit;
+  cursor: pointer;
+  text-decoration: none;
+  font-weight: $font-weight__bold;
+  border-bottom: solid 1px #92c1ff;
+  &:hover {
+    color: #136ec2;
+  }
+}
+
+p, ul {
+  margin-bottom: 2rem;
+  font-size: 1.125rem;
+}
diff --git a/_scss/components/_article.scss b/_scss/components/_article.scss
new file mode 100755
index 0000000..7cc15d0
--- /dev/null
+++ b/_scss/components/_article.scss
@@ -0,0 +1,36 @@
+.post {
+  margin-bottom: 6rem;
+}
+
+.post__title {
+  font-size: 2.75rem;
+  font-weight: $font-weight__normal;
+  &:hover {
+    .post__title__anchor:before {
+      color: #136ec2;
+    }
+  }
+}
+
+  .post__title__anchor:before {
+    content: "#";
+    margin-left: -2.75rem;
+    border: 0;
+    font-weight: $font-weight__normal;
+    color: #ddd;
+  }
+
+.post h2,
+.post h3 {
+  margin-top: 2rem;
+  margin-bottom: 0.25rem;
+}
+
+.post ul {
+  margin-left: 0;
+  padding-left: 0;
+}
+
+  .post li {
+    margin-bottom: 0.75rem;
+  }
diff --git a/_scss/components/_footer.scss b/_scss/components/_footer.scss
new file mode 100755
index 0000000..f6121fa
--- /dev/null
+++ b/_scss/components/_footer.scss
@@ -0,0 +1,4 @@
+.site__footer p {
+  font-size: .9rem;
+  color: #777;
+}
diff --git a/_scss/components/_header.scss b/_scss/components/_header.scss
new file mode 100755
index 0000000..43c4a04
--- /dev/null
+++ b/_scss/components/_header.scss
@@ -0,0 +1,20 @@
+.site__header {
+  margin-bottom: 6rem;
+  font-size: .9rem;
+}
+
+.site__header__nav {
+  margin: 0;
+  padding: 0;
+  font-size: .9rem;
+  list-style: none;
+  display: inline;
+  text-transform: lowercase;
+  li {
+    display: inline-block;
+  }
+  li:not(:last-child):after {
+    content: " \00B7";
+    color: #aaa;
+  }
+}
diff --git a/_scss/components/_page.scss b/_scss/components/_page.scss
new file mode 100755
index 0000000..7e6aee7
--- /dev/null
+++ b/_scss/components/_page.scss
@@ -0,0 +1,7 @@
+.site__content {
+  max-width: 40rem;
+  margin: 0 auto;
+	@media only screen and ( max-width: 800px ) {
+    margin: 3rem;
+  }
+}
diff --git a/_scss/main.scss b/_scss/main.scss
new file mode 100755
index 0000000..1e1e07f
--- /dev/null
+++ b/_scss/main.scss
@@ -0,0 +1,10 @@
+@charset "utf-8";
+
+@import 'base/reset',
+        'base/colors',
+        'base/typography',
+        'base/forms',
+        'components/page',
+        'components/header',
+        'components/footer',
+        'components/article';
diff --git a/assets/main.css b/assets/main.css
new file mode 100755
index 0000000..e7804df
--- /dev/null
+++ b/assets/main.css
@@ -0,0 +1,483 @@
+/**
+ *
+ * @group Reset
+ *
+*/
+html {
+  box-sizing: border-box; }
+
+*, *:before, *:after {
+  box-sizing: inherit; }
+
+/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
+/* Document
+   ========================================================================== */
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in
+ *    IE on Windows Phone and in iOS.
+ */
+html {
+  line-height: 1.15;
+  /* 1 */
+  -ms-text-size-adjust: 100%;
+  /* 2 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */ }
+
+/* Sections
+   ========================================================================== */
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+body {
+  margin: 0; }
+
+/**
+ * Add the correct display in IE 9-.
+ */
+article,
+aside,
+footer,
+header,
+nav,
+section {
+  display: block; }
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0; }
+
+/* Grouping content
+   ========================================================================== */
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in IE.
+ */
+figcaption,
+figure,
+main {
+  /* 1 */
+  display: block; }
+
+/**
+ * Add the correct margin in IE 8.
+ */
+figure {
+  margin: 1em 40px; }
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+hr {
+  box-sizing: content-box;
+  /* 1 */
+  height: 0;
+  /* 1 */
+  overflow: visible;
+  /* 2 */ }
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+pre {
+  font-family: monospace, monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */ }
+
+/* Text-level semantics
+   ========================================================================== */
+/**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+a {
+  background-color: transparent;
+  /* 1 */
+  -webkit-text-decoration-skip: objects;
+  /* 2 */ }
+
+/**
+ * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+abbr[title] {
+  border-bottom: none;
+  /* 1 */
+  text-decoration: underline;
+  /* 2 */
+  text-decoration: underline dotted;
+  /* 2 */ }
+
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+b,
+strong {
+  font-weight: inherit; }
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+b,
+strong {
+  font-weight: bolder; }
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+code,
+kbd,
+samp {
+  font-family: monospace, monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */ }
+
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+dfn {
+  font-style: italic; }
+
+/**
+ * Add the correct background and color in IE 9-.
+ */
+mark {
+  background-color: #ff0;
+  color: #000; }
+
+/**
+ * Add the correct font size in all browsers.
+ */
+small {
+  font-size: 80%; }
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline; }
+
+sub {
+  bottom: -0.25em; }
+
+sup {
+  top: -0.5em; }
+
+/* Embedded content
+   ========================================================================== */
+/**
+ * Add the correct display in IE 9-.
+ */
+audio,
+video {
+  display: inline-block; }
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+audio:not([controls]) {
+  display: none;
+  height: 0; }
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+img {
+  border-style: none; }
+
+/**
+ * Hide the overflow in IE.
+ */
+svg:not(:root) {
+  overflow: hidden; }
+
+/* Forms
+   ========================================================================== */
+/**
+ * 1. Change the font styles in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: sans-serif;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  line-height: 1.15;
+  /* 1 */
+  margin: 0;
+  /* 2 */ }
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+button,
+input {
+  /* 1 */
+  overflow: visible; }
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+button,
+select {
+  /* 1 */
+  text-transform: none; }
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ *    controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+button,
+html [type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+  /* 2 */ }
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0; }
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText; }
+
+/**
+ * Correct the padding in Firefox.
+ */
+fieldset {
+  padding: 0.35em 0.75em 0.625em; }
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+legend {
+  box-sizing: border-box;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  display: table;
+  /* 1 */
+  max-width: 100%;
+  /* 1 */
+  padding: 0;
+  /* 3 */
+  white-space: normal;
+  /* 1 */ }
+
+/**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+progress {
+  display: inline-block;
+  /* 1 */
+  vertical-align: baseline;
+  /* 2 */ }
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+textarea {
+  overflow: auto; }
+
+/**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box;
+  /* 1 */
+  padding: 0;
+  /* 2 */ }
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto; }
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+[type="search"] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */ }
+
+/**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ */
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none; }
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */ }
+
+/* Interactive
+   ========================================================================== */
+/*
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ */
+details,
+menu {
+  display: block; }
+
+/*
+ * Add the correct display in all browsers.
+ */
+summary {
+  display: list-item; }
+
+/* Scripting
+   ========================================================================== */
+/**
+ * Add the correct display in IE 9-.
+ */
+canvas {
+  display: inline-block; }
+
+/**
+ * Add the correct display in IE.
+ */
+template {
+  display: none; }
+
+/* Hidden
+   ========================================================================== */
+/**
+ * Add the correct display in IE 10-.
+ */
+[hidden] {
+  display: none; }
+
+/**
+ *
+ * @group Typography
+ *
+*/
+body {
+  font: 400 100% -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  line-height: 1.5;
+  color: #343434; }
+
+h1, h2, h3, h4, h5, h6 {
+  line-height: 1.1; }
+
+a {
+  color: inherit;
+  cursor: pointer;
+  text-decoration: none;
+  font-weight: 700;
+  border-bottom: solid 1px #92c1ff; }
+  a:hover {
+    color: #136ec2; }
+
+p, ul {
+  margin-bottom: 2rem;
+  font-size: 1.125rem; }
+
+.site__content {
+  max-width: 40rem;
+  margin: 0 auto; }
+  @media only screen and (max-width: 800px) {
+    .site__content {
+      margin: 3rem; } }
+
+.site__header {
+  margin-bottom: 6rem;
+  font-size: .9rem; }
+
+.site__header__nav {
+  margin: 0;
+  padding: 0;
+  font-size: .9rem;
+  list-style: none;
+  display: inline;
+  text-transform: lowercase; }
+  .site__header__nav li {
+    display: inline-block; }
+  .site__header__nav li:not(:last-child):after {
+    content: " \00B7";
+    color: #aaa; }
+
+.site__footer p {
+  font-size: .9rem;
+  color: #777; }
+
+.post {
+  margin-bottom: 6rem; }
+
+.post__title {
+  font-size: 2.75rem;
+  font-weight: 400; }
+  .post__title:hover .post__title__anchor:before {
+    color: #136ec2; }
+
+.post__title__anchor:before {
+  content: "#";
+  margin-left: -2.75rem;
+  border: 0;
+  font-weight: 400;
+  color: #ddd; }
+
+.post h2,
+.post h3 {
+  margin-top: 2rem;
+  margin-bottom: 0.25rem; }
+
+.post ul {
+  margin-left: 0;
+  padding-left: 0; }
+
+.post li {
+  margin-bottom: 0.75rem; }
diff --git a/css/main.css b/css/main.css
new file mode 100755
index 0000000..bb1adc0
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,432 @@
+/**
+ *
+ * @group Reset
+ *
+*/
+html {
+  box-sizing: border-box; }
+
+*, *:before, *:after {
+  box-sizing: inherit; }
+
+/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
+/* Document
+   ========================================================================== */
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in
+ *    IE on Windows Phone and in iOS.
+ */
+html {
+  line-height: 1.15;
+  /* 1 */
+  -ms-text-size-adjust: 100%;
+  /* 2 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */ }
+
+/* Sections
+   ========================================================================== */
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+body {
+  margin: 0; }
+
+/**
+ * Add the correct display in IE 9-.
+ */
+article,
+aside,
+footer,
+header,
+nav,
+section {
+  display: block; }
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0; }
+
+/* Grouping content
+   ========================================================================== */
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in IE.
+ */
+figcaption,
+figure,
+main {
+  /* 1 */
+  display: block; }
+
+/**
+ * Add the correct margin in IE 8.
+ */
+figure {
+  margin: 1em 40px; }
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+hr {
+  box-sizing: content-box;
+  /* 1 */
+  height: 0;
+  /* 1 */
+  overflow: visible;
+  /* 2 */ }
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+pre {
+  font-family: monospace, monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */ }
+
+/* Text-level semantics
+   ========================================================================== */
+/**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+a {
+  background-color: transparent;
+  /* 1 */
+  -webkit-text-decoration-skip: objects;
+  /* 2 */ }
+
+/**
+ * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+abbr[title] {
+  border-bottom: none;
+  /* 1 */
+  text-decoration: underline;
+  /* 2 */
+  text-decoration: underline dotted;
+  /* 2 */ }
+
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+b,
+strong {
+  font-weight: inherit; }
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+b,
+strong {
+  font-weight: bolder; }
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+code,
+kbd,
+samp {
+  font-family: monospace, monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */ }
+
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+dfn {
+  font-style: italic; }
+
+/**
+ * Add the correct background and color in IE 9-.
+ */
+mark {
+  background-color: #ff0;
+  color: #000; }
+
+/**
+ * Add the correct font size in all browsers.
+ */
+small {
+  font-size: 80%; }
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline; }
+
+sub {
+  bottom: -0.25em; }
+
+sup {
+  top: -0.5em; }
+
+/* Embedded content
+   ========================================================================== */
+/**
+ * Add the correct display in IE 9-.
+ */
+audio,
+video {
+  display: inline-block; }
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+audio:not([controls]) {
+  display: none;
+  height: 0; }
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+img {
+  border-style: none; }
+
+/**
+ * Hide the overflow in IE.
+ */
+svg:not(:root) {
+  overflow: hidden; }
+
+/* Forms
+   ========================================================================== */
+/**
+ * 1. Change the font styles in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: sans-serif;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  line-height: 1.15;
+  /* 1 */
+  margin: 0;
+  /* 2 */ }
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+button,
+input {
+  /* 1 */
+  overflow: visible; }
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+button,
+select {
+  /* 1 */
+  text-transform: none; }
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ *    controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+button,
+html [type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+  /* 2 */ }
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0; }
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText; }
+
+/**
+ * Correct the padding in Firefox.
+ */
+fieldset {
+  padding: 0.35em 0.75em 0.625em; }
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+legend {
+  box-sizing: border-box;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  display: table;
+  /* 1 */
+  max-width: 100%;
+  /* 1 */
+  padding: 0;
+  /* 3 */
+  white-space: normal;
+  /* 1 */ }
+
+/**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+progress {
+  display: inline-block;
+  /* 1 */
+  vertical-align: baseline;
+  /* 2 */ }
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+textarea {
+  overflow: auto; }
+
+/**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box;
+  /* 1 */
+  padding: 0;
+  /* 2 */ }
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto; }
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+[type="search"] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */ }
+
+/**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ */
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none; }
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */ }
+
+/* Interactive
+   ========================================================================== */
+/*
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ */
+details,
+menu {
+  display: block; }
+
+/*
+ * Add the correct display in all browsers.
+ */
+summary {
+  display: list-item; }
+
+/* Scripting
+   ========================================================================== */
+/**
+ * Add the correct display in IE 9-.
+ */
+canvas {
+  display: inline-block; }
+
+/**
+ * Add the correct display in IE.
+ */
+template {
+  display: none; }
+
+/* Hidden
+   ========================================================================== */
+/**
+ * Add the correct display in IE 10-.
+ */
+[hidden] {
+  display: none; }
+
+/**
+ *
+ * @group Typography
+ *
+*/
+body {
+  font: 400 1.25rem -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  line-height: 1.7; }
+  @media only screen and (max-width: 500px) {
+    body {
+      font-size: 1.1rem; } }
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 400;
+  text-transform: uppercase;
+  letter-spacing: .4rem; }
+
+h2 {
+  font-size: 1.4rem;
+  line-height: 1.3; }
+
+a {
+  color: inherit;
+  cursor: pointer;
+  text-decoration: none;
+  font-weight: 700; }
+
+p, ul {
+  margin-bottom: 2rem;
+  font-size: 1.125rem; }
diff --git a/gulpfile.js b/gulpfile.js
new file mode 100755
index 0000000..b914910
--- /dev/null
+++ b/gulpfile.js
@@ -0,0 +1,67 @@
+var gulp        = require('gulp');
+var browserSync = require('browser-sync');
+var sass        = require('gulp-sass');
+var prefix      = require('gulp-autoprefixer');
+var cp          = require('child_process');
+
+var jekyll   = process.platform === 'win32' ? 'jekyll.bat' : 'jekyll';
+var messages = {
+    jekyllBuild: '<span style="color: grey">Running: $ jekyll build'
+};
+
+/**
+ * Build the Jekyll Site
+ */
+gulp.task('jekyll-build', function (done) {
+    browserSync.notify(messages.jekyllBuild);
+    return cp.spawn( jekyll , ['build'], {stdio: 'inherit'})
+        .on('close', done);
+});
+
+/**
+ * Rebuild Jekyll & do page reload
+ */
+gulp.task('jekyll-rebuild', ['jekyll-build'], function () {
+    browserSync.reload();
+});
+
+/**
+ * Wait for jekyll-build, then launch the Server
+ */
+gulp.task('browser-sync', ['sass', 'jekyll-build'], function() {
+    browserSync({
+        server: {
+            baseDir: '_site'
+        }
+    });
+});
+
+/**
+ * Compile files from _scss into both _site/css (for live injecting) and site (for future jekyll builds)
+ */
+gulp.task('sass', function () {
+    return gulp.src('_scss/main.scss')
+        .pipe(sass({
+            includePaths: ['scss'],
+            onError: browserSync.notify
+        }))
+        .pipe(prefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
+        .pipe(gulp.dest('_site/css'))
+        .pipe(browserSync.reload({stream:true}))
+        .pipe(gulp.dest('assets'));
+});
+
+/**
+ * Watch scss files for changes & recompile
+ * Watch html/md files, run jekyll & reload BrowserSync
+ */
+gulp.task('watch', function () {
+    gulp.watch('_scss/**/*.scss', ['sass']);
+    gulp.watch(['*.html', '*.md', '_layouts/*.html', '_includes/*.html', '_posts/*'], ['jekyll-rebuild']);
+});
+
+/**
+ * Default task, running just `gulp` will compile the sass,
+ * compile the jekyll site, launch BrowserSync & watch files.
+ */
+gulp.task('default', ['browser-sync', 'watch']);
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..7d1eb41
--- /dev/null
+++ b/index.html
@@ -0,0 +1,23 @@
+---
+layout: default
+---
+
+<header class="site__header">
+  <h1 class="site__title"><a href="/">{{ site.title }}</a></h1>
+  <div>
+    My favorite <ul class="site__header__nav">
+    {% for post in site.posts %}
+      <li><a href="#{{ post.slug }}">{{ post.title }}</a></li>
+    {% endfor %}
+  </ul> for designers.
+  </div>
+</header>
+
+{% for post in site.posts %}
+<article class="post" id="{{ post.slug }}">
+  <h1 class="post__title"><a href="{{ post.url }}" class="post__title__anchor"></a> {{ post.title }}</h1>
+  <div class="post__content">
+    {{ post.content }}
+  </div>
+</article>
+{% endfor %}
diff --git a/main.css b/main.css
new file mode 100755
index 0000000..bb1adc0
--- /dev/null
+++ b/main.css
@@ -0,0 +1,432 @@
+/**
+ *
+ * @group Reset
+ *
+*/
+html {
+  box-sizing: border-box; }
+
+*, *:before, *:after {
+  box-sizing: inherit; }
+
+/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
+/* Document
+   ========================================================================== */
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in
+ *    IE on Windows Phone and in iOS.
+ */
+html {
+  line-height: 1.15;
+  /* 1 */
+  -ms-text-size-adjust: 100%;
+  /* 2 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */ }
+
+/* Sections
+   ========================================================================== */
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+body {
+  margin: 0; }
+
+/**
+ * Add the correct display in IE 9-.
+ */
+article,
+aside,
+footer,
+header,
+nav,
+section {
+  display: block; }
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0; }
+
+/* Grouping content
+   ========================================================================== */
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in IE.
+ */
+figcaption,
+figure,
+main {
+  /* 1 */
+  display: block; }
+
+/**
+ * Add the correct margin in IE 8.
+ */
+figure {
+  margin: 1em 40px; }
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+hr {
+  box-sizing: content-box;
+  /* 1 */
+  height: 0;
+  /* 1 */
+  overflow: visible;
+  /* 2 */ }
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+pre {
+  font-family: monospace, monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */ }
+
+/* Text-level semantics
+   ========================================================================== */
+/**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+a {
+  background-color: transparent;
+  /* 1 */
+  -webkit-text-decoration-skip: objects;
+  /* 2 */ }
+
+/**
+ * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+abbr[title] {
+  border-bottom: none;
+  /* 1 */
+  text-decoration: underline;
+  /* 2 */
+  text-decoration: underline dotted;
+  /* 2 */ }
+
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+b,
+strong {
+  font-weight: inherit; }
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+b,
+strong {
+  font-weight: bolder; }
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+code,
+kbd,
+samp {
+  font-family: monospace, monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */ }
+
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+dfn {
+  font-style: italic; }
+
+/**
+ * Add the correct background and color in IE 9-.
+ */
+mark {
+  background-color: #ff0;
+  color: #000; }
+
+/**
+ * Add the correct font size in all browsers.
+ */
+small {
+  font-size: 80%; }
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline; }
+
+sub {
+  bottom: -0.25em; }
+
+sup {
+  top: -0.5em; }
+
+/* Embedded content
+   ========================================================================== */
+/**
+ * Add the correct display in IE 9-.
+ */
+audio,
+video {
+  display: inline-block; }
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+audio:not([controls]) {
+  display: none;
+  height: 0; }
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+img {
+  border-style: none; }
+
+/**
+ * Hide the overflow in IE.
+ */
+svg:not(:root) {
+  overflow: hidden; }
+
+/* Forms
+   ========================================================================== */
+/**
+ * 1. Change the font styles in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: sans-serif;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  line-height: 1.15;
+  /* 1 */
+  margin: 0;
+  /* 2 */ }
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+button,
+input {
+  /* 1 */
+  overflow: visible; }
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+button,
+select {
+  /* 1 */
+  text-transform: none; }
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ *    controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+button,
+html [type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+  /* 2 */ }
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0; }
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText; }
+
+/**
+ * Correct the padding in Firefox.
+ */
+fieldset {
+  padding: 0.35em 0.75em 0.625em; }
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+legend {
+  box-sizing: border-box;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  display: table;
+  /* 1 */
+  max-width: 100%;
+  /* 1 */
+  padding: 0;
+  /* 3 */
+  white-space: normal;
+  /* 1 */ }
+
+/**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+progress {
+  display: inline-block;
+  /* 1 */
+  vertical-align: baseline;
+  /* 2 */ }
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+textarea {
+  overflow: auto; }
+
+/**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box;
+  /* 1 */
+  padding: 0;
+  /* 2 */ }
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto; }
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+[type="search"] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */ }
+
+/**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ */
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none; }
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */ }
+
+/* Interactive
+   ========================================================================== */
+/*
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ */
+details,
+menu {
+  display: block; }
+
+/*
+ * Add the correct display in all browsers.
+ */
+summary {
+  display: list-item; }
+
+/* Scripting
+   ========================================================================== */
+/**
+ * Add the correct display in IE 9-.
+ */
+canvas {
+  display: inline-block; }
+
+/**
+ * Add the correct display in IE.
+ */
+template {
+  display: none; }
+
+/* Hidden
+   ========================================================================== */
+/**
+ * Add the correct display in IE 10-.
+ */
+[hidden] {
+  display: none; }
+
+/**
+ *
+ * @group Typography
+ *
+*/
+body {
+  font: 400 1.25rem -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  line-height: 1.7; }
+  @media only screen and (max-width: 500px) {
+    body {
+      font-size: 1.1rem; } }
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 400;
+  text-transform: uppercase;
+  letter-spacing: .4rem; }
+
+h2 {
+  font-size: 1.4rem;
+  line-height: 1.3; }
+
+a {
+  color: inherit;
+  cursor: pointer;
+  text-decoration: none;
+  font-weight: 700; }
+
+p, ul {
+  margin-bottom: 2rem;
+  font-size: 1.125rem; }
diff --git a/package.json b/package.json
new file mode 100755
index 0000000..7003608
--- /dev/null
+++ b/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "browser-sync-jekyll",
+  "version": "0.0.0",
+  "description": "A starter project including full setup for Jekyll, GulpJS, SASS & BrowserSync",
+  "main": "gulpfile.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Shane Osbourne",
+  "license": "ISC",
+  "devDependencies": {
+    "gulp": "^3.8.8",
+    "gulp-sass": "^2.1.0",
+    "browser-sync": "^1.3.7",
+    "gulp-autoprefixer": "1.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/shakyShane/jekyll-gulp-sass-browser-sync.git"
+  },
+  "keywords": [
+    "jekyll",
+    "gulp",
+    "sass",
+    "browsersync"
+  ],
+  "bugs": {
+    "url": "https://github.com/shakyShane/jekyll-gulp-sass-browser-sync/issues"
+  },
+  "homepage": "https://github.com/shakyShane/jekyll-gulp-sass-browser-sync"
+}