Show examples using govuk-frontend.min.css

We’re now using `govuk-frontend.min.css` from the GOV.UK Frontend package Additionally, each preview uses a minimal `example.css` so the Design System website stylesheet is no longer neeeded
alphagov · Nov 1, 2023 · 5335cf8 · 5335cf8
1 parent aace7f4
commit 5335cf8
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 11 deletions.
diff --git a/lib/metalsmith.js b/lib/metalsmith.js
@@ -138,6 +138,11 @@ module.exports = metalsmith
         dest: 'assets'
       }),
 
+      copyAssets('govuk-frontend.min.css?(.map)', {
+        cwd: dirname(require.resolve('govuk-frontend')),
+        dest: 'stylesheets'
+      }),
+
       copyAssets('**/iframeResizer.contentWindow.@(map|min.js)', {
         cwd: join(dirname(require.resolve('iframe-resizer')), 'js'),
         dest: 'javascripts/vendor'

diff --git a/src/stylesheets/example.scss b/src/stylesheets/example.scss
@@ -0,0 +1,10 @@
+@import "example-init";
+
+.app-example-page__wrapper {
+  overflow: auto;
+  background-color: govuk-colour("white");
+}
+
+.app-example-page {
+  padding: govuk-spacing(6);
+}
diff --git a/src/stylesheets/main.scss b/src/stylesheets/main.scss
@@ -120,15 +120,6 @@ $app-code-color: #d13118;
   }
 }
 
-.app-example-page__wrapper {
-  overflow: auto;
-  background-color: govuk-colour("white");
-}
-
-.app-example-page {
-  padding: govuk-spacing(6);
-}
-
 // Copy button
 .app-copy-button {
   $copy-button-colour: #00823b;

diff --git a/views/layouts/layout-example.njk b/views/layouts/layout-example.njk
@@ -1,6 +1,6 @@
 {% extends "govuk/template.njk" %}
 
-{% set htmlClasses = 'app-example-page__wrapper' %}
+{% set htmlClasses = "app-example-page__wrapper" %}
 {% set assetUrl = 'https://design-system.service.gov.uk/assets' %}
 
 {% block pageTitle %}{{ title | smartypants }} – Example – GOV.UK Design System{% endblock %}
@@ -12,7 +12,8 @@
   <meta name="og:description" content="{{ description | smartypants }}">
   <link rel="canonical" href="{{ canonical }}">
 
-  <link href="{{ getFingerprint('stylesheets/main.css') }}" rel="stylesheet" media="all">
+  <link href="{{ getFingerprint('stylesheets/govuk-frontend.min.css') }}" rel="stylesheet" media="all">
+  <link href="{{ getFingerprint('stylesheets/example.css') }}" rel="stylesheet" media="all">
   {#- Include any additional stylesheets specified in the example frontmatter #}
   {% for stylesheet in stylesheets %}
     <link href="{{ getFingerprint(stylesheet) }}" rel="stylesheet" media="all">