Design System - Component(s): Section Layout, Grid, and Spacing

[lrchang2]

Overview

We need to develop library for the layout of the pages so it can be passed off and used by the developers.

Action Items

• look at high-fi wireframes for current layout
• parts
  • margins/paddings
  • header/text divider (line)
  • image sizing
• states
  • mobile
  • desktop
• create component with
  • class
  • css
  • use
  • context
• create grid system
  • columns
  • gutter
  • margins

Resources/Instructions

figma

[ri0nardo]

Progress: Decided on a grid system for both the website and mobile (vertical and horizontal grid). Adapting the website and mobile sections to the set grid, and applying the margins and padding to the set grid. Currently iterating on the paddings and margins which will be repeated to other pages and sections. Once padding and margins are applied to all pages will start the components.
Blockers: No blockers at this time.
Availability: I'll have about 4-5 hours of availability outside of meetings.
ETA: Anticipating 2-3 weeks to complete the issue. Many need an additional week to revise any issues that arise.
Pictures: N/A

[ri0nardo]

Progress: Currently set all the margins and paddings to a set grid system that is consistent throughout each frame. Will need to review the margins and paddings to see if anything needs to be revised. Once the margins and paddings are complete with complete annotations, will proceed to start image sizing. After that will start the components.

Blockers: No blockers yet. Just very time-consuming.

Availability: I'll have around 4 hours of availability.

ETA: Excepting 2-3 weeks still.

Pictures: Compiling photos of sections that are half pixels that need to be revised to be a whole number.

[ri0nardo]

Progress: Currently organizing each padding and margin to match the individual color, so anyone (including a developer) can identify the sizing quickly. Also added an arrow depending on the direction of the margin or padding. (This portion is time-consuming). I am making both the mobile and web margins and padding sizes match.

Blockers: No blockers yet. Just very time-consuming.

Availability: I'll have around 4 hours of availability.

ETA: Excepting 2 weeks still.

Pictures: None at this moment.

[ri0nardo]

Progress: Finished the paddings and margins with arrows showing the direction the paddings and margins go per item. I will create a library of colors and sizes used for padding and margins, so anyone reviewing will be able to look at the legend to recognize what size the color represents. Will call out the image sizing max size per area on the notes unless it would be better to label it with the margins and padding. Looking to have a review of the issue next week.

Blockers: No blockers yet. Just very time-consuming.

Availability: I'll have around 4 hours of availability.

ETA: Excepting 1 week still.

Pictures: None at this moment.

[ri0nardo]

Progress: Completed the margins, paddings, divider line, image sizing, states, class, use, context, and grid system per section of mobile and desktop. Started writing the CSS for the desktop and mobile. Did not get far. Noting that the components within the margins and paddings are not edited. If the text and images need to be within the margins, will need to clean up the desktop and mobile components for clean handoff. Did not know how to label the hover dots below the carousel, called it hover on the CSS. Hopefully, someone can write the CSS for that. The email form, if it was decided on for final design, the margins and paddings need to be revised. If any other task has been completed since it will need to be revised before handoff.

Blockers: No blockers.

Availability: None

ETA: Possibly another week since I didn't finish the CSS.

Pictures: None.

[mxajPrice]

This needs to be approved by @KC243 for closing.

[pbahle]

Checked the spacing and layout against Figma's vertical grid system as well as the alignment tools