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

[lrchang2]

@ri0nardo Please add update using this template (even if you have a pull request)

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either:

1. ask for help at your next meeting
2. put a "Status: Help Wanted" label on your issue and pull request
3. put up a request for assistance on the #access-the-data channel.

[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