Utilise CSS variables across the site
Nobody has claimed this yet.
- Dominant language
- MDX
- Stars
- 4.5k
- Forks
- 226
- Avg merge
- 2d 22h
- Merged PRs (30d)
- 4
Description
We have a lot of hardcoded colour and spacing values across our CSS files. We also have a lot of similar colours that could be consolidated into a single colour variables.
Here's a small slice of the different variables that we have across the site:
| values | number of files | total occurrences |
|---|---|---|
| #333 | 1 | 1 |
| #eee | 2 | 2 |
| #00a453 | 3 | 3 |
| #f2f2f2 | 2 | 2 |
| #ffdf3f | 1 | 2 |
This isn't included spacing values or rgba values.
To ensure a consistent visual experience across the site, we should look to use CSS variables where possible.
This means defining the CSS variables in the global.css file, and using them in other CSS files or within style blocks.
This will also allow us to more easily add a dark mode, should we decide to add one at a later date.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating global.css and inventorying the other CSS files and style blocks that contain hardcoded colours, spacing values, or rgba values. Compare repeated values and consolidate suitable ones into variables defined in global.css, then verify that the site keeps a consistent visual appearance across the affected styles.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend
- Issue type
- Refactor
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100