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 · fe4f606 · fe4f606
1 parent 03fd05c
commit fe4f606
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">