-
-
Notifications
You must be signed in to change notification settings - Fork 2
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Design System - Component(s): Section Layout, Grid, and Spacing #124
Comments
This comment was marked as outdated.
This comment was marked as outdated.
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. |
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. |
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. |
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. |
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. |
This needs to be approved by @KC243 for closing. |
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
Resources/Instructions
figma
The text was updated successfully, but these errors were encountered: