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

Document (non-contentious parts of) Sass settings layer #748

Merged
merged 4 commits into from
Jun 4, 2018

Conversation

36degrees
Copy link
Member

@36degrees 36degrees commented Jun 1, 2018

This is the first step in clarifying what comprises the public API of Frontend.

This adds Sassdocs for the following files:

  • settings/_assets.scss
  • settings/_colours-applied.scss
  • settings/_compatibility.scss
  • settings/_global-styles.scss
  • settings/_ie8.scss
  • settings/_measurements.scss
  • settings/_media-queries.scss
  • settings/_typography-font-families.scss (renamed from _typography-font-stacks.scss)
  • settings/_typography-font.scss

That leaves some files in settings which are not using Sassdoc:

  • settings/_colours-organisations.scss
  • settings/_colours-palette.scss
  • settings/_spacing.scss
  • settings/_typography-responsive.scss

I've left these (for now) because they all contain a large number of variables, and we've discussed moving them to maps and adding helper functions which will give us more control over e.g. deprecating colours.

As part of these changes we've also:

  • Defined private or public access for all settings
  • Prefixed private variables with an underscore
  • Made settings !default where it makes sense to do so
  • Moved the button variables into the button component
  • Refered to font families rather than font stacks consistently
  • Renamed nta-light to font-family-nta
  • Correctly used abstracted $govuk-font-family-tabular for tabular number mixins, rather than referencing nta-light-tabular directly
  • Abstracted away sass-mq, and expose our own settings in our public api

The media queries in the grid tests have changed because they used to use the default sass-mq breakpoints, and now they're using the ones defined in our settings.

https://trello.com/c/B8OCSU8R/759-agree-on-and-document-public-api-for-govuk-frontend

- Refer to ‘font-families’ rather than ‘font-stacks’ throughout
- Rename ‘govuk-nta-light’ to ‘govuk-font-family-nta’
- Add settings to groups in Sassdoc config
- Make ‘actual’ settings !default
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-748 June 1, 2018 13:56 Inactive
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-748 June 1, 2018 15:53 Inactive
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-748 June 4, 2018 10:03 Inactive
@36degrees 36degrees changed the title [WIP - Do not merge] Document sass Document non-contentious parts of Sass settings layer Jun 4, 2018
The fact that we’re using sass-mq is an implementation detail, so we shouldn’t expose it via our public API. This means wrapping their settings with our own settings, and trying to minimise its footprint throughout the app.
@36degrees 36degrees changed the title Document non-contentious parts of Sass settings layer Document (non-contentious parts of) Sass settings layer Jun 4, 2018
Copy link
Contributor

@alex-ju alex-ju left a comment

Choose a reason for hiding this comment

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

Great restructure and clean-up! 💯

@@ -115,7 +119,7 @@ describe('grid system', () => {
box-sizing: border-box;
width: 100%;
padding: 0 15px; }
@media (min-width: 46.25em) {
@media (min-width: 40.0625em) {
Copy link
Contributor

Choose a reason for hiding this comment

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

What's the reason behind the change of these values?

Copy link
Member Author

Choose a reason for hiding this comment

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

Good question - it used to use the default sass-mq breakpoints, now it's using the ones defined in our settings.

Copy link
Contributor

Choose a reason for hiding this comment

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

Could we add this to the PR comments?

Copy link
Member Author

Choose a reason for hiding this comment

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

Done.

@kr8n3r
Copy link

kr8n3r commented Jun 4, 2018

this looks solid, happy to approve it now, but i guess others should have a look ( as they've been involved in the discussion)
edit: Alex beat me to it

@36degrees 36degrees merged commit a051ee9 into master Jun 4, 2018
@36degrees 36degrees deleted the document-sass branch June 4, 2018 11:42
@36degrees
Copy link
Member Author

Argh, CHANGELOG.

@hannalaakso hannalaakso mentioned this pull request Jun 14, 2018
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

4 participants