[Feature]: Python Web Framework Integration

[ColinD-CO]

What feature would you like to add to the ONS Design System?

I would like to propose adding better integration and documentation for using the ONS Design System with Python web frameworks like Flask and Django that use the Jinja templating engine.

The current setup requires a lot of custom work to integrate the ONS Design System styling and components into applications built with these frameworks. A more seamless integration would make it easier for ONS teams to build consistent user interfaces adhering to the design system when using Python web apps.

Why should this new feature be added to the Design System?

Python and its web frameworks like Flask and Django are widely used across government for building, dashboards, and internal applications. However, the current ONS Design System documentation and tooling is primarily focused on integration with JavaScript front-end frameworks.

Adding better support for Python web frameworks would:

• Make it easier for ONS teams to build user interfaces consistent with the design system using their chosen tech stack
• Reduce technical debt from having to write custom integration code
• Improve consistency of ONS digital services regardless of the underlying framework
• Potentially increase adoption of the design system across ONS

Evidence:

I have been working on integrating the ONS design system into a Flask application for a cross-government management information dissemination tool (Financial Transactions App). This experience has been clunky, and I feel like a lot of time and effort has been spent trying to bridge the gap between a system designed for javascript developers and my python use case.

Challenges I faced:

• The CSS, JS and asset download instructions require specific software (npm), which a typical data scientist will not have installed, or have any familiarity with using.
• My App infrastructure had a strict content security policy which didn't allow the links to CDN to work - each file had to be downloaded and saved locally.
• Navigating the HTML became extremely difficult due to the pervasive use of inline SVG icon definitions obfuscating the overall code structure and component hierarchy.
• Some components didn't seem to work properly when reloaded as part of an interactive element within a page.
  (details component: when reloaded with htmx, the reloaded details component would load in, but would not be initialised, I was able to resolve this by editing the css for the component, and writing some short JS to re-initialise the component after the htmx:swap)

Data science teams are increasingly interested in developing web applications as dissemination tools for their analysis. In the last year, I'm aware of at least 3 other projects that developed front-end content which did not use ONS house styles, and one project which used css files taken directly from the ONS website. In this later case, the risk is that developers use content inappropriately, because they are not reading the guidance built in to the design system.

Supporting material

No response

Contacts

No response

[ColinDaglish]

This is my ONS account.

[MagdalenaLarge]

Hi @ColinDaglish,
Thank you for contacting us and providing all the details.
We are aware of that issue and are looking into the possible solutions.
I will bring it up to our Dev team to discuss the potential timeline.
In the meantime if you have any further questions, please use this ticket or contact us directly on the slack channel #design-system.
Thank you.