README.md

[Unofficial] GOV.UK Design System Community Resources

---

🔥🆕 Update May 2021: You can now find an officially maintained list of resources and tools on the GOV.UK Design System site. If you can, add your thing there!

---

This is an unofficial collection of examples and tools built by the cross-government developer community to use the GOV.UK Design System and GOV.UK Frontend.

You may also be interested in other resources to help digital teams working in the public sector.

This list is maintained by the community. Please raise an issue or Pull Request to add something. You can now find an officially maintained list of resources and tools on the GOV.UK Design System site

Officially supported tools

These are the tools officially supported by the Design System team in GDS.

• GOV.UK Design System
• GOV.UK Frontend
• GOV.UK Prototype Kit

HTML

You can copy and paste the HTML examples into your project if there is no templating support.

Node.js

• GOV.UK Frontend - supports Nunjucks templating language for Node.js

Examples:

• GOV.UK Pay
• GDS Node.js boilerplate

Unofficial tools & resources

Figma

• You can import the Sketch wireframing kit into Figma.

Python

• alphagov/govuk-frontend-jinja - Tools to use the GOV.UK Design System with Python webapps that use Jinja2 and Flask.

Examples:

• Digital Marketplace

PHP

• GOV.UK Design System Drupal Theme

React

• govuk-react/govuk-react - GOV.UK Design System in React using CSSinJS
• govuk-react-jsx - A port of the govuk-frontend Nunjucks to lightweight JSX (Directly consuming govuk CSS/JS). See readme for more detailed comparison with govuk-react.

Ruby

• UKGovernmentBEIS/govuk-design-system-rails - Rails engine containing a Ruby on Rails port of some GOV.UK Design System components.
• DFE-Digital/govuk_design_system_formbuilder - GOV.UK-compliant form builder for Rails
• Tech docs template - A template for building Middleman site for technical documentation

Examples:

• GOV.UK itself uses the Design System via GOV.UK Publishing Components (GDS)
• Find teacher training (DfE)
• Apply for teacher training (DfE)
• Teacher Vacancy Service (DfE)
• Office for Product Safety and Standards Services (BEIS)
• GovWifi Admin (GDS)

R

• ukgovdatascience/govdown - GOV.UK Design System theme for R Markdown

Sketch

• Sketch wireframing kit includes components and patterns from the GOV.UK Design System.

C# / ASP.Net Core

• GOV.UK Design System in C# / ASP.Net Core - GOV.UK Design System components in Razor components, with optional validation and error message generation

Code editor plugins

• daviddotto/govuk-design-system-snippets - Nunjucks macro snippets for popular code editors