Copy 2 guides from GOVUK prototype kit

app/views/how-tos/index.html

@@ -89,6 +89,9 @@ <h2 class="nhsuk-heading-s">General use</h2>
         <li><a href="/how-tos/making-pages">Making pages</a></li>
         <li><a href="/how-tos/adding-assets">Adding CSS, JavaScript and images</a></li>
         <li><a href="/how-tos/components">Using components</a></li>
+        <li><a href="/how-tos/layouts">How to use layouts</a></li>
+        <li><a href="/how-tos/override-service-name">Change the service name on one page</a></li>
+
         <li><a href="/how-tos/passing-data-page">Passing data page to page</a></li>
         <li><a href="/how-tos/branching">Branching</a> – show a different page based on user input</li>
       </ul>

app/views/how-tos/layouts.html

@@ -0,0 +1,53 @@
+
+{% extends 'layout.html' %}
+
+{% block pageTitle %}
+  How to use layouts - NHS prototype kit
+{% endblock %}
+
+{% block beforeContent %}
+  {% include "how-tos/includes/breadcrumb.html" %}
+{% endblock %}
+
+{% block content %}
+  <div class="nhsuk-grid-row">
+
+    <div class="nhsuk-grid-column-two-thirds">
+
+      <h1>
+        How to use layouts
+      </h1>
+
+
+    <p>Layouts let you share a common design across pages. For example, to include the name of your service or use the NHS.UK footer on every page in your service.</p>
+<p>If your pages share a custom header and footer, you can add them to one shared layout file. To change those parts of the page in future, you can change them once and they will update on all the pages that use that layout.</p>
+<p>The Prototype Kit comes with a layout file for you to edit. You can also add more layouts if you need to.</p>
+
+<h2 id="adding-layouts">Adding new layouts</h2>
+
+<p>In your code editor, copy the <code>app/views/layout.html</code> file, calling it something like <code>app/views/layout-admin.html</code>. You can then make any changes in this admin layout, for example having a different header or footer.</p>
+
+<p>To use the new template in a view, change this line:</p>
+
+<pre tabindex="0" class="app-pre"><code class="language-markup">{{'{% extends 'layout.html' %}' | escape }}</code></pre>
+
+<p>To this:</p>
+
+<pre tabindex="0" class="app-pre"><code class="language-markup">{{'{% extends 'layout-admin.html' %}' | escape }}</code></pre>
+<p>You can make changes to existing blocks and define your own blocks in your layout.</p>
+<h2 id="using-blocks">Using blocks</h2>
+
+<p>Blocks are named sections of a page.</p>
+
+<p>For example, in the <a href="https://service-manual.nhs.uk/design-system/styles/page-template">NHS page template</p> there are blocks defined for <code>header</code>, <code>content</code> and <code>footer</code>.
+
+<p>You can use these in your layouts to set different areas of the page.</p>
+
+<p>See the <a href="https://service-manual.nhs.uk/design-system/styles/page-template#options">NHS page template options</a> for a full list of all the defined blocks.</p>
+<h2 id="stylesheets-css-and-javascript">Stylesheets (CSS) and JavaScript</h2>
+<p>You can use custom layouts to load your own stylesheets (CSS) and JavaScript on multiple pages. <a href="/how-tos/adding-assets">Find out more about adding CSS and JavaScript</a>.</p>
+
+  </div>
+  </div>
+
+  {% endblock %}

app/views/how-tos/override-service-name.html

@@ -0,0 +1,32 @@
+
+{% extends 'layout.html' %}
+
+{% block pageTitle %}
+Change the service name on one page - NHS prototype kit
+{% endblock %}
+
+{% block beforeContent %}
+  {% include "how-tos/includes/breadcrumb.html" %}
+{% endblock %}
+
+{% block content %}
+  <div class="nhsuk-grid-row">
+
+    <div class="nhsuk-grid-column-two-thirds">
+
+      <h1>
+        Change the service name on one page
+      </h1>
+
+
+    <p>You can set a different service name to the rest of your prototype on one page.</p>
+<p>Use this code:</p>
+<pre tabindex="0" class="app-pre"><code class="language-markup">{{'{% set serviceName %}
+    Book a test
+  {% endset%}' | escape }}
+</code></pre>
+
+  </div>
+  </div>
+
+  {% endblock %}