Merge pull request #82 from alphagov/update_guidance_pages

Update guidance pages
alphagov · Dec 3, 2015 · 3931b1f · 3931b1f
2 parents e4e93b4 + 29c0b38
commit 3931b1f
Show file tree

Hide file tree

Showing 10 changed files with 93 additions and 57 deletions.
diff --git a/app/routes.js b/app/routes.js
@@ -5,6 +5,8 @@ router.get('/', function (req, res) {
   res.render('index');
 });
 
+
+// Example route: Passing data into a page
 router.get('/examples/template-data', function (req, res) {
   res.render('examples/template-data', { 'name' : 'Foo' });
 });

diff --git a/app/views/examples/elements/forms.html b/app/views/examples/elements/forms.html
@@ -3,7 +3,7 @@
 {{$content}}
 <main id="content" role="main">
 
-  <a class="link-back" href="/examples/">Back to the GOV.UK prototype kit examples</a>
+  {{>includes/breadcrumb_examples}}
 
   <form action="/" method="post" class="form">
 

diff --git a/app/views/examples/elements/grid-layout.html b/app/views/examples/elements/grid-layout.html
@@ -3,7 +3,7 @@
 {{$content}}
 <main id="content" role="main">
 
-  <a class="link-back" href="/examples/">Back to the GOV.UK prototype kit examples</a>
+  {{>includes/breadcrumb_examples}}
 
   <h1 class="heading-xlarge">
     New grid layout example

diff --git a/app/views/examples/elements/radio-buttons-checkboxes.html b/app/views/examples/elements/radio-buttons-checkboxes.html
@@ -1,8 +1,9 @@
 {{<layout}}
 
 {{$content}}
-<main id="content" role="main">
-  <a class="link-back" href="/examples/">Back to the GOV.UK prototype kit examples</a>
+<main id="content" role="main">  
+
+  {{>includes/breadcrumb_examples}}
 
   <div class="grid-row">
     <div class="column-two-thirds">

diff --git a/app/views/examples/elements/toggled-content.html b/app/views/examples/elements/toggled-content.html
@@ -2,7 +2,8 @@
 
 {{$content}}
 <main id="content" role="main">
-  <a class="link-back" href="/examples/">Back to the GOV.UK prototype kit examples</a>
+
+  {{>includes/breadcrumb_examples}}
 
   <div class="grid-row">
     <div class="column-two-thirds">

diff --git a/app/views/examples/elements/typography.html b/app/views/examples/elements/typography.html
@@ -3,7 +3,7 @@
 {{$content}}
 <main id="content" role="main">
 
-  <a class="link-back" href="/examples/">Back to the GOV.UK prototype kit examples</a>
+  {{>includes/breadcrumb_examples}}
 
   <h1 class="heading-xlarge">
     Typography

diff --git a/app/views/examples/index.html b/app/views/examples/index.html
@@ -8,14 +8,24 @@
 
 <main id="content" role="main">
 
-  <h1 class="heading-xlarge">Examples</h1>
+  <div id="global-breadcrumb">
+    <ol>
+      <li><a href="/">GOV.UK prototype kit</a></li>
+    </ol>
+  </div>
+
+  <h1 class="heading-xlarge">Example pages and patterns</h1>
+
+  <p class="text">
+    Use these as the basis for your prototypes.
+    We recommend making copies of the examples rather than directly editing them.
+  </p>
+
 
   <div class="grid-row">
 
     <div class="column-third">
-
       <h2 class="heading-medium">Page elements</h2>
-
       <ul class="list-bullet">
         <li>
           <a href="/examples/elements/grid-layout">
@@ -43,13 +53,11 @@ <h2 class="heading-medium">Page elements</h2>
           </a>
         </li>
       </ul>
-
     </div>
 
     <div class="column-third">
 
       <h2 class="heading-medium">Page templates</h2>
-
       <ul class="list-bullet">
         <li>
           <a href="/examples/blank-govuk">
@@ -82,13 +90,11 @@ <h2 class="heading-medium">Page templates</h2>
           </a>
         </li>
       </ul>
-
     </div>
 
     <div class="column-third">
 
       <h2 class="heading-medium">Template features</h2>
-
       <ul class="list-bullet">
         <li>
           <a href="/examples/template-data">
