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

[daniellen00]

Progress: Added class names for all of the components (via Inspect Element) for existing site pages

Blocks: Had limited time this week because of final project

Availability: Will have more time this week to organize everything.

[daniellen00]

Deliverable: List all of the final components and class names, with accompanying notes re: changes developers should make

[daniellen00]

Progress: Listed components and class names for comparison. Would like to discuss with @ye-susan before providing notes for recommended changes.

[daniellen00]

Progress: Finished 'CSS dump' for all components, continuing to work on recommendations for first phase of standardizing main site components (buttons, page card, etc). Will attend Developers meeting this Tuesday to finalize.

Blocks: Limited time this past week

[daniellex0]

Update: I didn't have enough time to work on this because of an unexpectedly slammed week, but will work on it this week and attend Dev meeting to discuss recommendations.

[daniellex0]

Progress: Currently getting into the weeds with naming conventions, but hopefully survey and further discussion will provide direction. Will attend dev meeting again this week and try to lock down recommendations.

Blocks: limited time this past week, and fear of making wrong decisions for the future of the site!

[daniellex0]

Progress: Created classname rules for buttons with feedback from dev team- will wait to hear feedback at website team meeting before creating Github issue to make changes.

Blocks: limited time

[daniellex0]

Next steps: Add Button section to Style Guide file in Figma with all standards/class names. Then create Github issue to enact changes across the site.

[daniellex0]

Status: I didn't get to work on this because this insane election week took over my life and psyche, but I will finish it asap now that I am back to normal

[daniellex0]

Progress: Added Button Section to Style Guide in Figma.

Next steps: Do more testing on class changes, run any questions by Dev Meeting on Tue. Discuss Style Guide layout/Figma functionality with Yuiko. Continue onto other components.

[daniellex0]

Progress: Finished recommended changes to standardize buttons across site. Just have a few questions and should be ready to implement

Next steps: Move onto next components

[daniellex0]

Progress: Continued adding remaining pieces to design system including documentation.

Blockers: Waiting for Bonnie to return to ask about reworking the wiki, having a dedicated webpage for components, etc. Also busy schedules.

Next Steps: Finish dev documentation, finish standardizing layouts / misc cards / typography classes, finish implementing auto layout and componentizing design system.

ETA: 2 weeks

[daniellex0]

Progress: Standardized more mobile versions of pages, created dev issues that will help with wrapping up the design system, continued adding remaining pieces to design system including documentation.

Blockers: Waiting for dev agreement about reworking the wiki, having a dedicated webpage for components, etc. Also busy schedules.

Next Steps: Finish dev documentation, finish standardizing layouts / misc cards / typography classes, finish implementing auto layout and componentizing design system.

ETA: 2 weeks

[daniellex0]

Progress: Made progress with dev documentation of DS now that there us agreement about wiki redesign, standardized more mobile versions of pages on site, created more dev issues that will help with wrapping up the design system, continued adding remaining pieces to design system including documentation.

Blockers: Waiting for agreement about having a dedicated webpage for components, etc.

Next Steps: Finish dev documentation, finish standardizing layouts / misc cards / typography classes, finish implementing auto layout and componentizing design system.

ETA: 2 weeks

[daniellex0]

Progress: Moving forward with wiki sidenav with expandable arrows, deciding not to use Storybook for dev documentation because it is too complicated to implement (even with React, not to mention without)- dedicates webpage is looking like best option, standardized more mobile versions of pages on site, created more dev issues that will help with wrapping up the design system, continued adding remaining pieces to design system including documentation.

Blockers: agreement about having a dedicated webpage for components

Next Steps: Finish dev documentation, finish standardizing layouts / misc cards / typography classes, finish implementing auto layout and componentizing design system.

ETA: 2 weeks

[daniellex0]

Progress: Got final feedback from devs about sidenav reorganization and their blessings to move forward with some edits; created issue for it to be implemented. Got approval from Bonnie to create a dedicated webpage for documenting reusable components. Standardized more mobile versions of pages on site, created more dev issues that will help with wrapping up the design system, continued adding remaining pieces to design system including documentation.

Next Steps: Design dedicated webpage for components, finish dev documentation, finish standardizing layouts / misc cards / typography classes, finish componentizing design system throughout the Figma.

ETA: 2 weeks

[daniellex0]

Progress: Ideating webpage for documenting components. Finalizing wiki sidebar before implementing this week with Candace. Helped create more dev issues that will help with wrapping up the design system, continued adding remaining pieces to design system.

Next Steps: Continue ideating and designing dedicated webpage for components, finish dev documentation, implement wiki sidebar this week with Candace, work on documentation in general with Candace this week, finish standardizing layouts / misc cards / typography classes, finish componentizing design system throughout the Figma.

ETA: 2 weeks

[daniellex0]

Progress: Wiki sidebar has gone live, and getting good feedback. Currently designing webpage for documenting components. Met with devs interested in implementing the component library webpage to give them the history and overview about the design system.

Next Steps: Finish designing dedicated webpage for components, finish dev documentation, finish standardizing layouts / misc cards / typography classes, finish componentizing design system throughout the Figma.

ETA: 2 weeks

[daniellex0]

Progress: Met with Kristin to discuss the designs for the component library webpage, and she designed a great layout to follow. I will implement the layout for the rest of the components early this week.

Next Steps: Finish designing dedicated webpage for components, meet with devs to discuss rest of design system steps and implementing component library webpage, finish dev documentation, finish standardizing layouts / misc cards / typography classes, finish componentizing design system throughout the Figma.

ETA: 2 weeks

[github-actions]

@daniellex0 Please add update

1. Progress
2. Blockers
3. Availability
4. ETA

[daniellex0]

Progress: Met with developers to discuss and get feedback on the component library webpage, and how to implement it. I will implement the layout for the rest of the components early this week. Colors have been standardized into variables throughout the site in a current PR by Stanley. I made a first issue for standardizing heading classes as a test- once implementation looks good, I will make issues to standardize the rest.

Next Steps: Finish designing dedicated webpage for components by tonight, continue coordinating with devs to make sure they have what the need to implement component library webpage, finish dev documentation, finish standardizing layouts / misc cards / typography classes, finish componentizing design system throughout the Figma.

ETA: 2 weeks

[daniellex0]

Progress: Finished designing dedicated webpage for components and met with developers to discuss and get more feedback. Sarah is now in charge of implementing the designs, and once she builds the structure will assign others.

Next Steps: Finish coordinating with devs to make sure they have what the need to implement component library webpage, finish dev documentation, and finish any loose ends in designer side on Figma.

ETA: 7/22