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

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

Mar 13, 2020

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).

 

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