Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/design system #352

Merged
merged 7 commits into from
May 20, 2024
Merged

Feature/design system #352

merged 7 commits into from
May 20, 2024

Conversation

KevinEtchells
Copy link
Contributor

@KevinEtchells KevinEtchells commented May 14, 2024

Context

Looking at building an overlay for the gov.uk design system, to provide a more bespoke look and feel. This is work-in-progress, but the work so far can be merged.

Changes proposed in this pull request

image

The way this works

  • Changes to the HTML are avoided where possible, to make this as compatible as possible with normal gov.uk. Where there are small changes these have been added to a separate readme.
  • A CSS file sits on top. This has a product-colour CSS variable to allow us to customise this per product. Adds rounded corners to buttons and inputs. Removes the crown logos. Adds the i.AI logo. A few other tweaks here and there.

Update latest CSS bundle

Tweak response feedback spacing
.govuk-header__navigation-list {
margin-top: 0.75rem;
}
@media (min-width: 769px) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks different from how GDS do media queries. Is this ok?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's a good flag @wpfl-dbt. Usually the GDS approach would be better, but as this CSS could also be used outside of Sass I'd suggest this is okay here.

/* BUTTON */
.govuk-button {
border: 0;
border-radius: var(--border-radius);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have a vague memory that Firefox needs a different solution for border-radius -- does this needs belt and bracing? Or have times a-changed?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or is this kind of thing literally why we use Sass?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Firefox should play nicely with border-radius nowadays :-)
Sass doesn't really add anything in this context. I'm building it in a way so it doesn't rely on Sass (even though it's a .scss file) for compatibility across projects.

@@ -15,7 +15,7 @@ <h1 class="govuk-heading-l">Sign in</h1>

<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">

<div class="govuk-form-group">
<div class="govuk-form-group govuk-!-margin-bottom-2">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TIL ! is valid CSS

Copy link
Collaborator

@wpfl-dbt wpfl-dbt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Basically fine with a few queries almost all derived from my unfamiliarity with Sass

@lmwilkigov
Copy link
Collaborator

LGTM, both code wise and aesthetically!

@KevinEtchells KevinEtchells merged commit a7b0b6d into main May 20, 2024
9 checks passed
@KevinEtchells KevinEtchells deleted the feature/design-system branch May 20, 2024 12:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants