What CSS framework should we use?

[RobjS]

Currently, the theme comes with Bourbon and Neat, but we hardly ever use those for new projects anymore, so it might make sense to replace them with something else. But what? I guess the obvious candidates are govuk-frontend or the Helpful/GovPress pattern library (I'm not sure which is the correct repo for that - https://github.com/dxw/hd-fractal-patterns? https://github.com/dxw/govpress-design-system?).

@calumryan @anthonyomalley Do you have thoughts on this? Ideally I think we want something that can be installed as a Yarn package (like the govuk-frontend), so we can just update it when a new version is available.

[calumryan]

The current patterns library code is https://github.com/dxw/hd-fractal-patterns which uses Tachyons. It's been a while since that was updated though and hasn't had an official release since 2018. Therefore, it's missing some more modern CSS features like Grid for layouts plus some other limitations and unresolved issues.

The govuk-frontend might be a good foundation for accessible components like accordions. This could be combined with something else to pick and choose utility CSS parts such as Flexbox and Grid layouts that don't conflict with each other. Tailwind is a possibility, somewhat similar to Tachyons but has more regular, recent updates including Grid so might not be too difficult to learn. It also has some build options to remove unused CSS to make it less bloated.

[RobjS]

@anthonyomalley Do you have any thoughts on this?

Now we have the govuk-theme (https://github.com/dxw/govuk-theme), I'm wondering if the govuk-frontend might be enough as a base framework, and then we could pick what to put on top of that on a case-by-case basis, as and when we need something more sophisticated. Or do we want a second theme that uses something completely separate from govuk-frontend?