Creating a prototype page

The best way to test components is in-situ with other components. Use these prototype pages as a way to validate your design ideas and see how your code reacts alongside other components.

These prototype pages can also be used for user-testing, a qualitative way of observing how your customers react to your design without building the full production infrastructure of a new section. Here are the steps involved to create a new page.

1. Create a new .njk file in src/prototype - the name corresponds to the url path. This file can be nested in a sub-folders to create depth.
2. Add front-matter, a YAML notation for any page variables:

---
title: Page title
tags: prototype
---

3. Set the page navigation. Along with the global navigation, different sections of the site use different site navigation, ie. Blog, Store. We can specify which navigation to load in the following way:

{%- set siteNav -%}{%- include "navigation/corporate.njk" -%}{%- endset -%}

This corresponds to the navigation files in src/_includes/navigation.

4. Extend the page.njk layout:

{%- extends "page.njk" -%}

5. Finally, add your content within the content block:

{%- block content -%}
  <div>
    <h1 class="c-h c-h--page-title">{{ title }}</h1>
  </div>
{%- endblock -%}

All together now

---
title: Page title
tags: prototype
---

{%- set siteNav -%}{%- include "navigation/corporate.njk" -%}{%- endset -%}

{%- extends "page.njk" -%}

{%- block content -%}
  <div>
    <h1 class="c-h c-h--page-title">{{ title }}</h1>
  </div>
{%- endblock -%}