Skip to content

Instantly share code, notes, and snippets.

@hannalaakso

hannalaakso/document-govuk-fe-in-govuk-ds.md

Last active October 30, 2018 14:31
Show Gist options
  • Save hannalaakso/b35615dcd13a65bc622966b987a0f136 to your computer and use it in GitHub Desktop.
Save hannalaakso/b35615dcd13a65bc622966b987a0f136 to your computer and use it in GitHub Desktop.
Download ZIP
Audit the Design System to see what in GOV.UK Frontend has not been documented there
Raw
document-govuk-fe-in-govuk-ds.md

RFC: Audit the Design System to see what in GOV.UK Frontend has not been documented there

Note: Some of these are documented in Updating your code (but not everyone will go through that page).

https://trello.com/c/TC6tcdKA/1045-audit-the-design-system-to-see-what-in-govuk-frontend-has-not-been-documented-there

1. Components not documented in the Design System

  • Hint
  • Label
  • Number, tel, password etc. inputs because DS has only "Text input" - should it be called just "Input"?

2. Classes not documented in the Design System

  • .govuk-form-group
  • (.govuk-label--s, .govuk-label--xl etc - already done)
  • .govuk-\!-display-inline
  • .govuk-\!-display-inline-block
  • .govuk-\!-display-block
  • .govuk-body-xs
  • govuk-header__navigation--end

3. Mixins, variables and functions that are clear candidates for inclusion in the Design System (in brackets the potential Design System page to include them on)

Set breakpoints (new page: Utilities?)

http://govuk-frontend-review.herokuapp.com/docs#settings/media-queries-variable-govuk-breakpoints

Use media queries (new page: Utilities?)

http://govuk-frontend-review.herokuapp.com/docs/#helpers-mixin-govuk-media-query

Use media query for retina images (new page: Utilities?)

http://govuk-frontend-review.herokuapp.com/docs/#helpers-mixin-govuk-device-pixel-ratio

Set typography scale (page: Typography) - do want them to change these, Dave thinks that NTA could be on certain font-sizes

http://govuk-frontend-review.herokuapp.com/docs/#settings/typography-variable-govuk-typography-scale

Set font and responsive font (page: Typography)

Font weight (page: Typography) - we already give the classes in Typography

Target IE8 (or "not IE8") (new page: Utilities?)

Set compatability with legacy repos (new page: Utilities?)

Set gutters (page: Layout)

http://govuk-frontend-review.herokuapp.com/docs/#settings/variable-govuk-gutter

Set borders (page: Typography ??)

Useful utilities (new page Utilities?)

Template variables

  • pageTitle
  • assetPath

4. Probably less likely to be used variables, mixins and functions that probably shouldn't be included in the Design System

Common typography styles

http://govuk-frontend-review.herokuapp.com/docs/#helpers-mixin-govuk-typography-common

Set text colour and print colour

http://govuk-frontend-review.herokuapp.com/docs/#helpers-mixin-govuk-text-colour

Focus styles

Link styles

Setting font family

Colours

Grid - if we want to support consumers making their own grids?

These are covered in FE installation docs, I don't think they belong in DS?

For development only

http://govuk-frontend-review.herokuapp.com/docs/#settings/media-queries-variable-govuk-show-breakpoints

5. These should be made private

6. Should these be deprecated

http://govuk-frontend-review.herokuapp.com/docs/#tools-function-govuk-em

7. We don't want to document these

Set global styles

http://govuk-frontend-review.herokuapp.com/docs/#settings-variable-govuk-global-styles

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment