diff --git a/packages/starterkit-handlebars-demo/dist/css/style.css b/packages/starterkit-handlebars-demo/dist/css/style.css
new file mode 100644
index 000000000..25687f425
--- /dev/null
+++ b/packages/starterkit-handlebars-demo/dist/css/style.css
@@ -0,0 +1,1824 @@
+/*------------------------------------*\
+    #TABLE OF CONTENTS
+\*------------------------------------*/
+/**
+ * ABSTRACTS..............................Declarations of Sass variables & mixins
+ * BASE...................................Default element styles
+ * LAYOUT.................................Layout-specific styles
+ * COMPONENTS.............................Component styles
+ * UTILITIES..............................Utility classes
+ */
+/*------------------------------------*\
+    #ABSTRACTS
+\*------------------------------------*/
+/*------------------------------------*\
+    #VARIABLES
+\*------------------------------------*/
+/**
+ * CONTENTS
+ *
+ * COLORS
+ * Brand Colors...............Globally-available variables and config
+ * Neutral Colors.............Grayscale colors, including white and black
+ * Utility Colors.............Info, Warning, Error, Success
+ *
+ * TYPOGRAPHY
+ * Font Families..............The fonts used in the design system
+ * Sizing.....................Font sizing
+ *
+ * LAYOUT
+ * Max-widths.................Maximum layout container width
+ *
+
+ * SPACING
+ * Spacing defaults...........Spacing between elements
+ *
+ * BORDERS
+ * Border Width...............Border thicknesses
+ * Border Radius..............Border radius definitions
+ *
+ * ANIMATION
+ * Animation Speed............Transition/animation speed variables
+ * Animation easing...........Easing variables
+ *
+ * BREAKPOINTS
+ * Breakpoints................Global breakpoint definitions
+ */
+/*------------------------------------*\
+     #COLORS
+ \*------------------------------------*/
+/**
+ * Brand Colors
+ * 1) Brand=specific colors
+ */
+/**
+ * Neutral Colors
+ * 1) Neutral colors are grayscale values used throughout the UI
+ */
+/**
+ * Utility Colors
+ * 1) Utility colors are colors used to provide feedback, such as alert messages,
+ *    form validation, etc.
+ */
+/*------------------------------------*\
+    #TYPOGRAPHY
+\*------------------------------------*/
+/**
+ * Font Family
+ */
+/**
+ * Font Sizing
+ */
+/**
+ * Line Height
+ */
+/*------------------------------------*\
+    #LAYOUT
+\*------------------------------------*/
+/**
+ * Max Width
+ */
+/*------------------------------------*\
+    #SPACING
+\*------------------------------------*/
+/**
+ * Spacing and offsets
+ * 1) Used to space grids and body padding
+ */
+/*------------------------------------*\
+    #BORDERS
+\*------------------------------------*/
+/**
+ * Border
+ */
+/**
+ * Border radius
+ */
+/*------------------------------------*\
+    #ANIMATION
+\*------------------------------------*/
+/**
+ * Transition Speed
+ */
+/**
+ * Transition Ease
+ */
+/*------------------------------------*\
+    #BREAKPOINTS
+\*------------------------------------*/
+/**
+ * Breakpoints used in media queries
+ * 1) These are not the only breakpoints used, but they provide a few defaults
+ */
+/*------------------------------------*\
+    #MIXINS
+\*------------------------------------*/
+/**
+ * Body Styles
+ * 1) Prevent Mobile Safari from scaling up text: https://blog.55minutes.com/2012/04/iphone-text-resizing/
+ */
+/**
+ * XL Type Styles
+ */
+/**
+ * XL Heading Styles
+ */
+/**
+ * XL Heading Styles
+ */
+/**
+ * Large Heading Styles
+ */
+/**
+ * Medium 2 Heading Styles
+ */
+/**
+ * Medium Heading Styles
+ */
+/*------------------------------------*\
+    #COLORS
+\*------------------------------------*/
+/**
+ * In this file, we take the literal colors from our palette (defined in variables.scss)
+ * and define them against variables that we can utilise anywhere throughout the project.
+ */
+/*------------------------------------*\
+    #GLOBAL TEXT COLOR
+\*------------------------------------*/
+/**
+ * Body text and background colors
+ */
+/**
+ * Highlight colors
+ */
+/*------------------------------------*\
+    #LINKS
+\*------------------------------------*/
+/*------------------------------------*\
+    #BUTTONS
+\*------------------------------------*/
+/*------------------------------------*\
+    #FORMS
+\*------------------------------------*/
+/*------------------------------------*\
+    #BREAKPOINTS
+\*------------------------------------*/
+/**
+ * In this file, we take the literal colors from our palette and define them
+ * against variables that we can utilise anywhere throughout the project.
+ */
+/*------------------------------------*\
+    #BASE
+\*------------------------------------*/
+/*------------------------------------*\
+    #RESET
+\*------------------------------------*/
+/**
+ * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
+ */
+* {
+  box-sizing: border-box; }
+
+/**
+ * 1) Zero out margins and padding for elements
+ */
+html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, ol, ul, li, form, legend, label, table, header, footer, nav, section, figure {
+  margin: 0;
+  padding: 0; }
+
+/**
+ * 1) Set HTML5 elements to display: block
+ */
+header, footer, nav, section, article, figure {
+  display: block; }
+
+/*------------------------------------*\
+    #BODY
+\*------------------------------------*/
+/**
+ * HTML base styles
+ * 1) Set the html element's height to at least 100% of the viewport.
+ *    This is used to achieve a sticky footer
+ */
+html {
+  min-height: 100vh;
+  /* 1 */ }
+
+/**
+ * Body base styles
+ * 1) Set the body element's height to at least 100% of the viewport.
+ *    This is used to achieve a sticky footer
+ */
+body {
+  min-height: 100vh;
+  /* 1 */
+  font-family: "Raleway", "HelveticaNeue", "Helvetica", "Arial", sans-serif;
+  font-size: 1rem;
+  line-height: 1.6;
+  -webkit-text-size-adjust: 100%;
+  /* 1 */
+  background-color: #fff;
+  color: #131313; }
+
+/*------------------------------------*\
+    #LINKS
+\*------------------------------------*/
+/**
+ * Link base styles
+ */
+a {
+  color: #444;
+  text-decoration: none;
+  outline: 0;
+  transition: color 0.15s ease-out; }
+  a:hover, a:focus {
+    color: #ba6333; }
+  a:active {
+    color: #131313; }
+
+/*------------------------------------*\
+    #LISTS
+\*------------------------------------*/
+/**
+ * 1) List base styles
+ */
+/**
+  * Remove list styles from unordered and ordered lists
+  */
+ol, ul {
+  list-style: none; }
+
+/*------------------------------------*\
+    #HEADINGS
+\*------------------------------------*/
+h1, h2, h3, h4 {
+  font-family: "Abel", serif;
+  text-transform: uppercase; }
+
+/**
+ * Heading 1 base styles
+ */
+h1 {
+  font-size: 3rem;
+  font-weight: normal;
+  line-height: 1.2; }
+  @media all and (min-width: 47em) {
+    h1 {
+      font-size: 4rem; } }
+
+/**
+ * Heading 2 base styles
+ */
+h2 {
+  font-size: 1.2rem;
+  font-weight: normal;
+  line-height: 1.2; }
+
+/**
+ * Heading 3 base styles
+ */
+h3 {
+  font-size: 1.2rem;
+  font-weight: normal;
+  line-height: 1.2; }
+
+/**
+ * Heading 4 base styles
+ */
+h4 {
+  font-size: 1rem;
+  font-weight: normal;
+  line-height: 1.2; }
+
+/*------------------------------------*\
+    #FORMS
+\*------------------------------------*/
+/**
+ * 1) Form element base styles
+ */
+/**
+ * Input placeholder text base styles
+ */
+::-webkit-input-placeholder {
+  color: #808080; }
+
+::-moz-placeholder {
+  color: #808080; }
+
+:-ms-input-placeholder {
+  color: #808080; }
+
+/**
+ * Fieldset base styles
+ */
+fieldset {
+  border: 0;
+  padding: 0;
+  margin: 0; }
+
+/**
+ * Legend base styles
+ */
+legend {
+  margin-bottom: 0.25rem; }
+
+/**
+ * Label base styles
+ */
+label {
+  display: block;
+  padding-bottom: 0.25rem;
+  color: #131313; }
+
+/**
+ * Add font size 100% of form element and margin 0 to these elements
+ */
+button, input, select, textarea {
+  font-family: inherit;
+  font-size: 1rem;
+  margin: 0; }
+
+/**
+ * Text area base styles
+ */
+textarea {
+  resize: none; }
+
+/**
+ * Input  and text area base styles
+ */
+input, textarea {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #444;
+  background: #fff; }
+  input:focus, textarea:focus {
+    border-color: #131313; }
+  input:disabled, textarea:disabled {
+    border-color: #eee;
+    background: #eee;
+    color: #808080; }
+
+/**
+ * Remove webkit appearance styles from these elements
+ */
+input[type=text], input[type=search], input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration, input[type=url], input[type=number], textarea {
+  -webkit-appearance: none; }
+
+/**
+ * Checkbox and radio button base styles
+ */
+input[type="checkbox"],
+input[type="radio"] {
+  width: auto;
+  margin-right: 0.3rem;
+  border-color: #444; }
+
+/**
+ * Search input base styles
+ */
+input[type="search"] {
+  -webkit-appearance: none;
+  border-radius: 0; }
+
+/**
+ * Select
+ * 1) Remove default styling
+ */
+select {
+  display: block;
+  font-size: 1rem;
+  width: 100%;
+  border: 1px solid #444;
+  border-radius: 0;
+  padding: 0.5rem;
+  height: 2rem;
+  background: #fff;
+  color: #131313; }
+  select:focus {
+    border-color: #131313; }
+
+/*------------------------------------*\
+    #BUTTONS
+\*------------------------------------*/
+/**
+ * Button and submit inputs reset
+ * 1) These should be styled using c-btn
+ */
+button {
+  cursor: pointer; }
+
+/*------------------------------------*\
+    #MAIN ELEMENT
+\*------------------------------------*/
+/**
+ * Main element
+ */
+[role=main] {
+  display: block;
+  flex: 1 0 auto; }
+
+/*------------------------------------*\
+    #MEDIA
+\*------------------------------------*/
+/**
+ * Responsive image styling
+ * 1) Allows for images to flex with varying screen size
+ */
+img {
+  max-width: 100%;
+  height: auto; }
+
+/*------------------------------------*\
+    #TEXT
+\*------------------------------------*/
+/**
+ * Paragraph base styles
+ */
+p {
+  margin-bottom: 1rem; }
+
+/**
+ * Blockquote base styles
+ */
+blockquote {
+  font-style: italic;
+  border-left: 1px solid #808080;
+  color: #808080;
+  padding-left: 1rem;
+  margin-bottom: 1rem; }
+
+/**
+ * Horizontal rule base styles
+ */
+hr {
+  border: 0;
+  height: 1px;
+  background: #ddd;
+  margin: 1rem 0; }
+
+/**
+ * Selection styles
+ */
+::-moz-selection {
+  color: #131313;
+  background: #ddd;
+  /* Gecko Browsers */ }
+
+::selection {
+  color: #131313;
+  background: #ddd;
+  /* WebKit/Blink Browsers */ }
+
+/**
+ * Code base styles
+ */
+code {
+  display: inline-block;
+  background: #f9f9f9;
+  border: 1px solid #ddd;
+  padding: .2rem .5rem;
+  line-height: 1.2;
+  font-size: .85rem; }
+
+/**
+ * Preformatted text base styles
+ */
+pre {
+  background: #f9f9f9;
+  border: 1px solid #ddd;
+  font-size: 1rem;
+  padding: 1rem;
+  overflow-x: auto;
+  /**
+	 * Remove border from code within preformatted text block
+	 */ }
+  pre code {
+    border: 0; }
+
+/**
+ * Code with languages associated with them
+ * 1) Override Prism sysles for code blocks with language
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  font-family: monospace !important; }
+
+/*------------------------------------*\
+    #TABLES
+\*------------------------------------*/
+/**
+ * Table
+ */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%; }
+
+/**
+ * Table header cell
+ */
+th {
+  text-align: left; }
+
+/**
+ * Table row
+ */
+tr {
+  vertical-align: top; }
+
+/*------------------------------------*\
+    #LAYOUT
+\*------------------------------------*/
+/*------------------------------------*\
+    #LAYOUT
+\*------------------------------------*/
+/**
+ * Layout Container
+ * 1) Caps the width of the content to the maximum width
+ *    and centers the container
+ */
+.l-container {
+  max-width: 80rem;
+  padding: 0 1rem;
+  margin: 0 auto; }
+  @media all and (min-width: 60em) {
+    .l-container {
+      padding: 0 2rem; } }
+
+.l-container--narrow {
+  max-width: 45rem; }
+
+/**
+ *
+ * 1) This caps the width of text passages
+ *    to achieve a comfortable line length
+ */
+.l-linelength-container {
+  max-width: 36rem; }
+
+.l-band {
+  background: #f9f9f9;
+  padding: 2rem 1rem; }
+
+/**
+ * 2 column layout
+ */
+.l-page-layout--two-column {
+  display: flex;
+  flex-direction: column; }
+  @media all and (min-width: 60em) {
+    .l-page-layout--two-column {
+      flex-direction: row; } }
+
+@media all and (min-width: 60em) {
+  .l-page-layout--two-column .l-page-layout__main {
+    width: 70%;
+    padding-right: 1rem; } }
+
+/**
+ * Sidebar
+ */
+@media all and (min-width: 60em) {
+  .l-page-layout--two-column .l-page-layout__secondary {
+    width: 30%;
+    margin-left: 2rem; } }
+
+.l-page-layout--reversed .l-page-layout__secondary {
+  margin-bottom: 2rem; }
+  @media all and (min-width: 60em) {
+    .l-page-layout--reversed .l-page-layout__secondary {
+      order: 1;
+      margin-bottom: 0; } }
+
+/*------------------------------------*\
+    #GRID
+\*------------------------------------*/
+/**
+ * Grid Container
+ */
+.l-grid {
+  display: flex;
+  flex-wrap: wrap; }
+  @supports (display: grid) {
+    .l-grid {
+      display: grid;
+      grid-gap: 2rem;
+      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+      margin: 0; } }
+
+/**
+ * Grid Item
+ */
+.l-grid__item {
+  display: flex; }
+
+/*------------------------------------*\
+    #COMPONENTS
+\*------------------------------------*/
+/*------------------------------------*\
+    #BUTTONS
+\*------------------------------------*/
+/**
+ *
+ * 1) Button or link that has functionality to it
+ */
+.c-btn {
+  display: inline-block;
+  border: 1px solid #131313;
+  background: #114689;
+  color: #fff;
+  line-height: 1;
+  padding: 1rem 2rem;
+  border: 0;
+  text-transform: uppercase;
+  text-align: center;
+  transition: all 0.15s ease-out; }
+  .c-btn:hover, .c-btn:focus {
+    color: #fff;
+    background: #041544; }
+
+.c-btn--bare {
+  background: none;
+  color: #114689;
+  border: 1px solid transparent; }
+  .c-btn--bare:hover, .c-btn--bare:focus {
+    background: none;
+    color: #114689;
+    border-color: #114689; }
+
+/*
+ * Inner container wrapper
+ * 1) Container is direct decendant of <button>, since there's
+ *    a bug with applying flexbox directly to a <button>
+ * 2) Only needs to be used for buttons containing both icons and text
+ */
+.c-btn__inner {
+  display: flex;
+  align-items: center;
+  justify-content: center; }
+
+/*
+ * Button icon
+ */
+.c-btn__icon {
+  width: 1rem;
+  height: 1rem;
+  fill: #fff;
+  transition: fill 0.15s ease-out; }
+
+/*------------------------------------*\
+   #DEFINITION LIST
+\*------------------------------------*/
+/**
+* 1) Definition list (`dl`) that contains a definition term (`dt`) and a definition description (`dd`)
+*/
+.c-definition-list {
+  margin: 0 0 1rem; }
+
+/**
+* Definition list item
+*/
+.c-definition-list__item {
+  display: flex; }
+  @media all and (min-width: 60em) {
+    .c-definition-list__item {
+      justify-content: space-between; } }
+
+/**
+* Definition list term
+*/
+.c-definition-list__term {
+  font-weight: bold;
+  margin-bottom: 0.25rem;
+  width: 5rem; }
+  @media all and (min-width: 60em) {
+    .c-definition-list__term {
+      width: auto; } }
+
+/**
+* Definition list description
+*/
+/*------------------------------------*\
+   #DEFINITION LIST LIST
+\*------------------------------------*/
+/**
+* 1) List of definition lists
+*/
+/**
+ * Definition list list item
+ */
+.c-definition-list-list--lined .c-definition-list-list__item {
+  margin-bottom: 1rem;
+  border-bottom: 1px solid #ddd; }
+
+/*------------------------------------*\
+	#HERO BLOCK
+\*------------------------------------*/
+/**
+ * 1) Sit hero flush with header. Normally we wouldn't 
+ *    do this and handle margin using utility classes,
+ *    but we're taking a shortcut for a demo.
+ */
+.c-hero {
+  display: block;
+  position: relative;
+  margin: -2rem 0 2rem;
+  /* 1 */ }
+
+/**
+ * Hero Image
+ * 1) This is the primary hero image that runs full-bleed across the layout
+ */
+.c-hero__img {
+  display: block;
+  width: 100%;
+  object-fit: cover;
+  max-height: 70vh;
+  overflow: hidden; }
+
+.c-hero__body {
+  background: #ba6333;
+  padding: 1rem; }
+  @media all and (min-width: 35em) {
+    .c-hero__body {
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+      background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 20%, #000 100%); } }
+
+/**
+ * Hero Headline
+ * 1) This sits overtop of the hero image when space permits
+ */
+.c-hero__headline {
+  text-transform: uppercase;
+  font-size: 3rem;
+  background-color: #ba6333;
+  color: #fff;
+  transition: all 0.15s ease-out; }
+  @media all and (min-width: 35em) {
+    .c-hero__headline {
+      padding: 0 0.4rem;
+      font-size: 4rem; } }
+
+/*------------------------------------*\
+	#TOUT BLOCK
+\*------------------------------------*/
+/**
+ * 1) The tout block contains an image and headline overlayed over the image.
+ */
+.c-tout {
+  display: block;
+  position: relative;
+  overflow: hidden;
+  max-width: 1024px; }
+
+/**
+ *  Tout image
+ */
+.c-tout__img {
+  display: block; }
+
+/**
+ *  Tout headline
+ */
+.c-tout__headline {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: #fff;
+  padding: 0.5rem;
+  font-size: 1.4rem;
+  transition: all 0.15s ease-out; }
+  .c-tout:hover .c-tout__headline, .c-tout:focus .c-tout__headline {
+    padding-bottom: 2rem;
+    background: #114689; }
+
+/*------------------------------------*\
+    #SECTION HEADER
+\*------------------------------------*/
+/**
+ * 1) A group of text with a title that headlines a section
+ */
+.c-section__header {
+  display: flex;
+  align-items: center;
+  position: relative;
+  margin-bottom: 1rem; }
+  .c-section__header:after {
+    content: '';
+    display: block;
+    flex: 1;
+    height: 2px;
+    margin-left: 1rem;
+    background: #ba6333; }
+
+.c-section__title {
+  font-size: 2rem; }
+
+/*------------------------------------*\
+    #STACKED BLOCK
+\*------------------------------------*/
+/**
+ * 1) A link block consisting of media, headline, and description all stacked on top
+ * of each other
+ * 2) Capped for demo purposes
+ */
+.c-stacked-block {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  max-width: 600px;
+  /* 2 */
+  transition: transform 0.15s ease-out; }
+  .c-stacked-block:hover, .c-stacked-block:focus {
+    transform: scale(1.03); }
+
+.c-stacked-block__body {
+  flex: 1; }
+
+.c-stacked-block__title {
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: #114689;
+  transition: color 0.15s ease-out; }
+  .c-stacked-block:hover .c-stacked-block__title, .c-stacked-block:focus .c-stacked-block__title {
+    color: #ba6333; }
+
+.c-stacked-block__excerpt {
+  margin-bottom: 0;
+  color: #444; }
+
+.c-stacked-block__meta {
+  color: #114689;
+  font-size: 1.2rem;
+  font-family: "Abel", serif;
+  margin-bottom: 0;
+  transition: color 0.15s ease-out; }
+  .c-stacked-block:hover .c-stacked-block__meta, .c-stacked-block:focus .c-stacked-block__meta {
+    color: #ba6333; }
+
+.c-stacked-block__badge {
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0.5rem;
+  font-family: "Abel", serif;
+  text-transform: uppercase;
+  color: #fff;
+  background: #ba6333; }
+
+.c-stacked-block__optional {
+  margin-left: 0.5rem;
+  color: #808080;
+  font-family: "Abel", serif;
+  font-size: 0.85rem;
+  text-decoration: line-through; }
+
+/*------------------------------------*\
+    #STRIPE
+\*------------------------------------*/
+/**
+ * 1) Block that contains a right and left column of text and other possible components
+ */
+.c-stripe {
+  padding: 2rem 0; }
+  @media all and (min-width: 35em) {
+    .c-stripe {
+      display: flex; } }
+  .c-stripe-list--condensed .c-stripe {
+    padding: 1rem 0; }
+
+/**
+ * Stripe lef container
+ * 1) Contains elements that display on the left side of the stripe
+ */
+.c-stripe__left-container {
+  margin-right: 2rem; }
+  @media all and (min-width: 35em) {
+    .c-stripe__left-container {
+      width: 20%; } }
+  .c-stripe-list--condensed .c-stripe__left-container {
+    display: none; }
+
+.c-stripe__link {
+  display: block; }
+  @media all and (min-width: 35em) {
+    .c-stripe__link {
+      max-width: 10rem; } }
+
+/**
+ * Stripe right container
+ * 1) Contains elements that display on the right side of the stripe
+ */
+.c-stripe__right-container {
+  flex: 1; }
+  @media all and (min-width: 35em) {
+    .c-stripe__right-container {
+      display: flex;
+      align-items: center; } }
+
+.c-stripe__title {
+  margin-bottom: 2rem; }
+  @media all and (min-width: 35em) {
+    .c-stripe__title {
+      margin-bottom: 0;
+      margin-right: 2rem;
+      width: 40%; } }
+
+@media all and (min-width: 35em) {
+  .c-stripe__meta {
+    margin-left: 2rem;
+    margin-bottom: 2.25rem;
+    width: 20%;
+    text-align: right;
+    flex: 1; } }
+
+.c-stripe__meta-label {
+  font-weight: bold;
+  margin-bottom: 0.75rem; }
+
+.c-stripe__meta-span {
+  font-family: "Abel", serif;
+  color: #114689;
+  font-size: 1.2rem; }
+
+/*------------------------------------*\
+    #STRIPE LIST
+\*------------------------------------*/
+/**
+ * 1) Block that contains a right and left column of text and other possible components
+ */
+.c-stripe-list__item {
+  border-bottom: 1px solid #ddd; }
+
+/*------------------------------------*\
+    $FOOTER
+\*------------------------------------*/
+/**
+ * 1) Global block at the bottom of each page that contains a navigation and other information
+ */
+.c-footer {
+  padding: 2rem 0;
+  margin-top: 2rem;
+  background: #041544; }
+
+@media all and (min-width: 47em) {
+  .c-footer__inner {
+    display: flex; } }
+
+@media all and (min-width: 47em) {
+  .c-footer__bottom {
+    margin-left: auto; } }
+
+.c-footer__credit, .c-footer__copyright {
+  color: #fff;
+  text-transform: uppercase;
+  font-family: "Abel", serif;
+  font-size: 0.85rem; }
+  .c-footer__credit a, .c-footer__copyright a {
+    color: #ba6333; }
+    .c-footer__credit a:hover, .c-footer__credit a:focus, .c-footer__copyright a:hover, .c-footer__copyright a:focus {
+      color: #808080; }
+
+/*------------------------------------*\
+    #FOOTER NAV
+\*------------------------------------*/
+/**
+ * 1) Global block at the bottom of each page that contains a navigation and other information
+ */
+.c-footer-nav {
+  margin-bottom: 2rem; }
+  @media all and (min-width: 47em) {
+    .c-footer-nav {
+      display: flex;
+      margin-bottom: 0; } }
+
+@media all and (min-width: 47em) {
+  .c-footer-nav__item {
+    margin-right: 2rem; }
+    .c-footer-nav__item:last-child {
+      margin-right: 0; } }
+
+.c-footer-nav__link {
+  color: #fff;
+  font-family: "Abel", serif;
+  text-transform: uppercase;
+  font-size: 1.2rem; }
+
+/*------------------------------------*\
+    #HEADER
+\*------------------------------------*/
+/**
+ * Global block at the top of each page containing the navigation, logo, and other potential contents
+ */
+.c-header {
+  position: relative;
+  margin-bottom: 2rem;
+  border-bottom: 1px solid #ddd; }
+
+/**
+ * Header inner
+ */
+.c-header__inner {
+  padding-top: 1rem;
+  padding-bottom: 1rem; }
+  @media all and (min-width: 35em) {
+    .c-header__inner {
+      display: flex;
+      align-items: center; } }
+
+/**
+ * Header navigation button
+ * 1) Button used to toggle the navigation on/off on small screens
+ */
+.c-header__nav-btn {
+  margin-left: auto; }
+  @media all and (min-width: 70em) {
+    .c-header__nav-btn {
+      display: none; } }
+
+/**
+ * Header navigation conntainer
+ * 1) Contains the primary navigation and other possible patterns
+ */
+.c-header__nav-container {
+  display: none;
+  /**
+	 * Header navigation conntainer within vertical header
+	 */ }
+  @media all and (min-width: 70em) {
+    .c-header__nav-container {
+      display: block;
+      margin-left: auto; } }
+  @media all and (min-width: 70em) {
+    .c-header--vertical .c-header__nav-container {
+      margin-left: 0; } }
+
+/**
+ * Active header nav container
+ */
+.c-header__nav-container.is-active {
+  display: block;
+  position: absolute;
+  background: #eee;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  z-index: 5;
+  padding: 1rem;
+  /**
+	 * Active header nav container within vertical header
+	 */ }
+  @media all and (min-width: 70em) {
+    .c-header__nav-container.is-active {
+      display: block;
+      position: static;
+      padding: 0;
+      margin-left: auto;
+      width: inherit; } }
+  @media all and (min-width: 70em) {
+    .c-header--vertical .c-header__nav-container.is-active {
+      margin-left: 0;
+      width: 100%; } }
+
+/*------------------------------------*\
+    #LOGO
+\*------------------------------------*/
+/**
+ * Branding image or text of the site
+ */
+.c-logo {
+  font-size: 2rem; }
+  .c-footer .c-logo {
+    margin-bottom: 2rem; }
+    @media all and (min-width: 47em) {
+      .c-footer .c-logo {
+        margin-bottom: 0; } }
+
+/**
+ * Logo link
+ */
+.c-logo__link {
+  display: block; }
+
+/**
+ * Logo image
+ */
+.c-logo__img {
+  display: block; }
+
+.c-logo__left {
+  color: #114689; }
+  .c-logo--light .c-logo__left {
+    color: #fff; }
+
+.c-logo__right {
+  color: #ba6333; }
+
+/*------------------------------------*\
+    #ICON
+\*------------------------------------*/
+/**
+ * 1) Small image that represents functionality
+ */
+.c-icon {
+  height: 16px;
+  width: 16px; }
+
+/*------------------------------------*\
+    #INPUT
+\*------------------------------------*/
+/**
+ * 1) Actual input of a field
+ */
+.c-stripe .c-input {
+  max-width: 3rem; }
+
+/*------------------------------------*\
+    #PAGE HEADER
+\*------------------------------------*/
+/**
+ * 1) Container that consists of of a page header title and description
+ */
+/**
+ * Page header title
+ */
+.c-page-header {
+  margin-top: 4rem;
+  margin-bottom: 2rem; }
+
+/**
+ * Page description
+ */
+.c-page-header__desc {
+  margin-top: 1rem; }
+
+/*------------------------------------*\
+    #PAGINATION
+\*------------------------------------*/
+/**
+ * Pagination
+ */
+.c-pagination {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  overflow: hidden;
+  margin-bottom: 1rem;
+  font-family: "Abel", serif;
+  text-transform: uppercase; }
+
+.c-pagination__item {
+  border-right: 1px solid #ddd; }
+  .c-pagination__item:last-child {
+    border: 0; }
+
+.c-pagination__link {
+  padding: 1rem;
+  text-decoration: underline; }
+  .c-pagination__item:first-child .c-pagination__link {
+    padding-left: 0; }
+  .c-pagination__item.is-active .c-pagination__link {
+    font-weight: bold;
+    text-decoration: none;
+    pointer-events: none; }
+  .c-pagination__item.is-disabled .c-pagination__link {
+    color: #ddd;
+    pointer-events: none;
+    text-decoration: none; }
+
+/*------------------------------------*\
+    #PRIMARY NAVIGATION
+\*------------------------------------*/
+/**
+ * Primary navigation existing in the header and maybe the footer
+ */
+@media all and (min-width: 32em) {
+  .c-primary-nav {
+    margin-left: auto; } }
+
+/**
+ * Primary navigation list
+ */
+.c-primary-nav__list {
+  display: flex;
+  align-items: center; }
+
+/**
+ * Primary navigation item
+ */
+.c-primary-nav__item {
+  margin-right: 2rem; }
+  .c-primary-nav__item:last-child {
+    margin-right: 0; }
+
+/**
+ * Primary navigation link
+ */
+.c-primary-nav__link {
+  display: block;
+  cursor: pointer;
+  font-family: "Abel", serif;
+  font-size: 1.2rem;
+  line-height: 1;
+  text-transform: uppercase;
+  transition: background 0.15s ease-out; }
+  .c-primary-nav__link:hover, .c-primary-nav__link:focus {
+    color: #ba6333; }
+
+.c-primary-nav__icon.c-icon {
+  fill: #041544;
+  height: 24px;
+  width: 24px; }
+
+/*------------------------------------*\
+    #PROMO BLOCK
+\*------------------------------------*/
+/**
+ * Large block containing an image and copy
+ * 1) Move promo block up to sit flush with hero
+ *    Normally we wouldn't do this, but we're taking
+ *    a shortcut for demo purposes.
+ */
+.c-promo-block {
+  color: #fff;
+  position: relative;
+  margin-top: -2rem;
+  /* 1 */ }
+
+.c-promo-block__media {
+  position: relative;
+  z-index: 0; }
+  .c-promo-block__media:before {
+    content: "";
+    background: linear-gradient(to left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 40%, #000 100%);
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0; }
+    .c-promo-block--right .c-promo-block__media:before {
+      background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 20%, #000 100%); }
+
+.c-promo-block__body {
+  position: absolute;
+  top: 40%;
+  left: 4rem;
+  z-index: 1;
+  max-width: 400px;
+  transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
+  .c-promo-block--right .c-promo-block__body {
+    left: auto;
+    right: 4rem; }
+  .c-promo-block__body.c-promo-block__body--initial {
+    opacity: 0;
+    transform: translateY(70px); }
+
+.c-promo-block__img {
+  display: block;
+  width: 100%; }
+
+.c-promo-block__link {
+  color: #fff; }
+  .c-promo-block__link:hover, .c-promo-block__link:focus {
+    color: #ba6333; }
+
+.c-promo-block__heading {
+  display: inline;
+  color: inherit;
+  border-bottom: 2px solid #ba6333;
+  font-size: 2rem; }
+  @media all and (min-width: 60em) {
+    .c-promo-block__heading {
+      font-size: 3rem; } }
+
+.c-promo-block__description {
+  margin-top: 1rem; }
+  @media all and (min-width: 60em) {
+    .c-promo-block__description {
+      font-size: 1.2rem; } }
+
+/*------------------------------------*\
+    #PROGRESS TRACKER
+\*------------------------------------*/
+/**
+ * 1) Ordered list showing progress (i.e. step by step)
+ * 2) Display flex used to put items in row. Flex wrap wraps items underneat when space is
+ *    unavailable.
+ */
+.c-progress-tracker {
+  display: flex;
+  /* 2 */
+  justify-content: center;
+  flex-wrap: wrap;
+  /* 2 */ }
+
+/* Progress tracker iterm */
+.c-progress-tracker__item {
+  margin-right: 2rem;
+  text-align: center;
+  font-size: 0.85rem;
+  width: 5rem;
+  /* Don't display the horizontal line on the last item number */ }
+  .c-progress-tracker__item:last-child .c-progress-tracker__number:before {
+    display: none; }
+
+.c-progress-tracker__number {
+  padding: .125rem;
+  margin-bottom: .5rem;
+  color: #114689;
+  border: 1px solid #114689;
+  background-color: #fff;
+  position: relative; }
+  @media all and (min-width: 28em) {
+    .c-progress-tracker__number {
+      padding: .5rem; } }
+  .is-complete .c-progress-tracker__number {
+    background-color: #ddd;
+    border-color: #ddd; }
+  .is-current .c-progress-tracker__number {
+    color: #fff;
+    background-color: #114689;
+    font-weight: bold; }
+  .is-disabled .c-progress-tracker__number {
+    color: #041544;
+    border-color: #114689; }
+  .c-progress-tracker__number:before {
+    content: " ";
+    display: block;
+    width: 4rem;
+    height: 1px;
+    background-color: #ddd;
+    position: absolute;
+    top: 50%;
+    right: -4rem;
+    z-index: -1; }
+
+.c-progress-tracker__label {
+  display: none;
+  /* Do show it on larger screens */ }
+  @media all and (min-width: 35em) {
+    .c-progress-tracker__label {
+      display: inline; } }
+  .is-current .c-progress-tracker__label {
+    font-weight: bold; }
+
+/*------------------------------------*\
+    #TEXT PASSAGE
+\*------------------------------------*/
+/**
+ * 1) A passage of text, including various components (i.e. article, blog post)
+ */
+.c-text-passage {
+  /**
+	 * Link within the text passage
+	 */
+  /**
+	 * Blockquote within text passage
+	 */
+  /**
+	  * First-level heading within text passage
+	  */
+  /**
+	 * Second-level heading within text passage
+	 */
+  /**
+	 * Third-level heading within text passage
+	 */
+  /**
+	 * Fourth-level heading within text passage
+	 */
+  /**
+	 * Fifth-level heading within text passage
+	 */
+  /**
+	 * Sixth-level heading within text passage
+	 */
+  /**
+	 * Unordered list within text passage
+	 */
+  /**
+	 * Ordered list within text passage
+	 */ }
+  .c-text-passage p {
+    margin-bottom: 1rem; }
+  .c-text-passage a {
+    text-decoration: underline; }
+  .c-text-passage blockquote {
+    padding-left: 0.8rem;
+    border-left: 3px solid #444;
+    color: #808080;
+    font-size: 1rem; }
+  .c-text-passage h1 {
+    margin-bottom: 1rem; }
+  .c-text-passage h2 {
+    margin: 1rem 0 1rem;
+    color: #444;
+    font-weight: bold; }
+  .c-text-passage h3 {
+    margin: 1rem 0 1rem; }
+  .c-text-passage h4 {
+    margin: 1rem 0 1rem; }
+  .c-text-passage h5 {
+    margin: 1rem 0 1rem; }
+  .c-text-passage h6 {
+    margin: 1rem 0 1rem; }
+  .c-text-passage ul {
+    list-style: disc;
+    margin-left: 1rem;
+    margin-bottom: 1rem; }
+    .c-text-passage ul li:last-child {
+      margin-bottom: 0; }
+  .c-text-passage ol {
+    list-style: decimal;
+    margin-left: 1rem;
+    margin-bottom: 1rem; }
+    .c-text-passage ol li:last-child {
+      margin-bottom: 0; }
+  .c-text-passage li {
+    margin-bottom: 0.5rem;
+    line-height: 1.6; }
+
+/*------------------------------------*\
+    #FIELDS
+\*------------------------------------*/
+/**
+ * 1) Consists of a label, form control, and an optional note about the field.
+ */
+.c-field {
+  margin-bottom: 2rem; }
+
+/**
+ * Field label
+ */
+.c-field__label {
+  margin-bottom: 0.5rem;
+  font-size: 1rem;
+  font-weight: bold; }
+
+/**
+ * Field body
+ */
+.c-field__body {
+  position: relative; }
+
+/**
+ * Field note
+ */
+.c-field__note {
+  display: inline-block;
+  font-size: 0.75rem;
+  color: #808080; }
+
+/*------------------------------------*\
+    #SEARCH FORM
+\*------------------------------------*/
+/**
+ * 1) Search form that contains a text input and button
+ */
+/**
+ * Page header title
+ */
+.c-search-form__body {
+  display: flex; }
+
+.c-stacked-block-list {
+  max-width: 80rem;
+  margin-bottom: 2rem; }
+
+/*------------------------------------*\
+	#TOTAL CONTAINER
+\*------------------------------------*/
+/**
+ * 1)
+ */
+.c-total-container {
+  margin-top: 1rem; }
+  @media all and (min-width: 35em) {
+    .c-total-container {
+      text-align: right; } }
+
+.c-total {
+  display: flex;
+  align-items: center; }
+  @media all and (min-width: 35em) {
+    .c-total {
+      justify-content: flex-end; } }
+
+.c-total--no-break {
+  justify-content: flex-start; }
+  @media all and (min-width: 60em) {
+    .c-total--no-break {
+      justify-content: flex-end; } }
+
+.c-total__label {
+  font-weight: bold;
+  margin-right: 0.5rem;
+  padding-bottom: 0; }
+  .c-total--no-break .c-total__label {
+    width: 5rem; }
+    @media all and (min-width: 60em) {
+      .c-total--no-break .c-total__label {
+        width: auto; } }
+
+.c-total__span {
+  font-family: "Abel", serif;
+  font-size: 1.2rem;
+  color: #114689; }
+  .c-total--no-break .c-total__span {
+    margin-left: 2rem; }
+    @media all and (min-width: 60em) {
+      .c-total--no-break .c-total__span {
+        margin-left: 0; } }
+
+/*------------------------------------*\
+    #UTILITIES
+\*------------------------------------*/
+/*------------------------------------*\
+    #VISIBILITY CLASSES
+\*------------------------------------*/
+/**
+ * Is Hidden
+ * 1) Completely remove from the flow and screen readers.
+ */
+.u-is-hidden {
+  display: none !important;
+  visibility: hidden !important; }
+
+/**
+ * Is Visibly Hidden
+ * 1) Completely remove from the flow but leave available to screen readers.
+ */
+.u-is-vishidden {
+  position: absolute !important;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px); }
+
+/*------------------------------------*\
+    #SPACING
+\*------------------------------------*/
+/**
+ * Margin bottom none
+ * 1) Force margin bottom of 0
+ */
+.u-margin-bottom-none {
+  margin-bottom: 0 !important; }
+
+/**
+ * Margin bottom small
+ * 1) Force margin bottom of $spacing-small variable
+ */
+.u-margin-bottom-small {
+  margin-bottom: 1rem !important; }
+
+/**
+ * Margin bottom
+ * 1) Force margin bottom of $spacing variable
+ */
+.u-margin-bottom {
+  margin-bottom: 1rem !important; }
+
+/**
+ * Margin bottom large
+ * 1) Force margin bottom of $spacing-large variable
+ */
+.u-margin-bottom-large {
+  margin-bottom: 2rem !important; }
+
+.u-margin-bottom-large-to-xxl {
+  margin-bottom: 2rem !important; }
+  @media all and (min-width: 60em) {
+    .u-margin-bottom-large-to-xxl {
+      margin-bottom: 8rem !important; } }
+
+/**
+ * Margin top none
+ * 1) Force margin top of 0
+ */
+.u-margin-top-none {
+  margin-top: 0 !important; }
+
+/**
+ * Margin top small
+ * 1) Force margin top of $spacing-small variable
+ */
+.u-margin-top-small {
+  margin-top: 1rem !important; }
+
+/**
+ * Margin top
+ * 1) Force margin top of $spacing variable
+ */
+.u-margin-top {
+  margin-top: 1rem !important; }
+
+/**
+ * Margin top large
+ * 1) Force margin top of $spacing-large variable
+ */
+.u-margin-top-large {
+  margin-top: 2rem !important; }
+
+.u-margin-top-booking {
+  margin-top: 28rem !important; }
+
+/**
+ * Margin right none
+ * 1) Force margin right of 0
+ */
+.u-margin-right-none {
+  margin-right: 0 !important; }
+
+/**
+ * Margin right small
+ * 1) Force margin right of $spacing-small variable
+ */
+.u-margin-right-small {
+  margin-right: 1rem !important; }
+
+/**
+ * Margin right
+ * 1) Force margin right of $spacing variable
+ */
+.u-margin-right {
+  margin-right: 1rem !important; }
+
+/**
+ * Margin right large
+ * 1) Force margin right of $spacing-large variable
+ */
+.u-margin-right-large {
+  margin-right: 2rem !important; }
+
+/**
+ * Margin left none
+ * 1) Force margin left of 0
+ */
+.u-margin-left-none {
+  margin-left: 0 !important; }
+
+/**
+ * Margin left small
+ * 1) Force margin left of $spacing-small variable
+ */
+.u-margin-left-small {
+  margin-left: 1rem !important; }
+
+/**
+ * Margin left
+ * 1) Force margin left of $spacing variable
+ */
+.u-margin-left {
+  margin-left: 1rem !important; }
+
+/**
+ * Margin left large
+ * 1) Force margin left of $spacing-large variable
+ */
+.u-margin-left-large {
+  margin-left: 2rem !important; }
+
+/**
+ * Center display block contents
+ */
+.u-margin-center {
+  margin: 0 auto !important; }
+
+/**
+ * Padding none
+ */
+.u-padding-none {
+  padding: 0 !important; }
+
+/**
+ * Padding small
+ */
+.u-padding-small {
+  padding: 1rem !important; }
+
+/**
+ * Padding
+ */
+.u-padding {
+  padding: 1rem !important; }
+
+/**
+ * Padding large
+ */
+.u-padding-large {
+  padding: 2rem !important; }
+
+/**
+ * Padding top none
+ */
+.u-padding-top-none {
+  padding-top: 0 !important; }
+
+/**
+ * Padding top small
+ */
+.u-padding-top-small {
+  padding-top: 1rem !important; }
+
+/**
+ * Padding top
+ */
+.u-padding-top {
+  padding-top: 1rem !important; }
+
+/**
+ * Padding top large
+ */
+.u-padding-top-large {
+  padding-top: 2rem !important; }
+
+/**
+ * Padding bottom none
+ */
+.u-padding-bottom-none {
+  padding-bottom: 0 !important; }
+
+/**
+ * Padding bottom small
+ */
+.u-padding-bottom-small {
+  padding-bottom: 1rem !important; }
+
+/**
+ * Padding bottom
+ */
+.u-padding-bottom {
+  padding-bottom: 1rem !important; }
+
+/**
+ * Padding bottom large
+ */
+.u-padding-bottom-large {
+  padding-bottom: 2rem !important; }
+
+/**
+ * Padding right none
+ */
+.u-padding-right-none {
+  padding-right: 0 !important; }
+
+/**
+ * Padding right small
+ */
+.u-padding-right-small {
+  padding-right: 1rem !important; }
+
+/**
+ * Padding right
+ */
+.u-padding-right {
+  padding-right: 1rem !important; }
+
+/**
+ * Padding right large
+ */
+.u-padding-right-large {
+  padding-right: 2rem !important; }
+
+/**
+ * Padding left none
+ */
+.u-padding-left-none {
+  padding-left: 0 !important; }
+
+/**
+ * Padding left small
+ */
+.u-padding-left-small {
+  padding-left: 1rem !important; }
+
+/**
+ * Padding left
+ */
+.u-padding-left {
+  padding-left: 1rem !important; }
+
+/**
+ * Padding left large
+ */
+.u-padding-left-large {
+  padding-left: 2rem !important; }
diff --git a/packages/starterkit-handlebars-demo/package.json b/packages/starterkit-handlebars-demo/package.json
index 90f9f8ce6..9dbbe9e67 100644
--- a/packages/starterkit-handlebars-demo/package.json
+++ b/packages/starterkit-handlebars-demo/package.json
@@ -21,5 +21,8 @@
   "homepage": "https://github.com/pattern-lab/patternlab-node/tree/master/packages/starterkit-handebars-demo",
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "build": "cd dist/css && npx node-sass style.scss style.css"
   }
 }