13 ms·

Show HN: Gov.uk Vue, a Vue Component Library for the Gov.uk Design System

223 points by matteason 2y ago

Hi HN, I've built a Vue component library based on the GOV.UK Design System, which is used for government services in the UK. The Design System is well-known for being accessible, well designed and thoroughly researched, and it's been used as the basis for many other governments' and organisations' design systems. GOV.UK Vue includes every component in the GOV.UK Design System, with comprehensive docs. It can also be used for projects that aren't related to GOV.UK, as long as they don't use the GOV.UK branding

ggm 2y ago
Given Labour won the election, and a need to distinguish this from gov.uk, why not cast the space into a rather fetching, 2nd international respecting Red hue?
- gherard5555 2y ago
  let me choose the color theme... FF0000
NtG_UK 2y ago
Impressive, but haven’t we just handed crooks the perfect tool for crafting their next GOV.UK themed phishing site?
- matteason 2y ago
  GOV.UK Frontend is already fully open source [0] with comprehensive documentation [1] and GDS encourage community contributions, libraries and resources [2]. If there was any worry about phishing that would be a question for GDS [0] https://github.com/alphagov/govuk-frontend https://github.com/alphagov/govuk-frontend [1] https://design-system.service.gov.uk/ https://design-system.service.gov.uk/ [2] https://design-system.service.gov.uk/community/resources-and-tools/ https://design-system.service.gov.uk/community/resources-and...
  - baliex 2y ago
    This is impressive Matt, and I love the design system GDS has developed, but I'm not sure they want non-government services to use the system. From the second link you posted: > Use this design system to make *government* services consistent with GOV.UK Emphasis mine. Are GDS aware of this work? I am in no way affiliated with GDS by the way. -- I'm always wary of this kind of thing not being on a gov.uk domain, which in this case is entirely appropriate because it's not in anyway official or endorsed by GDS. Not for any direct phishing/crooks concerns as raised above, but because it waters down the impact of this kind of thing always being on gov.uk domains. -- Edit: I'd be _very_ surprised if GDS don't take issue with you having "GOV.UK" in the name given that it is no way associated with gov.uk
    - matteason 2y ago
      Non-GOV.UK services are free to use everything except the branding, per [0] Plenty of non-gov organisations use various bits of it, for example the breadcrumbs and accordion on [1] [0] https://www.gov.uk/service-manual/design/making-your-service-look-like-govuk#if-your-service-isnt-on-govuk https://www.gov.uk/service-manual/design/making-your-service... [1] https://www.rnib.org.uk/living-with-sight-loss/assistive-aids-and-technology/tv-audio-and-gaming/guide-to-accessible-social-media/ https://www.rnib.org.uk/living-with-sight-loss/assistive-aid... Edit: Re naming - GOV.UK [Thing] is an established convention for community tools, as shown on [3]. GDS are aware of the project. [3] https://design-system.service.gov.uk/community/resources-and-tools/ https://design-system.service.gov.uk/community/resources-and...
      - baliex 2y ago
        I stand corrected :)
      - esquivalience 2y ago
        This comment was really helpful, and addressed many of my instinctive reactions too.
      - dangsux 2y ago
