Create Design System

[jenchuu]

Dependency

• Progress Bar Component (Design System) #168
• Disclaimer Banner Component (Design System) #170
• Sticky Bar Component (Design System) #172

Overview

As a designer, we need a design system to lay out standards and share with the dev team so they can build the website. We need to start creating components with states.

Action Items

• Create components and states
• Discuss with dev team
• Figure out best breakpoints
• Discuss design system framework & best practices with HfLA's Design System team
• Update design system to adhere to framework & best practices above

Resources/Instructions

Reference HfLA's design system framework (once they complete it)

[jenchuu]

Started design system:

https://www.figma.com/file/G5bOqhud6azbxyR9El9Ygp/Civic-Tech-Jobs?node-id=1%3A2

[jenchuu]

Let me know if these breakpoints will work? @Aveline-art and @arghmatey
576px =< for mobile phones
577px-768px for tablets
769px-1024px for small screens, laptops
1025px-1200px for desktops, large screens
1201px => X-Large screens, TVs

[Aveline-art]

Hi @jenchuu ! I just reviewed the Figma and tried making a demo of the navbar. For the most part the breakpoints are fine, but one oddity I noticed is that the Figma designs are 1440px by width (x-large screens). Do you have any opinions on how the padding to the left of the logo, and the padding to the right of the button (see attached) should scale as the screen size shrinks from X-large to desktops? If not, can we use our best judgment to handle it?

Padding

[jenchuu]

Hi @Aveline-art , would these breakpoints be better?

Option 1
< 576px for XS
. >= 576px for S
. >= 768 for M
. >= 992px for L
. >= 1200px for XL
. >= 1400px for XXL
https://getbootstrap.com/docs/5.0/layout/breakpoints/

Option 2
<688px for mobile phones
688px-992px for tablets
993px-1312px for small laptops
. >1312px for desktops
https://coder-coder.com/media-query-breakpoints/

[jenchuu]

@Aveline-art We designed desktop for 1440px width since that is the standard desktop frame for Figma and also suggested by HfLA's design system!
Hmm I'm not too certain about padding. We designed it with 176px padding on the left and right (used 8pt system) so maybe scale by a multiple of 8? Please feel free to use your best judgment and expertise :)

[Aveline-art]

@jenchuu There might have been some misunderstanding. I am perfectly fine with any breakpoints. From a development perspective, all I really need is to have an idea of where the breakpoints are so that we can work around it. You can feel free to set any points that you feel is best for you and your team.

That being said, if you have a hard time deciding, these points that you sent us previously works perfectly fine for us.

576px =< for mobile phones
577px-768px for tablets
769px-1024px for small screens, laptops
1025px-1200px for desktops, large screens
1201px => X-Large screens, TVs

For the padding, we will try our best then!

[sharadgaurav7]

@jenchuu , can you please edit this issue as needed

[kchotani]

Followed up with Lu for an update for if this issue is ready to move to the prioritized backlog.

[kcoronel]

Closed this issue because the work has been completed.