Skip to content

Commit

Permalink
Add government department colours to components
Browse files Browse the repository at this point in the history
  • Loading branch information
andysellick committed Apr 27, 2018
1 parent 95061c3 commit c110795
Showing 1 changed file with 120 additions and 0 deletions.
120 changes: 120 additions & 0 deletions docs/rfc-001.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
# Add government department brand colours to gem for use by components

## Problem and background

Organisation pages ([example](https://www.gov.uk/government/organisations/attorney-generals-office)) have their own brand, which includes specific colours applied to links and borders. These colours are pulled in from govuk_frontend_toolkit using a mixin to generate a range of classes. Most organisations have one colour for borders and one for links, even if they are broadly the same colour. These are easily applied to the existing structure of the frontend of whitehall.

The structure of the new organisation pages (to be built in collections) uses components, which are individual and isolated. To reproduce this approach in the same way would mean adding all of the CSS for all of the colour options to all of the components, dramatically increasing the size of the CSS involved and introducing much duplication.

## Proposed solution

Pass component parameters for link_colour and border_color as required, as strings that match the pre-defined list e.g. 'department-for-work-and-pensions'.

Component takes the link parameter and adds a class e.g. 'color-link--department-for-work-and-pensions' to the component and 'color-link' to the relevant elements.

Component looks like this:

```
<div class="app-c-component color-link--department-for-work-and-pensions">
<a href="#" class="color-link">
a link
</a>
</div>
```

Component takes border colour and adds the class e.g. 'color-border--department-for-joy' to the component and 'color-border' to the relevant elements.

Component looks like this:

```
<div class="app-c-component color-border--department-for-joy">
<span class="app-c-component__title color-border">
an element
</span>
</div>
```

Sass in the component looks like this:

```
.app-c-component__title {
border-style: none none none solid;
border-width: 2px;
}
```

This way the component controls the border position and size and the generic classes can be as non-specific as possible.

### In the gem

All colour classes are included in a helper Sass file in the gem.

Sass in the gem looks like this:

```
@import "colours/organisation";
@mixin organisation-brand-colour($selector, $property, $websafe: false) {
@each $organisation in $all-organisation-brand-colours {
.color-#{$selector}--#{nth($organisation, 1)} .color-#{$selector} {
@if $websafe {
#{$property}: nth($organisation, 3);
}
@else {
#{$property}: nth($organisation, 2);
}
}
}
}
@include organisation-brand-colour("link", color, true);
@include organisation-brand-colour("border", border-color);
```

This is included in the `_all_components.scss` file.

CSS in the gem looks like this:

```
.color-link--department-for-work-and-pensions .color-link {
border-color: #8f1111;
}
.color-border--department-for-work-and-pensions .color-border {
border-color: #9f1888;
}
```

etc.

## Other approaches considered

Pass through the hex code of the desired colour and it gets inserted as an inline style attribute

- no absolutely not.
- also we don't have the hex code in the content item, would require more work to add it and would mix styles and backend, undesirable

Pass through the name of the colour and the component will add the style that matches

- would add approx 2KB of CSS to every component where we need this (there are nearly 60 colours)

Generate needed styles inline as a style tag within the template

- given the parameter 'department-for-education' generate a style tag in the template like `app-c-component--<%= link_colour %> { color: <%= get_colour(link_colour) %>}`
- we don't do inline styles
- would need a helper method that already contained all the hex codes associated with their department names, again mixing styles and backend, which is undesirable

## Decisions explained

- originally wanted a flatter class structure e.g. `.color-link--department-for-agriculture { }` but this is overridden by the default styles for :visited etc. so either we have to write all those out explicitly or add an extra class (the extra class seemed a shorter way of doing it and allows more flexibility in future e.g. if a component suddenly required one link that wasn't that colour, you could just omit the class on that link)
- want to avoid any generic rules like `.color--no-10 a {}` as this could cause problems for developers later
- writing general classes for colour like this avoids having to write component specific classes, even though this goes against the component principle of them being isolated (although most components rely on some external CSS already, e.g. reset)

## Assumptions made (may not be true)

- specific class for border or link can be applied to all elements, this may not be the case if the component is simply passed a block of HTML, in which case we might have to go back and modify this approach to the undesirable `.color-no-10 a {}` approach

## Likely problems

- can we have any components using this that aren't in the gem? Due to the tight coupling it seems like they should be in the same place as the colours CSS but that would mean promoting more components to the gem, more work, less time

0 comments on commit c110795

Please sign in to comment.