CSS Refactoring

[jglovier]

It's time to level up our CSS game. Our current CSS is not up to best practices for CSS authoring, and has a lot of room to improve it with some newer CSS approaches that have developed since I started writing the CSS a few years ago. There has a number of problems, or areas for improvement. Here are the highlights:

Problems

• currently the CSS is unwieldy and inconsistently organized
  • this makes it harder to maintain for those who do know the codebase
  • and harder to contribute to when you are new; i.e. how do I know where to put the styles, or if there are existing styles for this thing? (although we need to address that with a Styleguide, too)
• we are using bootstrap, a bootstrap theme, and a bunch of custom styles
  • not optimal for contributing and maintenance
  • constraining because of existing implementation and paradigms of the framework

Opportunities

• move us to more modular and utility class/atomic CSS approach
  • will make it easier for maintainers and contributors by reducing the amount of CSS developers need to write
  • will make it easier for maintainers by keeping the total CSS light
• move off of Bootstrap for styles, and use only it for the javascript behaviors we need
  • will give us more flexibility in how we want to approach the styling, from class name structure to property choice and order, etc

Gameplan

• tidy up the structure of the files CSS refactoring #793
  • get the temp styles into the appropriate partials
  • reorganize stylesheets accordingly
• Implement a component/utility class solution Add Basscss utility classes #797
  • Leaning toward Basscss (looked into Tachyons and Gravitons too)
• Remove custom Bootstrap theme styles into our own partials Remove bootstrap theme file #804
• Implement utility classes on things that don't need to be components
• Make existing styles more componentized
• Port our custom Bootstrap stylesheet into components or utility class approach
• Remove Bootstrap for styling
• Implement Flexbox based layout

Work is taking place on the css-cleanup branch.

🛠 💻 ⚖

---

cc @HospitalRun/core-maintainers

[billybonks]

what do you think about separating route stylesheets from general reuse component stylesheets

[billybonks]

i can extract basscss into an ember addon

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.