- unsupp0rted 2y ago
  Crooks don't need component libraries to mimic government websites. And their victims probably wouldn't notice one way or the other.
  - tialaramex 2y ago
    There's an old Microsoft study examining what might help users to not give crooks their credentials. The participants used their real credentials to attempt a real bank transaction, and Microsoft studied what might count as a red flag and stop them from attempting this transaction on a bogus site, variations in UI warnings, layout etc.. Nothing. Nothing you could do stopped users from persisting in their goal, despite all the red flags, humans get stuck on a mission, it's called "Get-there-itis" and it kills private pilots, it causes those "How could you be such a moron?" bridge strikes you see on Youtube, it's a defect in human psychology, you have to design knowing that this defect exists. So what works? Brick Wall UX. When the user can't do the wrong thing they won't. They'll still try of course, but now they can't succeed (in giving their credentials to crooks).
    - mananaysiempre 2y ago
      Jeff Atwood called it the dancing bunnies problem[1]. [1] https://blog.codinghorror.com/the-dancing-bunnies-problem/ https://blog.codinghorror.com/the-dancing-bunnies-problem/
      - tialaramex 2y ago
        The usual term is "Dancing pigs" rather than bunnies: https://en.wikipedia.org/wiki/Dancing_pigs https://en.wikipedia.org/wiki/Dancing_pigs But this isn't quite the same thing, the dancing pigs (or bunnies) are an attraction, the mission mindset / get-there-itis happen after the user has decided to do something, and prevent them from (correctly) deciding not to do it in light of more information.
    - seabass-labrax 2y ago
      Broadly speaking, I agree with the claim - but I'm very suspicious of the study. We'd have to know the methodology to be sure (maybe you have a link to this?), but there are many factors that could lead participants to ignore the warning signs and persevere. For instance, the participants may have been offered a sum of money for their involvement, and believed (consciously or subconsciously) that they had to 'pass' the test to earn it. Or, it could have been pride and the desire not to lose face; perhaps even the sentiment of "the sooner I can finish this daft test, the sooner I can leave"! There is a common attitude in the computer industry that designers/developers know better than users, but software users are representative of the general population and are thus no more or less intelligent than average. I believe it's primarily a lack of understanding of how software works that makes online phishing scams work. 'Brick Wall UX' can only go so far to compensate for that, and it comes at a cost of making software less flexible for the end-user.
- deleted 2y ago
  [deleted]
- dotancohen 2y ago
  Just wait until you see what crooks can do with Telegram, or Megaupload, or the Linux kernel, or Microsoft Excel.
  - deleted 2y ago
    [deleted]
- globular-toast 2y ago
  That's a good thing, because people need to learn how to really check the authenticity of a website and not base it on how it looks. See security by obscurity.
- samstave 2y ago
  Better yet, this creates the ability for prompts such as: "Using design system from govukvue.org create an app that will [check for service] from [this gov.uk url] using the same hooks and design components to give me a dashboard of [benefits] [contacts_for_benefits] [these_other-compnents_to_query] as a flas app and conect it to my [db] and give me a mobile first view - wrap it in a docker on my DO droplet, use the cred from the .env"
denysvitali 2y ago
This is impressively good - I admit that without looking at the URL I felt like visiting an official gov.uk website. Now, as someone else mentioned this might be a bit deceiving, so I wonder in what context could this be used (outside of the gov.uk use case). Their design system is really good, so I don't mind people copying it - hopefully not to the point of Bootstrap's websites
- matteason 2y ago
  One example is the RNIB (Blindness and sight loss charity in the UK) - they use various bits of GOV.UK Frontend on their website, such as the breadcrumbs and accordion on [0]. Many local councils use it too (or a version of it). Because it's so heavily tested for accessibility it makes sense to use in those kinds of contexts where accessibility is a very high priority. GOV.UK Frontend can be heavily customised via Sass variables (eg the font stack in [1]) so the components don't have to look like GOV.UK if you don't want them to. GOV.UK Vue pulls all its styling from Frontend so it's as customisable as Frontend is. [0] https://www.rnib.org.uk/living-with-sight-loss/assistive-aids-and-technology/tv-audio-and-gaming/guide-to-accessible-social-media/ https://www.rnib.org.uk/living-with-sight-loss/assistive-aid... [1] https://github.com/alphagov/govuk-frontend/blob/main/packages/govuk-frontend/src/govuk/settings/_typography-font.scss https://github.com/alphagov/govuk-frontend/blob/main/package...
  - denysvitali 2y ago
    Good job! I'll make sure to consider this option for my next Vue frontend :)
- pglevy 2y ago
  The US Web Design System actually links to various implementations, some community-generated. It's not new to try to make it easier for teams to implement the system using various frameworks. https://designsystem.digital.gov/documentation/implementations/ https://designsystem.digital.gov/documentation/implementatio... Nice work, matteason!
- alias_neo 2y ago
deleted 2y ago
[deleted]
nemesis17 2y ago
Happy to see this! Very neat! On my last gig, I was one of the contributors for the govuk components using playframework/twirl: https://github.com/hmrc/play-frontend-hmrc https://github.com/hmrc/play-frontend-hmrc.
manuelleduc 2y ago
Very interesting. France government is providing a design system as well https://www.systeme-de-design.gouv.fr/ https://www.systeme-de-design.gouv.fr/ A Vue impementation is available too https://vue-ds.fr/ https://vue-ds.fr/
- com 2y ago
  I hadn’t noticed this being rolled out yet in the bits of gouv.fr that I interact with. I especially like the colour palettes. I wish that the Vue storybook showed the demo component first. I wish ALL storybooks did that actually!
