[Research] Select a CSS framework for new design

[richard015ar]

Plank sent us a new design for PB Directory: https://pressbooks.invisionapp.com/overview/Pressbooks-Directory---01-ckl8c5i6r00ju010a5osc08vx/screens. Steel and Leigh have made some desired changes on that design. Considering the presented design and changes suggested, we need to research and decide what CSS implementation we will use in the new implementation. Oscar mentioned Tailwind CSS, Ned mentioned Cube and https://sass-guidelin.es/, especially the 7-1 pattern: https://sass-guidelin.es/#the-7-1-pattern, Ho Man mentioned BootstrapVue. This new refactor will be created with Vue.js, so we need to consider how different frameworks / approaches could be implemented using vue.js.

• [x] Oscar create a document with ~3 options, and add pros and cons for each one: https://docs.google.com/document/d/16u713kSuteZ4f0-Jm2lQ0jb1wlnxUEuXj_Sng_mW_W0/edit?usp=sharing.
• [x] Oscar create Vue.js implementation examples [header + book card] with each framework and provide any other relevant information to help the team assess each option.
• [x] Steel, Ho Man, Ricardo review Oscar's document & prototypes & test/experiment with any of the frameworks, as desired
• [x] Hold team meeting to review recommendations and decide upon a framework to use
• [x] Each team member receive enough training to begin using comfortably

As a result of this task, we should agree with one approach and implement it in https://github.com/pressbooks/pressbooks-book-directory-fe/issues/209

[SteelWagstaff]

@arzola created a sample implementation with Tailwind vite-tailwind.zip. It can be set up locally with yarn: yarn run dev