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 Sass rounding issues with width of grid columns #3199

Merged
merged 3 commits into from
Jan 24, 2023

Conversation

colinrotherham
Copy link
Contributor

@colinrotherham colinrotherham commented Jan 23, 2023

This PR changes our grid column percentage sizes so they're rounded to the maximum precision available to Sass

By rounding ⅔ to 66.6666% 66.6667% (note the 67 not 66) we see browsers render our one-third and two-thirds grid column widths to whole pixels, which fixes #2361

It appears that no change in node-sass decimal precision is necessary 🎉

Grid column rounding

But we can go further by calculating two-thirds: (200% / 3) to add another decimal place:

Before

.govuk-grid-column-two-thirds {
  width: 66.6666%;
  float: left;
}

After

.govuk-grid-column-two-thirds {
  width: 66.66667%;
  float: left;
}

Note: Unlike LibSass (and node-sass) Dart Sass will output 66.6666666667% with 10 decimal places of precision

@colinrotherham colinrotherham added 🐛 bug Something isn't working the way it should (including incorrect wording in documentation) layout labels Jan 23, 2023
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3199 January 23, 2023 17:07 Inactive
@owenatgov owenatgov self-requested a review January 24, 2023 15:02
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3199 January 24, 2023 15:06 Inactive
@colinrotherham
Copy link
Contributor Author

@owenatgov Pushed up a CHANGELOG entry. Thanks

(Also noticed a previous fix was missing a PR number, let me know if that change is unwelcome and I'll remove)

- [#3150: Add missing `Event` polyfill to accordion component JavaScript](https://github.com/alphagov/govuk-frontend/pull/3150)
- [Correcting incorrect closing double quotes in pagination Nunjucks](https://github.com/alphagov/govuk-frontend/pull/3156)
Copy link
Contributor

Choose a reason for hiding this comment

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

Whoops. Thanks for fixing that 😁

@colinrotherham
Copy link
Contributor Author

The Node.js v4 download for our LibSass v3.3.0 check is throwing an HTTP 500 😶

@colinrotherham
Copy link
Contributor Author

The Node.js v4 download for our LibSass v3.3.0 check is throwing an HTTP 500 😶

It's back up now, checks all passing

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 bug Something isn't working the way it should (including incorrect wording in documentation) layout sass / css
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Minor rounding issues with width of grid columns due to Sass precision
3 participants