londons_explore 2y ago
How does performance compare? Can one still get it to load in 100 milliseconds on a typical broadband connection? (Enough to feel instant)
rmason 2y ago
I've been involved with the open data movement here in Michigan for a dozen years. A lot of us have been inspired by what happened in Britain in 2010 when a change in government allowed them to reimagine Britain's digital footprint. Here's a video by their chief architect detailing the changes. https://www.youtube.com/watch?v=yvB6BqYs2T0 https://www.youtube.com/watch?v=yvB6BqYs2T0 I know there's an O'Reilly video about this guy's boss but I can't find it. Sadly another government change was to end all this development. But in the end near as i can figure though a lot of the bosses left the changes have continued but at a slower rate. No government website in America begins to compare to the clearness and simplicity that exists in Britain nearly a dozen years later.
- scrlk 2y ago
  Speaking as a Brit, it amazes me that Gov.uk somehow managed to avoid getting purged under various administrations from 2010-24. No doubt slowing things down and flying under the radar helped, otherwise it would have probably gotten the chop via some asinine HM Treasury spending review. The Government Digital Service (GDS) was recently moved from the Cabinet Office (pretty close to the centre of power) to the Department for Science, Innovation and Technology. It will be interesting to see if the GDS and Gov.uk can retain the same clout and effectiveness after the move.
  - jen20 2y ago
    I remember hearing a talk in around 2014 where one of the leads from GDS said that Frances Maud made it his business to ensure that no one and nothing interfered with what they were doing. I’m surprised that lasted through the May/Johnson/Truss/Sunak years though.
    - gm3dmo 2y ago
      The GDS had "teeth". Forcing the reset of Universal Credit for instance: https://beeckcenter.georgetown.edu/lessons-uk-universal-credit/ https://beeckcenter.georgetown.edu/lessons-uk-universal-cred... that can't have been an easy decision to take.
- 2y ago
vegancap 2y ago
I'm rarely super proud of our gov, but my god their digital team are killing it, and have been for some years
pcrh 2y ago
Gov.uk is well known for its successful design. Does anyone know of a source that discusses why the design is/was so well designed and implemented? And did anyone get a knighthood out of it?
- epolanski 2y ago
  I sometimes read the GitHub issues, lots to learn.
deleted 2y ago
[deleted]
dangsux 2y ago
[dead]
pimlottc 2y ago
This is cool but I think you should be crystal clear that this is not an official gov.uk project. Like, put the word "unofficial" in the header, project description, etc.
spankalee 2y ago
It'd be really great if these were cross-framework compatible web components.
- langcss 2y ago
  Or better web standards allow everything you need for the common things in a web app to be plain html and css so that porting to JSX etc. is mechanical. For example menu systems, popups etc. Yes there are html css hacks but they are indeed hacks. A checkbox is not a button or a parent menu.
deleted 2y ago
[deleted]
Tajnymag 2y ago
Czech eGovernment has a similar component library with support for pure HTML, React, Vue and Angular. link: https://designsystem.gov.cz/ https://designsystem.gov.cz/
stuaxo 2y ago
Do you generate the updates for this when GDS frontend updates? I think that's how the GDS django support stays up to date, otherwise it will be hard to keep up.
- matteason 2y ago
  GOV.UK Vue doesn't provide any of the Frontend styling directly, it's up to the consuming project to include it. I've done that so that you can add Vue to server-rendered projects which already include Frontend. Frontend updates are often CSS-only, so those will be taken care of by the consuming project updating it. For markup changes and new components, that's a manual process on my side. Markup changes are usually minor and new components are rare, so it's not too much effort to keep up. I work on GOV.UK services in my day job so I've always got an eye on what's coming up.
