Feature/utilities/documentation

config.json

@@ -119,7 +119,8 @@
         "about": "docs/content/about/*.hbs",
         "develop": "docs/content/develop/*.hbs",
         "design": "docs/content/design/*.hbs",
-        "methods": "docs/content/methods/*.hbs"
+        "methods": "docs/content/methods/*.hbs",
+        "utilities": "docs/content/utilities/*.hbs"
       }
     },
     "inplace": {

gulpfile.js

@@ -204,6 +204,11 @@ function metalsmithBuild(callback) {
       refer: false,
       sortBy: 'order',
     },
+    utilities: {
+      pattern: config.metalSmith.collection.contentnav.utilities,
+      refer: false,
+      sortBy: 'order',
+    },
     methods: {
       pattern: config.metalSmith.collection.contentnav.methods,
       refer: false,

src/core/_all.scss

@@ -2,5 +2,4 @@
 @import 'iconography/icon';
 @import 'layout/layout';
 @import 'section/section';
-@import 'spacing/spacing';
 @import 'typography/typography';

src/core/colour/index.hbs

@@ -35,7 +35,7 @@ meta-index: true
   <div class="nsw-in-page-alert__content">
     <h4 class="nsw-in-page-alert__title">You don't need to use hex colours in code</h4>
     <p>Use either CSS variables (below) or, if you're creating a one-off layout, you can use our helper classes for dark, light, and supplementary colours.</p>
-    <p>By using CSS variables, any branding or theming changes will automatically reflect in your product. See CSS variables below, or see the <a href="/docs/content/develop/helpers.html">Utility classes</a> docs.</p>
+    <p>By using CSS variables, any branding or theming changes will automatically reflect in your product. See CSS variables below, or see the <a href="/docs/content/utilities/background.html">Utility classes</a> docs.</p>
   </div>
 </div>
 

src/core/graphic-elements/index.hbs

@@ -153,7 +153,7 @@ meta-index: true
               Minimum padding from text: 16px</p>
           </td>
           <td>
-            <p><a href="/docs/content/develop/helpers.html#border-size">View Helper classes</a></p>
+            <p><a href="/docs/content/utilities/borders.html">View Helper classes</a></p>
           </td>
         </tr>
       </tbody>

src/core/pictograms/index.hbs

@@ -30,11 +30,10 @@ meta-index: true
 <h2 id="usage">Usage</h2>
 <p>Used pictograms to visually support and highlight content, making it quickly identifiable on the page.</p>
 <div class="nsw-in-page-alert nsw-in-page-alert--info">
-      <span class="material-icons nsw-material-icons nsw-in-page-alert__icon"
-            focusable="false" aria-hidden="true">info</span>
+  <span class="material-icons nsw-material-icons nsw-in-page-alert__icon" focusable="false" aria-hidden="true">info</span>
   <div class="nsw-in-page-alert__content">
     <h4>Use SVG utility classes</h4>
-    <p>Usability classes are available for developers to apply brand colours to SVGs. Use them  so that SVGs can be used across pages using different colour schemes. See <a href="/docs/content/develop/helpers.html">Utility classes</a> for names.</p>
+    <p>Usability classes are available for developers to apply brand colours to SVGs. Use them  so that SVGs can be used across pages using different colour schemes. See <a href="/docs/content/utilities/svg.html">Utility classes</a> for names.</p>
   </div>
 </div>
 <h2 id="styling">Styling</h2>
@@ -94,15 +93,14 @@ meta-index: true
   </div>
 </div>
 
-    <div class="nsw-callout">
-      <div class="nsw-callout__content">
-        <h4>Pictogram Brand Styling</h4>
-        <p>For full pictograms creation guidance, visit your relevant brand classification guidelines at the <a href="https://branding.nsw.gov.au" target="_blank">NSW Government Visual identity system</a>.</p>
-      </div>
-    </div>
+<div class="nsw-callout">
+  <div class="nsw-callout__content">
+    <h4>Pictogram Brand Styling</h4>
+    <p>For full pictograms creation guidance, visit your relevant brand classification guidelines at the <a href="https://branding.nsw.gov.au" target="_blank">NSW Government Visual identity system</a>.</p>
+  </div>
+</div>
 
 
-
 <!--<p>Pictograms should be designed on a pixel-based grid of 64px x 64px with a live area of 60px x 60px, and can be scaled down linearly to half size if required. Pictogram content should remain inside of the live area, which is the region of an image that is unlikely to be hidden from view (such as when sidebars appear upon scrolling).</p>
 <div class="nsw-section nsw-section--white nsw-block nsw-p-sm">
   <div class="nsw-table nsw-table--bordered nsw-table--valign-middle">
@@ -201,7 +199,6 @@ meta-index: true
 <h3>Corner radius</h3>
 <p>Corner radius should be 2px and increased where necessary to make rounded objects. Interior corners should be square.</p>
 
-
 <div class="nsw-grid">
   <div class="nsw-col nsw-col-sm-4">
     <figure class="nsw-media nsw-media--light">