Completed descriptions for layout patterns

src/pg/_config.pug

@@ -45,17 +45,17 @@
 			files: [
 				{
 					name: "header",
-					status: "in-progress",
+					status: "complete",
 					core: true,
 				}, 
 				{
 					name: "breakpoints",
-					status: "in-progress",
+					status: "complete",
 					core: true,
 				},
 				{
 					name: "tabs",
-					status: "in-progress",
+					status: "complete",
 					core: true,
 				},
 			]

src/pg/patterns/core/breakpoints/index.pug

@@ -5,8 +5,15 @@ extends ../../../core/_master-pattern
 block content
 	
 	+h(0)
+	p Breakpoints enable responsive mobile design.
+
 	+h(1)
+	p Use breakpoints when designing for different screen sizes. 
+
+	p The breakpoints SCSS mixin included implements media queries to allow for the change of the layout and design based on pre-defined screen sizes. 
+
 	+h(2)
+	p This pattern is only available for SCSS breakpoints. The  mixin is avai
 
 	p When using this, use the default break points as they are set to the same as the Bootstrap framework. The grid for the design system at large break point has been widened to accompdate 3 colour cards across. 
 

src/pg/patterns/core/header/index.pug

@@ -5,8 +5,13 @@ extends ../../../core/_master-pattern
 block content
 
 	+h(0)
+	p A header is layout pattern that helps the user identify the site.  
 	+h(1)
+	p Use a header at the top of every page. The 'front page' of a site may have a different header than the rest of the pages. 
+
 	+h(2)
+	p Place the header at the top of the page after the skip to main content link. This basic header should be replaced with your own site's header. 
+
 
 	div.tab-group#header
 		pre.language-html(data-tab="html")

src/pg/patterns/core/tabs/index.pug

@@ -5,9 +5,9 @@ extends ../../../core/_master-pattern
 block content
 
 	+h(0)
-	+h(1)
-	+h(2)
+	p A tabs component that provides different sections of content that are displayed one at a time when the user selects that information. 
 
+	+h(2)
 	p The tabbed user interface enables users to jump to their target section quickly. Tabs present like logically group information on the same page. Information should  
 
 	ul 
@@ -19,11 +19,9 @@ block content
 	p Users should not need to see content of multiple tabs simultaneously and the user should be able to easily recognise where they are within the content.  
 
 
+	+h(1)
 	p The tab module can be initialised by importing a file with the javascript module using import * as tabs from "../pg/patterns/layouts/tabs/_tabs.js"; contains a modularized version of the jQuery code, so that it can be called on demand. It is what is used in the design system so that the JavaScript can be called at run time (after loading content).
 
-
-
-
 	tabset#tabs
 		pre.language-html(tab="html")
 			include _tabs.pug