SAB-181 Add GDS style sheet with sass support (#5)

Added GovUK Gds support via SASS and removed boiler plating of MVC template.

Author: markysoft

.gitignore

@@ -523,4 +523,11 @@ FodyWeavers.xsd
 ### VisualStudio Patch ###
 # Additional files built by Visual Studio
 
-# End of https://www.toptal.com/developers/gitignore/api/rider,visualstudio,visualstudiocode,osx
+# End of https://www.toptal.com/developers/gitignore/api/rider,visualstudio,visualstudiocode,osx
+
+# Custom exclusions
+package_cache/
+src/SchoolAccount.Web.Mvc/wwwroot/app.css*
+src/SchoolAccount.Web.Mvc/wwwroot/assets
+src/SchoolAccount.Web.Mvc/wwwroot/govuk-frontend.min.js
+src/SchoolAccount.Web.Mvc/lib/govuk-frontend*

Directory.Packages.props

@@ -19,6 +19,9 @@
     <PackageVersion Include="Microsoft.VisualStudio.Azure.Containers.Tools.Targets" Version="1.23.0" />
     <PackageVersion Include="Serilog.AspNetCore" Version="10.0.0" />
     <PackageVersion Include="Serilog.Sinks.Seq" Version="9.1.0" />
+    <!-- Web.Mvc -->
+    <PackageVersion Include="AspNetCore.SassCompiler" Version="1.102.0" />
+    <PackageVersion Include="GovUk.Frontend.AspNetCore" Version="4.4.0" />
     <!-- ArchitectureTests -->
     <PackageVersion Include="Shouldly" Version="4.3.0" />
     <PackageVersion Include="NetArchTest.Rules" Version="1.3.2" />

README.md

@@ -19,6 +19,7 @@ Architecture decisions are recorded as ADRs in the [decisions](decisions) folder
 - [Run tests on the Microsoft Testing Platform](decisions/0004-microsoft-testing-platform-and-ci-reporting.md) - testing platform and how results and coverage are reported in CI
 - [Format code with CSharpier](decisions/0005-format-code-with-csharpier.md) - why formatting is automated and enforced in the build
 - [Enforce code quality with Roslyn analysers](decisions/0006-enforce-code-quality-with-roslyn-analysers.md) - why SonarAnalyzer.CSharp and strict analysis are enforced in the build
+- [Supporting SASS within GDS Styles](decisions/0007-supporting-sass-within-gds-styles.md) - why SASS support has been enabled
 
 New decisions should follow the [ADR template](decisions/0000-adr-template.md).
 

decisions/0007-supporting-sass-within-gds-styles.md

@@ -0,0 +1,34 @@
+---
+status: "accepted"
+date: "2026-07-29"
+decision-makers: Paul Custance & Mark Harrop
+---
+
+# Supporting SASS within GDS Styles
+
+## Context and Problem Statement
+
+To implement government standards into the application to align closer with the design team. 
+
+<!-- This is an optional element. Feel free to remove. -->
+## Decision Drivers
+
+* To closer align with the design team we should support SASS components
+* Easier for a like for like comparison
+
+<!-- This is an optional element. Feel free to remove. -->
+### Consequences
+
+* Good, because we can use the GDS SASS variables, colours and layout rather than redefining them within the css.
+* Good, because it aligns closer with the component structure within the design prototype project.
+* Bad, as it adds further complexity to the components and file structure.
+
+<!-- This is an optional element. Feel free to remove. -->
+### Confirmation
+
+Changes to the SASS files are reflected within the generated css when building the application.
+
+<!-- This is an optional element. Feel free to remove. -->
+## More Information
+
+* See [Sass Examples](https://github.com/x-govuk/govuk-frontend-aspnetcore/tree/main/samples/Samples.Sass) on how to integrate SASS within a GDS MVC app.

docs/clean-architecture.md

@@ -90,6 +90,7 @@ Contains:
 - **Middleware** - request pipeline concerns
 - **Error handling** - exception handling and mapping `Result` failures to HTTP problem details
 - **Authentication configuration**
+- **Style** - a dedicated scss file for and named after each component
 
 The Presentation layer depends on Application (to send commands/queries) but should not reference Infrastructure directly.
 

docs/coding-standards.md

@@ -77,3 +77,7 @@ definitions.
 Coding standards cover how individual files are written. For how projects relate to each other,
 see [Clean Architecture](clean-architecture.md). For how tests are written, see
 [Testing Standards](testing-standards.md) and [Integration Testing](integration-testing.md).
+
+## Style sheets
+
+Each component should have a dedicated scss style sheet within the `./Style/components/` directory.

launchSettings.json

@@ -4,7 +4,7 @@
       "commandName": "DockerCompose",
       "commandVersion": "1.0",
       "serviceActions": {
-        "web.api": "StartDebugging"
+        "presentation": "StartDebugging"
       }
     }
   }

nuget.config

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<configuration>
+    <packageSources>
+        <clear />
+        <add key="nuget.org" value="https://api.nuget.org/v3/index.json" />
+    </packageSources>
+    <config>
+        <add key="globalPackagesFolder" value="./package_cache" />
+    </config>
+</configuration>

src/SchoolAccount.Web.Mvc/Program.cs

@@ -1,7 +1,15 @@
+using GovUk.Frontend.AspNetCore;
+
 WebApplicationBuilder builder = WebApplication.CreateBuilder(args);
 
 // Add services to the container.
 builder.Services.AddControllersWithViews();
+builder.Services.AddGovUkFrontend();
+
+if (builder.Environment.IsDevelopment())
+{
+    builder.Services.AddSassCompiler();
+}
 
 WebApplication app = builder.Build();
 
@@ -15,7 +23,7 @@
 
 app.UseHttpsRedirection();
 app.UseRouting();
-
+app.UseGovUkFrontend();
 app.UseAuthorization();
 
 app.MapStaticAssets();

src/SchoolAccount.Web.Mvc/SchoolAccount.Web.Mvc.csproj

@@ -5,10 +5,23 @@
         <Nullable>enable</Nullable>
         <ImplicitUsings>enable</ImplicitUsings>
         <DockerDefaultTargetOS>Linux</DockerDefaultTargetOS>
+        <EnableGovUkFrontendSupport>true</EnableGovUkFrontendSupport>
+        <RestoreGovUkFrontendStylesheet>false</RestoreGovUkFrontendStylesheet>
+        <RestoreGovUkFrontendNpmPackage>true</RestoreGovUkFrontendNpmPackage>
+        <RestoreGovUkFrontendSupportPackage>true</RestoreGovUkFrontendSupportPackage>
+    </PropertyGroup>
+
+    <PropertyGroup Condition="$([MSBuild]::IsOSPlatform('Windows'))">
+        <GovUkFrontendAssetsDirectory>/wwwroot</GovUkFrontendAssetsDirectory>
     </PropertyGroup>
 
     <ItemGroup>
         <ProjectReference Include="..\SchoolAccount.Infrastructure\SchoolAccount.Infrastructure.csproj" />
     </ItemGroup>
+    
+    <ItemGroup>
+        <PackageReference Include="AspNetCore.SassCompiler" />
+        <PackageReference Include="GovUk.Frontend.AspNetCore" />
+    </ItemGroup>
 
 </Project>