Componentize the website

[ExperimentsInHonesty]

Overview

We need to make the website more modular easier to design and develop new content. We are going to start with reusable components

Action Items

• UI/UX
  • Create a new page in Figma that is all the component examples that make up a webpage on our site.
    • Headers: different layout types
    • etc.
  • Review with Design team to determine ideal choices
    • Create style guide.
• Development
  • scss files for web components (e.g., headers, white box in body, etc.
  • see notes from Remove Bourbon SASS framework #720 regarding removing mixins vs bootstrap (decision has not been made but can be discussed).

Resources/Instructions

Main figma file

[daniellen00]

Currently working on this- will have a draft ready for comments/edits

[daniellen00]

Progress: Completing this- It's taking longer than expected because the website changed compared to the Figma pages, so I have been "inspecting Element" on the site to find new measurements.
Blocks: Limited time
Availability: Thursday, Friday, Saturday, Sunday
ETA: Trying to finish by tomorrow 6/6

[daniellen00]

First draft: https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=1695%3A13302

Still need to adjust several parts, but getting there!

[ExperimentsInHonesty]

@ye-susan will coordinate with @daniellen00 to get consistency - so that page title and other heading names are changed to be what is reflected in the existing typograph scss https://github.com/hackforla/website/blob/gh-pages/_sass/elements/_typography.scss

[daniellen00]

Utilized Sass Github folders for consistency between website and Figma per Susan's suggestion, and consulted with her on questions.

Also discussed Storybook option (via Cynthia) for a 'living style guide' with Susan. Will consult with the developers about this more today.

[daniellen00]

Determined with Susan that Storybook and other automatic component generating programs like Styleguidist/Docz won't work for the site after all (mostly because they're React-focused).

[daniellen00]

Plan after weekly meeting discussion: I will work with @ye-susan to create a Figma file with all of the website components that will match up with a corresponding Github wiki page.

[daniellen00]

Progress: I had very limited time this week because of a final class project, but Susan and I discussed the logistics of creating a living style guide / component library page, and I did additional research. I'll have much more time this week to move forward with Susan.

[ye-susan]

Progress: Also limited time this week, but I've laid out some of the typography and components of the project page onto a demo Component page.

[alexandrastubbs]

Dependency: need to discuss designs across website currently between product and designers

[daniellen00]

Will discuss working with UX Designers on Style Guide after weekly website meeting.

[daniellen00]

Small to large components ('atoms' to 'organisms' in atomic design): https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=1695%3A13302