alphalima 2y ago
Hey Matt, Super cool to see this, and congrats on 1.0! One question, has the GDS stance on Javascript softened, namely progressive enhancement being essentially mandatory [1], since I last worked with you? Is the target for more controlled user groups, non-govuk projects, or do you do SSR to give a usable first HTML response? [1] https://www.gov.uk/service-manual/technology/using-progressive-enhancement https://www.gov.uk/service-manual/technology/using-progressi... Last update: 16 December 2019
- matteason 2y ago
  Haha, hi AL! Yeah the target for this definitely isn't the regular transactional GOV.UK services. I've added a note at the top of the installation guide: > GOV.UK Vue (or any JavaScript library) might not be suitable for your project if it's a standard transactional government service. Make sure you read the guidance on progressive enhancement and building more complex services before starting. GOV.UK Vue is designed to be used in more complex services, like interactive mapping, or internal tools where you've determined that JavaScript is acceptable. GDS are also currently doing exploratory work to investigate how Frontend can be more closely integrated with React/Vue/Svelte/Angular etc, so it's definitely not verboten: https://github.com/alphagov/govuk-frontend/issues/5172 https://github.com/alphagov/govuk-frontend/issues/5172 SSR/SSG is supported (the docs website is an SSG Nuxt app) but I need to do some work to improve how it works for certain components to ensure the state they're first rendered in is usable on its own (eg defaulting accordion components to open on the server-rendered version)
  - alphalima 2y ago
    Nice! I've been using GOVUK stuff for my own purposes for a good-long while now, this should speed up the process. I'll try to plug your thing into Json Forms [1], then I'll be back to the good old days. [1] https://github.com/eclipsesource/jsonforms https://github.com/eclipsesource/jsonforms
- midenginedcoupe 2y ago
  No, it hasn't. Although GDS lost their teeth (and their technical way) some years ago, this rule is still a major win for end users. To be honest, I'm sick of seeing techies fob this one off just because they want to use [insert fashionable framework of the day]. Disclaimer: I have a dog in this fight as I run a forms SaaS aimed at central gov and have also re-implemented the GOV.UK design system. But I've done it the way it was intended and only used JS for progressive enhancement.
smackay 2y ago
Horn tooting time... I wrote, https://github.com/wildfish/crispy-forms-gds/ https://github.com/wildfish/crispy-forms-gds/, a template pack for Crispy Forms for regular, form-based, Django sites. Matt's done a great job and it will certainly take out a lot, if not most of the pain in dealing with accessibility requirements, and in particular the audit process that gov.uk puts projects through to make sure everyone has access to the sites.
- matteason 2y ago
  Oh nice! Have you considered submitting it to https://design-system.service.gov.uk/community/resources-and-tools/ https://design-system.service.gov.uk/community/resources-and... ? There's no Django solution there at the moment
  - smackay 2y ago
    Thanks for that. I didn't realise that the community extended beyond the government departments.
midenginedcoupe 2y ago
A friendly word of warning - I also re-implemented the GOV.UK design system for my form builder SaaS and stood up a demo form showing off the components in a real multi-step form. All the questions were literally "This is question 1" and "This is what a radio group question with a heading looks like" but Google's bots eventually found it and flagged my entire domain on the phishing lists because it thought it was trying to impersonate a real government service. It was an utter shit-show trying to get Google to undo their stupidity, all whilst my customers couldn't access their services. I put up a dumb password prompt at the start of the journey (with the password given on the page) and haven't been flagged again since :fingerscrossed:
- matteason 2y ago
  Oof, thanks, I'll bear that in mind! The docs page has been up for a year or so without any issues but if I put up a more fully-featured demo I'll be careful
KronisLV 2y ago
I like this, feels very usable and not too visually noisy! For the most part, the most feature complete component library I've found for Vue is PrimeVue https://primevue.org/ https://primevue.org/ with their CSS utilities https://primeflex.org/ https://primeflex.org/ and icons too https://primevue.org/icons https://primevue.org/icons There's also a version for React https://primereact.org/ https://primereact.org/ and for Angular https://primeng.org/ https://primeng.org/ and even JSF https://www.primefaces.org/ https://www.primefaces.org/ I wish there were more like that, that carry over across different tech stacks, while also offering nice support for various themes, as well as a lot of decent components.
divbzero 2y ago
The font displayed on GOV.UK Vue is different from the default font for the GOV.UK Design System. This makes sense given that: (a) GOV.UK Vue focuses on components, not styles; and (b) GDS Transport, the default font for the GOV.UK Design System, is apparently not publicly available. https://designnotes.blog.gov.uk/2015/03/11/can-i-use-the-gov-uk-fonts/ https://designnotes.blog.gov.uk/2015/03/11/can-i-use-the-gov...

223 points by matteason 2y ago

ggm 2y ago

Given Labour won the election, and a need to distinguish this from gov.uk, why not cast the space into a rather fetching, 2nd international respecting Red hue?

gherard5555 2y ago
let me choose the color theme... FF0000

NtG_UK 2y ago

Impressive, but haven’t we just handed crooks the perfect tool for crafting their next GOV.UK themed phishing site?

matteason 2y ago
GOV.UK Frontend is already fully open source [0] with comprehensive documentation [1] and GDS encourage community contributions, libraries and resources [2]. If there was any worry about phishing that would be a question for GDS [0] https://github.com/alphagov/govuk-frontend https://github.com/alphagov/govuk-frontend [1] https://design-system.service.gov.uk/ https://design-system.service.gov.uk/ [2] https://design-system.service.gov.uk/community/resources-and-tools/ https://design-system.service.gov.uk/community/resources-and...
- baliex 2y ago
  This is impressive Matt, and I love the design system GDS has developed, but I'm not sure they want non-government services to use the system. From the second link you posted: > Use this design system to make *government* services consistent with GOV.UK Emphasis mine. Are GDS aware of this work? I am in no way affiliated with GDS by the way. -- I'm always wary of this kind of thing not being on a gov.uk domain, which in this case is entirely appropriate because it's not in anyway official or endorsed by GDS. Not for any direct phishing/crooks concerns as raised above, but because it waters down the impact of this kind of thing always being on gov.uk domains. -- Edit: I'd be _very_ surprised if GDS don't take issue with you having "GOV.UK" in the name given that it is no way associated with gov.uk
  - matteason 2y ago
    Non-GOV.UK services are free to use everything except the branding, per [0] Plenty of non-gov organisations use various bits of it, for example the breadcrumbs and accordion on [1] [0] https://www.gov.uk/service-manual/design/making-your-service-look-like-govuk#if-your-service-isnt-on-govuk https://www.gov.uk/service-manual/design/making-your-service... [1] https://www.rnib.org.uk/living-with-sight-loss/assistive-aids-and-technology/tv-audio-and-gaming/guide-to-accessible-social-media/ https://www.rnib.org.uk/living-with-sight-loss/assistive-aid... Edit: Re naming - GOV.UK [Thing] is an established convention for community tools, as shown on [3]. GDS are aware of the project. [3] https://design-system.service.gov.uk/community/resources-and-tools/ https://design-system.service.gov.uk/community/resources-and...
    - baliex 2y ago
      I stand corrected :)
    - esquivalience 2y ago
      This comment was really helpful, and addressed many of my instinctive reactions too.
    - dangsux 2y ago
unsupp0rted 2y ago
Crooks don't need component libraries to mimic government websites. And their victims probably wouldn't notice one way or the other.
- tialaramex 2y ago
  There's an old Microsoft study examining what might help users to not give crooks their credentials. The participants used their real credentials to attempt a real bank transaction, and Microsoft studied what might count as a red flag and stop them from attempting this transaction on a bogus site, variations in UI warnings, layout etc.. Nothing. Nothing you could do stopped users from persisting in their goal, despite all the red flags, humans get stuck on a mission, it's called "Get-there-itis" and it kills private pilots, it causes those "How could you be such a moron?" bridge strikes you see on Youtube, it's a defect in human psychology, you have to design knowing that this defect exists. So what works? Brick Wall UX. When the user can't do the wrong thing they won't. They'll still try of course, but now they can't succeed (in giving their credentials to crooks).
  - mananaysiempre 2y ago
    Jeff Atwood called it the dancing bunnies problem[1]. [1] https://blog.codinghorror.com/the-dancing-bunnies-problem/ https://blog.codinghorror.com/the-dancing-bunnies-problem/
    - tialaramex 2y ago
      The usual term is "Dancing pigs" rather than bunnies: https://en.wikipedia.org/wiki/Dancing_pigs https://en.wikipedia.org/wiki/Dancing_pigs But this isn't quite the same thing, the dancing pigs (or bunnies) are an attraction, the mission mindset / get-there-itis happen after the user has decided to do something, and prevent them from (correctly) deciding not to do it in light of more information.
  - seabass-labrax 2y ago
    Broadly speaking, I agree with the claim - but I'm very suspicious of the study. We'd have to know the methodology to be sure (maybe you have a link to this?), but there are many factors that could lead participants to ignore the warning signs and persevere. For instance, the participants may have been offered a sum of money for their involvement, and believed (consciously or subconsciously) that they had to 'pass' the test to earn it. Or, it could have been pride and the desire not to lose face; perhaps even the sentiment of "the sooner I can finish this daft test, the sooner I can leave"! There is a common attitude in the computer industry that designers/developers know better than users, but software users are representative of the general population and are thus no more or less intelligent than average. I believe it's primarily a lack of understanding of how software works that makes online phishing scams work. 'Brick Wall UX' can only go so far to compensate for that, and it comes at a cost of making software less flexible for the end-user.
