Slush: Refactor - Plan out how to convert SCSS into CSS

[machikoyasuda]

Research shaping ticket

[machikoyasuda]

The easiest way to start:

• Start converting one file at a time from SCSS to CSS written in a SCSS file: Convert mixin to regular media query, convert nesting into regular CSS.
• Prioritize the files that are of repeated styles (header, footer, component blocks)
• Don't actually change the SCSS pipeline.
• Convert SCSS variables to CSS variables

[machikoyasuda]

Component-specific changes:

• Button override file - Re-create button using Bootstrap CSS Variable overrides for Primary and Outline Primary

[machikoyasuda]

Combine some files, to reduce overload:

• Combine Base, Button, Layout, Main Content, Footnotes, Pills
• Convert Header and Page Header
• Combine/Convert Table, Filterable Table
• Newsletter
• TOC & Content
• Utilities
• Home, Imaged Section
• Contactless pages: Combine Go, How to Go

[machikoyasuda]

Prioritize: Being able to have the same base Bootstrap CSS Variable overrides for links, buttons and share styles for Header, Footer.

Prioritize using and creating utilities, so that we have fewer CSS files/styles

[machikoyasuda]

Moving forward, only write CSS and try to only write utilities.

[machikoyasuda]

Proof of concept PR: https://github.com/cal-itp/mobility-marketplace/pull/574

• Figured out how to best convert the media query mixins to CSS

I think it would take 2 days, including testing, to do a meaningful chunk of the conversion, scoped to all the non-page file SCSS. If we use the above PR as a starting point, probably just 1 extra day - including testing.

[machikoyasuda]

Marking this as closed b/c the research, scoping and plan has been created in the above comments.