@@ -101,9 +107,8 @@ <h2 class="heading-medium">Template features</h2>
           </a>
         </li>
       </ul>
-
     </div>
-
+    
   </div>
 
 </main>

diff --git a/app/views/examples/template-data.html b/app/views/examples/template-data.html
@@ -4,11 +4,21 @@
 
 {{$content}}
 <main id="content" role="main">
-  <h1 class="heading-xlarge">Example of using variables in pages</h1>
-  <dl>
-    <dt style="font-weight: bold; display: inline;">'name' variable: </dt>
-    <dd style="display: inline">{{ name }}</dd>
-  </dl>
+
+  {{>includes/breadcrumb_examples}}
+
+  <div class="grid-row">
+    <div class="column-two-thirds">
+
+      <h1 class="heading-xlarge">Passing data into pages</h1>
+
+      <p class="lede">The example route defined in '/routes.js' is passing the string '{{ name }}' to this page, via the 'name' variable.</p>
+
+      <p>Check our the source for this page at '/app/views/examples/template-data.html' to see how it works.</p>
+
+    </div>
+  </div>
+
 </main>
 {{/content}}
 

diff --git a/app/views/includes/breadcrumb_examples.html b/app/views/includes/breadcrumb_examples.html
@@ -0,0 +1,6 @@
+<div id="global-breadcrumb">
+  <ol>
+    <li><a href="/">GOV.UK prototype kit</a></li>
+    <li><a href="/examples">Examples</a></li>
+  </ol>
+</div>
diff --git a/app/views/index.html b/app/views/index.html
@@ -7,45 +7,56 @@
 {{$content}}
 
 <main id="content" role="main">
+	<div class="grid-row">
+		<div class="column-two-thirds">
 
-	<h1 class="heading-xlarge">Welcome to the GOV.UK prototyping kit</h1>
-	<!-- feel free to change this page to suit your needs -->
-
-	<p>This is the index.html page - we recommend you put links to key pages here.</p>
-
-	<h2 class="heading-large">Pages</h2>
-
-	<ul>
-		<li>
-			<a href="/examples">Example pages</a>
-		</li>
-	</ul>
-
-	<h2 class="heading-large">Resources</h2>
-
-	<ul class="list-bullet">
-		<li>
-			<a href="https://github.com/alphagov/govuk_prototype_kit/tree/master/docs">
-				GOV.UK kit documentation
-			</a>
-		</li>
-		<li>
-			<a href="http://govuk-elements.herokuapp.com/snippets/">
-				Guide to GOV.UK elements HTML
-			</a>
-		</li>
-		<li>
-			<a href="https://www.gov.uk/service-manual">
-				Service design manual
-			</a>
-		</li>
-		<li>
-			<a href="https://www.gov.uk/design-principles">
-				Government Digital Service Design Principles
-			</a>
-		</li>
-	</ul>
+			<h1 class="heading-xlarge">The GOV.UK prototype kit</h1>
 
+			<p>
+				This kit lets you rapidly create HTML prototypes of GOV.UK services.
+			</p>
+
+			<p>
+				It contains all you need to prototype anything from simple static pages to complex, data-driven transactions.
+			</p>
+
+			<h2 class="heading-medium">About this page</h2>	
+
+			<p>We recommend you add links to your prototype to this page, rather than delete it.
+				You'll find this page in the kit at '/app/views/index.html'.</p>
+
+
+			<h2 class="heading-medium">Examples and documentation</h2>		
+
+			<ul class="list-bullet">
+				<li><a href="/examples">Example pages and patterns</a></li>
+				<li><a href="https://github.com/alphagov/govuk_prototype_kit/tree/master/docs">
+						Read the full documentation</a></li>
+			</ul>
+
+
+			<h2 class="heading-medium">Other resources</h2>
+
+			<ul class="list-bullet">
+				<li>
+					<a href="http://govuk-elements.herokuapp.com/snippets/">
+						Guide to GOV.UK Elements
+					</a>
+				</li>
+				<li>
+					<a href="https://www.gov.uk/service-manual">
+						Service design manual
+					</a>
+				</li>
+				<li>
+					<a href="https://www.gov.uk/design-principles">
+						Government Digital Service Design Principles
+					</a>
+				</li>
+			</ul>
+
+		</div>
+	</div>
 </main>
 
 {{/content}}