From acab780d087e3496a212ff437185f34906e5b5a0 Mon Sep 17 00:00:00 2001
From: Allan King <Allan.King@hee.nhs.uk>
Date: Thu, 16 Apr 2026 12:08:13 +0100
Subject: [PATCH] Update site width

---
 README.md                 | 18 ++++++++++++++++++
 docs/assets/css/main.scss |  7 +++++--
 src/all.scss              | 13 +++----------
 src/tel.scss              |  5 +++++
 4 files changed, 31 insertions(+), 12 deletions(-)
 create mode 100644 src/tel.scss

diff --git a/README.md b/README.md
index 5f6caa9..a0cc5da 100644
--- a/README.md
+++ b/README.md
@@ -14,3 +14,21 @@ NHS TEL Frontend is mainatined by staff at NHS England. If you have a question,
 ## Building on the NHS digital service manual
 
 The NHS TEL uses the [NHS design system](https://service-manual.nhs.uk/design-system), however it also uses NHS TEL-specific design components and patterns that need documenting with guidance.
+
+## Sass usage
+
+This package publishes compiled CSS in `dist/main.css`, and it also ships the source Sass files in `dist/tel-frontend`.
+
+If your service wants the default NHS width, you can continue to use the compiled CSS bundle.
+
+If your service compiles Sass and needs to override NHS frontend variables such as page width, import the TEL Sass entrypoint and configure it when you load the module:
+
+```scss
+@use "tel-frontend/dist/tel-frontend/tel" with (
+  $nhsuk-page-width: 1200px
+);
+```
+
+This works because `src/tel.scss` forwards `nhsuk-frontend`, so the consuming app can set NHS Sass variables before the TEL styles are generated.
+
+If you only consume the compiled CSS, Sass variables have already been resolved and you will need to use a plain CSS override instead.
diff --git a/docs/assets/css/main.scss b/docs/assets/css/main.scss
index cb7700b..b9f58f0 100644
--- a/docs/assets/css/main.scss
+++ b/docs/assets/css/main.scss
@@ -1,5 +1,8 @@
-// Import all styles from the NHS TEL frontend library
-@import "src/all";
+// Import all styles from the NHS TEL frontend library and expose NHS mixins
+// to the docs-specific Sass in this file.
+@use "src/tel" as * with (
+  $nhsuk-page-width: 1500px
+);
 
 // Code example syntax highlighting
 @import "node_modules/prismjs/themes/prism";          // Default light theme
diff --git a/src/all.scss b/src/all.scss
index c7568bf..0b2f3b8 100644
--- a/src/all.scss
+++ b/src/all.scss
@@ -1,10 +1,3 @@
-// Import NHS.UK Frontend
-@import "nhsuk-frontend/dist/nhsuk/index";
-
-// 2. Your Library Settings (Optional)
-// Add a blank file at src/_settings.scss if you need custom TEL variables later
-// @import "settings";
-
-// 3. Your Custom Components
-@import "components/hello-world/hello-world";
-
+@use "tel" with (
+  $nhsuk-page-width: 1500px
+);
diff --git a/src/tel.scss b/src/tel.scss
new file mode 100644
index 0000000..8171093
--- /dev/null
+++ b/src/tel.scss
@@ -0,0 +1,5 @@
+@forward "nhsuk-frontend/dist/nhsuk/index";
+@use "nhsuk-frontend/dist/nhsuk/index" as *;
+
+// TEL styles rely on NHS mixins and variables being available in scope.
+@import "components/hello-world/hello-world";