Site wide css audit

[jbubar]

In the dev meeting on 4/6/21 we audited the sites css

[jbubar]

replace all color codes with variables

[Lol-Whut]

• standardize naming conventions for headers. For example, on the events page, the main div surrounding the header could be "header-container" or "header-container--events" if we need something more page specific, the div around the hero image could be "hero-container" and the div around the content next to the hero image could be "header-contents". If these are pretty standardized we could use them across most or all pages.
• edit confusing names -- for example, on the events page there is a button in the left column that has a div around it and the div has a class called "class-btn", which suggests that the div is a button. Maybe something like "button-container" would be more appropriate.
• get rid of commented out code that we no longer need to keep
• figure out in what instances we want to use px, vh/vw, em, %, and rem, since right now their use is pretty sporadic.

[akibrhast]

Add to docs!

• Don't make arbitrary class names without double checking with UI and senior devs
• Don't use raw color codes without double checking with UI and senior devs

[abenipa3]

CSS in _wins-page.css

• Mobile for Button and Heading need to be fixed.
• Need to update the mobile code.
  • Need to switch .wins-btn with btn--wins
• Questions:
  • Where else does the .btn-xl appear?
• Google Doc Notes

[averdin2]

• Having classes for typography
• Classes naming convention resources?

[averdin2]

• Another good reason to use classes to style instead of just targeting a specific HTML element is what if we change that element to something else. It could break the CSS if the HTML element is changed.