March 12, 2020: Evaluate the necessity of using a CSS framework

Present: Cindy, Justin, Michelle, Ned, Ted

Google Doc

Notes:

1. Whether or not we need a css framework? If we do need, tech evaluation process should be applied

Usually when we pick a technology, we do some sort of evaluation process: list requirements, pick a few options and compare them (do they meet requirements). We can start by listing requirements for a CSS framework.

Requirements:

• Responsive design (media queries) ❌

• Style native HTML elements without classes ❌

• Easy to override defaults ❌

• Accessibility
  • If the framework includes html, the html should be accessible ❌
  • Hover and focus states should be clearly defined and customizable ⚠️
  • Works with UIO ⚠️

• Framework should be modular and we can only import the parts we need ⚠️

• If we want to use Sass/Stylus/Less/PostCSS, does the framework support it? ✅
  • Using a preprocessor seems helpful—storing global values in a variable.
  • Cindy/Justin have used Stylus.
  • Uses for preprocessors: modularity, less repetition.
  • Ted has been enjoying Sass. Ned has experience. (SassMeister)

• Does it include a normalize/reset? ✅
  • TODO: Look into options for a good modern normalize/reset stylesheet.

Decisions:

• Use Sass (SCSS) as a preprocessor.

• TODO: Don’t use a framework (Ted: remove Bulma).

• TODO: Research an appropriate normalize/reset stylesheet (Ted: research normalize.css, CSS Tricks, share evaluation requirements on Monday, then open a GitHub issue with several options, link to demos/examples).
  • Load time
  • Supported browsers
  • Be available in sass: so that it can be compiled with other sass file to reduce the size of the compiled css file

• TODO: Decide on browser support using BrowserList, add Autoprefixer config (docs) (Cindy: evaluate browser support, to discuss Monday).

• TODO: Review Stylelint configuration/rules (Ted: review stylelint-config-standard).

Next Meeting

1. Structure of website
1. Ned: give walkthrough of system (API + Nuxt).
2. Cindy and others can share improvement ideas.
2. Normalize/Reset evaluation criteria
1. Ted: share proposed evaluation criteria
3. Browser support
1. Cindy: share proposed browser support