owid-grapher icon indicating copy to clipboard operation
owid-grapher copied to clipboard

Apply style guide to topic and article pages

Open larsyencken opened this issue 2 years ago • 0 comments

Effectively, going through the pages on Figma and implementing/overhauling each area.

There should be a 1:1 parity between Marwa's Figma naming conventions and our CSS such that it is trivial to apply "H4 Semibold" styles to any element and have it look exactly the same as it does in Figma.

I think accruing the changes on a staging server until it's all done and then merging into master might be the best way to go about it.

Top priority Foundation tasks:

  • [x] Typography (mixins for each of the 20 styles, all existing typography converted to use one of these mixins)
  • [x] Colour (swap out all pre-existing colour variables and hexcodes in our CSS for ones from the new palette)
  • [x] Grid (update our container sizes and convert column logic to use CSS grid instead, update grapher auto-sizing logic)

Components:

  • [ ] Icons
  • [ ] Anchor
  • [ ] Banner
  • [ ] Breadcrumb
  • [ ] Button
  • [ ] Code Block
  • [ ] Content Switcher
  • [ ] Dropdown
  • [ ] Editorial Components
  • [ ] Link
  • [ ] Lightbox
  • [ ] Navigation
  • [ ] Page Header
  • [ ] Slideshow
  • [ ] Tab
  • [ ] Tooltip

larsyencken avatar Aug 24 '22 13:08 larsyencken