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

Fix global styles for unbranded layout #1726

Merged
merged 2 commits into from
Oct 28, 2022
Merged

Conversation

lfdebrux
Copy link
Member

@lfdebrux lfdebrux commented Oct 27, 2022

I noticed that one of the text lines wasn't formatted correctly on the password page, because it was missing the govuk-body class. Digging deeper, it seems that we used to expect that the GOV.UK frontend global styles would work for pages using the 'unbranded' stylesheet, but it stopped in the rework for v13.

The issue is that we import the govuk-frontend settings in the unbranded template, before we set the govuk-global-styles variable to true. Previously this was fine because we were setting that variable strongly, however in v13 we added the !default thingy [1], because we want users to be able to override the value in settings.scss. I think this behaviour is unavoidable, but luckily there is a workaround; we were only importing the settings to get govuk-body-background-colour, but the value of that is just #fffff (white). We can set the value to white without needing to import any settings. If the GOV.UK Design System decides to go with an off-white body background colour in the future, that's also fine, the point of the unbranded template is not to look like GOV.UK, so we're not losing anything by hardcoding the value.

@lfdebrux
Copy link
Member Author

lfdebrux commented Oct 28, 2022

Another option that feels less hacky is to copy what the GOV.UK Frontend review app does, and have a CSS class to remove the footer:

# unbranded.html

...

{% set htmlClasses = "app-no-canvas-background" %}

...

# unbranded.sass

@import "prototype.scss"

.app-no-canvas-background {
  background-color: $govuk-body-background-colour;
}

https://github.com/alphagov/govuk-frontend/search?q=app-no-canvas-background

The advantage of this is that it can go after the import of GOV.UK Frontend Sass, so the constant $govuk-body-background-colour will get imported in the way it is supposed to rather than us having to import by hand.

The fact that this wasn't done originally though suggests that maybe this isn't a complete solution? Not sure 🤔

@lfdebrux
Copy link
Member Author

Discussed with @joelanman , we agreed that we want the background to be white and don't care about what the value of $govuk-body-background-colour is, so we can sidestep this issue. Will update the PR now.

I noticed that one of the text lines wasn't formatted correctly on the
password page, because it was missing the `govuk-body` class. Digging
deeper, it seems that we used to expect that the GOV.UK frontend global
styles would work for pages using the 'unbranded' stylesheet, but it
stopped in the rework for v13.

The issue is that we import the govuk-frontend settings in the unbranded
template, before we set the govuk-global-styles variable to true.
Previously this was fine because we were setting that variable strongly,
however in v13 we added the `!default` thingy [[1]], because we want
users to be able to override the value in `settings.scss`. I think this
behaviour is unavoidable, but luckily there is a workaround; we were
only importing the settings to get `govuk-body-background-colour`, but
the value of that is just `#fffff` (white). We can set the value to
white without needing to import any settings. If the GOV.UK Design
System decides to go with an off-white body background colour in the
future, that's also fine, the point of the unbranded template is not to
look like GOV.UK, so we're not losing anything by hardcoding the value.

[1]: #1640 (comment)
Copy link
Contributor

@joelanman joelanman left a comment

Choose a reason for hiding this comment

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

thanks!

@lfdebrux lfdebrux merged commit 24b37ae into v13 Oct 28, 2022
@lfdebrux lfdebrux deleted the ldeb-fix-password-page-fonts branch October 28, 2022 14:04
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.

2 participants