deleted 2y ago
[deleted]
dotancohen 2y ago
Just wait until you see what crooks can do with Telegram, or Megaupload, or the Linux kernel, or Microsoft Excel.
- deleted 2y ago
  [deleted]
globular-toast 2y ago
That's a good thing, because people need to learn how to really check the authenticity of a website and not base it on how it looks. See security by obscurity.
samstave 2y ago
Better yet, this creates the ability for prompts such as: "Using design system from govukvue.org create an app that will [check for service] from [this gov.uk url] using the same hooks and design components to give me a dashboard of [benefits] [contacts_for_benefits] [these_other-compnents_to_query] as a flas app and conect it to my [db] and give me a mobile first view - wrap it in a docker on my DO droplet, use the cred from the .env"

denysvitali 2y ago

This is impressively good - I admit that without looking at the URL I felt like visiting an official gov.uk website. Now, as someone else mentioned this might be a bit deceiving, so I wonder in what context could this be used (outside of the gov.uk use case). Their design system is really good, so I don't mind people copying it - hopefully not to the point of Bootstrap's websites

matteason 2y ago
One example is the RNIB (Blindness and sight loss charity in the UK) - they use various bits of GOV.UK Frontend on their website, such as the breadcrumbs and accordion on [0]. Many local councils use it too (or a version of it). Because it's so heavily tested for accessibility it makes sense to use in those kinds of contexts where accessibility is a very high priority. GOV.UK Frontend can be heavily customised via Sass variables (eg the font stack in [1]) so the components don't have to look like GOV.UK if you don't want them to. GOV.UK Vue pulls all its styling from Frontend so it's as customisable as Frontend is. [0] https://www.rnib.org.uk/living-with-sight-loss/assistive-aids-and-technology/tv-audio-and-gaming/guide-to-accessible-social-media/ https://www.rnib.org.uk/living-with-sight-loss/assistive-aid... [1] https://github.com/alphagov/govuk-frontend/blob/main/packages/govuk-frontend/src/govuk/settings/_typography-font.scss https://github.com/alphagov/govuk-frontend/blob/main/package...
- denysvitali 2y ago
  Good job! I'll make sure to consider this option for my next Vue frontend :)
pglevy 2y ago
The US Web Design System actually links to various implementations, some community-generated. It's not new to try to make it easier for teams to implement the system using various frameworks. https://designsystem.digital.gov/documentation/implementations/ https://designsystem.digital.gov/documentation/implementatio... Nice work, matteason!
alias_neo 2y ago

deleted 2y ago

[deleted]

nemesis17 2y ago

Happy to see this! Very neat! On my last gig, I was one of the contributors for the govuk components using playframework/twirl: https://github.com/hmrc/play-frontend-hmrc https://github.com/hmrc/play-frontend-hmrc.

manuelleduc 2y ago

Very interesting. France government is providing a design system as well https://www.systeme-de-design.gouv.fr/ https://www.systeme-de-design.gouv.fr/ A Vue impementation is available too https://vue-ds.fr/ https://vue-ds.fr/

com 2y ago
I hadn’t noticed this being rolled out yet in the bits of gouv.fr that I interact with. I especially like the colour palettes. I wish that the Vue storybook showed the demo component first. I wish ALL storybooks did that actually!

londons_explore 2y ago

How does performance compare? Can one still get it to load in 100 milliseconds on a typical broadband connection? (Enough to feel instant)

rmason 2y ago

I've been involved with the open data movement here in Michigan for a dozen years. A lot of us have been inspired by what happened in Britain in 2010 when a change in government allowed them to reimagine Britain's digital footprint. Here's a video by their chief architect detailing the changes. https://www.youtube.com/watch?v=yvB6BqYs2T0 https://www.youtube.com/watch?v=yvB6BqYs2T0 I know there's an O'Reilly video about this guy's boss but I can't find it. Sadly another government change was to end all this development. But in the end near as i can figure though a lot of the bosses left the changes have continued but at a slower rate. No government website in America begins to compare to the clearness and simplicity that exists in Britain nearly a dozen years later.

scrlk 2y ago
Speaking as a Brit, it amazes me that Gov.uk somehow managed to avoid getting purged under various administrations from 2010-24. No doubt slowing things down and flying under the radar helped, otherwise it would have probably gotten the chop via some asinine HM Treasury spending review. The Government Digital Service (GDS) was recently moved from the Cabinet Office (pretty close to the centre of power) to the Department for Science, Innovation and Technology. It will be interesting to see if the GDS and Gov.uk can retain the same clout and effectiveness after the move.
- jen20 2y ago
  I remember hearing a talk in around 2014 where one of the leads from GDS said that Frances Maud made it his business to ensure that no one and nothing interfered with what they were doing. I’m surprised that lasted through the May/Johnson/Truss/Sunak years though.
  - gm3dmo 2y ago
    The GDS had "teeth". Forcing the reset of Universal Credit for instance: https://beeckcenter.georgetown.edu/lessons-uk-universal-credit/ https://beeckcenter.georgetown.edu/lessons-uk-universal-cred... that can't have been an easy decision to take.
2y ago

vegancap 2y ago

I'm rarely super proud of our gov, but my god their digital team are killing it, and have been for some years

pcrh 2y ago

Gov.uk is well known for its successful design. Does anyone know of a source that discusses why the design is/was so well designed and implemented? And did anyone get a knighthood out of it?

epolanski 2y ago
I sometimes read the GitHub issues, lots to learn.

deleted 2y ago

[deleted]

dangsux 2y ago

[dead]

pimlottc 2y ago

This is cool but I think you should be crystal clear that this is not an official gov.uk project. Like, put the word "unofficial" in the header, project description, etc.

spankalee 2y ago

It'd be really great if these were cross-framework compatible web components.

langcss 2y ago
Or better web standards allow everything you need for the common things in a web app to be plain html and css so that porting to JSX etc. is mechanical. For example menu systems, popups etc. Yes there are html css hacks but they are indeed hacks. A checkbox is not a button or a parent menu.

deleted 2y ago

[deleted]

Tajnymag 2y ago

Czech eGovernment has a similar component library with support for pure HTML, React, Vue and Angular. link: https://designsystem.gov.cz/ https://designsystem.gov.cz/

stuaxo 2y ago

Do you generate the updates for this when GDS frontend updates? I think that's how the GDS django support stays up to date, otherwise it will be hard to keep up.

matteason 2y ago
GOV.UK Vue doesn't provide any of the Frontend styling directly, it's up to the consuming project to include it. I've done that so that you can add Vue to server-rendered projects which already include Frontend. Frontend updates are often CSS-only, so those will be taken care of by the consuming project updating it. For markup changes and new components, that's a manual process on my side. Markup changes are usually minor and new components are rare, so it's not too much effort to keep up. I work on GOV.UK services in my day job so I've always got an eye on what's coming up.

alphalima 2y ago

Hey Matt, Super cool to see this, and congrats on 1.0! One question, has the GDS stance on Javascript softened, namely progressive enhancement being essentially mandatory [1], since I last worked with you? Is the target for more controlled user groups, non-govuk projects, or do you do SSR to give a usable first HTML response? [1] https://www.gov.uk/service-manual/technology/using-progressive-enhancement https://www.gov.uk/service-manual/technology/using-progressi... Last update: 16 December 2019

matteason 2y ago
Haha, hi AL! Yeah the target for this definitely isn't the regular transactional GOV.UK services. I've added a note at the top of the installation guide: > GOV.UK Vue (or any JavaScript library) might not be suitable for your project if it's a standard transactional government service. Make sure you read the guidance on progressive enhancement and building more complex services before starting. GOV.UK Vue is designed to be used in more complex services, like interactive mapping, or internal tools where you've determined that JavaScript is acceptable. GDS are also currently doing exploratory work to investigate how Frontend can be more closely integrated with React/Vue/Svelte/Angular etc, so it's definitely not verboten: https://github.com/alphagov/govuk-frontend/issues/5172 https://github.com/alphagov/govuk-frontend/issues/5172 SSR/SSG is supported (the docs website is an SSG Nuxt app) but I need to do some work to improve how it works for certain components to ensure the state they're first rendered in is usable on its own (eg defaulting accordion components to open on the server-rendered version)
- alphalima 2y ago
  Nice! I've been using GOVUK stuff for my own purposes for a good-long while now, this should speed up the process. I'll try to plug your thing into Json Forms [1], then I'll be back to the good old days. [1] https://github.com/eclipsesource/jsonforms https://github.com/eclipsesource/jsonforms
midenginedcoupe 2y ago
No, it hasn't. Although GDS lost their teeth (and their technical way) some years ago, this rule is still a major win for end users. To be honest, I'm sick of seeing techies fob this one off just because they want to use [insert fashionable framework of the day]. Disclaimer: I have a dog in this fight as I run a forms SaaS aimed at central gov and have also re-implemented the GOV.UK design system. But I've done it the way it was intended and only used JS for progressive enhancement.

smackay 2y ago

Horn tooting time... I wrote, https://github.com/wildfish/crispy-forms-gds/ https://github.com/wildfish/crispy-forms-gds/, a template pack for Crispy Forms for regular, form-based, Django sites. Matt's done a great job and it will certainly take out a lot, if not most of the pain in dealing with accessibility requirements, and in particular the audit process that gov.uk puts projects through to make sure everyone has access to the sites.

matteason 2y ago
Oh nice! Have you considered submitting it to https://design-system.service.gov.uk/community/resources-and-tools/ https://design-system.service.gov.uk/community/resources-and... ? There's no Django solution there at the moment
- smackay 2y ago
  Thanks for that. I didn't realise that the community extended beyond the government departments.

midenginedcoupe 2y ago

A friendly word of warning - I also re-implemented the GOV.UK design system for my form builder SaaS and stood up a demo form showing off the components in a real multi-step form. All the questions were literally "This is question 1" and "This is what a radio group question with a heading looks like" but Google's bots eventually found it and flagged my entire domain on the phishing lists because it thought it was trying to impersonate a real government service. It was an utter shit-show trying to get Google to undo their stupidity, all whilst my customers couldn't access their services. I put up a dumb password prompt at the start of the journey (with the password given on the page) and haven't been flagged again since :fingerscrossed:

matteason 2y ago
Oof, thanks, I'll bear that in mind! The docs page has been up for a year or so without any issues but if I put up a more fully-featured demo I'll be careful

KronisLV 2y ago

I like this, feels very usable and not too visually noisy! For the most part, the most feature complete component library I've found for Vue is PrimeVue https://primevue.org/ https://primevue.org/ with their CSS utilities https://primeflex.org/ https://primeflex.org/ and icons too https://primevue.org/icons https://primevue.org/icons There's also a version for React https://primereact.org/ https://primereact.org/ and for Angular https://primeng.org/ https://primeng.org/ and even JSF https://www.primefaces.org/ https://www.primefaces.org/ I wish there were more like that, that carry over across different tech stacks, while also offering nice support for various themes, as well as a lot of decent components.

divbzero 2y ago

The font displayed on GOV.UK Vue is different from the default font for the GOV.UK Design System. This makes sense given that: (a) GOV.UK Vue focuses on components, not styles; and (b) GDS Transport, the default font for the GOV.UK Design System, is apparently not publicly available. https://designnotes.blog.gov.uk/2015/03/11/can-i-use-the-gov-uk-fonts/ https://designnotes.blog.gov.uk/2015/03/11/can-i-use-the-gov...